Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   DIVs Encabezado, Cuerpo y Pie (como si fueran frames) (http://www.forosdelweb.com/f53/divs-encabezado-cuerpo-pie-como-si-fueran-frames-378759/)

Scho 16/03/2006 04:26
DIVs Encabezado, Cuerpo y Pie (como si fueran frames)
 
Saludos!
Tengo una página a la que quisiera ponerle un "encabezado" que estuviese siempre visible en la parte de arriba, lo mismo con el "pie" en la parte de abajo y que fuese la capa del cuerpo la única que tuviese la barra de scroll. Hasta ahora tengo esto:
Parte HTML:
Código:
<div id="encabezado"></div>
<div id="cuerpo">AQUI IRIAN MUCHOS DATOS EN FILAS</div>
<div id="pie"></div>
Parte CSS:
Código:
#encabezado {
        background-color: Navy;
        width: 100%; height: 10px;
}

#cuerpo{
        background-color: #009900;
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
}

#pie {
        background-color: Gray;
        width: 100%; height: 10px;
}
Vale, el problema que me surge con esto es que como le doy a la capa del cuerpo un height del 100% y el encabezado y pie ya tienen 10px cada uno pues es como si se "desbordase" y me aparece el scroll de toda la página y además el de la capa cuerpo.
Me gustaría que la altura de esa capa se adecuase al tamaño de la ventana, por eso le doy un 100%, pero claro, tendría que ser un 100% de la altura de la ventana menos 20px (10 del encabezado + 10 del pie). No sé si me estoy explicando bien, o quizá la cosa no vaya por ahí y se pueda solucionar de otra manera.

Espero que alguien me pueda ayudar. Muchas gracias!

smokecitizen 16/03/2006 10:23
Intenta con esto, funciona incluso en IE, nada más que el scroll te lo visualiza de distinta forma a la que se visualiza en FF.. en IE da más la impresión de que son frames, o sea 3 documentos independientes, ya que el scroll se visualiza solo en el area del content, en FF da más la impresión de lo que es... DIVs footer y header con posición absoluta, y el scroll te lo visualiza a lo largo de todo tu documento (Prueba el código y verás a lo que me refiero)

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed header and footer</title>
<style type="text/css">
 body{
  margin:0;
  padding:header-<length> 0 footer-<length> 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:header-<length>;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:footer-<length>;
 }
 @media screen{
  body>div#header{
  position:fixed;
  }
  body>div#footer{
  position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header </div>
<div id="footer"> footer </div>
<div id="content"> content </div>

Scho 17/03/2006 05:20
Saludos y gracias por tu respuesta smokecitizen:
La he probado y hace bastante bien lo que buscaba, en IE hace exactamente lo que quería, el FireFox no tanto pero también me vale :)

Sin embargo me ha surgido un problema, cuando todos esos DIVS van dentro de un FORM no me funciona, es decir, tengo algo así:
Código:
<FORM>
<div id="encabezado"></div>
<div id="cuerpo"></div>
<div id="pie"></div>
</FORM>
Sabes como puede solucionarse para que funcione también con eso?

Saludos y gracias!

smokecitizen 17/03/2006 10:49
probé rapidamente el código, tal cual te lo puse y le puse los tags de form y no tuve problemas, no sé si el que estén posicionados absolutamente tanto el header y el footer cause problema, así como el overflow causen problemas, pero creo yo no tienen relación de alguna forma como para que te afecten.

Scho 17/03/2006 11:43
Saludos de nuevo!
Te pego lo que estoy probando, como verás la parte de CSS sólo cambia en que le he puesto 50px de alto a la cabecera y al pie.
La parte del HTML prácticamente sólo cambia en que le he metido varios párrafos al "content" para probar bien el scroll.
Te lo pongo con la etiqueta FORM, pruebalo y después quitaselo y verás como funciona, sin embargo con el FORM no.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type="text/css">
 body{
  margin:0;
  padding:50px 0 50px 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50px;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:50px;
 }
 @media screen{
  body>div#header{
  position:fixed;
  }
  body>div#footer{
  position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</STYLE>
</head>

