Ver: Positión: Imágenes fijas... o desubicadas I.

Además del anteriormente comentado FIXED, los otros valores interesantes para el atributo POSITION, son ABSOLUTE y RELATIVE. Con ellos podemos conseguir que un elemento se muestre en un lugar distinto del que le correspondería. Como este concepto es un poco farragoso y explicarlo con palabras resulta bastante espeso, mejor damos unas explicaciones gráficas.

Empezaremos por un posible valor más, que todavía no hemos mencionado y que es STATIC. No reviste especial interés porque es el que llevan por defecto todos los elementos HTML. Tanto si se indica un POSITION:STATIC; como si no se coloca ningún atributo de posición, el elemento se colocará en nuestra pantalla justo a continuación del último elemento mostrado. Lo que hasta ahora hemos considerado normal o en su sitio.

En el ejemplo, colocamos un texto, una imagen y otro texto y en ese mismo orden. Suponemos que no hemos insertado ningún salto de línea, etiqueta de párrafo, o similar.



ABSOLUTE funciona prácticamente igual que FIXED, puesto que sitúa los elementos a la distancia del margen que se indique. Pero hay una sutil e importante diferencia... Mientras que TOP/BOTTOM - RIGHT/LEFT estaban referenciados con FIXED a los límites de nuestra ventana o pantalla, con ABSOLUTE las referencias son los márgenes del bloque contenedor del elemento. Si no hay ninguno específico, se considera como contenedor el BODY.

En el siguiente ejemplo el DIV que forma el rectángulo rojo es la referencia, por cual, cuando indicamos un valor absoluto de BOTTOM:31PX; y LEFT:31PX; los desplazamientos se hacen con respecto a los márgenes de ese DIV.



De esta manera, el botón NO se nos va abajo y a la izquierda de la pantalla como pasaría con FIXED, sino que se coloca a 31px del borde inferior del recuadro y a otros 31px de su lado izquierdo.

Es importante tener en cuenta que para que este atributo funcione como queremos, el contenedor del elemento debe estar fijado a su vez con FIXED, ABSOLUTE o RELATIVE. Como veremos ahora, salvo que se quiera también sacar el rectángulo rojo del flujo normal, lo correcto sería usar POSITION:RELATIVE; sin parámetros, que es lo mismo que dar instrucciones para que se quede en su sitio.

Otra cosa a tener en cuenta, es que ABSOLUTE saca totalmente la imagen del flujo de código, por lo que la segunda frase se escribe a continuación de la primera. Si el texto coincidiera con la imagen, esta última simplemente se solaparía por encima.


RELATIVE nos sirve también para desplazar elementos, pero en este caso, en relación al lugar dónde le correspondería estar siguiendo el flujo de HTML. Tal que así...



Observareis que con respecto a la ubicación normal (primer ejemplo gráfico), la esquina superior izquierda del botón, se ha desplazado 31 pixels hacia abajo. Leyendo la instrucción literalmente, hemos marcado el punto inicial (0,0) en el lugar dónde la imagen debería ir normalmente y desde ahí hemos contado 31 pixels, dejando por arriba de ella (TOP) ese espacio. Ahora la imagen la tenemos a partir del punto (0,31)
(*) La línea discontinua, puesta de guía para la explicación, no marca con exactitud el lugar inicial.

Pero ¿qué ha pasado con el segundo texto al quitar la imagen"? La respuesta es NADA. El espacio que ocupaba la imagen sigue reservado y por tanto el resto de elementos no cambian de posición. La segunda frase no se recoloca a la derecha de la primera y tampoco se reubica después de la imagen. Distinto sería si tuviera también otro atributo de posición, pero como no es así se considera STATIC.

Por tanto, hemos conseguido que la imagen realmente flote dónde nosotros queremos sin alterar el resto del contenido. Aunque algo desafortunada, flotar es la mejor expresión que se me ocurre para explicar el efecto, ya que el espacio natural de la imagen sigue reservado y esta se superpondrá con aquello que se encuentre por el camino, salvo que un Z-INDEX le indique lo contrario. Pero ese es otro tema...

