ayuda con menu CSS

PedroRodas · #1 (**permalink**) 29/05/2008, 09:37

Hoal, estoy cambiando la apariencia de mi web, he colocado el menu en horiontal, con una lista. En el estado hover, el color de fondo del "li a:" se colorea, es decir

#menu ul li {
text-align:center;
display: inline;
float: left;
width:20%;
font: normal .8em Arial, Helvetica, sans-serif;
background: #fff;

Pero he puesto el texto align senter para que el efecto sea que quede el mismo espacio coloreado a cada lado del texto que contiene. Se me entiende. La apariencia normal del enlace es con el color de fondo igual que el fondo de la pantalla con lo cual solo se ve el texto, al ponernos encima se colorea el cuadro correspondiente a lo que seria la celda de una tabla, hecho con una tabla resultaria bien. Pero haciendo como se recomienda en CSS con una lista, quedan mas espacio coloreado por un lado que por el otro. si no se entiende bien pongo el codigo del enlace, muchas gracias!!!

Mikmoro · #2 (**permalink**) 29/05/2008, 12:25

Pues puede depender de dónde hayas puesto el align center, pero efectivamnte sería mejor ver el enlace.

Mikel.

PedroRodas · #3 (**permalink**) 30/05/2008, 03:50

Hola Mikel:

He puesto un ejemplo ya que no se donde colgar mis páginas para que las veais, pero con esto servirá para que veas lo que quiero.

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>EJEMPLO MENU</title>
<style type="text/css">
body {margin:0;padding:0;}
#contenedor{
width:760px;
height:auto;
margin: 0px auto;
}
#cabecera{
clear:both;
width:100%;
height:100px;
background:#f63;
}
#menu{
clear:both;
width:100%;
height:100%;
}
#pie{
clear:both;
width:100%;
height:100px;
background:#f63;
}
#menu ul {
clear: both;
float: left;
width: 100%;
list-style: none;
}
#menu ul li {
text-align:center;
display: inline;
float: left;
width:20%;
font: normal .8em Arial, Helvetica, sans-serif;
background: #fff;
}
/*								Enlaces 									*/
#menu ul li a:link, ul li a:visited {
padding: .1em 0 .2em 1.5em;
display:block;
text-decoration: none;
color: #000;
background: #666;
}
#menu ul li a:hover {
background: #000;
color:#fff;
}
ul li a:active {text-decoration:none; color:#000;}
</style>
</head>
<body>
<div id="contenedor">
	<div id="cabecera">Cabecera_ejemplo</div>
	<div id="menu">
		<ul>
			<li><a href="#" title="Enlace genérico">:: Inicio ::</a></li>
			<li><a href="#" title="Enlace genérico">:: Portafolio ::</a></li>
			<li><a href="#" title="Enlace genérico">:: Contacto ::</a></li>
			<li><a href="#" title="Enlace genérico">:: Enlaces ::</a></li>
			<li><a href="#" title="Enlace genérico">:: Sobre m&iacute; ::</a></li>
		</ul>
	</div>
	<div id="pie">Pie_ejemplo</div>
</div>
</body>
</html>

muchas gracias de antemano.

PedroRodas · #4 (**permalink**) 02/06/2008, 01:11

Puede ser por el lugar donde tengo puesto el align center o quiza por las medidas en %?? la verdad es que no doy con la tecla.

Gracias!!

Mikmoro · #5 (**permalink**) 02/06/2008, 01:36

Hola, PedroRodas.

El asunto está en esta línea:

padding: .1em 0 .2em 1.5em;

donde marcas 0em de margen derecho y 1.5em de margen izuierdo. Igualalo y te quedará bien.

Mikel.

P.D.: no sé si te lo había dicho ya, pero el concierto de Roger Waters increíble, y el de Pink Floid de Gilmore de la misma época también.

PedroRodas · #6 (**permalink**) 02/06/2008, 04:06

muchas gracias Mikel!!

P.D. Esa respuesta no me ha ayudado CUBA_PIPI!!!