Pregunta:

Fecha: 20-01-2015 06:14:53 (En Español)

¿Cómo centro una barra de menú spry?[Resuelta]

Ya logré centrar toda la pagina web dentro de un solo div madre, pero la barra de menú no se me centra, sale del lado izquierdo superior, ayuda, cómo hago?

SpryMenuBarHorizontal.css

Adjunto código html del spry bar.

<div>
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.php" title="Pagina principal"><strong>Inicio</strong></a></li>
    <li><a href="/foro" title="Click para ingresar al foro"><strong>Foro</strong></a></li>
    <li><a href="cuenta.php" title="Click para ir a tu cuenta del juego" class="MenuBarItemSubmenu">strong>Cuenta</strong></a>
      <ul>
        <li><a href="#" title="Para comprar vehiculos, ropa, etc." class="MenuBarItemSubmenu"><strong>Tienda</strong></a>
          <ul>
            <li><a href="tienda-vehiculos.php" title="Aqui puedes comprar vehiculos.">Comprar vehiculos</a></li>
            <li><a href="tienda-ropa.php" title="Aqui puedes personalizar tu personaje">Comprar ropa</a></li>
            <li><a href="tienda-nombre.php" title="Si deseas cambiar tu nombre lo puedes hacer aqui.">Cambiar nombre</a></li>
            <li><a href="tienda-accesorios.php">Comprar accesorios</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="info.php" title="Para mas informacion."><strong>Informacion</strong></a></li>
  </ul>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

Nota: todo eso está dentro del div madre. Etiquetas: CSS - HTML - Pregunta Votos: 4 - Respuestas: 5 - Vistas: 12 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

Jose Delgado Karma: 178

Fecha: 20-01-2015 06:42:29 Solucionado

ul.MenuBarHorizontal{
    width:400px;
    display:block;
    margin:0 auto;
    padding:0;
    list-style:none;
    font-size:12px;
    cursor: default;
    font-family:Georgia, "Times New Roman", Times, serif;
}

Votos: 3 - Link respuesta

2

Fernando Mosquera Karma: 10241
Fecha: 20-01-2015 07:02:48
Claro, lo que termina centrado tu elemento es la propiedad CSS width en un valor fijo y el margin con el 0px y auto:
```
ul.MenuBarHorizontal {
    width:400px;
    margin:0 auto;
}
```
¿podrías editar la pregunta original y sumarte el html y el css? (así otra persona que lee la pregunta la puede entender con un ejemplo completo)

Muchas gracias!
Votos: 2 - Link respuesta
0

Walter Sánchez Karma: 6600

Fecha: 20-01-2015 08:25:04 Muy buena data para otros desarrolladores que tengan el mismo problema Votos: 0 - Link respuesta

Fernando Mosquera Karma: 10241

Fecha: 21-01-2015 01:29:36 Para dejar un ejemplo un poco mas completo, aca adjunto unas mejoras al menu con puro HTML y CSS3, un ejemplo completamente ejecutable.

Lo interesante de ver (ademas de que esta centrado, que fue lo que disparo la pregunta original) es el hover (pasar el mouse por encima) de los elementos que llevan las clases CSS .hover_cuenta y .hover_tienda, y que producen un cambio de estilos en los elementos que llevan las clases CSS .mostrar_tienda y .mostrar_tienda_opciones

Otras propiedades CSS interesantes de ver son display: inline-block; que produce que los elementos <li>...</li> se visualicen de forma horizontal y position: absolute; que permite que los submenus queden posicionados debajo de sus padres (ejemplo submenu "tienda" debajo de "cuenta").

Ejemplo completo:

<style type="text/css">
    body{
        font-size:12px;
        font-family:Georgia, "Times New Roman", Times, serif;
    }
    ul{
        list-style:none;
        padding:0;
        margin:0;
    }
    ul.menu_bar_horizontal{
        width:400px;
        display:block;
        margin:0 auto;
        cursor: default;
    }
    ul.menu_bar_horizontal li{
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
    }
    ul.menu_bar_horizontal li a{
        text-transform: uppercase;
        text-decoration: none;
        color: #0000AA;
    }
    ul.menu_bar_horizontal li a:hover{
        text-decoration: underline;
        color: #AA000A;
    }
    ul.menu_bar_horizontal li ul{
        position: absolute;
    }
    ul.menu_bar_horizontal li ul li{
        display: inline-block;
    }
    ul.menu_bar_horizontal li ul li ul li a{
        display: block;
        padding: 5px 0;
        white-space: nowrap;
    }
    .mostrar_tienda{ 
        display : none;
        padding-top: 5px;
    }
    .hover_cuenta:hover .mostrar_tienda{
        display : block;
    }
    .mostrar_tienda_opciones{ 
        display : none;
        padding-top: 2px;
    }
    .hover_tienda:hover .mostrar_tienda_opciones{
        display : block;
    }
</style>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Menú</title>
    </head>
    <body>
        <div>
            <ul class="menu_bar_horizontal">
                <li><a href="index.php" title="Pagina principal"><strong>Inicio</strong></a></li>
                <li><a href="/foro" title="Click para ingresar al foro"><strong>Foro</strong></a></li>
                <li class="hover_cuenta"><a href="cuenta.php" title="Click para ir a tu cuenta del juego"><strong>Cuenta</strong></a>
                    <ul class="mostrar_tienda">
                        <li class="hover_tienda"><a href="#" title="Para comprar vehiculos, ropa, etc."><strong>Tienda</strong></a>
                            <ul class="mostrar_tienda_opciones">
                                <li><a href="tienda-vehiculos.php" title="Aqui puedes comprar vehiculos.">Comprar vehiculos</a></li>
                                <li><a href="tienda-ropa.php" title="Aqui puedes personalizar tu personaje">Comprar ropa</a></li>
                                <li><a href="tienda-nombre.php" title="Si deseas cambiar tu nombre lo puedes hacer aqui.">Cambiar nombre</a></li>
                                <li><a href="tienda-accesorios.php">Comprar accesorios</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="info.php" title="Para mas informacion."><strong>Informacion</strong></a></li>
            </ul>
        </div>
    </body>
</html>

Saludos! Votos: 3 - Link respuesta

1

Walter Sánchez Karma: 6600

Fecha: 21-01-2015 14:29:23 muy bueno ;)
bien explicado como para poderlo implementar de una manera fácil y rápida Votos: 1 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

¿Cómo centro una barra de menú spry?[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta