Vamos a trabajar con el archivo x.css que has generado para el tutorial. Si aún no lo has generado, te recuerdo que el proceso para generarlo con codificación UTF-8 se explica en el Capítulo 1.

Siguiendo con la estructura presentada en la sección PHP - Estructura, el archivo x.css deberás guardarlo en /tma/css/x.css

Con el archivo en su lugar, ábrelo con el Bloc de Notas y comencemos a introducir la codificación CSS respectiva para nuestro sitio. Lo haremos al estilo "uno por uno" para ir explicando en qué consiste lo implementado.

Manos a la obra. Iniciaremos removiendo cualquier tipo de espacio que se pueda generar por parte de las etiquetas HTML.

El objetivo es controlar espacios generados automáticamente por las etiquetas, pues de Firefox a Internet Explorer existen muchas diferencias por este aspecto. Evitamos utilizar el selector html para no saturarlo indebidamente.

Ahora, vamos a realizar un conjunto de acciones que es posible te sorprendan. Al elemento body le vamos a aplicar el fondo de la página a través de utilizar una imagen --bg.png-- y un color sólido --#131311-- en formato hexadecimal.

Lo que acabamos de hacer es aplicar un color sólido --#131311-- de fondo para que la imagen utilizada no sea rebasada por la resolución de pantalla, evitando con esta acción se presenten molestos espacios en blanco.

A continuación declaramos la imagen a utilizar como fondo --url(/tma/imagenes/bg.png)--, indicando que se repita horizontalmente --repeat-x-- y cuya posición se encuentre alineada en la parte superior izquierda --top left.

Al body le agregamos, además, una fuente verdana normal a 13px con un color gris obscuro --#333.

Procedemos a realizar el centrado de los contenidos, primero indicando en el body que los contenidos tendrán un margen de 50% desde la izquierda, con lo cual se presentarán a partir de la mitad del ancho de la ventana del navegador.

A continuación aplicamos el centrado al DIV contenedor:

Para ello, le posicionamos relativamente; le asignamos un ancho de 783 pixeles (son las dimensiones de la imagen utilizada como fondo) y una altura de 515 pixeles; asignamos margen superior de 70 pixeles y aplicamos un margen izquierdo negativo para centrar los contenidos respecto al ancho de la ventana de nuestro navegador (391 resulta de dividir 783 entre dos). Finalmente, aplicamos la imagen del fondo y asignamos espacios de 65 pixeles para distribuir en mejor forma los contenidos del contenedor... dále un vistazo a lo que has realizado.

Procedemos a aplicar estilo a las dos secciones en que se presentarán los contenidos. Primero la sección del menú, cuyo ID es izq:

Lo que hemos realizado es posicionarle relativamente; flotar el DIV a la izquierda; asignar la imagen utilizada como fondo; y aplicar una anchura y altura de 171 y 330 pixeles, respectivamente. Dále un vistazo a lo que has realizado.

Finalmente, implementamos el estilo para la zona de los contenidos:

Le posicionamos relativamente; asignamos la imagen de fondo; aplicamos un margen a la izquierda de 181 pixeles; y establecemos una anchura y altura de 439 y 331 pixeles, respectivamente. Dále un vistazo a lo que has realizado.

Aplicación de estilos al menú

Momento de aplicar estilos al menú de navegación ubicado en la parte izquierda.

Hemos aplicado margen superior e izquierdo de 40 y 20 pixeles, respectivamente. Removimos las viñetas que las etiquetas LI asignan en forma automática a través de list-style:none; y asignamos una altura para cada línea de 25 pixeles, con lo cual cada link del menú tendrá suficiente espacio entre uno y otro, en forma vertical.

Con .menu li a aplicamos estilo a los textos que son un link y que se ubican dentro de las etiquetas LI de la lista desordenada utilizada para la navegación. Hemos removido el subrayado natural de los links --text-decoration:none-- y aplicado un color de tonalidad gris obscuro --#333--, además de asignar un color claro --#ddd899-- para cuando se coloca el puntero del ratón sobre cualquiera de los links.

Aplicación de estilos al texto del contenido

Procedemos ahora con el texto que aparece como contenido. En este caso, se aplicará estilo al título en forma exclusiva, puesto que el texto restante está definido desde la etiqueta BODY, que fue una de las primeras etiquetas que hemos implementado.

Lo anterior indica que hemos asignado al título un color claro, tipo beige, --color:#ddd899;--, con un tamaño de 16 pixeles y con verdana como fuente, separándolo con 15 pixeles --margin:0 0 15px 0;-- del texto que le sigue.

Para distribuir en mejor forma el texto, vamos a agregar espacios y ajustar la altura y anchura al estilo de la clase #der, que líneas arriba hemos definido, además de agregar Overflow para demostrar la forma en que funciona cuando los contenidos sobrepasan la altura establecida del DIV:

Hemos terminado con la aplicación de estilos para nuestros contenidos, pasemos ahora a definir las variables y los includes para el sitio...



Participa con tus comentarios o lee lo que otros opinan: