Centrar menu desplegable en div con float:left

MiLLeN · #1 (**permalink**) 03/01/2010, 09:49

La historia es simple, lo que pretendo es centrar un menú desplegable hecho con css dentro de un <div>, el problema es que dicho menú desplegable debe utilizar float:left para ordenar correctamente la lista <ul> y sus sublistas <ul>, y claro, al aplicar al <div> contenedor del menú un margin: 0 auto, no me hace nada, se me queda a la izquierda...

He probado a crear otro <div> que encapsule al menú, darle una anchura, y aplicarle el margin: 0 auto, efectivamente funciona, el <div> se centra, pero el menú nunca queda del todo centrado... a no ser claro, que le de justo el tamaño de la anchura del menú... EL PROBLEMA de esto, es que no es un menú que siempre vaya a tener las mismas opciones ni de la misma anchura, ya que es un menú para una plantilla de Joomla! 1.5, y debe de centrarse automáticamente independientemente de la anchura de dicho menú...

Muchas gracias por vuestra ayuda, y un saludo a todos!.

jomaruro · #2 (**permalink**) 03/01/2010, 10:09

Hola:

Sin ver tu código es difícil saber donde está el error, por lo tanto lo único que puedo decirte que revises los ejemplos de menús que aparecen en las FAQ's de CSS.

Saludos.

MiLLeN · #3 (**permalink**) 03/01/2010, 13:08

Cita:

Iniciado por jomaruro

Hola:

Sin ver tu código es difícil saber donde está el error, por lo tanto lo único que puedo decirte que revises los ejemplos de menús que aparecen en las FAQ's de CSS.

Saludos.

Hola jomaruro, lo que tengo es parecido al menu12 del enlace que me has pasado, y he revisado su código y tiene exactamente el mismo problema que tengo en el mio, y hasta ahora en todos los que he mirado, que no es ni mas ni menos que lo que he explicado anteriormente, que para poder centrar correctamente el menú desplegable debe ir dentro de un div CON EL TAMAÑO del menú desplegable y centrado.

Pero es lo mismo que antes, en el momento que no puedo saber el tamaño que tendrá el menú, ya que puede ser cualquier tamaño, según se añadan o no enlaces al menú de Joomla!, no puedo centrarlo correctamente.

No hace falta que te pase el código, ya que el problema es el que te estoy diciendo, no es un error del código, esta bien, es cuestión de saber algún "truquito", de tener esa idea feliz para solventar este inconveniente que presenta css.

ArturoGallegos · #4 (**permalink**) 03/01/2010, 13:26

sin ver un codigo no podemos saber en que parte debe de ir el pequeño truquito (como tu le llamas), si no conocemos tu codigo no podemos saber como lo as estructurado, que etiquetas as implementado, o siquiera si realmente esta como dices....

en pocas palabras es un juego de adivinanzas jaja...

no te ofendas amigo pero si realmente esperas que alguien te pueda ayudar deberás presentarnos tu código tal cual los estas implementando (postealo o danos la url de tu sitio) en caso de postearlo aqui si es posible un screenshot ?¿

MiLLeN · #5 (**permalink**) 03/01/2010, 15:02

Bueno, os voy a poner aquí los códigos a ver si os sirven de algo.

Código HTML:

Ver original<body>
 
<div id="contenedor">
<div id="cabecera"></div>
<div id="barra">
            <div class="moduletable">
                    <ul class="menu"><li class="item3"><a href="/elprogramador/index.php?option=com_content&amp;view=section&amp;layout=blog&amp;id=1&amp;Itemid=3"><span>Noticias</span></a></li><li class="parent item8"><a href="/elprogramador/index.php?option=com_content&amp;view=section&amp;id=3&amp;Itemid=8"><span>Java</span></a><ul><li class="item9"><a href="/elprogramador/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=3&amp;Itemid=9"><span>Tutoriales de Java</span></a></li><li class="item10"><a href="/elprogramador/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=4&amp;Itemid=10"><span>Libros de Java</span></a></li></ul></li><li class="parent item4"><a href="/elprogramador/index.php?option=com_content&amp;view=section&amp;layout=blog&amp;id=2&amp;Itemid=4"><span>PHP</span></a><ul><li class="item6"><a href="/elprogramador/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1&amp;Itemid=6"><span>Tutoriales de PHP</span></a></li><li class="item7"><a href="/elprogramador/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=7"><span>Libros de PHP</span></a></li></ul></li><li class="item11"><a href="/elprogramador/index.php?option=com_content&amp;view=section&amp;layout=blog&amp;id=4&amp;Itemid=11"><span>Entrevistas</span></a></li></ul>      </div>
    
 
