Foros del Web » Creando para Internet » CSS »

Problemas con menu <ul> horizontal

Estas en el tema de Problemas con menu <ul> horizontal en el foro de CSS en Foros del Web. Pues siguiendo con mis estudios y mis estúpidas preguntas de CSS, permitidme que os traslade un problema que estoy teniendo ahora mismo. Estoy creando una ...
  #1 (permalink)  
Antiguo 25/08/2009, 05:51
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Problemas con menu <ul> horizontal

Pues siguiendo con mis estudios y mis estúpidas preguntas de CSS, permitidme que os traslade un problema que estoy teniendo ahora mismo.


Estoy creando una página con 4 divs, para hacer una barrita superior, una lateral, un logo en la zona superior izquierda (¿convendría que lo incluyese en alguna de las dos barras?) 'enmarcando' el área de contenidos (en negro).

Tengo 2 menús (código general extraído del manual de librosweb), uno vertical, en la barra lateral y otro horizontal, en la barra superior.

Hasta aquí todo bien, pero ahora llega el atasco:

1.- Soy completamente incapaz de centrar este menú dentro del div superior. Lo he intentado con margin, padding, en px, en %, ... no sé de dónde me toma la altura. Si le pongo height: 50%; margin: 25% 0 debería hacerlo bien, no? pues no...

2.- Quiero fijar el ancho de los enlaces del menú horizontal, de tal forma que cuando lleguen al límite de tamaño, rompan el texto de dentro en varias líneas. (El menú se cargará posterior con Ajax, si los dioses del web me lo permiten, así que el tamaño del texto no es conocido a priori, ni tampoco el número de opciones del menú).
Mediante margin 0 X% consigo separar los enlaces a lo ancho, pero no consigo que el texto se desplace hacia abajo, sino que los enlaces siguen creciendo a lo ancho y desplazan al resto.
Por cierto, que he intentado aplicar max-width a los <a> y a los <li> pero no me lo coge bien. Además, tendría que encontrar el hack correspondiente para IE, ¿verdad? y no tengo idea de cómo es, todos los que veo son para el tamaño de la ventana...


Básicamente, lo que me gustaría conseguir es un menú superior centrado, que si cargo una lista de 4 elementos, quede en el medio, repartido por todo el ancho de la barra y que si cargo 10 elementos, quede también centrado y repartido.
¿Es posible realizar esto, sólo con CSS? ¿O tendré que incluir parte de los estilos dentro del código?


Espero haberme explicado bien.
Aquí teneis el código. Si veis cualquier cosa, aunque no tenga que ver con esto, por favor, decirlo, que es malo coger vicios cuando se está aprendiendo...

Muchas gracias por todo.

Un saludo.

Código:
<html>
	<head>
		<title>Enter the title of your XHTML document here</title>
		<style type="text/css">		
/* Limpieza de estilos */
			* {
				margin: 0;	padding: 0; border: 0;	outline: 0;
				font-size: 100%; position: relative; text-decoration: none;
			}

/* Estilos generales por etiquetas */

			BODY{
				min-width: 800px;
				width: expression(document.body.clientWidth > 800? "auto" : "800px");
			}			

/* Estilos de menus verticales */

			ul.menu_vertical {
				width: 180px; 	list-style: none; margin: 0; 
				padding: 0; border-left: 1px solid #7C7C7C;
			}

			ul.menu_vertical li {
				border-bottom:1px solid #7C7C7C; border-top: 1px solid #FFF; background: #F4F4F4;
			}

			ul.menu_vertical li a {
				padding: .2em 0 .2em .5em; display:block; 
				text-decoration: none; color: #333;
			}	

/* Estilos de menus horizontales */

			ul.menu_horizontal {
				clear: both; float: left;	width: 99%; height: 99%;
				border: 0px solid yellow; text-align: center;
			}

			ul.menu_horizontal li {
				float: left; margin: 0 2px;
				border: 1px solid white; height: 50%
			}

			ul.menu_horizontal li a {
				display: block; color: red;
				text-align: center;
				max-width: 100px;
			}

			ul.menu_horizontal li a:hover , ul.menu_horizontal li a:active {
				color: orange;
			}

			ul.menu_horizontal li a:link ,  ul.menu_horizontal li a:visited {
			}

