10 sencillos pasos para aprender posicionamiento CSS

El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien maquetado debería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores, es decir, mejor para SEO, y un tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página.

El otro día, vía Twitter me os hablé de un pequeño tutorial donde se enseñaban las bases del posicionamiento CSS en 10 lecciones prácticas. El tutorial me pareció muy bueno y creo que es básico para cualquier persona que quiera aprender a maquetar sitios web con CSS.  Los pasos son realmente sencillos de seguir.
Para todo el tutorial se va a utilizar siempre la misma estructura XHTML, que se muestra a continuación.

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.

id = div-1c

id = div-after

POSITION STATIC

El posicionamiento normal de todos los elementos es static, que significa que cada elemento se posiciona donde le corresponde según el flujo normal de la página. Si no se indica nada, este es el valor que toman todos los elementos.

#div-1 {
    position:static;
}

El resultado que se muestra es el mismo que si no se hubiese aplicado ninguna regla CSS.

Posicionamiento CSS estático. Propiedad static.

POSITION RELATIVE

Si se especifica la posición relativa para un elemento, puedes posicionar este elemento usando las propiedades top, bottom, left y right, y el elemento se posicionará a la distancia indicada respecto de donde debería estar según el flujo normal de la página.

#div-1 {
    position:relative;
    top:20px;
    left:-40px;
}

Posicionamiento relativo en CSS.

POSITION ABSOLUTE

Si se especifica position absolute, el elemento se muestra exactamente donde se indica en las propiedades top, bottom, left o right.

#div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
}

Posicionamiento CSS absoluto

POSITION RELATIVE + POSITION ABSOLUTE

Si especificas la posición de div-1 de forma relativa, todos los elementos contenidos dentro de div-1 se posicionaran relativamente a div-1, por lo tanto si le establecemos la posición absoluta a div-1a, este se posicionará en la esquina superior derecha del contendor div-1.

#div-1 {
     position:relative;
}
#div-1a {
     position:absolute;
     top:0;
     right:0;
     width:200px;
}

Posicionamiento CSS relativo + absoluto

2 COLUMNAS POSICIONADAS DE FORMA ABSOLUTA

Utilizando posicionamiento relativo en el contenedor y absoluto para las columnas se pueden posicionar las columnas, una en cada lado.
Una ventaja de usar este posicionamiento es que se puede colocar el HTML de las columnas en cualquier orden, ya que el posicionamiento se realiza de forma absoluta.

#div-1 {
      position:relative;
}
#div-1a {
      position:absolute;
      top:0;
      right:0;
      width:200px;
}
#div-1b {
     position:absolute;
     top:0;
     left:0;
     width:200px;
}

Posicionamiento CSS de columnas de forma absoluta
Si te fijas, los demás elementos han sido tapados por las dos columnas que están posicionadas de forma absoluta. Vamos a ver cómo solucionar esto.

COLUMNAS POSICIONADAS DE FORMA ABSOLUTA CON ALTO DEFINIDO

Para poder visualizar el contenido tapado por las dos columnas, habría que darle un alto definido al elemento contenedor, de esta forma ya se visualizarían.

#div-1 {
    position:relative;
    height:250px;
}
#div-1a {
    position:absolute;
    top:0;
    right:0;
    width:200px;
}
#div-1b {
    position:absolute;
    top:0;
    left:0;
    width:200px;
}

posicionamiento CSS de columnas con alto fijo
Pero esta no es una solución válida para la mayoría de los diseños, porque lo normal es que no se sepa cual va a ser la longitud del texto introducido en las columnas. ¿Cómo se puede solucionar esto? Sigue leyendo…

POSICIONAMIENTO FLOTANTE

Para columnas de altura variable, el posicionamiento absoluto no sirve, en este caso hay que utilizar el posicionamiento flotante. Con la propiedad float se puede posicionar un elemento lo más a la derecha posible o lo más a la izquierda posible, dejando que el resto de elementos fluya alrededor suyo. El div div-1a está flotado a la izquierda, y el texto del resto de divs fluye alrededor el div-1a, pero el resto de divs (div-1b y div-1c) siguen ocupando la misma posición que antes, es decir todo el contendor, porque son elementos de bloque. Esto significa que el texto no se solapará con div-1, pero si le asignas una imagen de fondo con CSS, esta imagen sí que se solapará con div-1.

#div-1a {
    float:left;
    width:200px;
}

Posicionamiento CSS flotante

COLUMNAS FLOTANTES

Para que no se solapen unos elementos con otros hay que flotar todas las columnas. Para que se muestren una al lado de otra, entre todas las columnas han de sumar un ancho no superior al ancho del contenedor. Si te fijas, tanto div-after, como div-1 (que hace de contenedor) se solapan con las columnas creadas, vamos a ver como solucionar esto.

#div-1a {
    float:left;
    width:150px;
}
#div-1b {
    float:left;
    width:150px;
}

Posicionamiento CSS con columnas flotantes

COLUMNAS FLOTANTES CON CLEAR

Luego, en el último div (div-1c), en este caso el que hace de pie, se le puede añadir la propiedad clear, para que deje de tener efecto el flotado de las columnas de arriba y el resto del contenido se posicione debajo.

#div-1a {
    float:left;
    width:190px;
}
#div-1b {
    float:left;
    width:190px;
}
#div-1c {
     clear:both;
}

paso9

FIN

Con estos pasos se ha aprendido lo básico del posicionamiento CSS. Se han dejado bastantes cosas por ver, como la compatibilidad entre navegadores, etc… Pero creo que es una buena introducción para aprender a colocar cada elemento de la página donde le corresponde sin usar tablas o técnicas desaconsejadas.
Este tutorial está basado en el tutorial de BarelyFitz Designs.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s