Imágenes en Blogger (Posición)

En la Introducción al uso de las imágenes en Blogger, había mostrado como, utilizando la propiedad float, se las podía alinear con respecto al texto. Más adelante, al hablar de Bordes, se vió que las imágenes y los textos también podían superponerse. Ahora, es tiempo de mostrar otras formas de posicionar los elementos dentro de una página web.

Estas son las propiedades que nos permiten manipular los tamaños y posición de los elementos.

position: static | relative | absolute

Determina la forma en que se ubica un elemento. Usando static se ubica en un lugar fijo (es el valor por defecto), con relative se puede ubicarlo en función de las propiedades de desplazamiento (left, top, bottom, right) y con absolute puede ser ubicado en cualquier lugar de la página.

bottom: auto | tamaño | porcentaje
left: auto | tamaño | porcentaje
right: auto | tamaño | porcentaje
top: auto | tamaño | porcentaje

Establece la distancia desde el borde inferior, izquierdo, derecho o superior de un elemento con un elemento contenedor. Si position está establecida como static, estas propiedades no tienen efecto.

width: tamaño | porcentaje | auto
height: tamaño | porcentaje | auto

A cada elemento se le puede dar un ancho, y una altura especificados como una longitud, un porcentaje o como auto (que es el valor inicial).

En estos ejemplos, el contenedor es el cuadrado blanco, y en todos los casos se establece left:20px y top:20px

static	relative	absolute
		La imagen se mostraría a 20 pixeles del ángulo superior izquierda de la página. Es imposible saber en que parte de la página se muestra este post.

En el primer caso position:static hace que se ignoren todas las demás, la imagen se muestra en forma normal. En el segundo caso, la posición es relativa tomando como coordenada 0,0 el ángulo superior izquierdo del contenedor.

Cuando la posición es absoluta, el elemento se ubica en una coordenada exacta de la página. Las plantillas de Blogger utilizan este método para crear los layouts, esto es, dividen la página en sectores, asignándoles tamaños y posiciones absolutas (el header, las columnas laterales, etc.)

Definir la posición de un elemento combinado con el uso de fondos, permite ampliar las posibilidades. En estos ejemplos la estructura del código es la misma y sólo cambian los valores:

<img src="URL_imagen" />
<div style="position: ... ;left:valor; top:valor;">....... cualquier texto .......</div>

static	relative top: -50px	relative top: -100px
NORMAL	AL MEDIO	BIEN ARRIBA

Hay que recordar que los elementos son rectángulos. Supongamos que tenemos algo así:

<div ....... [ 1 ] ....... >
 <div ....... [ 2 ] ....... >
      <img ....... [ 3 ] .......  />
           <p> ....... [ 4 ] ....... </p>
 </div>
</div>

La posición es relativa con respecto al elemento contenedor inmediato. Si este contiene elementos, todos se mueven con él. En este ejemplo, el DIV [ 1 ] es un rectángulo de color blanco de 200x150, el DIV [ 2 ] es un rectángulo de color azul de de 150x130. Dentro de este último hay dos elementos, IMG [ 3 ] que tiene 120x89 y el párrafo P [ 4 ]. En todos los casos, vamos a agregar position:relative; left:20px; top:20px

NORMAL	[2] RELATIVO
[3] RELATIVO	[4] RELATIVO

El primer caso es el resultado por defecto, no hay posicionamiento, cada elemento es estático. En el segundo caso, al posicionar en forma relativa el elemento [ 2 ], este y todo su contenido (la imagen y el párrafo), se desplazan. En el tercer caso, sólo se desplaza la imagen [ 3 ]. En el cuarto caso, se desplaza el párrafo [ 4 ] que casi se sale del bloque azul y queda oculto.

Hay una propiedad que permite controlar qué se va a hacer cuando un elemento sobrepasa el área de su contenedor:

overflow: visible | hidden | scroll | auto
overflow-x: visible | hidden | scroll | auto
overflow-y: visible | hidden | scroll | auto

El valor visible es el valor por defecto, el contenido no es cortado si sobrepasa los límites. Con hidden el contenido es cortado y con scroll el contenido es cortado y se muestran barras de desplazamiento.

Vamos a agregar la propiedad overflow en el DIV [ 2 ] (el azul):

hidden	scroll
[4] RELATIVO	[4] RELATIVO

Lamentablemente, overflow es una propiedad que en Internet Explorer no funciona correctamente (aparentemente la versión 7 ha corregido el problema), por lo tanto, en ese navegador, hidden no tendrá ningun efecto.