Foros del Web » Creando para Internet » CSS »

Hoja con una cabecera tras columnas y un pie

Estas en el tema de Hoja con una cabecera tras columnas y un pie en el foro de CSS en Foros del Web. Hola, Tengo un problema con mi web, el problema es que estoy haciendo una web con: Un header Luego un cuerpo que dentro tiene tres ...
  #1 (permalink)  
Antiguo 20/01/2009, 07:03
 
Fecha de Ingreso: abril-2007
Mensajes: 89
Antigüedad: 10 años, 7 meses
Puntos: 2
Hoja con una cabecera tras columnas y un pie

Hola,

Tengo un problema con mi web, el problema es que estoy haciendo una web con:

Un header

Luego un cuerpo que dentro tiene tres columnas, todas ellas float left.

Y un footer o pie despues del Cuerpo.


El problemilla lo tengo en el Cuerpo con las tres columnas, quiero que cuando una de las columnas se haga más alta por que tengo un spry o por que se añaden datos de la base de datos , empuje al cuerpo para que se haga más grande y no lo sobrepase por encima.



Muchas Gracias

Un Saludo
  #2 (permalink)  
Antiguo 20/01/2009, 07:12
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Hoja con una cabecera tras columnas y un pie

al pie ponele clear:both;
con eso se soluciona todo :D
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 20/01/2009, 15:32
 
Fecha de Ingreso: abril-2007
Mensajes: 89
Antigüedad: 10 años, 7 meses
Puntos: 2
Respuesta: Hoja con una cabecera tras columnas y un pie

Hola de nuevo,

He podido solucionar lo del footer con tu contestación,gracias

El otro problema que tengo es que la columna vertical izquierda que debería estar dentro del contenedor azul si se hace más grande se sale y sobrepasa al contenedor azul invadiendo el footer gris.

Cómo puedo solucionar esto?



Muchas Gracias
  #4 (permalink)  
Antiguo 21/01/2009, 01:29
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: Hoja con una cabecera tras columnas y un pie

Hola falmar, mira a ver si es esto lo que necesitas.

NOTA: Facilitado por Mikmoro.

Saludos.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #5 (permalink)  
Antiguo 21/01/2009, 02:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoja con una cabecera tras columnas y un pie

La única manera de saber qué produce eso es si muestras tu código.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 21/01/2009, 04:12
 
Fecha de Ingreso: abril-2007
Mensajes: 89
Antigüedad: 10 años, 7 meses
Puntos: 2
Respuesta: Hoja con una cabecera tras columnas y un pie

Gracias por vuestra atención, la verdad es que no ecuentro el problema.

EL CODIGO DE LA HOJA DE ESTILOS ES:

Tengo una contenedor en el que inserto toda la pagina:
Contenedor :
#contenedor {
position:relative;
width:985px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
background-color: #0C9;
}
Dentro de ese contenedor tengo una Header:
Header:
#header{
width:985px;
height:30px;
background-color:#FFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
Debajo del Header he colocado un Container para meter dentro las tres columnas:
Container: #container{
width:auto;
height:1300px;
margin: 0px;
background-color: #3CF;
position: relative;
}
Dentro del Cointainer hay tres columnas, izquierda, centro e izquierda
Izquierda: #izquierda{
width:232px;
height:600px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 8px;
float:left;
background-color: #FA0419;
position: relative;
}
Centro es Igual a la izquierda y derecha es igual a las dos anteriores (lo único que cambia son los anchos)

Y después un footer
Footer: #footer {
width:100%;
height:100px;
float: left;
clear: both;
background-color: #CCC;

}



Y EL CODIGO HTML ES:


<body>
<div id="contenedor">
<div id="header">
</div>
<div id="conteiner">
<div id="izquierda">IZQUIERDA</div>
<div id="centro"> <p>CENTRO</p> </div>
<div id="derecha">DERECHA</div>
</div> // final del conteiner
<div id="footer">FOOTER</div>
</div>// final del contenedor
</body>


Si os quereis hacer una imagen visual las fotos de arriba lo representan

gracias
  #7 (permalink)  
