maquetar una lista

[pacorm15]

Hola, estoy haciendo una simple lista y quiero maquetarla pero hace lo que le da la gana. Haber la lista es la siguiente:

Código HTML:

<div id='menu_hor'>
      <ul>
            <li class='elem_menu_hor'>
                   <a title='Galeria' href='galeria'>Galeria</a>
            </li>
            <li class='elem_menu_hor'>
                    <a title='Contacto' href='contacto'>Contacto</a>
            </li>
      </ul>
</div> 

y le aplico las siguientes propiedades css:

Código:

#menu_hor ul,li{
    list-style-type: none;
}
#menu_hor{
    width: 100%;
    height: 35px;
    text-align: right;
    margin-top: 10px;
}
#menu_hor ul{
    margin:0px;
    padding: 0px;
    display: block;
    height: 35px;
}
#menu_hor li{
    display: inline;
    background-color: #58ACFA;
    font-size: 15px;
    padding:10px;
    height:15px;
}

el principal problema es que la div ocupa 35 px, la ul tambien pero los li solo tiene el height del texto que envuelve, y quiero que ocupe todo el height de la ul.

Gracias y saludos

[maycolalvarez]

usar listas con capas en linea a veces resulta un rollo, puedes usar la alternativa de capas flotantes, prueba y postea si te funciona y es lo que necesitas :

Código CSS:

#menu_hor ul,li{
    list-style-type: none;
}
#menu_hor{
    /*width: 100%;*//*no hace falta, se supone que las capas en bloque ocupan todo el ancho */
    height: 35px;
    /*text-align: right;*//* esto solo afecta al texto, no a las capas */
    margin-top: 10px;
    clear: both; /* con esto evito que no flote nada más */
}
#menu_hor ul{
    margin:0px;
    padding: 0px;
    display: block;
    height: 35px;
    float:right; /* con esto mi lista flotará a la derecha */    
}
#menu_hor li{
    /*display: inline;*/ /* para que si puedo usar float left */
    float:left;
    background-color: #58ACFA;
    font-size: 15px;
    padding:10px;
    height:15px;
}
 

el problema más recurrente resulta cuando la capa que contiene los floats (contenedor) no recupera el alto (height) de lo que contiene, esto se resuelve mediante la "limpieza de floats", suerte

[kseso?]

Lo más usual es que el tamaño venga determinado por los enlaces (a) declarados como elementos de bloque y con su padding correspondiente. Así toda la superficie de cada elemento de la lista (li) es sensible al recibir el foco del cursor.

Un ejemplo podría ser éste.
Es algo ya existente, por lo que hay propiedades para la estética que no vienen al caso. Sólo necesita limpiar un poco el css y adaptarlo a sus necesidades.

[jomaruro]

Hola:

¿Y donde tienes definidas las propiedades de la clase elem_menu_hor?

Saludos.

[Portgaz]

intenta metiendo los enlaces (que estan dentro de los li)
dentro de divs y con CSS dale ese alto de 15px que le das a los li, daselos a los divs que contienen estos enlaces.

Código HTML:

<li class='elem_menu_hor'>
                   <div id="tuid"><a title='Galeria' href='galeria'>Galeria</a></div>
            </li>
 

Aqui aplicas la altura a los LI

Código CSS:

#menu_hor li{
    display: inline;
    background-color: #58ACFA;
    font-size: 15px;
    padding:10px;
    height:15px;
}
 

pues en ves de declarar a los LI, declarale la altura a los DIVs

Código CSS:

div#tuid{
    display: inline;
    background-color: #58ACFA;
    font-size: 15px;
    padding:10px;
    height:15px;
}
 

[pacorm15]

Gracias a todos por contestar, probare vuestras soluciones, aunque mi solucion fue despues de la desesperacion utilizar div en vez de una lista, cada elemento del menu era una div y todas estaban flotadas!!

No es la solucion ideal, pero me resolvio el problema!!