Foros del Web » Creando para Internet » CSS »

Problemas con un menu basado en css

Estas en el tema de Problemas con un menu basado en css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/03/2007, 16:10
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Problemas con un menu basado en css

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

Última edición por axterixv; 28/03/2007 a las 16:17
  #2 (permalink)  
Antiguo 29/03/2007, 13:55
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Problemas con un menu basado en css

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;
}
<!--[if IE]>
#menu2 li {
float:left;
}
#menu2 a {
float:left;
}
.container {display:inline-block; text-decoration:none;}
<![endif]-->

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

Cualquier sugerencia le sera muy agradecida!
  #3 (permalink)  
Antiguo 29/03/2007, 14:27
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 10 años, 9 meses
Puntos: 1
Re: Problemas con un menu basado en css - Resuelto

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.
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 17:55.