<body>
<FORM>
<DIV id="header">HEADER</DIV>
<DIV id="content">
<p>1</p><p>2</p><p>3</p>
<p>4</p><p>5</p><p>6</p>
<p>7</p><p>8</p><p>9</p>
<p>10</p><p>11</p><p>12</p>
<p>13</p><p>14</p><p>15</p>
<p>16</p><p>17</p><p>18</p>
<p>19</p><p>20</p>
</DIV>
<DIV id="footer">FOOTER</DIV>
</FORM>
</body>
</html>
He pensado que podía ser cosa de mi navegador, pero es que me falla tanto en IE como en FireFox.

Saludos y gracias!

Jorolo 17/03/2006 12:46
Hola a todos, hola Scho.

en tus selectores hay multiples errores.

Por ejemplo:
* html body{
overflow:hidden;
}

No debe funcionar por que es una declaración falsa.



Esto es cierto, y además funciona:

html body{
overflow:hidden;
}

Pero es inutilmente redundante, queda mejor así:

body{
overflow:hidden;
}

Scho 17/03/2006 14:10
Saludos Jorolo!
Quizá eso también estuviese mal, pero sigue sin funcionar. De todas formas tal como estaba y quitando el <FORM> y </FORM> funciona bien, pero con ellos no hay forma.

Gracias por responder!

Jorolo 17/03/2006 17:24
Hola de nuevo

Cómo ya te dije tu código tiene múltiples fallos, el más grave el doctype a medias.

Prueba este código:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang='es'> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>página con cabecera y pie fijos</title>

<style type="text/css">
body { margin: 0; padding: 0; }

#cabeza { top: 0; left: 0; }
#Pie { bottom: 0; left: 0; }
#cabeza,
#Pie { position: fixed; background: silver; color: black;
          height: 5em;  width:100%;  }

#contenido {  background: olive; color: black;
                  padding:5em 0;  }
</style> </head>
<body>
<form action='post'>
 <div id="cabeza">cabeza</div>
  <div id="contenido">
  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p>
  <p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p>
  <p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  <hr>
  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p>
  <p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p>
  <p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  </div>
 <div id="Pie">Pie</div>
</form>
 </body> </html>
Espero que te sirva. Si esto no te funciona tienes un problema.

Jorolo 17/03/2006 18:49
Hola a todos.

El ejemplo anterior tiene la altura de la cabeza y en pie en 'em' se redimensiona al aumentar o disminuir el tamaño de la fuente.

Puede hacerse con porcentajes, entonces al redimensionar la ventana se redimensionan el pie y la cabeza.

Esto sería así:
Código HTML:
/* con porcentaje, height: 8%;*/
#cabeza,
#Pie { position: fixed;
        height: 8%;  width:100%;
        background: silver; color: black;}


/* con em, height: 4em; */       
#cabeza,
#Pie { position: fixed;
        height: 4em;  width:100%;
        background: silver; color: black;}

Scho 18/03/2006 05:16
Saludos de nuevo Jorolo, ante todo gracias por tu paciencia ;-)

He corregido lo del doctype y también he probado lo que has puesto, y sí, funciona, pero es que lo que quería hacer es que la cabecera y el pie estuviesen siempre visibles en la parte de arriba y de abajo de la página aunque se hiciese scroll, algo así como si fueran frames, pero con DIVs. Prueba el código que había puesto quitándole lo de <FORM> </FORM> y verás mejor a que me refiero, que creo que no me has entendido del todo / no he conseguido explicarme del todo bien.

Saludos :adios:

Jorolo 18/03/2006 06:34
Hola Scho.

Cita:
Iniciado por Jorolo
Si esto no te funciona tienes un problema.
En realidad tienes dos problemas.

1- tienes un problema
2- no eres consciente de que tienes un problema.

El código que mostré funciona estupendamente, el pie y la cabecera estan fijos, para eso es lo de 'position: fixed;'

Y por supuesto funciona tanto con div como con form.

Si tú lo has probado y no te ha funcionado correctamente es que lo has probado mal. ¿Como lo has probado? ¿Has tenido en cuenta la 1ª ley?

Por ejemplo:
http://www.forosdelweb.com/showthrea...68385&posted=1

Mi código a roylugones le funciona de maravilla, a kahlito no...

kahlito tiene un problema.
¿A tí tampoco? tienes un problema.