Antiguo 21/01/2009, 05:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoja con una cabecera tras columnas y un pie

1.- No veo tu doctype.
2.- Es bastante poco probable que la CSS que muestras genere el gráfico de arriba (faltan cosas)

Si quieres que yo intente ayudarte, pon el HTML y CSS completo que estás usando, que te cuesta mucho menos esfuerzo que lo que has puesto y es más claro de entender.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 21/01/2009, 09:25
 
Fecha de Ingreso: abril-2007
Mensajes: 89
Antigüedad: 10 años, 7 meses
Puntos: 2
Respuesta: Hoja con una cabecera tras columnas y un pie

Pues tienes toda la razón, te pongo el codigo:

CSS:


H1 {
FONT-SIZE: 20px; MARGIN: 0px; COLOR: #fff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-ALIGN: left
}
P {
PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 2px; COLOR: #586885; PADDING-TOP: 5px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
BODY {
LINE-HEIGHT: 12px; BACKGROUND-COLOR: #014075; TEXT-ALIGN: justify
}
#container {
MARGIN: 0px auto; WIDTH: 985px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #0c9
}
#header {
MARGIN: 0px 0px 10px; WIDTH: 985px; HEIGHT: 30px; BACKGROUND-COLOR: #fff
}
#header-1 {
FLOAT: left; WIDTH: 237px; HEIGHT: 30px
}
#header-2 {
FLOAT: left; WIDTH: 500px; HEIGHT: 30px
}
#header-3 {
FLOAT: left; WIDTH: 247px; HEIGHT: 30px
}
#header2 {
MARGIN: 8px 0px 0px 8px; WIDTH: 970px; HEIGHT: 140px
}
#header3 {
MARGIN: 0px 0px 0px 8px; WIDTH: 970px; HEIGHT: 108px
}
#conttex {
MARGIN: 0px;
WIDTH: auto;
POSITION: relative;
HEIGHT: 1000px;
BACKGROUND-COLOR: #3cf
}
#izquierda {
FLOAT: left; MARGIN: 0px 0px 0px 8px; WIDTH: 232px; POSITION: relative; HEIGHT: 600px; BACKGROUND-COLOR: #fa0419
}
#izquierda1 {
FONT-SIZE: 10px; FLOAT: left; MARGIN: 0px; WIDTH: 232px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #f4fbfd
}
#izquierda2 {
BACKGROUND-POSITION: 50% top;
Z-INDEX: 1;
FLOAT: left;
MARGIN: 0px;
WIDTH: 232px;
BACKGROUND-REPEAT: no-repeat;
POSITION: relative;
HEIGHT: 1300px;
BACKGROUND-COLOR: #fa0419
}
#centro {
PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 535px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #f9f
}
#centro1 {
FONT-SIZE: 10px; FLOAT: left; MARGIN: 0px; WIDTH: 100%; HEIGHT: 162px
}
.centro2 {
PADDING-RIGHT: 5px; FONT-SIZE: 10px; FLOAT: left; MARGIN: 8px 0px 0px; WIDTH: 525px; HEIGHT: 35px
}
.centro3 {
PADDING-RIGHT: 5px; FONT-SIZE: 10px; FLOAT: left; WIDTH: 525px; HEIGHT: 100%; BACKGROUND-COLOR: #ffdb9c
}
.centro4 {
PADDING-RIGHT: 5px; FONT-SIZE: 10px; FLOAT: left; MARGIN: 15px 0px 0px; WIDTH: 525px; HEIGHT: 35px; BACKGROUND-COLOR: #099
}
#container #conttex #centro .centro4 H1 {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 1.75em; COLOR: #fff; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Geneva, sans-serif
}
.centro-img {
WIDTH: 50px; HEIGHT: 50px
}
.floatderecha {
FLOAT: right; MARGIN-LEFT: 7px
}
.floatizquierda {
FLOAT: left; MARGIN-RIGHT: 7px
}
#container #conttex #centro .centro2 H1 {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 1.75em; COLOR: #fff; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Geneva, sans-serif
}
#derecha {
FLOAT: left; MARGIN: 0px; WIDTH: 198px; POSITION: relative; HEIGHT: auto; BACKGROUND-COLOR: #0f0
}
#derecha1 {
FONT-SIZE: 10px; FLOAT: left; MARGIN: 0px; WIDTH: 198px; HEIGHT: 162px
}
.derecha02 {
FLOAT: left; MARGIN: 8px 0px 0px; WIDTH: 100%; HEIGHT: 115px
}
.derecha2 {
FLOAT: left; MARGIN: 16px 0px 0px; WIDTH: 100%; HEIGHT: 115px
}
#derecha2-ban-tex {
FLOAT: left; WIDTH: 100%; COLOR: #000; HEIGHT: 50px
}
#footer {
CLEAR: both; FLOAT: left; WIDTH: 100%; HEIGHT: 100px; BACKGROUND-COLOR: #ccc
}
#footerPan {
MARGIN: 0px auto; WIDTH: 860px; POSITION: relative
}
#footerPan UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 800px; PADDING-TOP: 20px; POSITION: relative; HEIGHT: 30px
}
#footerPan LI {
FLOAT: left
}
#footerPan UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-DECORATION: none
}
#footerPan UL LI A:hover {
TEXT-DECORATION: underline
}
#footerPan P.copyright {
FONT-SIZE: 11px; MARGIN: 0px auto; WIDTH: 220px; COLOR: #fff; POSITION: relative
}