Si utilizáramos BOTTOM, la imagen se desplazaría hacia arriba porque los pixels indicados los dejaríamos por debajo.



Y con esto último, ya empezamos a ver una especial utilidad de usar RELATIVE en el posicionamiento de elementos y es que ¡nos podemos salir del contenedor sin problemas!. La diferencia con ABSOLUTE es que este último fija los elementos con respecto a la página y RELATIVE lo hace con respecto a un bloque de información. La página (ventana) puede cambiar de tamaño por las distintas resoluciones de los usuarios y eso nos podría crear más de un problema. Sin embargo, los contenedores se pueden definir de tamaño fijo, independientemente de la resolución de la pantalla por lo cual, con RELATIVE, la posición del elemento siempre estará a la misma distancia de su contenedor.

Otra cosa a tener en cuenta es que se pueden usar valores negativos. De esta manera para llegar a cualquier punto, podemos usar también la referencia opuesta, siempre que cambiemos el signo de la distancia en pixels. Esto en cristiano, quiere decir que, por ejemplo, TOP:31PX; produce el mismo efecto que BOTTOM:-31PX; y LEFT:-88PX; es lo mismo que RIGHT:88PX;

Añadamos ahora un desplazamiento horizontal al ejemplo 3 para ver también el solapamiento de elementos.



Con el right:176PX; que hemos añadido, estamos indicando que desde la esquina superior izquierda del elemento al punto original, deberán quedar 176px por la derecha. Como podeis ver, lo único que se sigue moviendo es la imagen y esta se superpone sobre el resto de elementos.

Pero bueno, esto no es del todo cierto, porque si habeis sido buenos observadores, os habreis dado cuenta de que en los ejemplos 1, 2, 3 y 4, el enlace está tanto en el espacio reservado de la imagen como en la ubicación desplazada de la imagen. Pasando el puntero por encima se puede comprobar. Esto es porque en esos tres casos, no se ha aplicado ningún desplazamiento al elemento A (enlace) y este se ha quedado en su sitio.

Podría ser útil en alguna ocasión, pero no es lo normal. Así que para solucionarlo, en este último caso (ejemplo 5), se ha desplazado en primer lugar el enlace, aplicando el mismo método que para la imagen y, a continuación, la imagen se ha desubicado mediante otro POSITION:RELATIVE; Sin embargo, como esta última se desplaza respecto de su contenedor (A) y este ya lo tenemos bien colocado, el desplazamiento deberá ser cero (TOP:0PX;LEFT:0PX;) para que la imagen quede justo encima del enlace. Ahora sí que tenemos una imagen descolocada y el enlace correspondiente en el mismo lugar.

No me veo capaz de explicarlo mejor, así que ¡suerte!

En ocasiones necesitamos colocar una imagen u otro elemento en un sitio fijo de nuestro blog, independientemente del flujo que el HTML genera en el resto del contenido. Lo de sitio fijo es muy relativo, porque como vamos a ver, las cosas pueden fijarse con respecto al todo (ventana navegador) o en una posición relativa a un contenedor concreto.

La primera opción es la más fácil. Se trata de colocar algo en una determinada posición del navegador. Insisto en la palabra navegador y evito usar web, porque es así como funciona este sistema. Lo que ubiquemos de esta manera se situará en relación a los bordes de la ventana que utilicemos. Por tanto, cuando usemos ventanas más grandes o más pequeñas, el contenido de la web es posible que se desplace, pero no así el elemento fijado.

Veamos un ejemplo:


Este código se puede colocar en cualquier parte dentro del HTML. Es decir, en cualquier ubicación entre <body> y </body>. No vayamos a fastidiar metiéndolo en mitad de un <li>, <frame... o algo similar. Quiero decir en cualquier sitio razonable.

Con ese código, la imagen se verá abajo a 20px del borde inferior y a otros tantos del borde derecho.