/* Estilos de etiquetas particulares por ID */			
			
			#contenido {
				background-color: silver; height: 99.5%; width: 99.5%; 
				position:relative; top: 0.25%; left: 0.25%;
			}
			
			#sup_izq {
				background-color: green; position: absolute; top:0; left:0; width: 10%; height: 10%;
			}
			
			#superior {
				background-color: green; position: absolute; top:0; right:0; width: 90%; height: 10%;
			}
			
			#lateral {
				background-color: green; position: absolute; 
				bottom:0; left:0; width: 10%; height: 90%;			
			}
			
			#datos {
				background-color: black; position: absolute; 
				bottom:0; right:0; width: 90%; height: 90%;			
			}

		</style>
	</head>
	<body>
		<div id="contenido">
			<div id="sup_izq">
			</div>
			<div id="superior">
					<ul class="menu_horizontal">
						<li><a href="#" title="Enlace 1">Elemento 1 crece a lo ancho</a></li>
						<li><a href="#" title="Enlace 2">Elemento 2</a></li>
						<li><a href="#" title="Enlace 3">Elemento 3</a></li>
						<li><a href="#" title="Enlace 4">Elemento 4</a></li>
						<li><a href="#" title="Enlace 5">Elemento 5</a></li>
						<li><a href="#" title="Enlace 6">Elemento 6 <br/>esto es lo que<br/> quiero pero sin <br/>br</a></li>
						<li><a href="#" title="Enlace 7">Elemento 7</a></li>
						<li><a href="#" title="Enlace 8">Elemento 8</a></li>
						<li><a href="#" title="Enlace 9">Elemento 9</a></li>
						<li><a href="#" title="Enlace 10">Elemento 10</a></li>
						<li><a href="#" title="Enlace 11">Elemento 11</a></li>
						<li><a href="#" title="Enlace 12">Elemento 12</a></li>
					</ul>
			</div>
			<div id="lateral">
				<ul class="menu_vertical">
					<li><a href="#" title="Enlace 1">Elemento 1</a></li>
					<li><a href="#" title="Enlace 2">Elemento 2</a></li>
					<li><a href="#" title="Enlace 3">Elemento 3</a></li>
					<li><a href="#" title="Enlace 4">Elemento 4</a></li>
					<li><a href="#" title="Enlace 5">Elemento 5</a></li>
					<li><a href="#" title="Enlace 6">Elemento 6</a></li>
				</ul>			
			</div>
			<div id="datos">
			</div>			
		</div>
	</body>
</html>
  #2 (permalink)  
Antiguo 25/08/2009, 10:31
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problemas con menu <ul> horizontal

Aqui va mi granito de arena, aunque soy nuevo en css:

