Foros del Web » Creando para Internet » CSS »

Justificar elementos de una lista 'inline'

Estas en el tema de Justificar elementos de una lista 'inline' en el foro de CSS en Foros del Web. Buenas, a ver si podéis ayudarme... Resulta que tengo un menú horizontal en la parte superior de mi web realizado con una lista <ul> y ...
  #1 (permalink)  
Antiguo 11/02/2008, 04:46
Avatar de qwerty_wq  
Fecha de Ingreso: enero-2005
Mensajes: 109
Antigüedad: 12 años, 10 meses
Puntos: 1
Justificar elementos de una lista 'inline'

Buenas, a ver si podéis ayudarme... Resulta que tengo un menú horizontal en la parte superior de mi web realizado con una lista <ul> y con un estilo "inline", de forma que los elementos quedan en la misma línea. Ahora bien, el problema surge cuando quiero que dicha lista ocupe todo lo ancho de la página (en este caso, son 950px) y que los elementos se distribuyan automáticamente de forma regular. Es decir, que el primer elemento quede en el borde izquierdo, el último en el borde derecho, y los elementos intermedios queden distribuídos de forma equidistante.

He probado a ponerle una alineación "justify" al elemento <ul>, a cambiar la lista por un elemento <div> y cada opción del menú por elementos <span> para alinear el texto y nada. Intuyo cuál podría ser la solución, sustituirlo todo por una tabla, pero de esta forma se pierde el carácter semántico, ya que no se justifica el uso de tablas en un menú por el significado del propio contenido. O quizás incluso ni siquiera la tabla sea una solución.

¿Hay alguna solución? ¿Cómo tengo que configurar los estilos para hacer lo que quiero, o al menos hacerlo de forma aproximada?

Es que resulta que si pongo anchuras y márgenes fijos, cada navegador lo interpreta de una forma distinta, así que la posible solución de alinearlo centrado y ajustar el ancho del menú al ancho de la página no la veo posible. Por ejemplo, Firefox en Linux me da el ancho correcto, pero en Mac OS X y en Windows se queda corto. Y bueno, si ya metemos a Safari, Opera e Internet Explorer, desde quedarse demasiado estrecho hasta superar la línea y desmontar todo el diseño hay todas las posibilidades que os imaginéis.

Muchas gracias por adelantado.
  #2 (permalink)  
Antiguo 11/02/2008, 05:51
Avatar de qwerty_wq  
Fecha de Ingreso: enero-2005
Mensajes: 109
Antigüedad: 12 años, 10 meses
Puntos: 1
Re: Justificar elementos de una lista 'inline'

Bueno, a ver, lo que quiero hacer es algo parecido a lo que se plantea en este topic:

http://www.doliaku.com.ar/blog/2006/...-100-de-ancho/

Lo que pasa es que aquí se usan elementos DIV para cada opción del menú con un ancho fijo, de forma que con un texto demasiado largo el DIV pasa a tener dos líneas y se hace más alto el menú, cosa que no me puedo permitir ya que (dentro de unos límites evidentes) el menú siempre debe ocupar una línea.

Es decir, que el problema no es que los distintos elementos tengan el mismo ancho, sino que la distancia entre ellos sea siempre la misma, de forma que visualmente queden equidistantes.

A ver si a alguien se le ocurre algo...
  #3 (permalink)  
Antiguo 11/02/2008, 06:54
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Justificar elementos de una lista 'inline'

Pues en el li puedes poner:
li{ margin-left: 10px; margin-right: 10px;}

¿Es algo así lo que buscas?

PD: Mensaje nº 666. El número del diablo .
  #4 (permalink)  
Antiguo 11/02/2008, 07:29
Avatar de qwerty_wq  
Fecha de Ingreso: enero-2005
Mensajes: 109
Antigüedad: 12 años, 10 meses
Puntos: 1
Re: Justificar elementos de una lista 'inline'

Claro, pero es que eso tiene dos pegas:

1) El primer y el último elemento no quedarían en el borde, sino con margen.
2) Si el ancho total es fijo, y también los márgenes entre los elementos del menú, entonces es muy fácil que te pases o te quedes corto. De hecho, actualmente lo tengo hecho de una forma muy similar a como planteas y me pasa eso mismo.

Es decir, que lo que deben es, dado un ancho total fijo (en este caso son 950 pixels) que los elementos se distribuyan de forma equidistante de forma automática. Es un problema muy simple, pero complejo al mismo tiempo.

Por cierto, he probado a hacerlo con una tabla y tampoco vale, ya que si se especifica un ancho total para la tabla, las celdas cogen un ancho automático con un margen lateral que es, no sé por qué, directamente proporcional a la longitud del texto que hay en su interior. Es decir, que el emento "Portada" tiene menos margen que el elemento "Contacta con nosotros" y, evidentemente, no puedo cambiar manualmente los márgenes porque entonces la suma de todas las celdas no corresponde a la anchura total de la tabla.

Un ejemplo muy claro de esto es el menú superior de esta misma web, que está hecho con tablas. Si miráis bien, el elemento "Panel de control" tiene mucho más margen con respecto a "FAQ", que éste en relación con "Usuarios". Por lo menos esto pasa en Firefox, Opera y Safari en Mac OS X, que es con el que estoy en estos momentos. También con Internet Explorer 6 en Windows XP.

La verdad es que es complicado...
  #5 (permalink)  
Antiguo 02/03/2009, 19:45
 
Fecha de Ingreso: agosto-2008
Mensajes: 12
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Justificar elementos de una lista 'inline'

Pues yo me he encontrado con el mismo problema. Como lo solucionaste? Por ahora no veo mas que usar tablas ya que en css no logro ese efecto.
  #6 (permalink)  
Antiguo 02/03/2009, 20:20
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
Respuesta: Justificar elementos de una lista 'inline'

Mira, en este ejemplo el tema radica en repartir el ancho entre el nº de menus.

Código HTML:
<style>
#menu li{width:20%;float:left;text-align:center;}
</style>
<ul id="menu">
<li>menu 1</li>
 <li>menu 2</li>
 <li>menu 3</li>
 <li>menu 4</li>
 <li>menu 5</li>
</ul> 
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 20:45.