es posible justificar un conjunto de <a>? o una UL?

[Newbie001]

tengo un menu de un ancho determinado. Ese menu tiene X items. Mi objetivo es que la primera letra del primer item coincida con el inicio del <div id="menu"> y que la ultima letra del ultimo item coincida con el final del div.
Hasta ahora lo hacia con margenes entre los items. Pero si necesitara incluir otro item a la lista(lo cual es muy probable), esto deja de funcionar ya que las medidas cambian.
Entonces se me ocurrio justificar el texto, para que siempre ocupara todo el div, sin importar si hay 4 o 6 items.
El problema es que no me queda justificado. El html es de la siguiente forma:

Código HTML:

<div id="menu_items">
     <a href="#">La empresa</a>
     <a href="#">Servicios</a>
     <a href="#">Trabajos</a>
     <a href="#">Contacto</a>
     <a href="#">Varios</a>
</div> 

Código:

#menu_items {
	margin-left:115px;
	margin-top:89px;
	width:543px;
	float:left;
	padding-bottom:25px;
	border-bottom:1px #a3a0a9 solid;
	text-align:justify;
}

puse todo el CSS de menu_items por si tal vez alguna propiedad este afectando al text-align.


alguien me ayuda a justificar esto? o lograr el mismo efecto de alguna otra menera.


pd: pregunte por ULs ya que antes de poner los <a> todo seguidos, estaban ordenados en una ul (en la cual el "text-align:justify" tampoco funcionaba)

[baccxus]

Creo que deberás poner un ejemplo de lo que quieres para poder ayudarte... Una imagen a lapiz escaneada serviría.

Saludos

[Newbie001]

hola, aca esta:

Tengo esto:



Y quiero esto:

[baccxus]

Código:

text-align: justify;

Alínea tu texto a la derecha y a la izquierda del párrafo, pero para una sóla línea no sirve puesto que sólo justifica cuando el texto pasa de 1 línea, y si hubieran 2, 10, 100 o más líneas, la última línea estaría alineada a la izquierda.

Para lo que necesitas, intenta como lo has estado haciendo y sí en un futuro hay más items, pues te tocaría cambiar lo que tienes (en un futuro).

Saludos

[Newbie001]

no puedo hacer eso. si existen nuevos links los van a agregar personas ajenas al codigo y sin conocimientos tecnicos a partir de un cms

[jomaruro]

Hola:

Mira esta página a ver si te sirve de algo.

Saludos.

[josdelaranda]

Hola Newbie001

Tal vez te sirvan algunos de estos links

http://www.pmob.co.uk/temp/centred-float4.htm

http://css-tricks.com/examples/EquidistantObjectsSM/

Saludos

[Newbie001]

Iniciado por jomaruro

Hola:

Mira esta página a ver si te sirve de algo.

Saludos.

como no me fije en araudi muchas gracias. aunque no me sirve en este caso. usa padding de 29 para separar los links, que era lo q hacia yo en un principio.
El tema es que si agregara un nuevo link, gracias al padding, el menu se agrandaria. Y preciso que quede igual

Iniciado por josdelaranda

Hola Newbie001

Tal vez te sirvan algunos de estos links

http://www.pmob.co.uk/temp/centred-float4.htm

http://css-tricks.com/examples/EquidistantObjectsSM/

Saludos

muchas gracias vos tambien pero ninguna me funciono.



cierren este tema por favor, me gustaria abrir otro con diferente titulo ya que el problema "cambio"

[Dalvenjha]

-.- quieres mantener cierta distancia entre los items? entonces dale un display:block a los elementos "li" luego dentro de ellos puedes darle un text-align:center; con eso los mantendrá centrados.

Uhmmm veo que tu problema es el aumento de items en el menú, pero si vamos por lo seguro, es que si alguien puede aumentar items a tontas y locas entonces seguro que también podrá aumentar demasiados.

Una solución podría ser que des un margin-left entre los elementos "li" dándole al "ul" un display:block y aplicandole un text-align:center; asi los items que van entrando se acomodan. Claro, como te dije, si alguien se pasa de la raya entonces de todas maneras puede hacer que hayan demasiados elementos.

Saludos!!

Código CSS:

ul{
display:block;
width:900px (digamos que esa es tu medida);
height:20px;
overflow:hidden;
text-align:center;
}
 
ul li{
margin-left:5px;
}
 

Uhmmm tu problema te lo resuelvo con JS si no me crucifican aqui xD.


Primero, pensemos que tu div tiene un tamaño fijo, digamos que es de 900 px, luego la lista tiene un id digamos que es "lista". Ok comenzamos

Código javascript:

tamano = 900; (Tamano de tu menú)
 
function comodar(){
var elemento = document.getElementById('lista').getElementsByTagName('li'); (Cogemos todos los elementos li)
var numero = elemento.length; (Contamos los elementos)
var tamanoelemento = tamano/numero; (dividimos tamano entre numero de elementos)
elemento.style.width = tamanoelemento + "px"; (el resultado será el tamaño de los elementos li)
}
 
}
 

Para esto ya deberías haber definido en tu css que:

Código css:

li{
display:block;
width:0;
height:20px; (Numero que quieras)
text-align:center;
}
 

Creo que es una opción, ve si te acomoda.