Si te entendi bien quieres un menu centrado con una altura definida por el contenido de el elemento de lista (<li>;)
1 - quite de tus cuatro divs (#sup_izq, #superior, #lateral y #datos ) la propiedad position (porque no se trabajar perfectamente con esta propiedad todavía).

y luego ...

#superior {width: 80%; height: 10%; clear:both; margin:auto;}
#superior .menu_horizontal { background-color: green; width:80%; margin-left:10%; margin-right:10%;} con estos valores lo centras definitivamente.
Pero como hay una lista anidada entonces definimos su width ...

#superior .menu_horizontal ul {width:100%;}

2 - Con el menu centrado pasamos a definir el width de los items de lista <li>:

#superior .menu_horizontal li {width:8.08%; list-style:none; overflow:hidden; margin-left:auto; margin-right:auto;}

Con overflow:hidden le decimos que si el texto supera el contenedor entonces que no lo muestre, elije la opción que prefieras.

La propiedad width te dará el ancho por lo que si quieres agregar otro ítem tendras que modificarlo:

Si cargas una lista de cuatro items suma sus cuatro anchos y si por ejemplo estos te dan un resultado de 40% (10% c/item) entonces le das un margin-left:30% y un margin-right:30%;

30% + 30% + 40% = 100%

Recuerda que si quieres cambiar los width de tus elementos este width dependera de la suma de margin + padding + width.

3 - Disculpa, pero que quieres hacer con:
#sup_izq, #lateral (div donde esta tu menu izquierdo) y #datos.

Postealo por favor y te ayudamos

Espero que te sirva la respuesta.

Saludos!

Aqui va el codigo para que copies y pegues:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Enter the title of your XHTML document here</title>
<style type="text/css">
/* Limpieza de estilos */
* {
margin: 0; padding: 0; border: 0; outline: 0;
font-size: 100%; position: relative; text-decoration: none;
}

/* Estilos generales por etiquetas */

BODY{
min-width: 800px;
width: expression(document.body.clientWidth > 800? "auto" : "800px");
}

/* Estilos de menus verticales */

ul.menu_vertical {
width: 180px; list-style: none; margin: 0;
padding: 0; border-left: 1px solid #7C7C7C;
}

ul.menu_vertical li {
border-bottom:1px solid #7C7C7C; border-top: 1px solid #FFF; background: #F4F4F4;
}

ul.menu_vertical li a {
padding: .2em 0 .2em .5em; display:block;
text-decoration: none; color: #333;
}

/* Estilos de menus horizontales */

ul.menu_horizontal {
clear: both; float: left; width: 99%; height: 99%;
border: 0px solid yellow; text-align: center;
}

ul.menu_horizontal li {
float: left; margin: 0 2px;
border: 1px solid white; height: 50%
}

ul.menu_horizontal li a {
display: block; color: red;
text-align: center;
max-width: 100px;
}

ul.menu_horizontal li a:hover , ul.menu_horizontal li a:active {
color: orange;
}

ul.menu_horizontal li a:link , ul.menu_horizontal li a:visited {
}

/* Estilos de etiquetas particulares por ID */

#contenido {
background-color: silver; height: 99.5%; width: 99.5%;
position:relative; top: 0.25%; left: 0.25%;
}


#superior {
width: 100%; height: 10%; clear:both;
}
#superior .menu_horizontal { background-color:green; width:80%; margin-left:10%; margin-right:10%;}
#superior .menu_horizontal ul {width:100%;}

#superior .menu_horizontal li {width:8.08%; list-style:none; overflow:hidden; margin-left:auto; margin-right:auto;}

#sup_izq {
background-color: green; width: 10%; height: 10%; clear:left;
}

#lateral {
background-color: green; width: 10%; height: 90%; float:left;
}

#datos {
background-color: #CCCCCC; width: 80%; height: 90%; float:left;
}

</style>
</head>
<body>
<div id="contenido">

<div id="superior">
<ul class="menu_horizontal">
<li><a href="#" title="Enlace 1">Elemento 1 crece a lo ancho</a></li>
<li><a href="#" title="Enlace 2">Elemento 2</a></li>
<li><a href="#" title="Enlace 3">Elemento 3</a></li>
<li><a href="#" title="Enlace 4">Elemento 4</a></li>
<li><a href="#" title="Enlace 5">Elemento 5</a></li>
<li><a href="#" title="Enlace 6">Elemento 6 <br/>esto es lo que<br/>quiero pero sin <br/>br</a></li>
<li><a href="#" title="Enlace 7">Elemento 7</a></li>
<li><a href="#" title="Enlace 8">Elemento 8 - la altura crecera todo lo que quieras hacia abajo | la altura crecera todo lo que quieras hacia abajo</a></li>
<li><a href="#" title="Enlace 9">Elemento 9</a></li>
<li><a href="#" title="Enlace 10">Elemento 10</a></li>
<li><a href="#" title="Enlace 11">Elemento 11</a></li>
<li><a href="#" title="Enlace 12">Elemento 12</a></li>
</ul>
</div>

<div id="sup_izq">
<p>div sup_izq</p>
</div>

