colocar capas por CSS ordenadas

[kristian159]

Hola a todos,

hace tiempo que tengo dudas con el tema de colocar capas con la posición de left, top, width... yo utilizo porcentajes porque pienso (aunque dudo..) que es mejor, porque vea quien lo vea se respetará, pero es verdad que tengo problemas con ellos por no saber utilizar bien algunas funciones...

en una web que quiero hacer ahora debo poner una cabecera, contenido y footer algo muy simple, pero dudo, en principio la cabecera tendrá el 25% y dentro de este 25% pondré un banner, una especie de slider (ya veré como..) y un menu doble si clico en una opción, es decir saldrá un menu normal y si doy a catalogo me saldrá otro menu igual debajo con otras opciones, eso tengo claro que es un if simple.

mi duda ahora es... donde va el contenido como lo expreso para que coja el espacio necesario en función del contenido y también saber si voy bien utilizando porcentajes o no...

en principio he puesto este código:

Código CSS:

#cuerpo{
position: absolute;
width:80%;
height: 50%;
left: 10%;
top: 30%;
background-color: white;
}
 

el height es que no se como hacerlo automático...

un saludo!! espero resolverlo, abrí un tema hace tiempo pero por problemas no pude seguir la duda y ahora prefiero abrir uno nuevo ya que es otra web diferente y el código subido no sirve de nada ya...

saludos y gracias de antemano

[Zeromm]

Creo que no te he entendido bien, pero para que un elemento tenga el alto dependiendo de su contenido solo tienes que meterle un height: auto (valor que ya trae por defecto.)

Los altos (height) en porcentajes solo funcionan si todos los elementos superiores tienen indicado un alto en porcentajes también, incluidos el html y el body. Dices que no sabes como hacerlo automatico. Por defecto todos los elementos traen un alto en auto, pero si les pones un alto en % ya no funciona como auto. Por lo tanto prueba a dejarlo en "auto" en lugar de "%"

Lo de los porcentajes.. si quieres que la web se adapte a todos los dispositivos, si, usa porcentajes. Si tu web va a tener unas medidas fijas y no va a cambiar nunca, puedes usar px.

[kristian159]

gracias por contestar...

la verdad me has ayudado bastante, queria todo fijo y que solo cambiase lo que es el centro, el contenido... luego he pensado que si el contenido es auto, es decir variable lo que venga debajo lo deberá ser o como lo hago para que siempre este debajo? voy a adjuntar aquí el código a ver si alguien ve un error garrafal...

y como se hace para que si modifico la ventana del navegador llegue a un limite que no siga estrechando la web para que no se vea mal.. eso me suena que se podía hacer pero nunca supe como ni encuentro la función..

código (un trozo, lo demás es casi un copia pega...) :

Código CSS:

#total{
 
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left:0px;
    top:0px;
}
 
#cabecera{
background-color: green;
position: absolute;
width:80%;
height:25%;
left: 10%;
top: 5%;
}
 
#banner {
position: absolute;
width:100%;
height:24%;
left: 0%;
top: 0%;
background-color: orange;
}
 
#menu{
background-color: e5e5e6;
position: absolute;
width: 100%;
height: 13%;
left: 0%;
top: 20%;
z-index:2;
padding: 0; 
 
}
 
#rotativo{
position: absolute;
width:100%;
height:55%;
left: 0%;
top: 32%;
background-color: yellow;
}
 

[pzin]

Tu problema es que usas posiciones absolutas para estructurar un sitio web, y eso es una chapuza muy dreamwevera.

[kristian159]

pues no utilizo el dreamwever...

que debería utilizar, ¿por qué no el absolute?

gracias por la ayuda pzin

[Zeromm]

Para que el ancho de un elemento no se reduzca más a partir de un ancho del navegador, tienes que ponerle "min-width: númeroquequieras;" Por ejemplo, si no quieres que tenga un ancho inferior a 300px, le pones: "min-width: 300px;"

[pzin]

Iniciado por kristian159

pues no utilizo el dreamwever...

que debería utilizar, ¿por qué no el absolute?

gracias por la ayuda pzin

Porque con la posición absoluta sacas al elemento fuera del flujo natural del HTML, luego no puede interactuar con los demás elementos, y eso para la estructuración es un caos infernal.

[kristian159]

gracias, lo de el limite va genial, en cuanto a la posición he quitado el absolute pero ahora omite mis left así que todo queda orientado a la izquierda, no se centra...

[Zeromm]

para centrar un elemento horizontalmente dentro de su "padre", le pones "margin: auto", pero ese elemento tiene que tener establecido un ancho y no estar posicionado como "absolute", ya que si no no te funcionará.

Por cierto, a los valores que sean "0", no hace falta que les pongas la unidad "px", "%", "em"... ya que además de que no es necesario aumentan el peso del css, y por consiguiente aumenta el peso de la web.

[kristian159]

gracias a todos, ya solo me falla una cosa (que verguenza y que pesado soy..) ahora s eme ha centrado sin el "absolute" y sin el "margin: auto" pero no me coge el valor del top para que no este pegado arriba el banner y tal...

saludos y gracias de nuevo

[kristian159]

SOLUCIONADO (editado)

disculpad