</div>
<div id="izquierda">
            <div class="moduletable_menu">
                    <h3>Menú principal</h3>
                    <ul class="menu"><li id="current" class="active item1"><a href="http://localhost/elprogramador/"><span>Portada</span></a></li></ul>     </div>
    
</div>
<div id="contenido">
    <div class="componentheading">
    Bienvenidos a la portada</div>
 
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
    <td valign="top">
                </td>
</tr>
 
 
</table>
 
</div>
</div>
</body>

Código CSS:

Ver original#contenedor #barra {
    background-color: #CCC;
    height: 60px;
    width: 980px;
    text-align: center;
}
 
#contenedor #barra .moduletable {
    margin: 0;
    padding: 0;
    height: 100&#37;;
    background: #0F6;
}
 
#barra .menu{
    border:none;
    border:0px;
    margin:0 auto;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
}
 
#barra .menu ul{
    background:#333333;
    height:60px;
    list-style:none;
    margin:0;
    padding:0;
}
 
#barra .menu li{
    float:left;
    padding:0px;
    list-style:none;
}
 
#barra .menu li a{
    background:#333333 url(../images/barra/seperator.gif) bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:60px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
}
 
#barra .menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url(../images/barra/hover.gif) bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
 
#barra .menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
}
 
#barra .menu li:hover ul{
    display:block;
}
 
#barra .menu li li {
    background:url(../images/barra/sub_sep.gif) bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
}
 
#barra .menu li:hover li a{
    background:none;
}
 
#barra .menu li ul a{
    display:block;
    height:60px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
 
#barra .menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url(../images/barra/hover_sub.gif) center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}
 
#barra .menu p{
    clear:left;
}

MiLLeN · #6 (**permalink**) 05/01/2010, 18:18

Tanto pedir código, tanto pedir código... si ya sabia yo...

jomaruro · #7 (**permalink**) 06/01/2010, 03:10

Hola:

Cita:

Iniciado por MiLLeN

Tanto pedir código, tanto pedir código... si ya sabia yo...

¿Y tu que has hecho? ¿Esperar?

¿Sabías que tenemos más que hacer que estar aquí?

La próxima vez ni te contesto.

Comprueba esto:

Código:

#contenedor #barra {
    background-color: #CCC;
    height: 60px;
    width: 980px;
    text-align: center;
    margin:0 auto;
}

#contenedor #barra .moduletable {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0F6;
}

Saludos.

MiLLeN · #8 (**permalink**) 09/01/2010, 16:31

Cita:

Iniciado por jomaruro

Hola:

¿Y tu que has hecho? ¿Esperar?

¿Sabías que tenemos más que hacer que estar aquí?

La próxima vez ni te contesto.

Comprueba esto:

Código:

#contenedor #barra {
    background-color: #CCC;
    height: 60px;
    width: 980px;
    text-align: center;
    margin:0 auto;
}

#contenedor #barra .moduletable {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0F6;
}

Saludos.

No te confudas, igual pagan justos por pecadores, pero es que estoy un poquito arto de los que chupan y chupan, pero ayudar bien poco...

Gracias por el aporte, ya te contare.

MiLLeN · #9 (**permalink**) 10/01/2010, 02:22

Lo he estado mirando y no funciona...

Estamos en lo de siempre, si a #contenedor #barra le doy un width con el tamaño del menu si que funciona, pero el menu no va a ser siempre del mismo tamaño...

jomaruro · #10 (**permalink**) 10/01/2010, 03:57

Hola:

Cita:

Iniciado por MiLLeN

pero es que estoy un poquito harto de los que chupan y chupan, pero ayudar bien poco...

Y yo estoy harto, pero más que harto, de las faltas de ortografía y de los impacientes.

¿Esto que es? ¿No está centrado? ¡Pues es tu código!

Saludos.

MiLLeN · #11 (**permalink**) 10/01/2010, 07:00

Cita:

Iniciado por jomaruro

Hola:

Y yo estoy harto, pero más que harto, de las faltas de ortografía y de los impacientes.

¿Esto que es? ¿No está centrado? ¡Pues es tu código!

Saludos.

Bueno, he tenido una falta de ortografía, no suelo tenerlas... Soy bastante meticuloso con ellas, y me molesta tanto como a ti. (existe arto, y por eso no me ha dicho nada el navegador).

Respecto al tema del menú, no, ese menú no esta centrado, esta centrado el <div> que contiene al menú, pero el menú no esta centrado con respecto al document del explorador, es decir, totalmente centrado en la web.

PD: Aclaración, el menú no es el <div> de color verde y lo que contiene, es solo la parte de la lista desplegable editada con CSS, esos botones, el <div> verde es solo el contenedor..