Maquetación CSS en 3 columnas, tutorial.

Enero/ 2009 /
Ir a: Principal
Categorías
Comentarios

Maquetando un site en 3 columnas!!

Publicado por Luis Velito, 8 de Febrero 2009.

Hoy día vamos a hablar sobre CSS, he visto que hacen mucho este tipo de preguntas que no dejan de ser sencillas en cierto modo, este es uno de los clásicos: ¿Còmo hago una maquetaciòn con 3 columnas asi como los periódicos?.

Bueno, en el tutorial de hoy día lo explicaremos lo mejor que podamos.

Primero vamos a crear un documento XHTML STRICT, para irnos acostumbrando, a hacer las cosas bien, el documento que haremos será uno típico, con un container, dentro de este un header, un content para las columnas y un footer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 3 columas</title>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="col1">
</div>
<div id="col2">
</div>
<div id="col3">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Ahora que tenemos nuestra estructura básicas, pasaremos al CSS, esta parte no es muy difícil, realmente es sencilla, solo debemos seguir el orden, y dejar que el documento fluya. Primero los estilos del "body" y del "container":

body,html{
margin:0;
padding:0;
width:100%;
height-:100%;
background: url(../imagenes/blog/cabeza.jpg) repeat left top;
}

#container{
position:relative;
left:0;
top:0;
width:900px;
min-height:700px;
background:#000;
margin:0 auto;
overflow:hidden;
}

*html #container{
height-:700px;
overflow:visible;
}

Aqui establecemos, que el body no tendrá márgenes ni relleno, además ocupara todo el ancho y alto del navegador. También que el container tiene un temaño determinado en pixeles, (Por esta vez trabajaremos con medidas, ya que me gusta trabajar asi.) y un "min-height" o tamaño mínimo, además de usar el "overflow:hidden;" que combinados hacen que el container crezca empujado por los elementos que contiene.

Además, para el Internet Explorer hacemos uso del "hack del asterisco", que consiste, en poner el selector universal "*" y luego "html" para que los estilos sean reconocidos solamente por el internet explorer, ya que el internet explorer 6 presenta problemas con el "min-height" (De hecho nisiquiera lo reconoce), dejamos que use el height de un tamaño determinado, y el "overflow:visible;" hará el resto, se supone que no debería pasar, pero por un bug del IE6, cuando algo sobrepasa su contenedor, lo jala.

Ahora vamos con los estilos del header, del content y del footer:

#header{
position:relative;
left:0;
top:0;
width:896px;
height-:96px;
background: url(../imagenes/blog/blk5.png) repeat left top;
overflow:hidden;
border: 2px solid #fff;
}
#content{
position:relative;
left:0;
top:0;
width:100%;
min-height:500px;
overflow:hidden;
background:steelblue;
}
*html #content{
height-:500px;
overflow:visible;
}
#footer{
position:relative;
left:0;
top:0;
width:896px;
height-:96px;
background: url(../imagenes/blog/blk5.png) repeat left top;
overflow:hidden;
border: 2px solid #fff;
}

Nuevamente estamos usando medidas precisas para el header y el footer, ya que serán elementos estáticos a todo efecto en este tutorial, además les pongo un margen y un fondo para que se puedan distinguir y que no se vea tan feo pues.

Donde hay diferencia es en content, ¿Por què? porque en el usamos el hack del asterisco, además de usar el "min-height" y el "overflow:hidden;" para que crezca con los elementos flotados que se usaràn.

Y ahora vamos a las tres columnas que están dentro el content, el CSS de las tres será casi el mismo, solamente que los he puesto separados, para darle un background distinto a cada uno, primero pongo el código y luego epxlico.

#col1{
position:relative;
left:0;
top:0;
width:297px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk2.png) repeat left top;
border: 2px solid #fff;
border-right: 1px solid #fff;
}
#col2{
position:relative;
left:0;
top:0;
width:298px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk4.png) repeat left top;
border: 2px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
*html #col1{height-:496px; overflow:visible;}
*html #col2{height-:496px; overflow:visible;}
#col3{
position:relative;
left:0;
top:0;
width:297px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk2.png) repeat left top;
border: 2px solid #fff;
border-left: 1px solid #fff;
}
*html #col3{height-:496px; overflow:visible;}