#container #header #header-1 H1 {
PADDING-LEFT: 8px; FONT-WEIGHT: normal; FONT-SIZE: 14px; COLOR: #fe001c; PADDING-TOP: 8px; FONT-FAMILY: Verdana, Geneva, sans-serif
}



CODIGO HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Documento sin título</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<LINK href="Documento%20sin%20título_archivos/espaname.css" type=text/css
rel=stylesheet>
<BODY>
<DIV id=container>
<DIV id=header>
<DIV id=header-1>
<H1>HOME</H1></DIV>
<DIV id=header-2>hola</DIV>
<DIV id=header-3>hola</DIV></DIV>
<DIV id=header2></DIV>
<DIV id=header3></DIV>
<DIV id=conttex>
<DIV id=izquierda>
<DIV id=izquierda1>
<p>D</p>
<p>D</p>
<p>&nbsp;</p>
<p>DD</p>
<p>&nbsp;</p>
<p>DD</p>
<p>&nbsp;</p>
</DIV>
<DIV id=izquierda2></DIV></DIV>
<DIV id=centro>
<DIV id=centro1></DIV>
<DIV class=centro2>
<H1>uis nullam nons at utpatem </H1>
</DIV>
<DIV class=centro3>
<P>
Exerat. Ut aut utat. Dui tatem esequi tem dolor sequissim ilit, vulla facidui sciduip susciduipit adipisim delisi ex ero odolenisi.
Unt dolobore con ex euis nim ing ea consequi blaore conulla adigna commodo loborperos nullam zzriure rostrud mincil ut alisci te tate facilisim zzriustio etum nosto eugiat, quisit lutet alit dolore molutatue molortisi eumsandipit aut velit del et ad tatissequat atie ent wismolor si blamet, cons adio od deliqui scidui blamcon ummolore mod modolor percip erit ulla facipsum nim velit ilisit, velisi.
Equis nullam nons at utpatem dolorpero odit pratue facipit delessent ea feu feuis nim iureet eugiat nullan henim quatie velenisit, sismolor sis er si.
Magnim nim autpat. Verostrud tem diamcor senim zzriustin velisl er adipisc inissim venisl utpatetum dolesectem zzril euismodipit nonulla core min ut adiametum ex eugue dit aliquat vendrerilit
.</P>