Si cambiamos la resolución de nuestra pantalla o simplemente agrandamos o encogemos nuestra ventana, los elementos normales se desplazarán para mantener la alineación marcada desde la hoja de estilo, pero la imagen seguirá a 20px de la parte inferior y 20px de la derecha. Esto ocurre también cuando nos desplazamos verticalmente con la barra de desplazamiento.



La palabra clave es FIXED, en combinación con el atributo POSITION. Posteriormente necesitamos indicar la posición exacta mediante los atributos TOP/BOTTOM (arriba/ debajo) y LEFT/RIGHT (izquierda/derecha). Estos atributos admiten como parámetros tanto una cantidad en pixels como un porcentaje. Con porcentajes sí que la imagen "fijada" se desplazará cuando usemos la barra de idem, buscando precisamente la altura/anchura indicada.

Esta es la clase de código que se ha usado para la pantera que teneis corriendo por la izquierda. Se ha fijado con un TOP:50%;LEFT:50PX; . Si haceis scroll por esta pantalla, la pantera no se moverá. Si cambiais el tamaño de la ventana, también seguirá a la misma distancia del lado izquierdo. Sin embargo, si el cambio de tamaño (o resolución) afecta a la altura total de la ventana, la imagen "buscará" la altura media de la ventana, por el efecto del 50% indicado.

Todo lo que hemos contado hasta ahora para las imágenes, sirve exactamente igual para cualquier otro elemento o combinación de elementos: un enlace, un cuadro de texto, una tabla, imagen con enlace...


Otros de los valores de POSITION que también nos pueden ser de utilidad, son RELATIVE y ABSOLUTE, que nos permiten colocar un elemento en cualquier punto de un contenedor, pero de manera independiente al resto de lo escrito o "dibujado". Es decir, para que no siga el orden en que está redactado. Pero como estos ya dan para otro post, nos vemos en Position: Imágenes fijas... o desubicadas II.

Nota: Al estar los códigos de la pantera y del botón insertados en el propio post para no interferir en todo el blog, puede que con IE no se ubiquen bien las respectivas imágenes. Insertando el código de la manera que se explica directamente en la plantilla, no existiría este problema... y usando Firefox, seguro que tampoco :)

La verdad es que esto de Blogumus da mucho juego. Investigando cómo acoplar la ya famosa nube de etiquetas 3D, para que sirva para cualquier tipo de enlace, me encontré con un post de Roy Tanck (el autor del artilugio) sobre una adaptación para mostrar las fotos de Flickr.

Aunque lleva ese título, una reciente actualización anuncia que también es válido para Picasa. Personalmente sólo he podido aplicarlo con Flickr, pero supongo que si lo que hace es trabajar con un feed de imágenes, cualquiera debería servir. Quizás se trata de algún problemilla pendiente de solucionar.
Actualización: Sólo hay que escoger bien el feed y sin problemas. Confirmado por Chacien y mediante el ejemplo de la derecha que usa un feed de Picasa.

En el apartado Get My Flickr Widget, sólo tienes que teclear el feed, el tamaño y el color de fondo, para conseguir el código. Copy-paste y listo: el artilugio funcionando.

No obstante, si preferís algo más manual, el código estándar es este y lo marcado en negrita corresponde respectivamente al ancho, alto, color de fondo y feed.

A ver... si podemos usar el flash Blogumus para hacer una nube de etiquetas 3D de nuestro blog ¿por qué no usar el mismo sistema para otro tipo de enlaces?

Esther nos preguntó hace unos días cómo hacerlo y la verdad es que resulta bastante fácil.

Una ventajilla es que como ya no vamos a utilizar las etiquetas de nuestro blog, tampoco es necesaria la parte del código que define este artilugio cómo widget de Blogger. Si se utiliza de esta otra manera, lo podremos agregar sin problemas desde Elementos de Página sin tener que acceder a la plantilla.