Comencemos diciendo, que los 3 tienen "position:relative;" que hará que empujen a los otros elementos que estén cerca, no pudiendo su espacio ser ocupado por otro elemento, a menos que use "position:absolute" o "position:fixed", pero de eso hablaremos después.

Luego les indicamos lo siguiente "left:0; top:0;" con esto indicamos que no habrá ninguna distancia entre el inicio del elemento contenedor y nuestros divs. Y como tienen "float:left;" pues se pegaran al elemento anterior a ellos.

El "float:left/right;" sirve para hacer que un elemento "flote" al costado de otro, ya que normalmente los elementos ocupan todo el ancho, aunque no haya sido especificado eso. Al tener "position:relative;" y "left:0;" pues ocuparan el espacio justo al costado del elemento anterior.

También les puse un borde y un background para distnguirlos.

Entonces al final nos quedaría algo como esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 3 columas</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
width:100%;
height-:100%;
background: url(../imagenes/blog/cabeza.jpg) repeat left top;
}

#container{
position:relative;
left:0;
top:0;
width:900px;
min-height:700px;
background:#000;
margin:0 auto;
overflow:hidden;
}

*html #container{
height-:700px;
overflow:visible;
}

#header{
position:relative;
left:0;
top:0;
width:896px;
height-:96px;
background: url(../imagenes/blog/blk5.png) repeat left top;
overflow:hidden;
border: 2px solid #fff;
}

#content{
position:relative;
left:0;
top:0;
width:100%;
min-height:500px;
overflow:hidden;
background:steelblue;
}

*html #content{
height-:500px;
overflow:visible;
}

#col1{
position:relative;
left:0;
top:0;
width:297px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk2.png) repeat left top;
border: 2px solid #fff;
border-right: 1px solid #fff;
}

#col2{
position:relative;
left:0;
top:0;
width:298px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk4.png) repeat left top;
border: 2px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}

#col3{
position:relative;
left:0;
top:0;
width:297px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk2.png) repeat left top;
border: 2px solid #fff;
border-left: 1px solid #fff;
}

#footer{
position:relative;
left:0;
top:0;
width:896px;
height-:96px;
background: url(../imagenes/blog/blk5.png) repeat left top;
overflow:hidden;
border: 2px solid #fff;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="col1">
</div>
<div id="col2">
</div>
<div id="col3">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

El ejemplo en funcionamiento lo pueden ver aqui maqueta 3 columnas y ahi también pueden ver los estilos.

Hasta el siguiente post!!!

¿Qué opinas respecto a esto?

Comentar es alentar al que escribe un artículo a seguir adelante, ya que es una manera de demostrar que la lectura es apreciada, además te permite hacerme llegar sugerencias sobre próximos temas o sobre algún evento que deba postear.

Saludos y Hasta el próximo post.

No seas tímido deja un comentario!! (Click aqui).

Ir Arriba

Mikel dijo:

Es crosbrowser, como dices, pero... ¿has probado a validar la CSS? Eso no es crossbrowser a mi juicio

Luis Velito dijo:

Lo sé Mikel, uso hacks para el ie6, sin embargo es algo básico, el uso de comentarios condicionales podrían ser una solución también, sin embargo, no quiero hacerme hígado con el ie6 de momento.

Prefiero usar ese tipo de hacks, a crear divs \"de corte\" para evitar que se mezcle el footer con los divs del contenedor.

Saludos!!

fussball dijo:

Gute Arbeit hier! Gute Inhalte.

¿Quién escribe esto?

Soy Luis Velito. Un Web Designer que intenta combinar el diseño con el desarrollo. Los invito a acompañarme en este camino en pos del equilibrio.

Información de Contacto

Nombre: José Luis Velito Ruiz
Nick: Dalvenjha
Teléfono: 351-9796
e-mail: l.dalvenjha@hotmail.com
Lima, Diciembre del 2008.

Categorías

Post Recientes

Wallpaper de Burbujas en photoshop
Tutorial para Photoshop sobre un wallpaper de burbujas, traido desde la Web de Fabio Sasso

Secciones: Photoshop, Tutoriales.
Manual de Introducción al CSS
Especificaciones para comenzar el uso de CSS, su importancia y sus usos.

Secciones: CSS, Tutoriales.
Jugando con el Fade en Javascript
Vamos a crear nuestro primer tutorial, este tratará de Javascript, es un efecto muy básico de aparición, desaparición de un div.

Secciones: Js, Tutoriales, Experimentos.