image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

posicionamiento listas con css

Volver al foro | Responder | Añadir nuevo tema


De: David
Fecha: 13/07/2006
Mensaje:

Tengo un problemilla...
Debo posicionar una lista con css. Tengo una div con una imagen de fondo ( cabecera de la web ) y otra div dentro donde va una lista q hará de menú. Es horizontal. Al bajarla mediante margin-top me baja tb la cabecera y no puedo posicionarla más a bajo.
Q hago!!!
Muchas gracias x adelantado


Quizás le interese
De: ZeroKilled
Util para: 4 personas

Fecha: 14/07/2006
Mensaje:

supongo lo que quieres hacer es pocisionar la lista en la parte inferior del encabezado pero que tambien quede sobre el fondo del encabezado. Ahora bien, la respuestas pueden ser variadas segun tu contenido. Mi pregunta es, ademas de la lista y la imagen de fondo, habra otro contenido dentro del encabezado, tal como una imagen, un titulo?

Si el encabezado solo tendra la lista, mi solucion seria utilizar la etiqueta <ul> como encabezado:

<ul><li>...</li>
<li>...</li>
<li>...</li></ul>
<style>
ul{
padding-top:100px;
padding-bottom:5px;
margin:0;
background:url('image.gif') #ABCDEF;
list-style:none;
text-align:center;
}
li{
display:inline;
padding:0 10px;
}
</style>

el punto clave fue utilizar el padding-top para añadir espacio en el area superior manteniendo el contenido con el fondo. si es el caso de que el encabezado tiene otro contenido adicional a la lista, encerraria todo dentro de un div:

<div class='header'>
<img src='' />
<ul><li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<style>
div.header{
background:url('image.gif') #CFC;
margin:0;
padding:0;
}

ul{
list-style:none;
text-align:right;
margin-right:5px;
}

li{
display:inline;
padding:0 5px;
}
</style>

en este ejemplo, fijese que el div header no tiene asignado un alto (height) ya que esto lo hara automaticamente de acuerdo al contenido. por lo cual, dentro del header pueder ir cualquier contenido, ya sea imagen o encabezados <h1>...<h6>, lo que se te ocurra.



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.