Estructurando en CSS

[ad#adconte-1]
css

Según la W3C (World Wide Web Consortium) las Hojas de Estilos en Cascada o CSS (Cascading Style Sheets) es:

“Mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.”

Es decir es una forma de gestionar los estilos de una pagina o un sitio web a través de un archivo externo (aunque los estilos se pueden incrustar en el HTML, esto no es recomendable). Este archivo contendrá todos los atributos que tienen que ver con la presentación de la página web, Esto con la finalidad de separar el contenido de lo que seria la forma.

Lo estilos definen la forma de mostrar los elementos HTML y XML, permitiendo controlar el estilo y el formato de múltiples paginas. Es decir cualquier cambio efectuado en la hoja de estilos impactara a las páginas que estén vinculadas con este estilo.

Seguramente ustedes ya saben de sobra lo que son las CSS, y sabrán de sobra que una buena estructura siempre es fundamental en cuanto a la creación de páginas web se refiere.

Acontinuación quiero mostrarles una estructura base para la creación de una página web, con esta arquitectura he estado trabajando los últimos 9 mese, según los requisitos de mi cliente, y lo interesante de ésta, es que te tiene un Hack para mandar el footer siempre al final de del navegador, esto es muy util en el caso de tener contenido que no llene la totalidad del navegador.

La siguiente imagen muestra la distribución de los divs, para formar el esqueleto de la página.

estructura_css

Como verán es lo mas básico pero con ella podrás montar tu pagina, si necesitas columnas simplemente las agregas flotando el content a la izquierda y la columna a la derecha o viceversa, y después es cuestión de vaciar todo el contenido de tu pagina.

Desbaratando el esqueleto

Primero establecemos los parametros principales que tendra nuestra pagina, es decir, que tipo de letra tendrá, a que tamaño, etc.

En este caso solo estableceré en la etiqueta body el tipo de letra, el tamaño, pondré los márgenes de la pagina a 0 igual que el padding y noten que tengo un height al 100% esto es importante para mandar al footer hasta abajo

body, html {
font-family:Verdana;
font-size: 11px;
padding:0px;
margin:0px;
height:100%;
}

Despues tenemos el wrapper, el cual nos va a envolver toda nuestra pagina, con excepción de el footer, en mi caso como quiero que el footer siempre quede hasta abajo del navegador lo he sacado del wrapper, en caso contrario lo meteríamos dentro del wrapper. Recuerden que los valores son los acordes a su proyecto, en mi caso quiero una pagina liquida así que mando mi wrapper al 100%, le puse una imagen de fondo y volví a establecer los márgenes a 0

#wrapper {

< margin: 0px;

width: 100%;

min-height:100%;

background-image:url(../images/fondo.jpg);

background-repeat:repeat-x;

background-position:bottom;

}

* html #wrapper {height:100%;}
El header , como veran tiene el mismo valor de ancho que el wrapper, y podemos establecer algunos otros valores

#header {

width: 100%;

height:100px;

margin:0px;

padding:0px;

}

El content lo mismo, debemos establecer los valores que mejor nos acomoden en nuestro proyecto.

#content {

min-height:100%;

width: 100%;

margin:0px;

padding:0px;

}

después el footer, al cual a parte de dalre las caracteristicas que deseamos, le vamos a dar una posicion relativa y un margen negativo, el cual va relaciona con el tamaño del footer, es decir si nuestro footer es de una altura de 30px, nuestro margen negativo sera de menos 30px.

#footer {

width: 100%;

height:20px;

background-color: #5B96BF;

position:relative;

margin:-20px auto 0;

clear:both;

}

Esto es a grandes rasgos un esqueleto inicial para crear una página web, esto en mi caso y en el caso de las caracteristicas del priyecto me a funcionado, seguramente tu tenras otras formas de armar tu css, ¡por que no nos dices como lo haces!

y si quiers descargarte los archivos base para iniciar tu página, solo da click

También te puede interesar

Comments