Maquetar una web con DIV como si fueran frames

cmarrero · #1 (**permalink**) 25/09/2008, 05:47

Hola, hace bastante que estoy en el foro y por suerte siempre me han dado soluciones a mis problemas... he aqui otro problema que no le encuentro la vuelta...

Tengo la siguiente pagina hecha con FRAMES uno superior, uno central y otro inferior...

http://www.makers-sa.com.ar/makers_s...dex_seguro.php

Ese link veran que tengo un menu superior, la informacion en el frame central y uno inferior que sera utilizado para un calendario...

El tema es que cuando intente hacerlo con DIVS ya que (Estoy de acuerdo con que LOS FRAMES SON UN ASCO) no logre dar con lo mismo...

POr que???...

Bien mas que nada el problema son el frame central y el frame inferior o sea el pie de pagina, este pie de pagina se tiene que mostrar siempre, sin importar cuanto contenido tenga el fram central y sin importar la resolucion del usuario.

Obviamente el frame central le pondria overflow para que tenga scroll, pero asi todo que medida en height tendria que tener, para que se me acomode correctamente al borde superior del div del pie de pagina...

Tambien se que el div de pie de pagina tendria que tener bottom = 0px; para que se quede en el fondo, pero el problema sigue siendo el la medida que le tengo que color al frame central, entonces...

ALGUNA SUGUERENCIA PARA QUE ESTO SALGA TAL CUAL EL LINK QUE HE COLOCADO...

GRACIAS...

shurshok · #2 (**permalink**) 25/09/2008, 09:06

yo creo que vas a tener que poner el div de debajo en position:fixed, para que no se mueva de abajo, y que el contenido del medio se mueva y sin importar lo tanto que se mueva el pie de pagina siempre va a estar abajo, puedes hacerlo asi en css:

#cabecera {
lo que sea
}

#medio {
height:justo debajo de la cabecera;
widht:100%;
height: lo que necesites para que entre todo;
overflow:auto;
}

#pie de pagina{
position:fixed;
top:lo que necesites para que este debajo(es mas facil usar margenes, o bottom como dijiste)
}

espero que te sirva.

cmarrero · #3 (**permalink**) 25/09/2008, 09:11

claro, precisamente el problema es el height del central, ya que deve ser relativo para que siempre y sin importar el tamaño del navegador este pegado arriba del footer y debajo de la cabecera..

Lo intente asi, ahora mi problema es que el overflow sobre el content no me funciona....

Código PHP:

  @charset "utf-8";

/* CSS Document */

html, body {

margin: 0;

padding: 0;

height: 100%;

overflow:hidden;

}

#container-page {

width: 100%;

background: #DDD;

position: relative;

min-height: 100%;

height: auto !important;

height: 100%;

}

#container-header {

width: 100%;

background: #CCC;

position: absolute;

top:0 !important;

top: -1px;

height:130px;

}

#container-content {

padding-top: 130px;

padding-bottom: 40px;

overflow: scroll;

}

#container-foot {

width: 100%;

background: #CCC;

position: absolute;

bottom: 0 !important;

bottom: -1px;

height: 40px;

}

Y mis divs en index.html es asi

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>MAKERS - ADMINISTRACION</title>

<link href="css/central.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>

<div id="container-page">

    <div id="container-header"></div>

    <div id="container-content">Content</div>

    <div id="container-foot">Foot</div>

</div>

 
</body>

</html>

cmarrero · #4 (**permalink**) 25/09/2008, 09:22

creo que el problema es el height del div content... al no colocarle cuanto mide no me hace el overflow.... entonces... como ponerle cuanto mide y a su vez que se coloque debago del pie y encima del footer todo el tiempo....

Ayuda pliss

shurshok · #5 (**permalink**) 25/09/2008, 09:24

yo lo haria asi:

pondria el de cabecera con una alto fijo, y e3l del medio con position:absolute, con un pixel mas, asi:

#top{
height:130px;
}

#medio{
position:absolute;
top:131px;
}

asi creo que sin importar la resolucion, no se va a mover del lugar.

shurshok · #6 (**permalink**) 25/09/2008, 09:25

lo que tendrias que hacer no es ponerle un tamaño al del medio y ponerle scroll, sino ocultarlo debajo del pie de pagina, y que se mueva la web, no el div.

cmarrero · #7 (**permalink**) 25/09/2008, 09:35

Cita:

Iniciado por shurshok

lo que tendrias que hacer no es ponerle un tamaño al del medio y ponerle scroll, sino ocultarlo debajo del pie de pagina, y que se mueva la web, no el div.

El problema de esto es que me taparia el contenido, he visto soluciones asi, pero el problema es que me taparia el contenido.. o sea la cabecera y el pie de pagina me taparian al div central...

Intente con la primera posibilidad que me diste y no funciona.....

A ver... la idea es que todo el contenido se meta en central, y enc aso de que sobre pase los limites height del central, me aparezca el scroll en el mismo. tal cual como lo hacen los frames...

Pense que seria mas sencillo hacerlo, pero me estoy encontrando, que en realidad es mas complicado de lo que parece....

Help me

shurshok · #8 (**permalink**) 25/09/2008, 09:46

mira te envio un mp, con mi msn, creo que es mas facil explicartelo ahi.

Mikmoro · #9 (**permalink**) 25/09/2008, 10:44

Para firefox y el resto es facilito, pero el puñetero IE6...

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MAKERS - ADMINISTRACION</title>
<style media="screen">
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow:hidden;
}
#container-page {
width: 100%;
height: 100%;
background: #DDD;
position: relative;
}
#container-header {
width: 100%;
background: #CCC;
position: absolute;
top:0;
height:130px;
}
#container-content {
width: 100%;
overflow: auto;
position: absolute;
top: 130px;
bottom: 40px;
}
#container-foot {
width: 100%;
background: #CCC;
position: absolute;
bottom: 0;
height: 40px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-header"></div>
<div id="container-content">
</div>
<div id="container-foot">Foot</div>
</div>

</body>
</html>

cmarrero · #10 (**permalink**) 25/09/2008, 13:23

Cita:

Iniciado por Mikmoro

Para firefox y el resto es facilito, pero el puñetero IE6...

Muy bueno... excelente..... te agradezco un monton...

Me estaba ropiendo la cabeza para poder solucionar hacer esto...

Gracias por el aporte...

EDITADO: LO ACABO DE PROBAR Y EN FIREFOX FUNCIONA PERFECTO, PERO OBVIAMENTE EN INTERNET EXPLORER NO FUNCIONA....

cmarrero · #11 (**permalink**) 25/09/2008, 13:47

Alguien sabe que le agrego o que le saco, al CSS de arriba para que funcione en IE...

Gracias

Mikmoro · #12 (**permalink**) 25/09/2008, 15:35

Cita:

Iniciado por cmarrero

LO ACABO DE PROBAR Y EN FIREFOX FUNCIONA PERFECTO, PERO OBVIAMENTE EN INTERNET EXPLORER NO FUNCIONA....

Eso ya te lo había dicho yo. La cosa es que no se trata de poner o quitar una cosa, sino de intentar conseguirlo con otro diseño, porque la técnica usada, en IE no funciona ni de lejos. A ver si se me ocurre algo. Si eso, te cuento, pero lo veo dificilillo.

cmarrero · #13 (**permalink**) 26/09/2008, 04:46

Me fije y en internet explorer 7 o superior funciona perfecto... pero claro, aquellos que tengan una version anterior o no hayan querido actualizarce, pues no veran el contenido...

La verdad, que raro, que algo tan sencillo sea tan complicado de conseguir...

Gracias por responder...