oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 14: Posicionar elementos
En esta lección vamos a ver las posibilidades que nos brinda el uso de CSS para posicionar elementos en el lugar exacto que queramos en nuestra página web. Además si lo usamos conjuntamente con las flotaciones (lo hemos visto en la lección anterior), podremos crear presentaciones mucho más precisas y avanzadas, dándole un aspecto mucho más profesional a nuestra web.
¿Qué rige el posicionamiento CSS?
Simplemente tienes que imaginarte la ventana de tu navegador como si fuera un sistema de coordenadas:
Pués partiendo de esa teoría podríamos decir que el posicionamiento en CSS está regido por el sistema de coordenadas y así podremos colocar cualquier elemento o caja en cualquier lugar del sistema de coordenadas.
Por ejemplo, imagina que queremos colocar un título dentro de una "caja" (Modelo de caja) en la esquina superior izquierda, digamos que a 100px del borde superior y a 50px del borde izquierdo.
El código CSS sería el siguiente:
h1 {
position: absolute;
top: 100px;
left: 50px;
}
Usando el posicionamiento en CSS podrás colocar elementos de una forma mucho más sencilla y precisa que intentar colocarlos mediante tablas por ejemplo.
Posicionamiento absoluto
Posicionamiento absoluto quiere decir que el elemento a posicionar no ocupará espacio alguno en el documento, es decir, no deja un espacio vacio después de ser posicionado.
Para posicionar un elemento como absoluto usaremos la propiedad position con valor de absolute. Después usa las propiedades top (superior), right (derecha), bottom (inferior), y left (izquierda) para definir los píxeles de separacíon de los márgenes para colocar la "caja".
Posicionamiento relativo
Posicionamiento relativo quiere decir que el elemento a posicionar si ocupará espacio en el documento, es decir, deja un espacio vacio después de ser posicionado.
Para posicionar un elemento como relativo usaremos la propiedad position con valor de relative. Después usa las propiedades top (superior), right (derecha), bottom (inferior), y left (izquierda) para definir los píxeles de separacíon de los márgenes para colocar la "caja".
Con esto acabamos la lección de posicionamiento en CSS, en la siguiente lección veremos un poco de como CSS trabaja con las "capas". Venga!! te espero allí...
Quiero aprender más!!!
- Avanzar a Lección 15: Capas (z-index)
- Retroceder a Lección 13: Elementos flotantes
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®