Maquetar una web a 3 columnas con CSS
nfrentarse a una hoja CSS para maquetar una página Html no es de por sí sencillo. Lo sé. Pero la cosa se complica aún más si lo que queremos es tener una maquetación a tres columnas con encabezamiento y pie.
Últimamente ya nos están llegando pequeños anticipos de la sencillez con que se prevé que puedan generarse columnas partiendo de las especificiaciones de CSS·3. Pero mientras tanto, tenemos que usar las herramientas que tenemos, y éstas pasan por CSS·2.
De modo que hoy, amiguitos, en Barrio CSSésamo os vamos a dar unas sencillas y efectivas orientaciones para conseguir una maquetación en tres columnas limpia y rápida.
De modo que hoy, amiguitos, en Barrio CSSésamo os vamos a dar unas sencillas y efectivas orientaciones para conseguir una maquetación en tres columnas limpia y rápida.
Primero, echemos un vistazo a nuestro archivo CSS. Deberá contener algo así:
body {
margin:0; padding:0;
font-size:80%;
font-family: sans-serif;
}
#wrap{
width:780px;
margin: auto;
text-align:left;
}
#header{
height:100px;
background: url(../img/header.jpg)
no-repeat top left;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#contenedor {
width: 80%;
margin: auto;
padding:0;
display: table;
border: 1px solid black;
}
#row {
display: table-row;
}
#izquierda {
width:150px;
padding:1em;
background: #EEF;
display: table-cell;
}
#derecha{
width:150px;
padding:1em;
background:#FEE;
display: table-cell;
}
#central{
padding: 1em;
background:yellow;
display: table-cell;
}
#pie{
clear:both;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
Y el código para el archivo HTML de la página web va a ser éste. Una vez llamada la hoja de estilos, debemos crear el <body> siguiendo el siguiente esquema:
<body>
<div id=”wrap”>
<div id=”header”><p>Título de tu página.</p></div>
</div>
<div id=”contenedor”>
<div id=”row”>
<div id=”izquierda”>
<h4>Col. Izq.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vestibulum rutrum, urna
eget gravida auctor, mauris neque tempus lorem,
non condimentum sem purus et eros. Donec non lectus.
Phasellus eu massa. Praesent felis metus, tempor a,
vehicula ut, interdum id, libero.</p>
</div>
<div id=”central”>
<h4>Col. Central</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vestibulum rutrum, urna
eget gravida auctor, mauris neque tempus lorem,
non condimentum sem purus et eros. Donec non lectus.
Phasellus eu massa. Praesent felis metus, tempor a,
vehicula ut, interdum id, libero.</p>
</div>
<div id=”derecha”>
<h4>Col. Dcha.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vestibulum rutrum, urna
eget gravida auctor, mauris neque tempus lorem,
non condimentum sem purus et eros. Donec non lectus.
Phasellus eu massa. Praesent felis metus, tempor a,
vehicula ut, interdum id, libero.</p>
</div>
</div>
</div>
<div id=pie”>
Aquí el contenido de tu pie de página.
</div>
</div>
</body>
El efecto que conseguiremos será una página web maquetada con cabecera y pie independientes, y tres columnas, que puedes transformar en dos o en una a tu gusto, con tan solo eliminar los bloques correspondientes a las columnas laterales a tu antojo.
todo material se a compartido con fines academicos
referencia
No hay comentarios.:
Publicar un comentario