SectorWarez: Tutorial de posicionamiento y layout en CSS

Autor: Ramm

¿A qué le llamamos posicionamiento?

Obviamente no me refiero a los buscadores como Google o Yahoo, posicionamiento en CSS consiste en ubicar los elementos HTML en la pagina, el "layout" o distribución de la pagina. Basicamente esto se logra ordenándole desde CSS a los elementos que tengan cierto tamaño y posición, además de obtener una buena organización del código HTML o XHTML.
El posicionamiento con CSS nos permite control total sobre los elementos de la pagina, además con documentos muy livianos y completamente válidos ante W3C.

Los Divs

Antes de comenzar con el CSS quiero exponer aqui la importancia de usar los divs, un div es basicamente un contenedor, en el podemos meter cualquier clase de contenido, con la gran ventaja de que los podemos manipular a nuestro antojo con CSS, colocarlo en cualquier parte de la pagina, de cualquier tamaño, de cualquier color, con bordes o sin ellos, con imagenes de fondo o sin ellas, a diferencia de las tablas, los divs no se dividen por dentro, pero podemos anidarlos y organizarlas casi como las tablas (en caso de ser necesario).
Para lograr que el posicionamiento no se vuelva complicado, debemos tener en cuenta que la organización en el codigo HTML es muy importante, tener bien estructurados los elementos nos facilitará el trabajo con CSS, con esto quiero decir que debemos contar con un código semántico.

Semántica
Proviene del griego "semantikos", que quería decir "significado relevante", derivada de "sema", lo que significaba "signo") Se dedica al estudio del significado de los signos lingüísticos y de sus combinaciones, desde un punto de vista sincrónico o diacrónico. (definición de wikipedia)

Esto significa que a la hora de hacer el codigo HTML, este bien organizado jerárquicamente, o sea anidar los divs segun importancia, agrupados segun sección, utilizar las etiquetas h1, h2, h3, etc para los títulos, las etiquetas

para las listas, las etiquetas en los parrafos, ayuda a organizar mejor el contenido, ademas de que estan ahi para eso. La mayoria se ha olvidado del uso de estas etiquetas por trabajar en entornos gráficos para diseñar, o porque solo le dan importancia a lo que se ve. Otras ventajas son que los buscadores entienden el codigo, por ejemplo google sabe que
BLOOGER INTERPRETA HTML POR LO QUE LES RECOMIENDO IR A LA FUENTE PARA VER ESTE CODE :D Asi se ve el ejemplo sin estilos
De aqui en adelante vamos con lo que nos interesa, lo primero que haremos será centrar nuestro div "contenedor" en la ventana del navegador, y darle un tamaño específico

/*empezamos por esto, para evitar resultados extraños en distintos navegadores, y algo de estilo al texto*/
body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    color:#666666;
    text-align:center; /*aqui mandamos a centrar todo el contenido*/ 
}

y luego al div:

#contenedor {
    width:600px; /*ancho total de la pagina*/ 
    border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
    background-color:#FFF8F0;
    margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ 
    text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ 
}

Bien, ya tenemos el div contenedor centrado en la pagina, ahora vamos con el "encabezado":
Aquí, vemremos como funciona float. Así como suena, float nos permite "flotar" elementos hacia la izquierda o la derecha de la pagina, haciendo que los demas elementos fluyan alrededor

#encabezado {
    margin:10px; /*para que no se pegue al borde*/ 
    padding:10px; /*algo de relleno*/
    width:224px; /*este ancho es para que cuadre con el texto*/ 
    height:50px; /*idem*/ 
    border:1px solid #333333; /*decoracion*/ 
    background-color:#CC6600; /*more*/ 
    float:left; /*lo flotamos a la izquierda*/ 
    display:inline; /*(*)*/ 
}

(*)display:inline; se usa en este caso para corregir un error en IE, en la interpretación del margin y el padding, si flotamos a la izquierda, y hay 10px de margin a la izquierda, IE sumara el doble de ese margen. Con esta linea corregimos eso.

Ahora algo de estilo para el titulo:

#encabezado h1 { /*encadenamos el identificador del div, con la etiqueta par areferirnos solo al h1 dentro del div encabezado, asi no afectara otros h1 en el resto del documento.*/ 
    font-size:18px;
    font-weight:bold;
    width:224px;
    border-bottom:16px solid #FFFFFF;
    color:#FFFFFF;
    margin:0; /*los h1 vienen con margen, con esto se lo quito*/ 
    text-transform:uppercase; /*convierte todas en mayusculas*/ 
    padding-bottom:10px;
}

Seguimos con el menu:

#menu {
    float:left;
    margin:10px 10px auto 0;
    border:1px solid #333333;
    width:320px;
    height:24px;
}

Y luego con la lista. las listas traen varios pre-formatos desde HTML, 
como las viñetas, margen, saltos de línea a cada item, padding, etc... 
Aqui vamos a cambiar completamente el aspecto de una lista, con sus 
vinculos dentro.

ul {
    list-style-type:none; /*con esto quitamos las viñetas*/
    margin:0; /*le quitamos el margen a la lista*/ 
    padding:0; /*y el relleno*/
}
li {
    margin:0; /*le quito el margen al elemento de la lista*/ 
    float:left; /*y los floto a la izquierda para eliminar el salto de linea*/ 
}
li a {
    display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/ 
    background-color:#CC3300; /*algo de color*/ 
    color:#FFFFFF; /*mas*/ 
    width:58px; /*defino el ancho del rectangulo del vinculo*/
    padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/ 
    text-decoration:none; /*elimino el subrayado del vínculo*/ 
    font-weight:bold; /*decoración*/ 
    text-transform:uppercase; /*decorare los vinculos en mayusculas*/
}
li a:hover {
    background-color:#999900; /*decoración para el evento hover (mouse encima)*/ 
}

Esto es suficiente para cambiar el aspecto de la lista, y los vinculos en el menu. Así podemos jugar con los anchos y rellenos para lograr menúes mas complejos, poniendole bordes, etc ...
Ahora el contenido:

#contenido {
    width:580px; /*el ancho mas el padding me da 600px de ancho que es loque mide la pagina */
    clear:both; /*con esto nos aseguramos de que no se ponga nada a los lados*/ 
    padding:10px;
}

Algo de estilo para los titulos:

#contenido h2 {
    font-size:16px;
    color:#CC3300;
    width:246px;
    text-transform:uppercase;
    border-bottom:1px dotted #CC3300;
}
#contenido h3 {
    width:246px;
    font-size:14px;
    color:#999900;
    border-bottom:1px dotted #999900;
}

Y terminamos con el footer:

#footer {
    width:560px; /*menos porque debemos sumar el padding del div contenido*/ 
    text-align:right;
    padding:10px;
    font-size:80%; /*mas pequeño el texto*/ 
    font-style:italic;
    color:#999999;
}

Los comentarios en el codigo explican lo que hace cada uno de los atributos clave usados en el ejemplo.
Y con esto terminamos nuestra pagina, obteniendo este ejemplo terminado , una pagina semántica, facilmente entendible por los navegadores, los buscadores y por nosotros mismos.

Fuente: http://www.cristalab.com/tutoriales/tutorial-de-posicionamiento-y-layout-en-css-c111l/