Diseño sin tablas - Parte 1

En este punto aún no estamos pensando en la apariencia de la página -esta es la parte divertida de nuestro trabajo, que a su vez haremos más tarde. Ahora, compartimos sólo una vez el sitio de las zonas deseadas. Estas áreas se denominan "contenedores". Los primeros contenedores ya están establecidos - html y body.

En la hoja de estilos (css/define.css) hemos escrito:

html, body {
margin: 0;
background: #ccc;
color: #000;
}

margin: 0; asegura que todo el área de visualización se puede beneficiar de los otros dos valores, el fondo y color de fuente.

body {
padding: 1% 10%;
}

El padding asegura que los datos que están por encima y por debajo de una distancia del 1%, a la izquierda y la derecha una distancia de 10%. El 10% asegura  un centrado de nuestro contenido.


En el cuerpo ahora, definiremos nuestro propio contenedor y las respectivas instrucciones de estilo:

<div id="main">

#main {
padding: 0;
background: #bbb;
border-right: 1px solid #369;
border-left: 1px solid #369;
}

En nuestro caso, abrir el contendor main, definido como principal.
En la indicación padding: 0 nos aseguramos que los demás contenedores utilizarán todo su espacio. Hemos establecido un color de fondo así com un marco (sólo a derecha e izquierda - los demás ya los trataremos más adelante).
Todos los contenedores dentro de main - ¡este contenedor no se cerrará hasta el final!


<div id="head">
El jefe de campo
</div>

#head {
background: #09c;
overflow: visible; }

Incluso el jefe de campo recibe su propio color de fondo. La declaración de truncamineto impide el desbordamiento de los textos.


<div id="content">
Área de contenido
</div>

#content {
margin: 5px 0;
background: #e0e0e0;
padding: 20px;
}

Con el margen de la instrucción creamos unos 5 píxeles de distancia al anterior y posterior elemento (encabezamiento y el pie). Una vez más, declaramos un color de fondo. El relleno crea un 20 píxeles de ancho hasta el borde del contenedor y evita el texto en los bordes.


<div id="foot">
El pie de la página
</div>

#foot {
background: #09c;
overflow: visible;
}

Estas instrucciones corresponden al pie de la página


</div>

Aquí cerramos el contenedor main.


#head, #content, #foot {
border-top: 1px solid #369;
border-bottom:1px solid #369;
}

En  conclusión, observamos la falta de marco para los elementos que se definen como áreas de contenido, tanto por encima como por debajo.


La solución...

Inicio de página

Índice Capítulo 4 | contenido material adicional