Como la presentación de este artilugio en Oloblogger se convirtió en un confuso post lleno de actualizaciones, reproducimos ahora el código fetén para etiquetas. Todo esto hay que insertarlo justo después de <b:section class='sidebar' id='sidebar' preferred='yes'>

---

Hasta aquí era lo que hacíamos normalmente. Ahora vamos a convertir este widget en una nube de enlaces simple. En primer lugar quitamos las líneas en gris, que son las que sirven para generar el widget en la plantilla. Luego eliminamos la parte en verde es la que genera las etiquetas y, por último insertamos en ese mismo sitio los enlaces que queremos poner.

El código resultante sería cómo este. En lugar de acceder por la plantilla como hacíamos en el primercaso, nos vamos a Elementos de Página, y creamos un Nuevo Elemento HTML. En él se copia este código:


Todo lo que está en negrita son los enlaces. Sólo tienes que sustituir URL_X y ENLACE_X por las direcciones y palabras correspondientes a tus enlaces, colocando tantas líneas de enlace como quieras mostrar. Con eso el artilugio funciona como blogroll, como enlaces recomendados, para colocar a vuestros amigos, para intercambiar links...

Para colocar una imagen en un post, utilizamos la etiqueta IMG SRC que, en un principio, tiene una redacción muy sencilla:


Observad que el código incluye una barra de cierre (/) que nos permite ahorrarnos el </img> Así tal cual, si escribimos ese código y continuamos con el texto, este se situará en la línea correspondiente a la base de la imagen, tal y como se puede ver en este mismo párrafo.

Comprobareis que esa presentación no resulta muy grata a la vista, pero el lenguaje HTML nos permite conseguir fácilmente que el texto pueda quedar "rodeando" la imagen. De esta manera, ambos quedarán mejor integrados. Para eso tenemos que utilizar la etiqueta STYLE y asignarle un atributo FLOAT, tal que así:


El resultado en este caso es el que se observa en la imagen del bichito corriendo a la derecha... pero todavía podemos mejorar un poco.

Si os fijais bien, las letras se pegan totalmente al lado izquierdo de la imagen. Para arreglar esto, añadimos un MARGIN a la etiqueta STYLE, colocando algunos pixels arriba, debajo y a la izquierda. A la derecha no sería necesario porque no hay texto en este caso. Si usáramos un FLOAT:LEFT, como hemos hecho en el bicho de la izquierda, sería al contrario: con margen a la derecha y sin él a la izquierda. El código de este último ejemplo, quedaría por tanto así:


Recordamos que las cifras tanto en el atributo MARGIN, como en el PADDING, se expresan en el siguiente orden: arriba, derecha, debajo, izquierda.

Nada impide usar varias imágenes flotantes a la misma altura o incluso a distinta. Las dos de la izquierda tienen un FLOAT:LEFT y se mostrarán en el mismo orden en que se redacte el código. La primera que se teclee es la que quedará más a la izquierda.

La que flota a la derecha, puede ir escrita antes o después, porque siempre que no coloquemos un retorno de carro (ENTER) se irá a la derecha sin mayores interferencias.

Entre imágenes o entre una imagen y texto, se puede colocar un espacio en blanco y se interpretará como tal siempre que no exista un margen. Esta es otra manera de separar un poco dos imágenes que no tengan ningún atributo FLOAT.

El código de la imagen hay que ponerlo justo donde queremos que tenga su parte superior. Por ejemplo, las tres etiquetas IMG de las columnas anteriores, están escritas justo delante de la palabra "Recordamos".

Otra utilidad que le podemos dar a FLOAT, sería para crear columnas de texto (estilo periódico). Se puede definir un bloque (DIV) alineado al centro y ocupando un 100% del ancho. Dentro de él, tantos bloque más como columnas necesitamos. Colocamos margen derecho e izquierdo a la primera y sólo derecho a las restantes (excepto a la última). Luego le asignamos a cada una un porcentaje sobre el ancho total. La suma de las tres no podrá suponer el 100%, porque los márgenes también consumen espacio. A continuación un ejemplo y después su código.