float left

picasona · #1 (**permalink**) 12/04/2011, 07:02

Buenas a todos,
estoy intentando que el logo en mi página y los botones de menú queden alineados y no me sale.
Envio la parte de código y de css a ver si alguien ve el fallo y me puede ayudar,
muchas gracias
Àngels

[SIZE="3"][SIZE="2"][SIZE="3"]CSS
/* Estilos cabecera
-----------------------------------------------------------------*/
div#menu {
height:80px;
width:800px;
margin:0px 0 0 0px;
padding-top:50px;
float:left;
}
div#menu logo H1 {
height:80px;
width:300px;
float:left;
}
div#menu botones {
height:80px;
width:300px;
float:left;
}
div#menu botones p {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:15px;
float: left;
margin: 50px 0px 0px 10px;

}[/SIZE

html:
<body>
<div id="menu">
<div id="logo">
<h1><img src="images/logo.png"/></h1>
</div>
<div id="botones">
<p><a href="home.html"><img src="images/boton_inicio.png"/></a></p>
<p><a href="catalogo.html"><img src="images/boton_catalogo.png"/></a></p>
<p><a href="envios.html"><img src="images/boton_envios.png"/></a></p>
<p><a href="contacto.html"><img src="images/boton_contacto.png"/></a></p>
</div>
</div>

IsaBelM · #2 (**permalink**) 12/04/2011, 07:27

prueba con listas

Cita:

#cabecera_menu {
width: 100%;
height: auto;
}

#menu{
width: 100%;
overflow: hidden;
border-width: 0px 0px 1px 0px;
border-color: #8D270A;
border-style: solid;
}

#menu ul{
font: bold 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0;
padding: 0;
padding-left: 0px;
list-style-type: none;
}

#menu li{
display: inline;
margin: 0px;
}

#menu li a{
background: #8D270A;
color: #EDEDED;
text-decoration: none;
float: left;
display: block;
margin: 0px;
padding: 7px 12px;
border-right: 1px solid #8B3A3A;
}

#menu li a:hover{
background: #800000;
}

<div id="cabecera_menu">
<div"><img src="logo.png" alt="" /></div>
<div id="menu">
<ul>
<li><a href="#">opcion</a></li>
<li><a href="#">opcion</a></li>
<li><a href="#">opcion</a></li>
<li><a href="#">opcion</a></li>
<li><a href="#">opcion</a></li>
</ul>
</div>
</div>