Foros del Web » Creando para Internet » CSS »

Misma separacion de palabras en elementos de lista

Estas en el tema de Misma separacion de palabras en elementos de lista en el foro de CSS en Foros del Web. Hola, ahi va mi duda de hoy: tengo un menu horizontal hecho con listas. Me funcina correctamente pero al ser unas palabras mas largas que ...
  #1 (permalink)  
Antiguo 08/07/2008, 10:53
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Misma separacion de palabras en elementos de lista

Hola, ahi va mi duda de hoy:

tengo un menu horizontal hecho con listas. Me funcina correctamente pero al ser unas palabras mas largas que otras y estar definido el width con % , la separacion entre palabras es diferente.

Quiero hacer que la separacion entre cada palabra del menu sea la misma. Os dejo mi codigo para podais echarle un vistazo. gracias!!
Código HTML:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="ContentType" content="text/html; charset=iso-8859-1" />
<title>john connor - INICIO</title>
<link rel="stylesheet" type="text/css" href="mainmenu.css" media="screen">
</head>
<body>
	<div id="contenedor">
	<div id="textogigante">JOHN CONNOR</div>
	<div id="menu">
		<ul>
			<li><a href="#" title="Enlace genérico">INICIO</a></li>
			<li><a href="#" title="descargar el archivo pdf">BIOGRAF&Iacute;A</a></li>
			<li><a href="#" title="Enlace genérico">GALER&Iacute;A</a></li>
			<li><a href="#" title="Enlace genérico">EXPOSICIONES</a></li>
			<li><a href="#" title="Enlace genérico">CR&Iacute;TICAS</a></li>
			<li><a href="#" title="Enlace genérico">NOTICIAS</a></li>
			<li><a href="#" title="descargar el archivo pdf">CALENDARIO</a></li>
			<li><a href="#" title="Enlace genérico">CONTACTO</a></li>
		</ul>
	</div>	
	</div>
</body>
</html> 
y aqui el css:
Código HTML:
html, body {margin:0; padding:0;}
#contenedor{
margin:0 auto;
width: 914px;}
#textogigante{
font: bold 2.6em Geneva, Arial, Helvetica, sans-serif;
color: #202020;
margin-left:3px;
}
#menu{
width: 100%;
}
#menu ul { 
list-style-type: none;

display: inline;
font: bold 0.7em Geneva, Arial, Helvetica, sans-serif;
}
#menu ul li {
text-align: center;
float: left;
width: 12%;
}
#menu ul li a:link, ul li a:visited { 
display: block;
text-decoration: none;
color: #202020;
padding:3px;
}
#menu ul li a:hover {
color: #fff;
background:#056de0;
}
#menu ul li a:active { 
text-decoration: none;
color: #000;
}
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!

Última edición por PedroRodas; 08/07/2008 a las 10:54 Razón: quitar nombre propio
  #2 (permalink)  
Antiguo 08/07/2008, 11:50
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Misma separacion de palabras en elementos de lista

Holas, lo que debes hacer es sencillo, no le pongas width entonces el texto se puede agrandar todo lo que necesita... y colocale luego margin con el valor de espaciado que necesites.

De esa forma podras separarlos a la misma distancia.

Saludos, Damian.
  #3 (permalink)  
Antiguo 08/07/2008, 11:53
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: Misma separacion de palabras en elementos de lista

No utilices porcentajes, total al contenedor le tienes fijada una anchura de 914px.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #4 (permalink)  
Antiguo 09/07/2008, 09:46
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 12 años
Puntos: 0
Respuesta: Misma separacion de palabras en elementos de lista

y asi funciono, muchas gracias a todos!
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
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 01:30.