Foros del Web » Creando para Internet » CSS »

maquetar una lista

Estas en el tema de maquetar una lista en el foro de CSS en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 19/12/2010, 10:14
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
maquetar una lista

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
  #2 (permalink)  
Antiguo 19/12/2010, 14:32
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: maquetar una lista

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:
Ver original
  1. #menu_hor ul,li{
  2.     list-style-type: none;
  3. }
  4. #menu_hor{
  5.     /*width: 100%;*//*no hace falta, se supone que las capas en bloque ocupan todo el ancho */
  6.     height: 35px;
  7.     /*text-align: right;*//* esto solo afecta al texto, no a las capas */
  8.     margin-top: 10px;
  9.     clear: both; /* con esto evito que no flote nada más */
  10. }
  11. #menu_hor ul{
  12.     margin:0px;
  13.     padding: 0px;
  14.     display: block;
  15.     height: 35px;
  16.     float:right; /* con esto mi lista flotará a la derecha */    
  17. }
  18. #menu_hor li{
  19.     /*display: inline;*/ /* para que si puedo usar float left */
  20.     float:left;
  21.     background-color: #58ACFA;
  22.     font-size: 15px;
  23.     padding:10px;
  24.     height:15px;
  25. }
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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Última edición por maycolalvarez; 19/12/2010 a las 14:37
  #3 (permalink)  
Antiguo 19/12/2010, 14:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: maquetar una lista

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.
  #4 (permalink)  
Antiguo 19/12/2010, 16:25
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: maquetar una lista

Hola:

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

Saludos.

  #5 (permalink)  
Antiguo 19/12/2010, 17:58
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: maquetar una lista

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:
Ver original
  1. <li class='elem_menu_hor'>
  2.                    <div id="tuid"><a title='Galeria' href='galeria'>Galeria</a></div>
  3.             </li>

Aqui aplicas la altura a los LI
Código CSS:
Ver original
  1. #menu_hor li{
  2.     display: inline;
  3.     background-color: #58ACFA;
  4.     font-size: 15px;
  5.     padding:10px;
  6.     height:15px;
  7. }


pues en ves de declarar a los LI, declarale la altura a los DIVs
Código CSS:
Ver original
  1. div#tuid{
  2.     display: inline;
  3.     background-color: #58ACFA;
  4.     font-size: 15px;
  5.     padding:10px;
  6.     height:15px;
  7. }
  #6 (permalink)  
Antiguo 26/12/2010, 12:24
 
Fecha de Ingreso: septiembre-2009
Mensajes: 51
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: maquetar una lista

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!!

Etiquetas: lista, maquetar
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 12:06.