Bordes para el resto de capas

Bueno, ahora que vemos que esto del borde funciona, vamos a ponerle borde a otras capas, recordando por supuesto la regla anterior que decía... "Si la capa tiene definida una cantidad numérica para el width, no podemos definirle el borde o se deformará la capa un poco".

Ahora vamos a ir colocando bordes a varias de las capas de la plantilla, teniendo en cuenta que cuando tenemos una capa encima de otra, si le ponemos un borde inferior a la de arriba, no será necesario ponerle borde superior a la de abajo (pues le vale el borde inferior de la de encima... se entiende esto?...).

A la capa o div llamada navegacion le vamos a poner borde por lo cuatro costados (por arriba, abajo, izquierda y derecha), que como ya sabemos, se hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-general.css:

border: black 1px solid

quedando esa línea así en la Hoja de Estilo:

navegacion {background-color:gray; border:black 1px solid;}

Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos aparecería un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa navegacion más otro pixel definido para la capa cabecera). Por tanto y para no tener unos bordes más gruesos que otros, a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados. Esto, como ya sabes, se hace así:

#cabecera {background-color:pink; border-left:black 1px solid;
border-right:black 1px solid; border-top:black 1px solid;}

Ahora vamos con la capa pie. Vamos a definirle un borde por los cuatro costados de este modo:

#pie {background-color:brown; border:black 1px solid;}

Y con esto quedan todas la capas bordeadas. Ya sabes usar los bordes y la página tiene mejor pinta. En adelante la mejoraremos aún más hasta que quede totalmente profesional...

Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net