<P>&nbsp;</P></DIV>
<DIV class=centro4>
<H1>uis nullam nons at utpatem </H1>
</DIV>
<DIV class=centro3>
<P>laore conulla adigna commodo loborperos nullam zzriure rostrud mincil ut alisci te tate facilisim zzriustio etum nosto eugiat, quisit lutet alit dolore molutatue molortisi eumsandipit aut velit del et ad tatissequat atie ent wismolor si blamet, cons adio od deliqui scidui blamcon ummolore mod modolor percip erit ulla facipsum nim velit ilisit, velisi.
Equis nullam nons at utpatem dolorpero odit pratue facipit delessent ea feu feuis nim iureet eugiat </P>
<P>gfdsgfdgfdsgsdfgsdfgsdfg</P>
<P>f</P>
<P>&nbsp;</P>
<P>f</P>
<P>f</P>
<P>f</P>
<P>&nbsp;</P>
<P>f</P>
<P>ff</P>
<P>f</P>
<P>fd</P>
<P>&nbsp;</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>d</P>
<P>&nbsp;</P>
</DIV></DIV>
<DIV id=derecha>
<DIV id=derecha1></DIV>
<DIV class=derecha02></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV>
<DIV class=derecha2></DIV></DIV></DIV>
<DIV id=footer>
<DIV id=footerPan>
<UL>
<LI><A href="http://www.webaselina.com">uis nullam nons at utpatem </A> </LI></UL>
<P class=copyright>uis nullam nons at utpatem </P></DIV></DIV>kiuoiu
</DIV></BODY></HTML>


Gracias por tu tiempo
  #9 (permalink)  
Antiguo 21/01/2009, 10:17
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Hoja con una cabecera tras columnas y un pie

Uhmmmm maquetación a tres columnas con footer. Un clásico. Veamos por donde empezar:

Te doy una maquetación como las que hago para ese tipo de notas, aunque yo hago con tamaños limitados, no me gusta mucho el manejo líquido cuando va a ser info lo que debe manejarse:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pruebas</title>
<link rel="stylesheet" href="css/nuevo.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="cuerpo">
<div id="col1" class="col">

</div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
ese es el html y las CSS serían estas() Tienen algunos hacks para ie6, pero son cosas que no me importa corregir, se pueden poner dentro de comentarios condicionales en el html.

Código:
body,html{
margin:0;
padding:0;
width:100%;
height:100%;
}

/* Aqui comenzamos el cuerpo de la web*/
#container{
position:relative;
left:0;
top:0;
width:100%;
min-height:100%;  /*notar el min-height*/
overflow:hidden; /*notar el overflow hidden*/
}

*html #container{
height:100%;
overflow:visible; /*esto para la basura del internet explorer 6*/
}

#header{
position:relative;
left:0;
top:0;
width:100%;
height:200px;/*pon el tamaño que quieras*/
background:cyan; /*por poner un color*/
}

#cuerpo{
position:relative;
left:0;
top:0;
width:100%;
min-height:600px; /*nota el min-height*/
overflow:hidden;/*el overflow hidden lo ponemos porque es el que va a empujar la web.*/
}

*html #cuerpo{
height:600px;
overflow:visible;
}

#cuerpo div.col{
position:relative;
display:block;
left:0;
top:0;
min-height:600px;
float:left;
overflow:hidden;
}

#cuerpo #col1{
background:green;
width:33%;
}
#cuerpo #col2{
background:lavender;
width:34%
}
#cuerpo #col3{
background:steelblue;
width:33%;
}

*html #cuerpo div.col{
height:600px;
overflow:visible;
}

#footer{
position:relative;
left:0;
top:0;
width:100%;
height:60px;
background:red;
overflow:hidden;
}

Si quieres probar si se empuja el footer pase lo que pase, pues simplemente pon esto:


Código:
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #10 (permalink)  
Antiguo 21/01/2009, 15:32
 
Fecha de Ingreso: abril-2007
Mensajes: 89
Antigüedad: 10 años, 7 meses
Puntos: 2
Sonrisa Respuesta: Hoja con una cabecera tras columnas y un pie

Hola, eres la leche, funciona de muy bien, solo hacerte unas últimas preguntas sobre el código:

min-height:100%; /*notar el min-height*/ que significa?

overflow:hidden; /*notar el overflow hidden*/ y esta propiedad?

Muchas gracias

Un Saludo
  #11 (permalink)  
Antiguo 21/01/2009, 15:33
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Hoja con una cabecera tras columnas y un pie

