Foros del Web » Creando para Internet » CSS »

Error con capas relativas

Estas en el tema de Error con capas relativas en el foro de CSS en Foros del Web. Tengo un error con capas relativas bastante extraño, respecto al posicionamiento del footer. Según este css (simplificado), y teniendo en cuenta que en el html ...
  #1 (permalink)  
Antiguo 15/10/2008, 07:11
Avatar de C_Cornell  
Fecha de Ingreso: agosto-2008
Ubicación: Santander
Mensajes: 62
Antigüedad: 9 años, 3 meses
Puntos: 0
Error con capas relativas

Tengo un error con capas relativas bastante extraño, respecto al posicionamiento del footer.

Según este css (simplificado), y teniendo en cuenta que en el html coloco estos elementos en el orden adecuado (cabecera, bloqueCentral, pie). Lo que cabría esperar es que el footer se colocara a continuacion del "bloqueCentral", sin embargo, se coloca debajo de la cabecera.

Código PHP:
.cabecera {
    
positionrelative;
    
width100%;
    
height15%;
}

.
bloqueCentral{
    
positionrelative;
    
width100%;
}

.
bloqueCentralIzq{
    
positionabsolute;
    
height:auto;
    
width20%;
    
left0%;
}

.
bloqueCentralDer{
    
positionabsolute;
    
height:auto;
    
width80%;
    
left20%;
}

.
pie{
    
position:relative;
    
width:100%;

He probado con alturas especificas el lugar de esos height:auto que veis arriba y el problema se mantiene.

Podría poner el footer con posicionamiento absolute pero como el bloque central tendrá una altura variable necesito hacerlo con posicionamiento relativo.

Bueno alguna idea de lo que pasa aquí? Gracias por la atención
  #2 (permalink)  
Antiguo 15/10/2008, 07:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Error con capas relativas

Prueba a poner en tu css (otros lo llaman '.clear')
Cita:
.corte {
clear:both;
y en tu html, justo antes del pie:
Cita:
<div class="corte"></div>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 15/10/2008, 09:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Error con capas relativas

Cita:
Iniciado por C_Cornell Ver Mensaje
Lo que cabría esperar es que el footer se colocara a continuacion del "bloqueCentral"
No, no es correcto. Si te fijas, tienes los dos bloques de dentro del central con posición absoluta:

.bloqueCentralIzq{
position: absolute;
height:auto;
width: 20%;
left: 0%;
}

.bloqueCentralDer{
position: absolute;
height:auto;
width: 80%;
left: 20%;
}

Lo que se traduce en que no ocupan espacio físico real, por lo que el pie sale donde debería, es decir, como si esos bloque no existieran, y por tanto, su contenedor tampoco.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 15/10/2008, 12:15
Avatar de C_Cornell  
Fecha de Ingreso: agosto-2008
Ubicación: Santander
Mensajes: 62
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error con capas relativas

Gracias a los 2 por responder. Conseguí arreglarlo.

Mikmoro gracias! Cambie el posicionamiento de las capas izquierda y derecha por dos capas flotantes. Que incluyen capas relative.

Bueno este es el css:

Código PHP:

<style>
#bloqueCentral{
    
width100%;
    
overflowhidden;
    
min-height:100%;
    
height:auto!important;
    
height:100%;
    
background-color#FFFF00;
    
positionrelative;
}

#bloqueCentralIzq{
    
width20%;
    
background-color#FFFFFF;
    
z-index5;
    
min-height:100%;
    
height:auto!important;
    
height:100%;
    
floatleft;
}

#bloqueCentralDer{
    
width80%;
    
background-color#FF0000;
    
z-index5;
    
min-height:100%;
    
height:auto!important;
    
height:100%;
    
floatright;
}

#pie{
    
width:100%;
    
height:3em;
    
background-color#666666;
    
clearboth;
}

.
cuadro1{
    
position:relative;
bordes,margenesetc...
}

.
cuadro2{
    
position:relative;
bordes,margenesetc...
}

</
style
Es importante que como la altura se ajusta desde las capas interiores hacia la externas siempre se visualizan los elementos da igual el volumen que tengan los contenidos y de esa manera puedo luego establecer que la capa "contenedor" tenga overflow:hidden; debido a este atributo, hidden, la altura "dinamica" de la capa contenedor es obligada a calcularse y la capa "pie" se coloca correctamente. Dicho sea de paso, nos ahorramos lo de usar elementos auxiliares con "clear:both".

El html:

<body>
<div id="contenedor">
<div id="cabecera"></div>

<div id="bloqueCentral">
<div id="bloqueCentralIzq">
<div class="cuadro1">Menus, opciones, etc...</div>
</div>

<div id="bloqueCentralDer">
<div class="cuadro2">Contenidos....</div>
</div>
</div>
</div>

<div id="pie"</div>

</body>
</html>

Venga un saludo chicos
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 18:36.