Re: [Ovillo] Problemas con las alturas
La verdad es que no había leido el comienzo el hilo :S
Bueno, pero ahora que ya lo he hecho, creo que como dice sn, la opcion
de flotar las columnas, y hacer un clear del contenedor es válida.
Si no deseas añadir elementos extras a tu codigo para hacer el clear,
puedes hacerlo por medio de css con after y content (clearfix):
[css]
#contenedor{
position:relative;
}
#contenedor:after{
content: ".";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
#izq{
float:left;
width:150px;
background-color:red;
min-height:400px;
}
#centro{
margin:0 210px 0 160px;
background-color:#99;
}
#der{
float:right;
width:200px;
background-color:green;
min-height:400px;
}
#pie{
background-color:blue;
min-height:50px;
}
[/css]
Para los ie es necesario añadir algo de css, por eso he puesto los
condicionales.
Y respecto al html, sería necesario que primero introdujeras las
columnas flotadas, y posteriormente, el div central. El html quedaría
tal que:
PIE
Saludos.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las alturas
Lo sé, el caso es que si usas ese sistema no puedes usar el diseño liquido, ya que te puede desencajar la maquetación con el dibujo. El día 1/02/07, AraDaen <[EMAIL PROTECTED]> escribió: > > Lo que explicas se conoce como Faux Columns, te pongo un enlace de > ALA, donde se explica con un ejemplo > > http://alistapart.com/articles/fauxcolumns/ > > Saludos > > Juan Jorge Muñoz Herrero escribió: > > Se me ocurre una idea para que no se te queden las columnas > "incompletas" > > cuando sea la del centro la más grande, o cuando haya una más grande que > > otra. > > Haz un background para el body de dos colores, uno para la columna > izquierda > > y otro para la derecha, ya que cada uno vaya desde la mitad hasta el > lateral > > donde le corresponda. (Haz una imágen bien grande en plan 1px de altura > x > > 2000 de anchura, y así te cubres las espaldas) Esa imágen la repites en > el > > eje Y de la página, para que se vea en todo el largo. A las divs > laterales > > les dejas el background transparente, y a la div central le pones el > color > > que más te guste. Ten en cuenta que será esta última div la que debe ser > > mayor, para que no se vea raro. De esta forma tendrás tu diseño a 3 > columas > > con total liquidez y se verá bien en cualquier resolución. > > Es muy parecido al sistema de falsas columas, pero el problema de éste > es > > que la imágen no se redimensiona y en un momento dado puede haber > desfase > > entre la imágen de background y la columna real. > > > > > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- Juan Jorge Muñoz Herrero http://www.taarq.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las alturas
Lo que explicas se conoce como Faux Columns, te pongo un enlace de ALA, donde se explica con un ejemplo http://alistapart.com/articles/fauxcolumns/ Saludos Juan Jorge Muñoz Herrero escribió: > Se me ocurre una idea para que no se te queden las columnas "incompletas" > cuando sea la del centro la más grande, o cuando haya una más grande que > otra. > Haz un background para el body de dos colores, uno para la columna izquierda > y otro para la derecha, ya que cada uno vaya desde la mitad hasta el lateral > donde le corresponda. (Haz una imágen bien grande en plan 1px de altura x > 2000 de anchura, y así te cubres las espaldas) Esa imágen la repites en el > eje Y de la página, para que se vea en todo el largo. A las divs laterales > les dejas el background transparente, y a la div central le pones el color > que más te guste. Ten en cuenta que será esta última div la que debe ser > mayor, para que no se vea raro. De esta forma tendrás tu diseño a 3 columas > con total liquidez y se verá bien en cualquier resolución. > Es muy parecido al sistema de falsas columas, pero el problema de éste es > que la imágen no se redimensiona y en un momento dado puede haber desfase > entre la imágen de background y la columna real. > ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las alturas
Se me ocurre una idea para que no se te queden las columnas "incompletas" cuando sea la del centro la más grande, o cuando haya una más grande que otra. Haz un background para el body de dos colores, uno para la columna izquierda y otro para la derecha, ya que cada uno vaya desde la mitad hasta el lateral donde le corresponda. (Haz una imágen bien grande en plan 1px de altura x 2000 de anchura, y así te cubres las espaldas) Esa imágen la repites en el eje Y de la página, para que se vea en todo el largo. A las divs laterales les dejas el background transparente, y a la div central le pones el color que más te guste. Ten en cuenta que será esta última div la que debe ser mayor, para que no se vea raro. De esta forma tendrás tu diseño a 3 columas con total liquidez y se verá bien en cualquier resolución. Es muy parecido al sistema de falsas columas, pero el problema de éste es que la imágen no se redimensiona y en un momento dado puede haber desfase entre la imágen de background y la columna real. El día 1/02/07, inti castro <[EMAIL PROTECTED]> escribió: > > On 2/1/07, noth css <[EMAIL PROTECTED]> wrote: > > > > 3 columnas y un pie, donde las dos columnas externas son fijas de tamaño > y > > la del centro es la que se redimensiona. > > > aca tienen varias opciones para lograrlo: > http://blog.html.it/layoutgala/ > > esta es la que mas se ajusta: > http://blog.html.it/layoutgala/LayoutGala14.html > > no hay necesidad de que reinventes la rueda. > > -- > inti castro > [EMAIL PROTECTED] > ___ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > -- Juan Jorge Muñoz Herrero http://www.taarq.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las alturas
On 2/1/07, noth css <[EMAIL PROTECTED]> wrote: > > 3 columnas y un pie, donde las dos columnas externas son fijas de tamaño y > la del centro es la que se redimensiona. aca tienen varias opciones para lograrlo: http://blog.html.it/layoutgala/ esta es la que mas se ajusta: http://blog.html.it/layoutgala/LayoutGala14.html no hay necesidad de que reinventes la rueda. -- inti castro [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las alturas
salud; una posibilidad sería quitar el posicionamiento relativo y colocar las columnas flotadas a la derecha(propiedad float). después bastaría con añadir antes del pie un div vacío, sin contenido y que no se vería(yo le llamo espacer). esta capa estaría posicionada relativamente con un top:0; y tendría la propiedad clear:both. de esta manera, da igual la columna que crezca y cómo lo haga, ésta siempre empujará el pie hacia abajo, evitando así que se encabalgue. espero que eso te sirva. un saludo. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problemas con las alturas
Se que existe un problema con las alturas, y existe un (hack, o truco)
para solucionarlo. con altura a 1%, o algo asi.
mi problema es que toy maquetando un diseño semi liquido
3 columnas y un pie, donde las dos columnas externas son fijas de
tamaño y la del centro es la que se redimensiona.
Eh conseguido el efecto así
[codigo html]
PIE
[fin codigo html]
y el css
[css]
#contenedor{position:relative;}
#izq{
position:absolute;
left:0;
top:0;
width:150px;
background-color:red;
min-height:400px;
}
#centro{
margin:0 210px 0 160px;
}
#der{
position:absolute;
right:0;
top:0;
width:200px;
background-color:green;
min-height:400px;
}
#pie{
position:relative;
top:auto;
background-color:blue;
min-height:50px;
}
[/css]
y funciona pero el problema lo tengo si el contenido de las columnas
izq y der pasan de esa altura de 400px, su contenido se muestra por
debajo de la capa pie
alguna sugerencia
un saludo y gracias ANTICIPADAS
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
