Foros del Web » Creando para Internet » CSS »

Consulta sobre los divs de un menú

Estas en el tema de Consulta sobre los divs de un menú en el foro de CSS en Foros del Web. Hola a todos! Quisiera hacerles una consulta... Tengo el siguiente div que genera un menú: Código: <div id="menuppal"> <ul id="menu"> <li><a href="#">Diseño Web</a></li> <li><a href="#">Programación ...
  #1 (permalink)  
Antiguo 12/01/2011, 09:28
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Consulta sobre los divs de un menú

Hola a todos! Quisiera hacerles una consulta...
Tengo el siguiente div que genera un menú:
Código:
<div id="menuppal">
<ul id="menu">
  <li><a href="#">Diseño Web</a></li>
  <li><a href="#">Programación Web</a></li>
  <li><a href="#">Posicionamiento en<br />Buscadores</a></li>
  <li><a href="#">Mantenimiento de<br />Sitios Web</a></li>
  <li><a href="#">Solicitar<br />Presupuesto</a></li>
</ul>
</div>
Y este es el css:
Código:
/* MENU CABECERA */
#menuppal{
background:url(imagenes/botonmenudegra.jpg) repeat-x;
height:45px; /*altura del menu*/
}

ul#menu {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
width: 800px;
margin:0px; /*quita el margen p/ que suba el div*/
padding: 0px; /*quita los espacios del div*/
/*border-bottom: 1px solid #ddd; /* linea base */
}

ul#menu li {
float: left; /*coloca los elementos a la izq*/
width:130px; /* ancho de los botones del menu */
height:45px;
border-right:1px solid #ddd;
list-style: none; /*quita los puntitos negros de la lista*/
text-align:center;
}

ul#menu li a {
display: block;
padding: 13px 11px; /* relleno alto botones - relleno ancho botones */
color: #FFF;
text-decoration: none;
}

ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}
Pero los textos que tienen el <br> me desplaza los divs hacia abajo.
¿Hay alguna forma de hacer que los textos se centren de manera horizontal y vertical en los divs del menú por más que ocupen "2 renglones" por así decirlo?

Muchas gracias. Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.
  #2 (permalink)  
Antiguo 12/01/2011, 18:04
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Consulta sobre los divs de un menú

La solución es utilizar la propiedad vertical-align, pero ésta sólo funciona en tablas por lo que necesitamos cambiar la forma en que se muestran los elementos del menu usando la propiedad display:table-cell.
La alineación horizontal ya la tenías resuelta con text-aling:center.
Prueba a sustituir la declaración que tienes para "ul#menu li a" por la siguiente:

ul#menu li a {
color: #FFFFFF;
display: table-cell;
height: 45px;
padding: 0 11px;
text-decoration: none;
vertical-align: middle;
width: 108px;
}
Sólo he probado la solución en Firefox, pero debería funcionar en cualquier navegador.
Espero que te pueda servir.
  #3 (permalink)  
Antiguo 13/01/2011, 06:47
 
Fecha de Ingreso: mayo-2002
Ubicación: Capital Federal
Mensajes: 630
Antigüedad: 22 años
Puntos: 1
Respuesta: Consulta sobre los divs de un menú

sanxuan:
Muchísimas gracias por tu ayuda. Era exactamente lo que necesitaba. Lo probé en IE y en FF y funcionó perfectamente.

Gracias y saludos.

Marx.
__________________
"Todo lo que somos es el resultado de lo que hemos pensado". Budda.

Etiquetas: Ninguno
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 16:38.