<div id="lateral">
<ul class="menu_vertical">
<li><a href="#" title="Enlace 1">Elemento 1</a></li>
<li><a href="#" title="Enlace 2">Elemento 2</a></li>
<li><a href="#" title="Enlace 3">Elemento 3</a></li>
<li><a href="#" title="Enlace 4">Elemento 4</a></li>
<li><a href="#" title="Enlace 5">Elemento 5</a></li>
<li><a href="#" title="Enlace 6">Elemento 6</a></li>
</ul>
</div>

<div id="datos">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:1em; padding:1em;">
Aqui va mi granito de arena, aunque soy nuevo en css:<br /><br />
Si te entendi bien quieres un menu centrado con una altura definida por el contenido de el elemento de lista (‹li›)
1 - quite de tus cuatro divs (#sup_izq, #superior, #lateral y #datos )la propiedad position (porque no se trabajar perfectamente con esta propiedad todavía).<br /><br />
y luego ...<br /><br />
#superior {width: 80%; height: 10%; clear:both; margin:auto;} <br />
#superior .menu_horizontal { background-color: green; width:80%; margin-left:10%; margin-right:10%;} con estos valores lo centras definitivamente. Pero como hay una lista anidada entonces definimos su width ...<br />
#superior .menu_horizontal ul {width:100%;} <br /><br />

2 - Con el menu centrado pasamos a definir el width de los elementos de lista (li): <br /><br />
#superior .menu_horizontal li {width:8.08%; list-style:none; overflow:hidden; margin-left:auto; margin-right:auto;} con overflow:hidden le decimos que si el texto supera el contenedor entonces que no lo muestre, elije la opción que prefieras. El width te dará el ancho por lo que si quieres agregar otro ítem tendras que modificarlo. <br /><br />
Si cargas una lista de cuatro items suma sus cuatro anchos y si por ejemplo estos te dan un resultado de 40% (10% c/item) entonces le das un margin-left:30% y un margin-right:30%; 30% + 30% + 40% = 100% <br /><br />
Recuerda que si quieres cambiar los width de tus elementos este width dependera de la suma de margin + padding + width. <br /><br />
3 - Disculpa, pero que quieres hacer con #sup_izq, #lateral(div donde esta tu menu izquierdo) y #datos. Postealo por favor. Espero que te sirva la respuesta.
</p>
</div>

</div>
</body>
</html>
  #3 (permalink)  
Antiguo 25/08/2009, 16:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con menu <ul> horizontal

Hola:

Si la solución de cristian_cena no te sirve tienes también varios ejemplos de menús desplegables en las FAQ del foro de CSS.

Saludos.

  #4 (permalink)  
Antiguo 26/08/2009, 01:34
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problemas con menu <ul> horizontal

Muchas gracias a los dos.

Ese código me ha servido para orientarme un poco hacia lo que yo quería, aunque he vuelto a estructurar la página. Realmente, cristian_cena, no tengo demasiado claro qué es lo que quiero hacer con el lateral izquierdo.

En cuanto al menú horizontal, he estado mirando los ejemplos y el código escrito por cristian_cena, y he resuelto la colocación del menú sin problemas.

Lo único que queda es que el texto de los enlaces del menú se muestre centrado tanto horizontal como verticalmente, porque no me coge correctamente la propiedad vertical-align. ¿Tengo que ponerla en el <ul>, en el <li> o directamente en el <a>? ¿Influye que el <a> tenga display: block (para ocupar todo el li, que está dimensionado para que ocupe más que el texto.

Muchas gracias por vuestras respuestas.
Un saludo a todos.
  #5 (permalink)  
Antiguo 26/08/2009, 07:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con menu <ul> horizontal

"vertical-align" sólo se puede aplicar a los elementos con display 'inline' y 'table-cell'.
Tu tienes 'display:block' a tus "ul li a" así que por ahí no podrás.
No des altura ni a 'ul', ni a 'li', y aplica un padding a los 'a' de igual valor el superior e inferior.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 26/08/2009, 22:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problemas con menu <ul> horizontal

Cita:
Iniciado por tistklehoff Ver Mensaje
Muchas gracias a los dos.
Realmente, cristian_cena, no tengo demasiado claro qué es lo que quiero hacer con el lateral izquierdo.
La maqueta resultante dependerá de como quieras posicionar tus div, es decir, de como uses las propiedades position y float.

Kseso? te refieres a :

ul.menu_horizontal {
clear: both; float: left; width: 99%; height: 99%;
border: 0px solid yellow; text-align: center;
/*padding-top:valor; padding-bottom:valor; si aqui le doy un valor
parecería centrarse pero el efecto no es muy bueno*/
}

ul.menu_horizontal li {
float: left; margin: 0 2px;
border: 1px solid white; height: 50%
}

ul.menu_horizontal li a {
padding-top:valor; padding-bottom:valor;
display: inline;
color: red;
text-align: center;
max-width: 100px;

}

ul.menu_horizontal li a:hover , ul.menu_horizontal li a:active {
color: orange;
}

ul.menu_horizontal li a:link , ul.menu_horizontal li a:visited {
}

Seguro que no porque a mi no me da resultado, o bien no lo estoy entendiendo

Pienso que lo que quiere tistklehoff es que el contenido de sus items <li> crezcan centrados verticalmente, es decir, hacia arriba y hacia abajo al mismo tiempo y no solo hacia abajo (como lo hace por defecto)

Pero como hacerlo?? Corrijeme si me equivoco tistklehoff
  #7 (permalink)  
Antiguo 27/08/2009, 06:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con menu <ul> horizontal

Hola Cristian.
Me refería a
Cita:
Lo único que queda es que el texto de los enlaces del menú se muestre centrado tanto horizontal como verticalmente, porque no me coge correctamente la propiedad vertical-align
Creí entender que quiere que los enlaces queden centrados dentro del li.
Eso entendí y para eso le hablaba de los padding.
Pueda el css
Código css:
Ver original
  1. #ejemplo ul { }
  2. #ejemplo ul li {float: left; list-style-type: none;}
  3. #ejemplo ul li a {background: #cdcdcd; display: block; padding: 10px; text-decoration: none;color: #444; border: 1px solid #262626; font-size:/*la que quieras poner*/;}
  4. #ejemplo ul li a:hover {text-decoration: none; color:#cdcdcd; background: #444; border: 1px solid #868686; }
con este html:
Código html:
Ver original
  1. <div id="ejemplo">
  2. <ul>
  3. <li>
  4. <a href="#">somos enlaces</a>
  5. </li>
  6. <li>
  7. <a href="#">que estamos</a>
  8. </li>
  9. <li>
  10. <a href="#">centrados</a>
  11. </li>
  12. <li>
  13. <a href="#">en la vertical</a>
  14. </li>
  15. <li>
  16. <a href="#">de nuestro li</a>
  17. </li>
  18. <li>
  19. <a href="#">sin importar el FONT-SIZE</a>
  20. </li>
  21. </ul>
  22. </div>
un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 27/08/2009 a las 07:19
  #8 (permalink)  
Antiguo 27/08/2009, 09:25
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problemas con menu <ul> horizontal

Hola Kseso?

Ahora entiendo lo que dices, gracias por la aclaración.

A quien sigo sin entender muy ien es a tistklehoff, no querrá hacer esto?

http://www.inicio2770.com.ar/img/men...eado%20h-v.jpg

saludos!
  #9 (permalink)  
Antiguo 28/08/2009, 02:06
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problemas con menu <ul> horizontal

Hola chavales...

Muchas gracias por vuestras respuestas...

En realidad, lo que quería hacer en un principio era precisamente lo queindica la imágen que ha pegado cristian_cena: Centrar los li verticalmente. Aunque ahora no lo tengo claro, aparte de porque no me sale, porque no sé si quedaría bonito en la página, viendo el dibujo que has enviado.

Y gracias kseso?, porque con la solución que diste creo que tengo otra buena opción y que podría quedar mejor: li's con el mismo tamaño y perfectamente centrado el texto para simular algo así.

Si creo los ul li a con display: inline podría ya aplicar la propiedad vertical-align? lo del block lo estuve viedo para hacer, por ejemplo, que un <a> se expandiese completamente dentro de un <td> y lo apliqué aquí, pero no sabía que pudiese traer esas consecuencias...


Muchas gracias a los dos.

Un saludo.
  #10 (permalink)  
Antiguo 28/08/2009, 23:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problemas con menu <ul> horizontal

Hola tistklehoff: lo que indico en la imagen yo tampoco lo se hacer, hice la misma para ver si Kseso? quien tiene muchísima más experiencia que yo lo podía resolver.

Que quede bonito o no dependerá de tu diseño. Igual nunca se me había ocurrido hacerlo así por eso me pareció interesante tu tema.

Cito a Kseso?: "vertical-align" sólo se puede aplicar a los elementos con display 'inline' y 'table-cell'.

Lamento no poder darte la solución, hasta aquí mi granito de arena

Saludos!
  #11 (permalink)  
Antiguo 29/08/2009, 06:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con menu <ul> horizontal

Buenas.
Lo cierto es que con los li en horizontal nunca me había parado a contemplar ese supuesto.
Será cosa de encontrar un momento para seguir esa línea, sin entrar en otras cuestiones que no sean jugar con el código.
Ya veremos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 29/08/2009, 07:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con menu <ul> horizontal

Lo cierto es que es "sencillo" para los navegadores. Los emuladores que van por libre (léase ie6 e ie7 emulados en ietester) habrá que seguir jugando.

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. #ejemplo {
  8. display:table;
  9. margin:0 auto;
  10. padding:20px;
  11. vertical-align:middle;
  12. }
  13. #ejemplo ul {
  14. display:table-row-group;
  15. vertical-align:middle;
  16. }
  17. #ejemplo ul li {
  18. display:table-cell;
  19. list-style-type:none;
  20. vertical-align:middle;
  21. }
  22. #ejemplo ul li a {
  23. background:#CDCDCD none repeat scroll 0 0;
  24. border:1px solid #262626;
  25. color:#444444;
  26. display:table-cell;
  27. max-width:8em;
  28. padding:.5em;
  29. text-decoration:none;
  30. vertical-align:middle;
  31. text-align:justify;
  32. font-size: 1em;
  33. }
  34. #ejemplo ul li a:hover {
  35. text-decoration: none;
  36. color:#cdcdcd;
  37. background: #444;
  38. border: 1px solid #868686;
  39. }
  40.  
  41. </head>
  42. <div id="ejemplo">
  43.     <ul>
  44.         <li>
  45.             <a href="#">somos enlaces enlazados</a>
  46.         </li>
  47.         <li>
  48.             <a href="#">que estamos</a>
  49.         </li>
  50.         <li>
  51.             <a href="#">centrados y</a>
  52.         </li>
  53.         <li>
  54.             <a href="#">crecemos por arriba y por abajo</a>
  55.         </li>
  56.         <li>
  57.             <a href="#">en la vertical</a>
  58.         </li>
  59.         <li>
  60.             <a href="#">de nuestro li</a>
  61.         </li>
  62.         <li>
  63.             <a href="#">sin importar el FONT-SIZE que tenemos ni el texto que contenemos</a>
  64.         </li>
  65.     </ul>
  66. </div>
  67. </body>
  68. </html>
ff 3.5, opera 9.6, safari 4, ie8

Personalmente, no me gusta el aspecto que tiene.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 29/08/2009, 10:24
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problemas con menu <ul> horizontal

Jaja Kseso? no paras de sorprender a los foreros

me pondre a jugar con display:table-row-group; vertical-align:middle;

Gracias

... y su respuesta ... admirable como siempre

Saludos!
  #14 (permalink)  
Antiguo 31/08/2009, 02:11
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Problemas con menu <ul> horizontal



Para quitarse el sombrero, sí señor...

Aunque es cierto... yo tampoco lo veo con buen aspecto. Aun así, me ha servido muchísimo.

Muchas gracias por vuestras respuestas.


Un saludo.
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 11:03.