Foros del Web » Creando para Internet » CSS »

ayuda con menu CSS

Estas en el tema de ayuda con menu CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/05/2008, 09:37
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 4 meses
Puntos: 0
ayuda con menu CSS

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!!!
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #2 (permalink)  
Antiguo 29/05/2008, 12:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: ayuda con menu CSS

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

Mikel.
  #3 (permalink)  
Antiguo 30/05/2008, 03:50
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 4 meses
Puntos: 0
Respuesta: ayuda con menu CSS

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.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #4 (permalink)  
Antiguo 02/06/2008, 01:11
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 4 meses
Puntos: 0
Respuesta: ayuda con menu CSS

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!!
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #5 (permalink)  
Antiguo 02/06/2008, 01:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: ayuda con menu CSS

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.
  #6 (permalink)  
Antiguo 02/06/2008, 04:06
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 4 meses
Puntos: 0
Respuesta: ayuda con menu CSS

muchas gracias Mikel!!

P.D. Esa respuesta no me ha ayudado CUBA_PIPI!!!
__________________
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 10:54.