Hoy voy a explicar el modelo de columnas con un menú superior. El resultado final sería algo parecido a esto:
[caption id="attachment_64" align="aligncenter" width="300" caption="Maquetación Web"][/caption]
Como se puede observar el diseño est formado por una cabecera, un menú, dos divs flotando uno a la derecha y otro a la izquierda y un pie de página. Nótese que están contenidos en un "contenedor" (de color lila).
Para realizar este diseño se necesitan dos ficheros, uno HTML y uno CSS. A continuación os copio el código del fichero HTML. Es realmente sencillo. Hay seis divs de los cuales uno contiene a los otros cinco. y dos de ellos están flotando a la derecha y a la izquierda respectivamente.
El código del fichero HTML sería el siguiente:
<html>
<head>
<title>Maquetacion con CSS y Divs</title>
<link rel="stylesheet" href="maquetacion.css" type="text/css"/>
</head>
<body>
<div id ="contenedor">
<div id ="cabecera"></div>
<div id ="menu"></div>
<div id ="izquierda"></div>
<div id ="derecha"></div>
<div id ="pie"></div>
</div>
</body>
</html>
El código del CSS es el que tiene más sustancia.
#contenedor{
background-color:#F4ABF2;
border:2px solid #FF0000;
}
#cabecera{
background-color:#E5BC7A;
height:20%;
}
#menu{
height:10%;
background-color:#C8CACC;
}
#izquierda{
height:50%;
background-color:#BDD2EF;
float:left;
width:50%;
}
#derecha{
height:50%;
background-color:#DAF7E2;
float:right;
width:50%;
}
#pie{
height:20%;
background-color:#D3D1C1;
clear:both;
}
El clear nos coloca el div pie debajo de los dos que están flotando. Y arrastra al contenedor hasta el final de lo contenido
Nótese que hay medidas, tanto de alto como de ancho para poder probar el código y ver que maqueta correctamente.
Escuchando... Yann Tiersen -- La boulange[kml_flashembed movie="http://www.youtube.com/v/vtTkHhpZEo8" width="425" height="350" wmode="transparent" /]
No hay comentarios:
Publicar un comentario