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: 22 años, 11 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-image: url(images/menusup.jpg);
    background-repeat:  repeat-x;
}
#pie{
    height:90px;
    width:100%;
    position:absolute;
    left:0px;
    bottom:0px;
    background-image: url(images/inferior.jpg);
    background-repeat:   repeat-x;
}
#contenido{
    padding-top:150px;
    padding-bottom:90px;
    width: 750px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

#izq {
    width: 200px;
    background-color:#FFFFCC;
    float: left;
}

#der {
    /*float: left;*/
    width: 540px;
    background-color:#CC9933;
    height: 1% /* Holly hack for Peekaboo Bug */;
    padding-bottom: 30px;
    padding-left: 0px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    float: left;
}
#menusup {
    padding-top: 20px;
    margin:0 auto;
    width:750px;
}
#foot{
    width:750px;
    height:50px;
    padding-top:10px;
    padding-bottom:30px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
</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: 17 años, 1 mes
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: 22 años, 11 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;
    width: 750px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

#izq {
    width: 200px;
    background-color:#FFFFCC;
    float: left;
}

#der {
    /*float: left;*/
    width: 540px;
    background-color:#CC9933;
    height: 1% /* Holly hack for Peekaboo Bug */;
    padding-bottom: 30px;
    padding-left: 0px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    float: left;
}
#menusup {
    padding-top: 20px;
    margin:0 auto;
    width:750px;
}
#foot{
    width:750px;
    height:50px;
    padding-top:10px;
    padding-bottom:30px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
</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: 17 años, 1 mes
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:19.