Hola:

Revisando tu código he visto esto:

Código:
#izquierda2 {
    BACKGROUND-POSITION: 50% top;
    Z-INDEX: 1;
    FLOAT: left;
    MARGIN: 0px;
    WIDTH: 232px;
    BACKGROUND-REPEAT: no-repeat;
    POSITION: relative;
    HEIGHT: 1300px;
    BACKGROUND-COLOR: #fa0419
}
si le pones un alto fijo de 1300 px, lógicamente te crece demasiado.

Si no es ese tu problema, solo tienes que indicarlo.

Saludos.

  #12 (permalink)  
Antiguo 21/01/2009, 16:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoja con una cabecera tras columnas y un pie

Sobre tu código, falmar, en realidad el problema es sencillo:

la caja <div id="izquierda"> que es la que contiene a la caja <div id="izquierda2"/> (la de fondo rojo), está flotada a la izquierda, lo que provoca que la caja que las contiene (<div id="container">) no crece al crecer ellas. Smplemente elimina ese float innecesario y la caja de fondo azul crecerá, y el pie se desplazará hacia abajo:
Cita:
#izquierda {background-color:#FA0419;
float:left;
height:600px;
margin:0px 0px 0px 8px;
position:relative;
width:232px;
}
(elimina ese float: left)
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 21/01/2009, 17:01
pr0
 
Fecha de Ingreso: marzo-2004
Mensajes: 687
Antigüedad: 13 años, 8 meses
Puntos: 28
Respuesta: Hoja con una cabecera tras columnas y un pie

Hola, buenas a todos

estoy utilizando el codigo html y css facilitado por Dalvenjha pero tengo un problema.
En el caso de que yo reduzca el tamaño del header a 100px en lugar de 200 como pone Dalvenjha, entonces como el cuerpo tiene tamaño 600px pues el footer ya no llega hasta la parte inferior de la pantalla y se me keda entonces un trozo en blanco debajo del footer.

¿Alguien me dice porque ocurre esto? ¿como puedo poner para que el cuerpo ocupe todo el height independientemente de las medidas del header y footer?

Gracias de antemano
  #14 (permalink)  
Antiguo 21/01/2009, 17:08
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Hoja con una cabecera tras columnas y un pie

Cita:
Iniciado por Mikmoro Ver Mensaje
(elimina ese float: left)
He copiado y pegado el código para intentar solucionar el problema y si hago lo que dices los <div id="derecha"> y <div id="centro"> se desplazan hacia abajo.

¿Me equivoco?

Saludos.

  #15 (permalink)  
Antiguo 21/01/2009, 17:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoja con una cabecera tras columnas y un pie

Ah, sí, sí, cierto, no estaba mirando bien la composición.

En este caso creo que lo mejor es añadir overflow al contenedor:
Cita:
#conttex {background-color:#33CCFF;
height:1000px;
margin:0px;
position:relative;
overflow:auto;
}
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 21/01/2009 a las 17:40
  #16 (permalink)  
Antiguo 21/01/2009, 23:31
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Hoja con una cabecera tras columnas y un pie

Cita:
Iniciado por falmar Ver Mensaje
Hola, eres la leche, funciona de muy bien, solo hacerte unas últimas preguntas sobre el código:

min-height:100%; /*notar el min-height*/ que significa?

overflow:hidden; /*notar el overflow hidden*/ y esta propiedad?

Muchas gracias

Un Saludo
El min-height es una propiedad que utiliza el firefox, para darle un tamaño mínimo a un div. Y el overflow hidden, es una propiedad que hace que todo lo que desborde del tamaño de un contenedor se esconda.

Combina ambas por lo siguiente: Si le dieras un height directo, el overflow hidden funcionaría normal, osea escondería lo que se pasa del tamaño, pero como usamos un min-height, entonces la caja irá creciendo y como no hay un tamaño real, el overflow no tiene nada que esconder porque nada desborda, asi que en vez de esconder, hace crecer el div.

