Colocacion de un menu correctamente

[Frannixo]

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:

#main {
 
      -webkit-transition-property: -webkit-box-shadow, background;
      -webkit-transition-duration: 0.25s;
        padding: 6px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        border-top: 1px solid #d9d9d9;
        -moz-box-shadow: 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 2px #000;
        -webkit-border-radius:15px;
        margin-bottom: 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#dedede));   
        width: 990px;
        height:auto;
}
 
.text {
    padding-left:15px;
    padding-top:5px;
    padding-bottom:5px;
}
 
#menus {
      -webkit-transition-property: -webkit-box-shadow, background;
      -webkit-transition-duration: 0.25s;
        padding: 6px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        border-top: 1px solid #d9d9d9;
        -moz-box-shadow: 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 2px #000;
        -webkit-border-radius:15px;
        margin-bottom: 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#dedede));   
        width: 150px;
        height:auto;
 
}   
 
#menus .contentmenu {
    padding: 2px 2px 2px 2px;
    text-align:center;  
    
}
 
#contenedormenus {
    height: 250px;
    
}
 

HTML:

Código HTML:

<div id="main">
<div class="text">
 
<div id="contenedormenus">
<div id="menus">
<div class="contentmenu">
<a href="">
<img src="../style/admin/images/icons/group.png" width="71" height="69" />
<br /><b>Grupos de Usuarios</b>
</a>
</div>
</div>
<div id="menus">
<div class="contentmenu">
<a href="">
<img src="../style/admin/images/icons/group.png" width="71" height="69" />
<br /><b>Grupos de Usuarios</b>
</a>
</div>
</div>
 
 
</div>
</div>
</div>
 

[kseso?]

¿Y no le sería más fácil estructurar mejor ese html?

Código HTML:

<ul id="id">
  <li><a.... </a></li>
  <li><a.... </a></li>
  <li><a.... </a></li>
</ul>
 

Y como la imagen es la misma y sólo ornamental, como fondo.
Una anchura a los li, una separación entre ellos, los a elementos de bloque con su paddin superior y una anchura a la lista (ul) para que sólo quepan 2 li por fila.

[Frannixo]

lo malo es que ya lo intente pero al darle un height especifico al ul, sigue estan por debajo.

[kseso?]

anchura, Frannixo, anchura

[Frannixo]

Para que anchura si no me vale para nada si lo que dices a width por mucho o poco que le de es igual.

[Frannixo]

Me quedaria asin

Código HTML:

<ul id="contenedormenus">
* <li id="menus"><a href="">
<img src="http://www.forosdelweb.com/f53/style/admin/images/icons/group.png" width="71" height="69" />
<b>Grupos de Usuarios</b>
</a></li>
<li id="menus"><a href="">
<img src="http://www.forosdelweb.com/f53/style/admin/images/icons/group.png" width="71" height="69" />
<b>Grupos de Usuarios</b>
</a></li>
<li id="menus"><a href="">
<img src="http://www.forosdelweb.com/f53/style/admin/images/icons/group.png" width="71" height="69" />
<b>Grupos de Usuarios</b>
</a></li>
</ul>
 

Código CSS:

#contenedormenus {
    width: 5px;
    height: 250px;
}
#menus {
      -webkit-transition-property: -webkit-box-shadow, background;
      -webkit-transition-duration: 0.25s;
        padding: 6px;
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
        border-top: 1px solid #d9d9d9;
        -moz-box-shadow: 0px 0px 2px #000;
        -webkit-box-shadow: 0px 0px 2px #000;
        -webkit-border-radius:15px;
        margin-bottom: 10px;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#dedede));
        width:150px;;
        height:auto;
        list-style:inside none;
}   
 
#menus .contentmenu {
    padding: 2px 2px 2px 2px;
    text-align:center;  
    
}
#menus img {
    padding-left:40px;
    
}
 

[Frannixo]

Ya hize un arreglo, lo meti en una tabla asin lo controlo mejor.

[xav_ogame]

Las tablas no suelen ser la mejor solución. Otra posible solución sería hacerlo con divs en lugar de tablas o li's.

Código HTML:

<div class="contentmenu">
<div class="gruposusuarios">
......
</div>
<div class="gruposusuarios">
......
</div>
<div class="gruposusuarios">
......
</div>
...
</div>
 

Código CSS:

.contentmenu {
width: 100%;
}
.gruposusuarios{
width: 50%;
float: left;
}
 

O las medidas que quieras, así se debería organizar en 2 columnas, y según el porcentaje en más o menos.

PD: Si quieres los grupos de usuarios como tienes en tu dibujo sería hacer a .contentmenu un width menor (tal vez un 30%) y float: left;

[C2am]

Me quedo con la solución de kseso?, ya que es la correcta. Las otras no son correctas semanticamente hablando.

Posible ayuda: http://www.librosweb.es/css/capitulo...vanzados2.html

Debes comprender que existen distintos tipos de elementos: en bloque y en linea, y a partir de allí ver cuales deberán ser las modificaciones a traves del css que se deben aplicar para que se comporten como uno necesita.

http://www.librosweb.es/css/capitulo...elementos.html

Y una vez comprendes esto no es para nada difícil llegar al resultado buscado:
http://jsfiddle.net/c2am/UzYZg/12/embedded/result/

Saludos