Falsas columnas - Hacer columnas iguales en CSS

19/05/2007 - Categoría: Diseño Web - Visto: 5402 veces
Comentarios (2)
Cuando empecé a modificar el PostRev, inaugurado en el post anterior, me topé con un problema que es muy común en la maquetación CSS: Que las columnas (divs) con fondo de color, queden de igual altura cuando una de las columnas tiene un contenido variable.

La página se veía como en el ejemplo 1 y la idea era que quede como en el ejemplo 2.


Renegué un par de días con este tema hasta que encontré googleando la solución y es sorprendente la sencillez con la que está resuelto el problema.

Solución: Agregar un background en el elemento "body" y poner "#menu" y "#principal" en "transparent" todo esto en el archivo CSS.

body
{
...
text-align: center;
background: #xxx url(ruta de la imagen) repeat-y 50% 0;
... }

#menu
{...
background: transparent;
...}

#principal
{...
background: transparent;
...}
Funcionamiento: "repeat-y" hace que la imagen se repita en el fondo solo de forma vertical desde el principio hasta el final de la página, el "50%" se encarga que la imagen quede centrada y "0" indica que la imagen comienza en el píxel 0 de la parte superior del navegador.

Tener en cuenta: Es importante que el cuerpo (etiqueta body) no tenga margen superior ni inferior sino se va a ver el fondo. Lo mismo sucede con la div #header, si tiene margen superior, si es transparente o si el grafico no ocupa toda la capa. Con respecto a la div #footer con que tenga color de fondo o un gráfico que la cubra en su totalidad y tenga la altura de su contenido basta para que no se vea el fondo. Se entendio?

Si bien hay otras formas de hacer esto, esta resalta por su sencillez y simplifica bastante algunos diseños. Para tener en cuenta.

El tip es de Dan Cederholm y lo encontré en www.alistapart.com (inglés) y después encontré una traducción acá.

Comentarios - Deje su comentario
1
gabriel
26/11/2009 - 03:44:55

oye mi buen, pero que hay si las 3 columnas tienen un color diferente cada uno?

Citar comentario
2
vintage bridal gowns
22/11/2012 - 12:03:03

patterns is unquestionably creating wholesale jewellery green prom dress jcpenney green prom dress jcpenney christian louboutin outlet christian louboutin outlet , which include wholesale titanium jewellery and wholesale stainless steel jewellery much more in need inexpensive prom gowns inexpensive prom gowns . On the other hand, one more point is additionally blurring the lines involving good and vogue jewellery. mother of the bride dresses mother of the bride dresses Magnificent products are actually in desire aided by the worldwide development of prosperity. beach dress wedding beach dress wedding And what´s a much better strategy for expressing luxurious than diamonds? flower girl dresses for infants flower girl dresses for infants But you will find a challenge due to the fact there exists a restricted offer of luxurious products like diamonds. Whilst the provide is brief, off white wedding dresses off white wedding dresses prom evening dresses prom evening dresses the need is consistently up. This results in the consistent jacking up of costs. The need for high class styles has prompted qualified craftsmen in creating a lot more practical patterns which might be positioned in plated metals extra with cubic zirconia. In the

Citar comentario

Antes de dejar su comentario, por favor, lea atentamente las indicaciones:
1) Lea atentamente el Aviso Legal y la Política de Privacidad del weblog.
2) No deje su nombre completo (con que ponga el nombre de pila o nick alcanza).
3) No deje su dirección de correo electrónico ni direcciones de páginas en el contenido del comentario, esto no es un foro.
4) No solicite que le envíe material de ninguna índole (léase: exámenes, currículas, configuraciones, software, etc.). No insista.
5) No resuelvo ejercicios ni configuraciones a pedido, puedo orientarlos ante una duda puntual pero no voy a hacer el trabajo por ustedes.
6) No haga comentarios ofensivos o que no tengan que ver con el contenido del post.
7) Escriba de forma correcta y entendible. Tenga en cuanta que la calidad y esfuerzo de mi respuesta va a ser directamente proporcional al de su pregunta.
8) Este blog está muy lejos de ser democrático (lea el título), si su comentario no cumple con alguna de las indicaciones anteriores será borrado o editado sin previo aviso.

Nombre:  
E-mail:  
Sitio / Blog:  
Código (Obligatorio):   Security Image
Negrita Cursiva Imagen Enlace  
Guardar los datos: Si / No