Hay otra orden: overflow:visible. pero este tiene diferente manera de funcionar en firefox y en IE, en firefox se mostrará lo desbordado pero no crecerá el fondo. En cambio en IE se mostrará lo desbordado y crecerá el fondo. Es por eso que ves que uso el hack del asterisco para dejar a ie con el height y overflow visible. Esto tb es porque IE6 no admite la propiedad min-height.

Saludos.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #17 (permalink)  
Antiguo 21/01/2009, 23:34
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Hoja con una cabecera tras columnas y un pie

Cita:
Iniciado por pr0 Ver Mensaje
Hola, buenas a todos

estoy utilizando el codigo html y css facilitado por Dalvenjha pero tengo un problema.
En el caso de que yo reduzca el tamaño del header a 100px en lugar de 200 como pone Dalvenjha, entonces como el cuerpo tiene tamaño 600px pues el footer ya no llega hasta la parte inferior de la pantalla y se me keda entonces un trozo en blanco debajo del footer.

¿Alguien me dice porque ocurre esto? ¿como puedo poner para que el cuerpo ocupe todo el height independientemente de las medidas del header y footer?

Gracias de antemano
Simple, aumentale el tamaño al cuerpo para compensar.

Saludos.

Hey Leí mal tu pregunta, bueno, mira lo que yo hago, para combinar medidas líquidas con fijas es usar javascript, es lo que hagó en mi website, en la página principal.

http://remsr.com

Entra luego achica la pantalla y has f5 y verás que siempre el header y el footer ocupan el mismo lugar. Para lograr eso hice lo siguiente.
Código:
<!--
	function redimensionar() {
		
			var altura = (window.innerHeight - 162);
			var altura = (document.body.clientHeight - 162);
			document.getElementById('cuerpo').style.height = altura+'px';
		    
	}
//-->

y lo llamas asi:

<body onload="redimensionar();">
Vamos por partes, aqui lo que estoy haciendo, es calcular el alto de la ventana del navegador, entonces, si por ahi tengo un header y footer que sumados den 162 pixeles. Lo que hará es darle al div "cuerpo" el tamaño de la ventana menos el tamaño de tu header y footer. Ahora bien, como en tu css ya he especificado bien que las posiciones son relativas y donde van acomodados, el div "cuerpo" se acomodará solito.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Última edición por Dalvenjha; 22/01/2009 a las 00:07
  #18 (permalink)  
Antiguo 22/01/2009, 23:38
 
Fecha de Ingreso: agosto-2008
Ubicación: Puebla, Mexico.
Mensajes: 84
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Hoja con una cabecera tras columnas y un pie

Parece que hoy todos se pelean con height, se ve interesante el uso de javascript, ahi te va la version mas famosa en css

height: auto !important;
min-hight: 500px;
height:500px;

500px es solo un ejemplo, aca mezclamos 2 cosas, la primera como ya te explicaron es min-height, el problema es que en cierto navegador no lo interpreta, agregando las 2 lineas anteriores ya tendras los mismos resultados en un navegador decente como en IE.

esta es mi version de tu maquetacion, espero te sirva.

#container {width:auto; height: auto !important; margin: 0px auto;padding: 2px; }
#header { height: 100px; width:auto; background:#CCC; }
#left { width:25%; background:#999;}
#content {width:50%; background:#666;}
#right{width:25%; background:#999;}
#left, #content, #right {float:left; height:auto !important; min-height:300px; height:300px;}
#header, #left, #content, #right, #footer {margin:0px auto; padding:0px; position:relative; }
#footer{height:50px; width:auto; background:#333;}
.clear{clear:both;}

<div id="container">
<div id="header">
texto del header
</div>
<div class="clear"></div>
<div id="left">
texto columna izquiera
</div>
<div id="content">
contenido de la pagina
</div>
<div id="right">
texto columna derecha
</div>
<div class="clear"></div>
<div id="footer">
pie de pagina.
</div>
</div>

Creo que no olvido nada, respecto a las columnas laterales, no es muy "bonito" que una quede mas grande que la otra, en internet haber unos articulos sobre 'faux columns' para darles una mejor vista en estos casos, suerte.
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 20:51.