Foros del Web » Creando para Internet » CSS »

Capas de cabecera y pie

Estas en el tema de Capas de cabecera y pie en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/01/2007, 08:17
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Capas de cabecera y pie

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.
  #2 (permalink)  
Antiguo 31/01/2007, 08:29
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Capas de cabecera y pie

Mira este hilo creo que te puede ayudar :

http://www.forosdelweb.com/f53/puede-esto-con-div-460805/
  #3 (permalink)  
Antiguo 31/01/2007, 09:20
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Capas de cabecera y pie

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.
  #4 (permalink)  
Antiguo 31/01/2007, 11:11
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Capas de cabecera y pie

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
  #5 (permalink)  
Antiguo 31/01/2007, 16:48
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Capas de cabecera y pie

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.
  #6 (permalink)  
Antiguo 31/01/2007, 17:14
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Capas de cabecera y pie

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>
  #7 (permalink)  
Antiguo 31/01/2007, 19:12
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Capas de cabecera y pie

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.
  #8 (permalink)  
Antiguo 01/02/2007, 02:38
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Capas de cabecera y pie

¿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
  #9 (permalink)  
Antiguo 01/02/2007, 07:50
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Capas de cabecera y pie

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.
  #10 (permalink)  
Antiguo 01/02/2007, 08:11
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Capas de cabecera y pie

Si pones un pie con mismas propiedades que la cabecera tendrías que cambiar el height del div central al 80%
  #11 (permalink)  
Antiguo 01/02/2007, 10:33
 
Fecha de Ingreso: mayo-2006
Mensajes: 124
Antigüedad: 11 años, 6 meses
Puntos: 0
Re: Capas de cabecera y pie

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.
  #12 (permalink)  
Antiguo 01/02/2007, 11:35
 
Fecha de Ingreso: abril-2002
Mensajes: 1.013
Antigüedad: 15 años, 7 meses
Puntos: 8
Re: Capas de cabecera y pie

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.
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




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