Foros del Web » Creando para Internet » CSS »

float left

Estas en el tema de float left en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/04/2011, 08:02
 
Fecha de Ingreso: marzo-2010
Mensajes: 109
Antigüedad: 7 años, 8 meses
Puntos: 0
float left

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>
  #2 (permalink)  
Antiguo 12/04/2011, 08:27
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: float left

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>

Etiquetas: float, left
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:48.