Scho 18/03/2006 10:18
Saludos Jorolo!
Gracias por tu ayuda y tomo buena nota de tu mensaje, pero también deberías tener en cuenta que muchos de los que entramos aquí tenemos conocimientos bastante escasos de diseño web y CSS y que cosas como el doctype y la codificación se escapan de lo que sabemos en este ámbito.

En mi caso estoy mucho más centrado en desarrollo software, y mis conocimientos en HTML y CSS no dan para mucho más que para posicionar unos cuantos DIVS y darles color y formato al texto que contengan cuando no me queda más remedio que hacer una aplicación web de 0 sin un diseño de partida. Claro que me gustaría saber más del tema, pero no se puede profundizar en todos los frentes y por ahora debo profundizar más en otras cosas que en ésta.

Gracias y saludos :adios:

Jorolo 18/03/2006 11:21
Hola Scho.

Por favor, no veas en mis palabras menosprecio. Soy demasiado duro expresandome, pero lo hago sin mala intención y con todo el respeto.

Si algo de mis comentarios te ha servido, me alego.

Si algo no te ha gustado, lo siento, ignoralo.

Atentamente.

Jorolo

Scho 18/03/2006 11:41
Tranquilo, en serio, no me ha sentado mal y sí que me ha servido.

Muchas gracias! Saludos :adios:

yercodl 10/04/2008 09:54
Re: DIVs Encabezado, Cuerpo y Pie (como si fueran frames)
 
Bueno, soy otro buscando solución al tema de fijar cabecera y pie de página siempre visible cuando se tiene en el centro un contenido de muchas lineas con scroll.
Cuando creí que ya lo tenía, y saltaba en un pie de puro júbilo, me encontré con el mismo problema de Scho. Que si está presente la etiqueta <form> todo se jode. Y lamentablemente, las master pages de Asp lo requieren para colocar el famoso control ScriptManager de Microsoft para los controles AJAX.

Si bien Jorolo presenta la solución incluyendo el tag <form>, y digo la solución porque en con los navegadores Opera y Firefox me funciona (otra vez saltaba en un pie), pero con Internet Explorer, en cambio, no funciona. Cabecera y pie desaparecen con el scroll, como si fuesen un párrafo más del contenido. Quizá ése sea el problema de que Jorolo lo considere solución y a Scho no le funcione.

Lamentablemente, el cliente me obliga a realizar la aplicación web para Internet Explorer usando Asp sobre IIS. Ni Linux, ni Apache, ni Firefox son alternativas para mí.

Alguien dio en el clavo ya?

PD: Ojalá algún día los browsers se pongan de acuerdo en no "interpretar" el código, sino "obedecerlo".

Saludos, y seguiré buscando.

Gracias a Jorolo por su interés en cooperar.

yercodl 10/04/2008 14:05
Solución: DIVs Encabezado, Cuerpo y Pie (como si fueran frames)
 
Está aquí:

http://www.cssplay.co.uk/layouts/basics2.html

Funciona en Internet Explorer, Opera, y Firefox.

Agregué las etiquetas <form> envolviendo al <body> y su funcionamiento en Internet Explorer es Idéntico, y algunas cosillas varían en los otros, pero se ajustan fácilmente, habrá que elegir browser y setear así el CSS, salvo que se ponga código para que setee detectando el browser.

Basicamente hay que jugar con:

overflow, padding, z-index, position, height, display.

Se crean tres <div> un header, un content, y un footer.
Se trata de dejar el Content ocupando el 100% del height del <body>, que es el 100% del <html>, que es el 100%.
El header debe quedar position=absolute y pegado al top (=0)
El footer idem, pero pegado al bottom (=0)
Header y footer deben quedar sobre el content, haciendo uso de la propiedad z-index, mayor que la del content.
Como el content está detrás, se le da el padding top y bottom del ancho del header y fotter, para que el contenido no quede detrás, invisible.
Con el overflow=hidden, se hace invisible las scrollbars, que de otro modo hacen comportarse todo mal.

Saludos.

JavierB 11/04/2008 09:28
Re: DIVs Encabezado, Cuerpo y Pie (como si fueran frames)
 
El mensaje original es de hace más de 2 años. Por favor, no reviváis temas tan antiguos.

Saludos, :adios:


La zona horaria es GMT -6. Ahora son las 10:18.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.