Misma separacion de palabras en elementos de lista

PedroRodas · #1 (**permalink**) 08/07/2008, 09:53

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;
}

dacho · #2 (**permalink**) 08/07/2008, 10:50

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.

kazafun · #3 (**permalink**) 08/07/2008, 10:53

No utilices porcentajes, total al contenedor le tienes fijada una anchura de 914px.

PedroRodas · #4 (**permalink**) 09/07/2008, 08:46

y asi funciono, muchas gracias a todos!