Capas de cabecera y pie

falonpla · #1 (**permalink**) 31/01/2007, 08:17

Estoy haciendo una web con capas y quiero que el cuerpo de la web no sea liquido, que llene la pantalla para una resolucion 800*600 y que a resoluciones mayores se centre sin cambiar de tamaño. Pero la cabecera y el pie de la página quiero que ocupen siempre toda la pantalla.

Para ello las he sacado del div que envuelve a todas las capas, les asigno un width 100%, y en parte consigo lo que quiero, pero si hago la ventana del navegador tan pequeña que me tiene que salir la barra de scroll para ver todo el contenido, en principio la cabecera se redimensiona adecuadamente, pero al desplaza el scroll para ver el resto del contenido, la parte de la cabecera que corresponde al contenido que estaba oculto no aparece. Que propiedades tengo que darle para que se extienda hasta el final del contenido?

No se si me he explicado bien, soy un poco novato. Espero que podais ayudarme. Gracias.

MikiBroki · #2 (**permalink**) 31/01/2007, 08:29

Mira este hilo creo que te puede ayudar :

http://www.forosdelweb.com/f53/puede-esto-con-div-460805/

falonpla · #3 (**permalink**) 31/01/2007, 09:20

Gracias MikiBroki, ya había mirado ese post antes, pero no me soluciona mi problema. Con ese código, al hacer que el cuerpo lleve un scroll, si redimensionas la ventana y la haces muy pequeña la cabecera permanece completamente visible por que la ventana del naegador no lleva scroll, al llevarlo ya el cuerpo.

Pero en mi caso el cuerpo no lleva scroll, ya que a mi no me interesa que se vea siempre el pie de pagina, solo al final del cuerpo. Entonces al no tener ese scroll el cuerpo, sigo teniendo el mismo problema, ya que si por ejemplo pongo en el cuerpo una imagen de 500px y redimensiono la ventana para que ocupe 400 px, cuando uso el scroll del navegador para ver los 100 pixel de la imagen que estan ocultos, esa parte de la cabecera aparece en blanco.

MikiBroki · #4 (**permalink**) 31/01/2007, 11:11

Por lo que entiendo lo que planteas es que tu problema está en el ancho: tienes un div superior con la cabecera y el de abajo que sería el cuerpo. Entonces cuando reduces la ventana a lo ancho el div de la cabecera no te ocupa el mismo ancho que el del cuerpo, te refieres a esto ?

De todos modos, creo que será mejor que pongas el código para echarle un vistazo.

Salu2

falonpla · #5 (**permalink**) 31/01/2007, 16:48

Exactamente es eso, la cabecera no me ocupa el mismo ancho que el cuerpo cuando hago la ventana pequeña, de tal modo que sale el scroll.

Al final lo que he hecho es poner una imagen de fondo y que se repita a lo ancho, simulando una cabecera, pero me queda la duda de como se haría eso. Siento no pegar el codigo, pero es que simplemente estuve haciendo pruebas y al final no guardé nada. Gracias de todos modos.

MikiBroki · #6 (**permalink**) 31/01/2007, 17:14

El siguiente código soluciona tu problema. El inconveniente que no sé aún cómo solucionar ya que no se me había planteado, es que en Firefox al ancho del div cuerpo no se adapta al contenido, al contrario que sucede con FF... pero ya es muy tarde para darle vueltas a eso

Simplemente pones el div de cabecera y el de cuerpo dentro otro, al que le das un 'width:auto'

Código:

<html> 
	<body style="margin:0;">
		
		<div style="height:100%;width:auto;">
		
      <div style="height:10%;background-color:yellow;">
      	<span style="font-size:9px;">SUPERIOR</span>
      	<input type="text" value="arriba"/>
      </div>
			
      <div style="height:90%;background-color:blue;">
      		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
			</div>			
			
		</div>

						
		</body>
</html>

falonpla · #7 (**permalink**) 31/01/2007, 19:12

Eso ya lo probé, pero ocurre lo que tu comentas, que con el Firefox la capa no se extiende por todo el contenido. Además la mayoría de usuarios que visitan mi web usan Firefox.

A ver si alguien comenta la solución, ya que conseguí solucionar lo de la cabecera con una imagen de fondo en el body, pero esto no lo puedo hacer de nuevo para el pie de página.

Si quereis un ejemplo de lo quiero conseguir, es exactamente como la pagina Maestros del web, que de cualquier modo que se redimensione, la cabecera y pie de pagina donde van los enlaces, siempre ocupan toda la ventana, incluso el sector que queda oculto por el scroll.

Thanks.

MikiBroki · #8 (**permalink**) 01/02/2007, 02:38

¿No te ha ocurrido que pasas varias veces por delante de algo y no lo ves? pues eso me ha sucedido, había pensando que se solucionaba con 'overflow:auto' pero se me metió en la cabeza que con ello aparecerían las barras de scroll. Pero eso ocurre si has especificado un ancho para el div.

El siguiente código funciona:

Código:

<html> 
	<body style="margin:0;">
		
	  <div style="height:100%;border-color:red;border-style:solid;border-width:2px;">
		
          <div style="height:10%;background-color:yellow;">
            <span style="font-size:9px;">SUPERIOR</span>
            <input type="text" value="arriba"/>
          </div>
                
          <div style="height:90%;background-color:blue;overflow:auto;">
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          </div>

        </div>

						
	</body>

</html>

Salu2

falonpla · #9 (**permalink**) 01/02/2007, 07:50

Con lo que has puesto la cabecera rula perfecta, pero si le añado otra capa en el pie de página, con las mismas propiedades que has puesto tu para la cabecera me sigue saliendo el scroll en el cuerpo. Siento darte la vara, pero esto ya se está convirtiendo en algo personal, jajaj.

Por cierto, que antes dije que quería que funcionara como el pie de página de maestros del web, pues me desdigo. He ido a mirarlo y les ocurre el mismo error que yo quiero evitar. Probar a hacer la ventana muy pequeña, hasta que salga scroll en el navegador, y fijaros como el pie de página no se redibuja, y queda un espacio en blanco.

Ya se que es un error casi inapreciable, por que practicamente nadie navega con una ventana de ancho menor a 800 px, pero es mas que nada curiosidad por saber si eso puede evitarse.

Salu2.

MikiBroki · #10 (**permalink**) 01/02/2007, 08:11

Si pones un pie con mismas propiedades que la cabecera tendrías que cambiar el height del div central al 80%

falonpla · #11 (**permalink**) 01/02/2007, 10:33

Con ese codigo sigue saliendo scroll en el cuerpo cuando hago pequeña la ventana (scroll horizontal). Yo no quiero evitar que salga el scroll en el navegador, ni el horizontal ni el vertical.

El pie de pagina lo quiero al final del contenido, no quiero que se vea hasta el final del contenido. Lo que persigo es que si el visitante hace la ventana pequeña (horizontalmente hablando) y en ese momento se esta visualizando el pie de página, al hacer scroll para ver el resto de contenido, el pie de pagina no quede cortado. Al final lo he conseguido hacer insertando, un gif invisible del mismo color que el fondo del pie de pagina, que mida lo mismo que el cuerpo, para asegurar esa longitud al ancho del pie también.

De todos modos igual estoy preguntando por algo que ni siquiera se puede hacer, gracias de todos modos.

Salu2.

MikiBroki · #12 (**permalink**) 01/02/2007, 11:35

Seguramente habrá alguna buena forma de hacerlo, lo que los DIV son algo puñetero hasta que uno le coga el tranquillo y conozca bien las peculiaridades de cada navegador... yo estos días estoy también pegándome con ellos.