Foros del Web » Creando para Internet » CSS »

Centrar menu horizontal

Estas en el tema de Centrar menu horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/04/2009, 09:57
Avatar de huspy  
Fecha de Ingreso: diciembre-2008
Ubicación: Málaga, España
Mensajes: 120
Antigüedad: 9 años
Puntos: 2
Centrar menu horizontal

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!!!
  #2 (permalink)  
Antiguo 11/04/2009, 10:03
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar menu horizontal

pues esta sería la forma:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es" xml:lang="es-es">
  3. <style type="text/css">
  4. #menu {
  5. font: .9em "Trebuchet MS", Arial, Helvetica, sans-serif;
  6. margin-top: 5px;
  7. background-color: blue;
  8. width: 100%;
  9. text-align:center;
  10. }
  11.  
  12. #menu ul {
  13. list-style-type: none;margin: 0;padding: 0;
  14. }
  15. #menu ul li {
  16. display:inline;
  17. padding-right: 5px;
  18. }
  19.  
  20. #menu a {
  21. text-decoration: none;
  22. color: #3366CC;
  23. background: #F0F7FC;
  24. padding: 3px 30px;
  25. text-align: center;
  26. border: 1px solid #ACCFE8;
  27. border-width: 2px;
  28. }
  29.  
  30. #menu a.activo {
  31. background: #ACCFE8;
  32. border-color: #F0F7FC;
  33. }
  34.  
  35. #menu a:hover {
  36. background: #DBEBF6;
  37. }
  38. </head>
  39. <div id="menu">
  40. <ul>
  41. <li><a class="activo" href="/">Inicio</a></li>
  42. <li><a href="/empresa">Empresa</a></li>
  43. <li><a href="/servicios">Servicios</a></li>
  44. <li><a href="/clientes">Clientes</a></li>
  45. <li><a href="/contacto">Contacto</a></li>
  46. <li><a href="/empleo">Empleo</a></li>
  47. </ul>
  48. </div>
  49. </body>
  50. </html>
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 11/04/2009, 16:30
Avatar de huspy  
Fecha de Ingreso: diciembre-2008
Ubicación: Málaga, España
Mensajes: 120
Antigüedad: 9 años
Puntos: 2
Respuesta: Centrar menu horizontal

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.
  #4 (permalink)  
Antiguo 11/04/2009, 16:40
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Centrar menu horizontal

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
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 11/04/2009, 16:43
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar menu horizontal

Hola:

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

Saludos.

  #6 (permalink)  
Antiguo 11/04/2009, 17:30
Avatar de huspy  
Fecha de Ingreso: diciembre-2008
Ubicación: Málaga, España
Mensajes: 120
Antigüedad: 9 años
Puntos: 2
Respuesta: Centrar menu horizontal

Buenas!!

Teneis razón, no lo habia copiado bien!

Perdonad por las molestias!

Saludos y Muchas Gracias!
  #7 (permalink)  
Antiguo 11/04/2009, 17:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar menu horizontal

Hola:

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

Saludos.

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 20:31.