Foros del Web » Creando para Internet » CSS »

Centrar menu desplegable en div con float:left

Estas en el tema de Centrar menu desplegable en div con float:left en el foro de CSS en Foros del Web. La historia es simple, lo que pretendo es centrar un menú desplegable hecho con css dentro de un <div> , el problema es que dicho ...
  #1 (permalink)  
Antiguo 03/01/2010, 09:49
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
Centrar menu desplegable en div con float:left

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!.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #2 (permalink)  
Antiguo 03/01/2010, 10:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 5 meses
Puntos: 361
Respuesta: Centrar menu desplegable en div con float:left

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.

  #3 (permalink)  
Antiguo 03/01/2010, 13:08
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
De acuerdo Respuesta: Centrar menu desplegable en div con float:left

Cita:
Iniciado por jomaruro Ver Mensaje
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.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #4 (permalink)  
Antiguo 03/01/2010, 13:26
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: Centrar menu desplegable en div con float:left

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 ?¿
  #5 (permalink)  
Antiguo 03/01/2010, 15:02
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
Respuesta: Centrar menu desplegable en div con float:left

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



Código HTML:
Ver original
  1.  
  2. <div id="contenedor">
  3. <div id="cabecera"></div>
  4. <div id="barra">
  5.             <div class="moduletable">
  6.                     <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>
  7.    
  8.  
  9. </div>
  10. <div id="izquierda">
  11.             <div class="moduletable_menu">
  12.                     <h3>Menú principal</h3>
  13.                     <ul class="menu"><li id="current" class="active item1"><a href="http://localhost/elprogramador/"><span>Portada</span></a></li></ul>     </div>
  14.    
  15. </div>
  16. <div id="contenido">
  17.     <div class="componentheading">
  18.     Bienvenidos a la portada</div>
  19.  
  20. <table class="blog" cellpadding="0" cellspacing="0">
  21. <tr>
  22.     <td valign="top">
  23.                 </td>
  24. </tr>
  25.  
  26.  
  27.  
  28. </div>
  29. </div>
  30. </body>

Código CSS:
Ver original
  1. #contenedor #barra {
  2.     background-color: #CCC;
  3.     height: 60px;
  4.     width: 980px;
  5.     text-align: center;
  6. }
  7.  
  8. #contenedor #barra .moduletable {
  9.     margin: 0;
  10.     padding: 0;
  11.     height: 100&#37;;
  12.     background: #0F6;
  13. }
  14.  
  15. #barra .menu{
  16.     border:none;
  17.     border:0px;
  18.     margin:0 auto;
  19.     padding:0px;
  20.     font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  21.     font-size:14px;
  22.     font-weight:bold;
  23. }
  24.  
  25. #barra .menu ul{
  26.     background:#333333;
  27.     height:60px;
  28.     list-style:none;
  29.     margin:0;
  30.     padding:0;
  31. }
  32.  
  33. #barra .menu li{
  34.     float:left;
  35.     padding:0px;
  36.     list-style:none;
  37. }
  38.  
  39. #barra .menu li a{
  40.     background:#333333 url(../images/barra/seperator.gif) bottom right no-repeat;
  41.     color:#cccccc;
  42.     display:block;
  43.     font-weight:normal;
  44.     line-height:60px;
  45.     margin:0px;
  46.     padding:0px 25px;
  47.     text-align:center;
  48.     text-decoration:none;
  49. }
  50.  
  51. #barra .menu li a:hover, .menu ul li:hover a{
  52.     background: #2580a2 url(../images/barra/hover.gif) bottom center no-repeat;
  53.     color:#FFFFFF;
  54.     text-decoration:none;
  55. }
  56.  
  57. #barra .menu li ul{
  58.     background:#333333;
  59.     display:none;
  60.     height:auto;
  61.     padding:0px;
  62.     margin:0px;
  63.     border:0px;
  64.     position:absolute;
  65.     width:225px;
  66.     z-index:200;
  67. }
  68.  
  69. #barra .menu li:hover ul{
  70.     display:block;
  71. }
  72.  
  73. #barra .menu li li {
  74.     background:url(../images/barra/sub_sep.gif) bottom left no-repeat;
  75.     display:block;
  76.     float:none;
  77.     margin:0px;
  78.     padding:0px;
  79.     width:225px;
  80. }
  81.  
  82. #barra .menu li:hover li a{
  83.     background:none;
  84. }
  85.  
  86. #barra .menu li ul a{
  87.     display:block;
  88.     height:60px;
  89.     font-size:12px;
  90.     font-style:normal;
  91.     margin:0px;
  92.     padding:0px 10px 0px 15px;
  93.     text-align:left;
  94. }
  95.  
  96. #barra .menu li ul a:hover, .menu li ul li:hover a{
  97.     background:#2580a2 url(../images/barra/hover_sub.gif) center left no-repeat;
  98.     border:0px;
  99.     color:#ffffff;
  100.     text-decoration:none;
  101. }
  102.  
  103. #barra .menu p{
  104.     clear:left;
  105. }
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.

Última edición por MiLLeN; 03/01/2010 a las 15:09
  #6 (permalink)  
Antiguo 05/01/2010, 18:18
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
Respuesta: Centrar menu desplegable en div con float:left

Tanto pedir código, tanto pedir código... si ya sabia yo...
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #7 (permalink)  
Antiguo 06/01/2010, 03:10
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 5 meses
Puntos: 361
Respuesta: Centrar menu desplegable en div con float:left

Hola:

Cita:
Iniciado por MiLLeN Ver Mensaje
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.


Última edición por jomaruro; 06/01/2010 a las 03:45 Razón: Arrepentirme y añadir Solución
  #8 (permalink)  
Antiguo 09/01/2010, 16:31
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
Respuesta: Centrar menu desplegable en div con float:left

Cita:
Iniciado por jomaruro Ver Mensaje
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.
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #9 (permalink)  
Antiguo 10/01/2010, 02:22
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
Exclamación Respuesta: Centrar menu desplegable en div con float:left

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...
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.
  #10 (permalink)  
Antiguo 10/01/2010, 03:57
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 5 meses
Puntos: 361
Respuesta: Centrar menu desplegable en div con float:left

Hola:

Cita:
Iniciado por MiLLeN Ver Mensaje
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.


Última edición por jomaruro; 10/01/2010 a las 04:14
  #11 (permalink)  
Antiguo 10/01/2010, 07:00
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 16 años, 11 meses
Puntos: 5
Respuesta: Centrar menu desplegable en div con float:left

Cita:
Iniciado por jomaruro Ver Mensaje
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..
__________________
Aprender J2EE en www.programacionj2ee.com.
Mi framework PHP D Framework.

Última edición por MiLLeN; 10/01/2010 a las 07:05

Etiquetas: desplegable
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 17:28.