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.