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ÍA</a></li>
<li><a href="#" title="Enlace genérico">GALERÍA</a></li>
<li><a href="#" title="Enlace genérico">EXPOSICIONES</a></li>
<li><a href="#" title="Enlace genérico">CRÍ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;
}