Foros del Web » Creando para Internet » CSS »

problema con posicionamiento de capas ie y firefox

Estas en el tema de problema con posicionamiento de capas ie y firefox en el foro de CSS en Foros del Web. Hola buenas, tengo un problema con este código que me está volviendo ya un poco loco, lo he repetido 4 veces, Código PHP: < html ...
  #1 (permalink)  
Antiguo 21/02/2008, 02:41
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
problema con posicionamiento de capas ie y firefox

Hola buenas, tengo un problema con este código que me está volviendo ya un poco loco, lo he repetido 4 veces,

Código PHP:
<html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
title>Prueba</title>
<
style>
html,body{
    
height:100%;
    
margin:0px;
    
padding:0px;
}
#contenedor{
    
min-height:100%;
    
position:relative;
    
margin:0px auto;
}
html #contenedor{
    
height:100%;
}
#cabecera{
    
height:141px;
    
width:100%;
    
position:absolute;
    
left:0px;
    
top:0px;
    
background-imageurl(images/menusup.jpg);
    
background-repeat:  repeat-x;
}
#pie{
    
height:90px;
    
width:100%;
    
position:absolute;
    
left:0px;
    
bottom:0px;
    
background-imageurl(images/inferior.jpg);
    
background-repeat:   repeat-x;
}
#contenido{
    
padding-top:150px;
    
padding-bottom:90px;
    
width750px;
    
margin-top0px;
    
margin-rightauto;
    
margin-bottom0px;
    
margin-leftauto;
}

#izq {
    
width200px;
    
background-color:#FFFFCC;
    
floatleft;
}

#der {
    /*float: left;*/
    
width540px;
    
background-color:#CC9933;
    
height1/* Holly hack for Peekaboo Bug */;
    
padding-bottom30px;
    
padding-left0px;
    
margin-top0;
    
margin-right0;
    
margin-bottom0;
    
margin-left0;
    
floatleft;
}
#menusup {
    
padding-top20px;
    
margin:0 auto;
    
width:750px;
}
#foot{
    
width:750px;
    
height:50px;
    
padding-top:10px;
    
padding-bottom:30px;
    
margin-top0;
    
margin-rightauto;
    
margin-bottom0;
    
margin-leftauto;
}
</
style>
</
head>

<
body>
<
div id="contenedor">
    <
div id="cabecera"><div id="menusup">Aqui el menú</div></div>
    <
div id="contenido">
    
     <
div id="izq">
        
1contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenidoIzq<br>
        </
div>
        
        <
div id="der">
        
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido5<br>
    </
div>
    
    
    </
div>
    <
div id="pie"><div id="foot">pie</div></div>
</
div>
</
body>
</
html
El diseño es el siguiente, la cabecera y el pie están al 100% de alto, y depende del contenido de la página estos div subiran o bajaran pero siempre la cabecera quedará en lo alto de la página el el pie en la parte baja.
Las capas foot, contenido y menusup deben estar centradas y con un tamaño de 750px.
No se la verdad donde estoy metiendo la pata, pero ya no se por donde seguir, alguien podría ayudarme?

Un saludo
__________________
asp, php, .net, adaptandose a las necesidades
  #2 (permalink)  
Antiguo 21/02/2008, 04:40
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema con posicionamiento de capas ie y firefox

y el problema cual es que nos e centra nada? ponle un margin: auto y listo.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 21/02/2008, 05:34
 
Fecha de Ingreso: febrero-2002
Ubicación: Navarra
Mensajes: 701
Antigüedad: 15 años, 10 meses
Puntos: 2
Re: problema con posicionamiento de capas ie y firefox

Hola buenas lo que comentas ya he puesto, he cambiado las imágenes por colores para que se vea mejor.

Código PHP:
<html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
title>Prueba</title>
<
style>
html,body{
    
height:100%;
    
margin:0px;
    
padding:0px;
}
#contenedor{
    
min-height:100%;
    
position:relative;
    
margin:0px auto;
}
html #contenedor{
    
height:100%;
}
#cabecera{
    
height:141px;
    
width:100%;
    
position:absolute;
    
left:0px;
    
top:0px;
    
background-color:#F99FCC;
    
background-repeat:  repeat-x;
}
#pie{
    
height:90px;
    
width:100%;
    
position:absolute;
    
left:0px;
    
bottom:0px;
    
background-color:#A9F4CC;
    
background-repeat:   repeat-x;
}
#contenido{
    
padding-top:150px;
    
padding-bottom:90px;
    
width750px;
    
margin-top0px;
    
margin-rightauto;
    
margin-bottom0px;
    
margin-leftauto;
}

#izq {
    
width200px;
    
background-color:#FFFFCC;
    
floatleft;
}

#der {
    /*float: left;*/
    
width540px;
    
background-color:#CC9933;
    
height1/* Holly hack for Peekaboo Bug */;
    
padding-bottom30px;
    
padding-left0px;
    
margin-top0;
    
margin-right0;
    
margin-bottom0;
    
margin-left0;
    
floatleft;
}
#menusup {
    
padding-top20px;
    
margin:0 auto;
    
width:750px;
}
#foot{
    
width:750px;
    
height:50px;
    
padding-top:10px;
    
padding-bottom:30px;
    
margin-top0;
    
margin-rightauto;
    
margin-bottom0;
    
margin-leftauto;
}
</
style>
</
head>

<
body>
<
div id="contenedor">
    <
div id="cabecera"><div id="menusup">Aqui el menú</div></div>
    <
div id="contenido">
    
     <
div id="izq">
        
1contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenidoIzq<br>
        </
div>
        
        <
div id="der">
        
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido<br>
    
contenido contenido contenido5<br>
    </
div>
    
    
    </
div>
    <
div id="pie"><div id="foot">pie</div></div>
</
div>
</
body>
</
html
El problema es que en ie6, todo aparece bien, pero no se centra aun teneindo el margin auto, pero el pie y la cabecera están donde deben, en cambio en firefox, si se centrar, pero el pie no aparece en la parte inferior.

Un saludo
__________________
asp, php, .net, adaptandose a las necesidades
  #4 (permalink)  
Antiguo 21/02/2008, 06:40
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: problema con posicionamiento de capas ie y firefox

* html #contenedor{
height:100%;

que función hace esto? ya que el #contenedor lo tienes definido antes.
__________________
No diseñes usando tablas.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:55.