« anterior próximo »
Páginas: [1]   Ir Abajo

Autor Tema: [Ayuda]Centrar menu horizontal auto-expandible  (Leído 1535 veces)

Desconectado judoka

  • PHPero Avanzado
  • ****
  • Mensajes: 255
  • Karma: 4
  • Sexo: Masculino
  • Programando hasta lo mas alto.
    • Ver Perfil
[Ayuda]Centrar menu horizontal auto-expandible
« en: 03 de Agosto de 2011, 16:51:31 pm »
Primero, buenas tardes ^^
Segundo: estoy teniendo muchisimos problemas a la hora de hacer un menu horizontal que a medida que añadas enlaces se vaya expandiendo desde el centro a los lados (justo como este ejemplo):

[img-borde-izq] Home · Descargas [der-borde-img]
[img-borde-izq] Home · Descargas · Calendario · Foro [der-borde-img]

Tengo el siguiente estilo CSS:
Citar
<style>
#nav_wrapper {
   width: 800px;
   max-width: 89.9%;
   padding-left: 5.8%;
   padding-right:5.8%;
   border:1px solid black;
   margin:0 auto;
}

.navigation {
   background: url(../images/main_nav.png) repeat-x left top;
   min-width:30%;
   height: 53px;
   border:1px solid red;
   display:block;
   list-style:none;
   float:left;
   margin: 0 auto;
}

.left {
   background: url(../images/nav_left.png) no-repeat left top;
   width: 14px;
   height: 53px;
   border: 1px solid green;
   list-style:none;
   float:left;
   margin:0 auto;
}

.right {
   background: url(../images/nav_right.png) no-repeat left top;
   width: 14px;
   height: 53px;
   border: 1px solid green;
   list-style:none;
   float:left;
   margin: 0 auto;
}
</style>

Y el siguiente HTML:
Citar
<ul id="nav_wrapper">
 <li class="left"></li>
 <li class="navigation"></li>
 <li class="right"></li>
</ul>
Pero no consigo que se coloque en el centro y que se vaya expandiendo.. :S
¿Alguna idea? El CSS se repite mucho por que ya no sabía que hacer y puse cosas a lo loco ! ;)
En línea

Comunidad PHPeros

[Ayuda]Centrar menu horizontal auto-expandible
« en: 03 de Agosto de 2011, 16:51:31 pm »

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:[Ayuda]Centrar menu horizontal auto-expandible
« Respuesta #1 en: 03 de Agosto de 2011, 18:14:57 pm »
Mira, por lo que veo es sencillo, basta con ponerle al <ul> la siguiente propiedad:

Código: [Seleccionar]
ul{ margin:0 auto; list-style:none; text-align:center; }Con eso, alinearás el <ul> al centro, por lo que solo resta irle añadiendo los <li>, ponle el siguiente CSS:

Código: [Seleccionar]
li{ margin-right:5px; display:inline; }Le añades al <li> la propiedad inline, para que no cambie de línea, y le agregas un margin a la derecha para separarlo de los demás elementos.

Puedes comprobar que funciona con el siguiente menú:

Código: [Seleccionar]
<ul>
<li>Inicio</li>
    <li>Descargas</li>
    <li>Otro menú</li>
</ul>
Lo probé en IE, Chrome y Firefox y en los tres funciona :)
Saludos ^^
En línea
- Moderador de PHP

Desconectado judoka

  • PHPero Avanzado
  • ****
  • Mensajes: 255
  • Karma: 4
  • Sexo: Masculino
  • Programando hasta lo mas alto.
    • Ver Perfil
Re:[Ayuda]Centrar menu horizontal auto-expandible
« Respuesta #2 en: 03 de Agosto de 2011, 20:53:54 pm »
Gracias. En base a eso lo he conseguido al fin. Mi problema era el display:inline; (que al final a acabado en inline-block) pero gracias de todas formas.
K+!
En línea

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:[Ayuda]Centrar menu horizontal auto-expandible
« Respuesta #3 en: 04 de Agosto de 2011, 07:01:17 am »
Con gusto ^^
Cierro tema.
En línea
- Moderador de PHP

Páginas: [1]   Ir Arriba
« anterior próximo »