Tema: Colocacion de un menu correctamente
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/07/2012, 08:51
Frannixo
 
Fecha de Ingreso: abril-2012
Mensajes: 87
Antigüedad: 12 años
Puntos: 1
Colocacion de un menu correctamente
Hola de nuevo, quiero saber como puedo colocar un menu de la siguiente forma[ Miren la imagen, esta retocada con photoshop]



Es que me sale siempre todo hacia abajo, aunque haga un arena y limite su altura no se muestra a los lados.

Aqui el CSS:

Código CSS: 
Ver original
  1. #main {
  2.  
  3.       -webkit-transition-property: -webkit-box-shadow, background;
  4.       -webkit-transition-duration: 0.25s;
  5.         padding: 6px;
  6.         border-bottom: 0px;
  7.         border-left: 0px;
  8.         border-right: 0px;
  9.         border-top: 1px solid #d9d9d9;
  10.         -moz-box-shadow: 0px 0px 2px #000;
  11.         -webkit-box-shadow: 0px 0px 2px #000;
  12.         -webkit-border-radius:15px;
  13.         margin-bottom: 10px;
  14.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#dedede));   
  15.         width: 990px;
  16.         height:auto;
  17. }
  18.  
  19. .text {
  20.     padding-left:15px;
  21.     padding-top:5px;
  22.     padding-bottom:5px;
  23. }
  24.  
  25. #menus {
  26.       -webkit-transition-property: -webkit-box-shadow, background;
  27.       -webkit-transition-duration: 0.25s;
  28.         padding: 6px;
  29.         border-bottom: 0px;
  30.         border-left: 0px;
  31.         border-right: 0px;
  32.         border-top: 1px solid #d9d9d9;
  33.         -moz-box-shadow: 0px 0px 2px #000;
  34.         -webkit-box-shadow: 0px 0px 2px #000;
  35.         -webkit-border-radius:15px;
  36.         margin-bottom: 10px;
  37.         background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#dedede));   
  38.         width: 150px;
  39.         height:auto;
  40.  
  41. }   
  42.  
  43. #menus .contentmenu {
  44.     padding: 2px 2px 2px 2px;
  45.     text-align:center;  
  46.     
  47. }
  48.  
  49. #contenedormenus {
  50.     height: 250px;
  51.     
  52. }

HTML:

Código HTML: 
Ver original
  1. <div id="main">
  2. <div class="text">
  3.  
  4. <div id="contenedormenus">
  5. <div id="menus">
  6. <div class="contentmenu">
  7. <a href="">
  8. <img src="../style/admin/images/icons/group.png" width="71" height="69" />
  9. <br /><b>Grupos de Usuarios</b>
  10. </a>
  11. </div>
  12. </div>
  13. <div id="menus">
  14. <div class="contentmenu">
  15. <a href="">
  16. <img src="../style/admin/images/icons/group.png" width="71" height="69" />
  17. <br /><b>Grupos de Usuarios</b>
  18. </a>
  19. </div>
  20. </div>
  21.  
  22.  
  23. </div>
  24. </div>
  25. </div>