Tema: Centrar menu desplegable en div con float:left
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 03/01/2010, 15:02
MiLLeN
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 17 años
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. <body>
  2.  
  3. <div id="contenedor">
  4. <div id="cabecera"></div>
  5. <div id="barra">
  6.             <div class="moduletable">
  7.                     <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>
  8.     
  9.  
  10. </div>
  11. <div id="izquierda">
  12.             <div class="moduletable_menu">
  13.                     <h3>Menú principal</h3>
  14.                     <ul class="menu"><li id="current" class="active item1"><a href="http://localhost/elprogramador/"><span>Portada</span></a></li></ul>     </div>
  15.     
  16. </div>
  17. <div id="contenido">
  18.     <div class="componentheading">
  19.     Bienvenidos a la portada</div>
  20.  
  21. <table class="blog" cellpadding="0" cellspacing="0">
  22. <tr>
  23.     <td valign="top">
  24.                 </td>
  25. </tr>
  26.  
  27.  
  28. </table>
  29.  
  30. </div>
  31. </div>
  32. </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