bueno... tengo algo que todavia no se ve muy bien pero me esta funcionando:
Código HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
/* Header */
#header {
margin: 0 px;
border-bottom: 2px solid #ccc;
width:100%;
padding:0px;
}
#header * {
text-decoration: none;
/*color: #FF4430;*/
}
/* Welcome*/
#welcome p {
padding: 2px 0 3px 228px;
margin: 0;
}
#welcome span {
color: red;
}
/* Logo */
#logo {
float: left;
padding: 0px 10px 5px 10px;
background: #FFFFFF;
}
#logo h1 {
float: left;
margin: 0;
padding: 0;
letter-spacing: -2px;
font-size: 3em;
}
#logo h2 {
float: left;
margin: 0;
padding: 0 0 0 .5em;
font-size: 1em;
}
/*Etiqueta*/
#etiqueta{
font-size: 1em;
background: #ccc;
padding: 5px 0 0 0;
}
#etiqueta label{
margin: 0 0 0 8px;
padding: 0px;
color: #FFFFFF;
font-weight:bold;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}
/*formulario*/
#formulario{
background: #ccc;
padding: 2px 0px 5px 0px;
margin-left:220px;
font-size: 1em;
}
#formulario label{
margin: 8px 0 0 8px;
color: #FFFFFF;
padding: 2px;
background: #666666;
}
/* Menu */
#menusuperior {
padding: 2px 0 0 0;
float:right;
background: #ccc;
}
#menusuperior ul {
margin: 0;
padding: 0;
list-style: none;
}
#menusuperior li {
display: inline;
}
#menusuperior a {
color: #FFFFFF;
display: block;
float: left;
padding: 0 1em;
border-left: 1px solid #FFFFFF;
font-weight: bold;
}
#menusuperior ul li a {display: block!important;display: none;float:left;
/* position: relative;*/
}
#menusuperior .first a {
border: none;
}
/*Buttons*/
#buttons {
float:right;
background: #555;
padding:0px;
margin:0px;
}
#buttons a{
color: #555;
text-decoration:none;
padding:0px;
}
</style>
<body>
<div id="header">
<div id="welcome">
<p>Bienvenido(a)</p>
</div>
<div id="logo">
<img src="images/logo.jpg" width="200" height="55" alt="logo"/>
</div>
<div id="menusuperior" >
<ul>
<li class="first"><a href="#" accesskey="1" title="">Opcion 1</a></li>
<li><a href="#" accesskey="2" title="">Opcion 2</a></li>
<li><a href="#" accesskey="3" title="">Opcion 3</a></li>
<li><a href="#" accesskey="4" title="">Opcion 4</a></li>
</ul>
</div>
<div id="etiqueta" >
<label class="titul">Mi ciudad, </label>
</div>
<div id="formulario" >
<!--FORM-->
<form name="fbus" method="post" action="" style="z-index:2">
<label>Buscar</label>
<select name="Buscar" id="buscar" style="z-index:2">
<option>Seleccion 4</option>
<option>Seleccion 5</option>
<option>Seleccion 9</option>
</select>
<input type="text" size="50" name="parametro">
<input name="enviar" type="image" src="imagenes/play.jpg" value="Ir">
<a href="#"><img src="images/cesta1.jpg" width="61" height="22" alt="imgen 1"/></a>
<a href="#"><img src="images/cesta1.jpg" width="61" height="22" alt="imagen 2"/></a>
</form>
<!--END FORM-->
</div>
</div>
</body>
</html> Aun el menu superior no me funciona y hay muhco espacio entre la etiqueta y el form