SuperMag - Weblog de Armando Sosa

Inyección de vacío

Una de las metas del rediseño era tener la posibilidad de dar diferentes formatos a cada tipo de post. Creo que no es correcto que un post rapido y una reseña, un articulo de fondo y una noticia luzcan todo de la misma manera.

Ya que lo que necesitaba era flexibilidad, llegué a la conclusión de que la manera más correcta de obtenerla desde un punto de vista de diseño era utilizando una reticula y adaptar religiosamente el diseño a ella. Reconozco que mi decisión fue influenciada por éste, éste y especialmente éste articulo

Antes de escribir una sola línea de XHTML o CSS me senté a maquetar un diseño en photoshop e hice lo posible por no pensar mientras diseñaba como iba a hacer para convertir ese diseño en un sitio web funcional y enfocarme solamente en presentar la información de la mejor manera posible. Ésta es una pequeña parte de esa maqueta final:

Cuando quedé 99% contento con el diseño que había planeado entonces una de muchas preguntas vino a mi mente: ¿Cómo rayos voy a hacer para que esas imágenes floten en su propia columna junto al texto?

La primera opción que consideré fue usar margenes negativos: mover la imágen un numero de pixeles a la izquierda igual a su ancho y luego subir el siguiente parrafo un numero de pixeles igual a la altura de la imagen. Algo así es lo que había usado en Disenamos

  

    

    div.cont{
      padding-left:120px;
    }
		
    img.side_img{
      margin-left:-110px;
      border:1px solid #ccc;
    }

    .clear_element{
       margin-top:-100px;
    }


       
    <div class="cont">
      <img src="imagen.gif" width="100" height="100" class="side_img" alt="imagen de ejemplo"/>
      <p class="clear_element">
         este parrafo debe tener un margen negativo igual a la imágen que se va a desplazar arriba
      </p>
    </div>
  

Sin embargo, esta no era una solución viable ya que había que establecer de antemano la altura de las imagenes — algo que yo no quería hacer — y usar clases como anclas de estilo tanto en la imágen como en el elemento siguiente. Asi que tuve que buscar otra solución.

La siguiente opción fue jugar con posicionamiento y gracias a algunos extraños convenientes comportamientos de position:relative y position:absolute pude lograr imagenes que flotaran en una columna paralela al texto, de una anchura fija sí — ajustadas a la retícula— pero de altura variable.

El markup necesario es algo asi:

  <div class="cont">
	  <h2>Encabezado</h2>
		<img src="imagen.jpg" alt="imagen de ejemplo" class="side_img"/>
		<p>
		  Praesent malesuada. Curabitur hendrerit aliquam libero. 
		  Duis ante risus, fringilla sed, convallis in, porttitor vitae, ipsum. 
		  Nulla facilisi. Nullam feugiat est vel ligula. 
		  Cras commodo libero et ligula. Nulla vestibulum ante ac dui. 
		  Pellentesque habitant morbi tristique senectus et 
		</p>
  </div>

El secreto está en posicionar relativamente (position:relative) el elemento que va a contener el texto y las imágenes ( en este caso es <div class="cont">) pero sin especificar ningun valor para top ni left, de esta manera el elemento queda intacto dentro del flujo normal de la página pero ahora será posible aplicar posición absoluta a sus descendientes.

Para crear la columna donde flotarán las imágenes ( a esto se refiere el vacío del título, figúrese usted) especificamos un padding igual o mayor al tamaño predefinido de las imágenes (100px en el ejemplo).

El truco para que las imágenes floten es aplicarles, en la hoja de estilo correspondiente, position:absolute. Con esto, la imágen desaparece del flujo normal de la pagina y el resto de los elementos se recorren como si no existiera.

El posicionamiento absoluto se refiere a que es posible especificar las coordenadas de un elemento respecto al primer ancestro posicionado. Por eso posicionamos relativamente el elemento contenedor, para que poder colocar las imagenes con respecto a este, si no se encuentra ningun ancestro posicionado entonces los elementos se posicionan respecto al elemento body, esto es igual a la ventana del navegador. Especificados en pares, las reglas de css top, bottom,left yright señalan la posición deseada del elemento. Si no se especifica ningun valor para estas reglas, toman el valor por defecto auto, que es igual a la posición que tendría el elemento en el flujo normal del documento. Para colocarlo a la izquierda del contenedor sin afectar su posición vertical especificamos solo la regla left:0 (o puede ser left:5px, para simular un padding).

Puse un ejemplo de los pasos a seguir aquí: Tecnica de Inyección de Vacío

Esta técnica se puede usar no solamente para imagenes sino tambien para posicionar cualquier elemento de bloque con anchura definida y en cualquier posición con respecto al elemento padre ((yo la usé mucho en dospuntocero 2.0). Aca hay un par de ejemplos más: más Tecnica de Inyección de Vacío

Espero que les sea de utilidad.