Problemas con un menu basado en css

axterixv · #1 (**permalink**) 28/03/2007, 15:10

Hola!

Tengo el siguiente codigo:

Código:

<div id="navegacion">
<ul>
	<li class="boton1"><a href="#">Inicio</a></li>
	<li class="boton2"><a href="#">Administrativa</a></li>
	<li class="boton3"><a href="#">Tecnica</a></li>
	<li class="boton1"><a href="#">Mercadeo</a></li>
	<li class="boton2"><a href="#">Convenio</a></li>
	<li class="boton3"><a href="#">Recetas</a></li>
	<li class="boton1"><a href="#">Fertilizacion</a></li>
	<li class="boton2"><a href="#">Variedades</a></li>
</ul>
</div>

Mi CSS:

Código:

#navegacion {width:80%; margin:auto; background-color:#390;}
#navegacion ul {
	padding: .2em 0;
	margin: 0;
	list-style-type: none;
	color: black;
	width: 100%;
	font-family:arial, helvetica, sans-serif;
	font-size:0.8em;
	text-align: center;
}
#navegacion li {display: inline;}
#navegacion li a {
	text-decoration: none;
	color: #FFF;
	border-right: 1px solid #fff;
}
.activo {}
.boton2 {background-color:#cc6;}
.boton3 {background-color:#996;}

Estoy tratando de lograr que cada boton, tenga un ancho fijo, que el menu quede centrado en la página y si se pudiera que se estire a contener toda el area donde estara.

Mi problema es que me aparece un espacio entre cada li de unos 3 o 4 pixeles, que hace que el background color que aplico a cada li se mire incompleto, no me da una apariencia de boton, si alguien me puede ayudar lo agradezco, saludos,
!!

Como se mira o como quisiera que se llegara a ver:
http://img114.imageshack.us/my.php?image=arrozuo7.jpg

Como se mira actualmente con mi CSS:
http://img337.imageshack.us/my.php?image=arroz2pm2.jpg

axterixv · #2 (**permalink**) 29/03/2007, 12:55

Actualizando, por si alguien puede seguir dandome una mano, que ya estoy parado por ahora:

Encontre que lo que realmente quiero es un menu, con float, que quede centrado, maravillosamente, las personas de CSS Play tienen una solución:

http://www.cssplay.co.uk/menus/centered.html

Copio exáctamente su solución a mi página y sorpresa, me funciona genial en firefox, pero en IE7 no me funciona y me despliega algo raro.

Lo más interesante de todo es que miro la página de el en IE7 y su menu si me funciona, así que me siento confundido, de que es lo que puede suceder.

Este es el xhtml que estoy usando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bienvenidos a la Asosiacion Guatemalteca del Arroz</title>
<link href="estilos/estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navegacion">
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>
</div>
</body>
</html>

Este es el CSS

#navegacion {
text-align:center;
}
#menu2 {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
}
#menu2 li {
display:table-cell;
}
#menu2 a {
width:auto;
display:block;
padding:4px 16px;
color:#fff;
background:#08c;
border:1px solid #fff;
text-decoration:none;
}
#menu2 a:hover {
color:#000;
background:#d4d4d4;
}


Asi se me despliega en IE7:
http://img517.imageshack.us/my.php?image=menuie7tf7.jpg

Cualquier sugerencia le sera muy agradecida!

axterixv · #3 (**permalink**) 29/03/2007, 13:27

Problema Resuelto - IE Te amo !

El problema era sencillo, estaba llamando los comentarios condicionales de IE7 desde la hoja de estilo y no desde el xhtml, al hacerlo asi se soluciona rapidamente:

Código:

<link href="estilos/estilo.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="estilos/estilo2.css" rel="stylesheet" type="text/css" />
<![endif]-->

Y las hojas de estilo quedaron asi:

estilo.css

Código:

#navegacion {
text-align:center;
}
#menu2 {
  display:table;
  padding:0;
  margin:0 auto;
  list-style-type:none;
  white-space:nowrap;
  }
#menu2 li {
  display:table-cell;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff;
  background:#08c;
  border:1px solid #fff;
  text-decoration:none;
  }
#menu2 a:hover {
  color:#000;
  background:#d4d4d4;
  }
.container {clear:both; text-decoration:none;}

estilo2.css

Código:

#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}

Gracias a todos por la ayuda.