Centrar menu horizontal

huspy · #1 (**permalink**) 11/04/2009, 08:57

Buenas a todos!

Tengo un menú horizontal el qcual quiro que se centre, es decir, que tengan ocupen todo el contenedor y que entre enlaces tengan la misma separación. Aqui os dejo el menu:

css

#menu {
font: .9em "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 5px;
background-color: blue;
width: 100%;
}

#menu ul, li {
list-style-type: none;
}

#menu ul {
margin: 0;
padding: 0;
}

#menu li {
float: left;
padding-right: 5px;
}

#menu a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 30px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 2px;
}

#menu a.activo {
background: #ACCFE8;
border-color: #F0F7FC;
}

#menu a:hover {
background: #DBEBF6;
}

xhtml

<div id="menu">
<ul>
<li><a class="activo" href="/">Inicio</a></li>
<li><a href="/empresa">Empresa</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/clientes">Clientes</a></li>
<li><a href="/contacto">Contacto</a></li>
<li><a href="/empleo">Empleo</a></li>
</ul>
</div>

Saludos y Muchas Gracias!!!

willyfc · #2 (**permalink**) 11/04/2009, 09:03

pues esta sería la forma:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es" xml:lang="es-es">
<head>
<style type="text/css">
#menu {
font: .9em "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 5px;
background-color: blue;
width: 100%;
text-align:center;
}
 
#menu ul {
list-style-type: none;margin: 0;padding: 0;
}
#menu ul li {
display:inline;
padding-right: 5px;
}
 
#menu a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
padding: 3px 30px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 2px;
}
 
#menu a.activo {
background: #ACCFE8;
border-color: #F0F7FC;
}
 
#menu a:hover {
background: #DBEBF6;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a class="activo" href="/">Inicio</a></li>
<li><a href="/empresa">Empresa</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/clientes">Clientes</a></li>
<li><a href="/contacto">Contacto</a></li>
<li><a href="/empleo">Empleo</a></li>
</ul>
</div>
</body>
</html>

huspy · #3 (**permalink**) 11/04/2009, 15:30

Buenas!

Creo que no me funciona con ese código, ahora me sale una debajo de la otra.

Sabes por que debe ser?

Saludos y Gracias por la respuesta.

willyfc · #4 (**permalink**) 11/04/2009, 15:40

mmm..., lo ideal hubiera sido que lo pruebes primero en un archivo nuevo para ver si es lo que quieres lograr, por eso puse el código completo, y podría apostar a que te sale así por que en la declaración de #menu a dice display:block aún en tu código, no debería estar eso ahí.

revisa eso y veamos luego como te va

jomaruro · #5 (**permalink**) 11/04/2009, 15:43

Hola:

Revísalo bien porque funciona perfectamente, sale en horizontal y centrado.

Saludos.

huspy · #6 (**permalink**) 11/04/2009, 16:30

Buenas!!

Teneis razón, no lo habia copiado bien!

Perdonad por las molestias!

Saludos y Muchas Gracias!

jomaruro · #7 (**permalink**) 11/04/2009, 16:49

Hola:

Tranquilo, aquí estamos para "molestarnos" unos a otros.

Saludos.