Ultimos Retoques...

Solo nos falta un detalle importante. Con lo que ya sabes deberías adivinar qué tenemos que hacer para que aparezca una separación entre la capa bartolo y la capa catalina. Como verás en lo conseguido hasta el momento, hay una separación de 2 pixeles entre el marco de global y bartolo y catalina, pero estos dos últimos aparecen pegados. Si quieres separarlos 2 pixeles para que quede mejor... ¿Qué tenemos que hacer?

Tienes varias opciones (a ver si has adivinado alguna...). La primera es entrar en la hoja de estilos y ponerle a bartolo que deje un MARGIN de 2 px a su derecha, es decir, ponerle MARGIN: 0px 2px 0px 0px. La otra opción es ponerle a catalina un MARGIN de 2 pixeles a la derecha, es decir MARGIN: 0px 0px 0px 2px. Hay otra opción, que es ponerle solo un pixel a bartolo y el otro pixel a catalina, claro. Escogemos la primera opción.

Eso si, que no se nos olvide. Como le hemos dado 2 pixeles más de ancho a bartolo, hemos de quitarselos a bartolo o a catalina en su ancho. Se lo restaremos a catalina que tiene muchos pixeles. Pasaremos de 712 a 710px, oki?

Si alguna vez preferís hacer a bartolo 50 pixeles más, se los sumais a él y se lo restais a catalina, de forma que la suma (incluyendo bordes, margenes, etc) sea el ancho de global. No es tan complicado, no?

Otro apunte

Date cuenta que todo todo todo aparecerá centrado, pues hemos definido TEXT-ALIGN:center en la hoja de estilo para BODY, que contiene todo. Si quieres que los elementos de bartolo aparezcan de otro modo, como por ejemplo a la izquierda, hemos de añadirle la línea señalada en negrita abajo a la hoja de estilo. Si en catalina queremos poner textos, quizás prefieras ponerle a ella un TEXT-ALIGN: justify, que justifica el texto quedando mucho mejor.

Separando los textos

Por otro lado, si deseas que los párrafos de texto no queden tan pegados a la línea de borde, una opción es usar el PADDING, pero como todos los navegadores no leen esta propiedad igual, mejor lo haremos de otro modo para evitar que la web se nos desordene según el navegador que se use.

Esa otra opción en darle un PADDING a los párrafos en la hoja de estilo. Por ejemplo de 10 pixeles a cada uno de los lados y de 5 pixeles arriba y abajo.

La hoja de estilos quedará finalmente así:

Y el resultado final será este.

Por el momento....

Bueno, hemos terminado la primera lección de las capas. Ahora es el momento de experimentar y de hacer preguntas en la sección Webs con DIVs o Capas del Foro. Con las conclusiones que saquemos en el foro quizás mejoremos esta lección y veremos vuestras inquietudes para hacer una segunda lección, tercera, y las que hagan falta. Oki?

Un abrazo a todos todas!!