Algunos trucos CSS simples para la maquetación de páginas web

El lenguaje CSS permite maquetar las páginas web utilizando las capas para ello. Pero quienes se inician en este tema, suelen encontrar algunos problemas que les resulta imposible de resolver, mayormente por falta de conocimiento de las posibilidades en la aplicación de algunas propiedades o valores de las mismas.

Hemos visto en otros artículos, que los diseñadores de páginas web, aún algunos con cierta experiencia, que desconocen estos temas en profundidad, y terminan recurriendo a complicadas soluciones cuando podrían optar por emplear algunas propiedades CSS cuyo uso no es extendido.

En realidad se trata de pequeños problemas que tienen soluciones sencillas y que solo requiere el conocimiento completo de todas las posibilidades, además de imaginación para su aplicación. Es por ello que hoy traemos algunos trucos para ejemplificar la forma en que se deben solucionar los problemas de maquetación. Si bien estos ejemplos pueden aplicarse libremente, la intención de presentarlos es que sirvan de ejemplo para que estudien exhaustivamente todas las propiedades CSS y el alcance de sus valores, lo que hará que el trabajo se simplifique enormemente.

Imagen flotante sin que el texto se ajuste

Cuando intentamos incorporar una imagen flotante junto a un párrafo, el texto del párrafo tiende a “envolver” a la imagen. Esto generalmente es el efecto deseado, para que no aparezcan espacios en blanco debajo de la imagen. Sin embargo, es posible que algún diseño requiera que la imagen mantenga una posición (como si ocupara una columna) y que el texto no ocupe espacio debajo de ella. Esto es muy simple de hacer, y basta con la aplicación de capas y márgenes.

En primer lugar, veremos como queda la maquetación cuando colocamos una imagen flotante junto a un párrafo:

<div id="capa">
<img src="imagenes/agua.jpg" alt="agua" />
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza 
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del 
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos 
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72% 
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, 
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema 
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, 
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el 
vapor que compone sus colas.</p>
</div>

#capa {
  width: 610px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #f60;
  background: #fed;
  }
  
#capa img {
  float: left;
  margin: 0 10px 10px 0;
  }

A continuación veremos el ejemplo. Se trata simplemente de crear dos capas. La primera, es una capa contenedora, a la que hemos dado algunos elementos de diseño (borde, fondo, etc.), a la que hemos dado el identificador “principal”. Dentro de esta capa, crearemos una segunda capa, a la que daremos el identificador “flotante”, cuya característica principal es que tendrá la propiedad float y dentro de la cual incluiremos la imagen. Luego, dentro de la capa “principal”, incluiremos el párrafo. Los códigos y el resultado son los siguientes:

<div id="principal">
<div id="flotante">
<img src="imagenes/agua.jpg" alt="agua" />
</div>
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza 
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del 
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos 
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72% 
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, 
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema 
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, 
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el 
vapor que compone sus colas.</p>
</div>

#principal{
  width: 610px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #f60;
  background: #fed;
  }

#principal #flotante{
  float: left;
  width: 300px;
  }

#principal p{
  margin-top: 0;
  margin-left: 310px;
  }

Lo que produce el efecto deseado es:

• La capa “flotante” tiene la propiedad “float” a la izquierda.
• El párrafo (identificado como “#principal p” en el código CSS) tiene un margen derecho tal que es igual al ancho de la capa “principal” menos el ancho de la capa “flotante”, lo que permite que ésta se coloque a la derecha del párrafo.
• El margen otorgado al párrafo es lo que hace que el texto no continúe hacia la derecha luego de que el espacio ocupado por la imagen finalice.

Esto puede hacerse también con la imagen flotante hacia la derecha. Para ello deberemos solo cambiar el “float:” de izquierda a derecha, al igual que el margen que se da al párrafo, con lo que el texto aparecerá a la derecha y la imagen a la izquierda.

Esquina “doblada” en capa

El siguiente ejemplo, se trata simplemente de crear una capa que aparente una hoja cuya esquina inferior derecha está doblada. Para ello deberemos contar con la siguiente imagen, la que para utilizarla solo deberán utilizar el botón derecho del ratón sobre ella y emplear la opción “Guardar como…”:

A continuación mostraremos los códigos que hemos utilizado en este ejemplo y la imagen resultante, para posteriormente explicar como lo hemos hecho:

<div id="oscuro">
<div id="esquina">
<p>El agua (del latín aqua) es una sustancia cuya molécula está formada por dos átomos
de hidrógeno y uno de oxígeno (H2O). Es esencial para la supervivencia de todas las
formas conocidas de vida. El termino agua, generalmente, se refiere a la sustancia en
su estado líquido, pero la misma puede hallarse en su forma sólida llamada hielo, y
en forma gaseosa denominada vapor. El agua cubre el 71% de la superficie de la corteza 
terrestre.[2] Se localiza principalmente en los océanos donde se concentra el 96,5% del 
agua total, los glaciares y casquetes polares poseen el 1,74%, los depósitos 
subterráneos (acuíferos), los permafrost y los glaciares continentales suponen el 1,72% 
y el restante 0,04% se reparte en orden decreciente entre lagos, humedad del suelo, 
atmósfera, embalses, ríos y seres vivos.[3] El agua es un elemento común del sistema 
solar, hecho confirmado en descubrimientos recientes. Puede ser encontrada, 
principalmente, en forma de hielo; de hecho, es el material base de los cometas y el 
vapor que compone sus colas.</p>
</div>
</div>

#oscuro  {
  width: 420px;
  background: #444;
  padding: 60px;
  }
  
#esquina  {
 background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
 }

#esquina p  {
  padding: 50px;
  margin: 0;
  }

La imagen de la esquina doblada tiene dos colores fundamentales: el gris oscuro del fondo, y el color blanco de la mayor parte del resto de la imagen, que coincide con los bordes de la misma (esto es importante para que no existan diferencias con el resto de la capa). El truco solo consiste en utilizar una propiedad de la que ha hemos hablado, que es el posicionamiento de las imágenes de fondo.

En primer lugar crearemos la capa contenedora, que será de color gris oscuro para que coincida con el fondo de la imagen. Luego crearemos la capa donde se insertará el texto (o cualquier otro contenido), cuyo fondo tiene el siguiente código CSS:

#esquina  {
 background: #fff url(imagenes/imagen3.jpg) bottom right no-repeat;
 }

Se trata en realidad de varias propiedades que se encuentran simplificadas:

• Background-color, que tiene el valor #fff y que es visible en todos los puntos de la capa que no se encuentran cubiertos por la imagen.
• Background-image, cuyo valor es la URL de la imagen de la esquina doblada.
• Background-position, que tiene los valores bottom y right, para que la imagen de fondo se ubique en la esquina inferior derecha de la capa.
• Background-repeat, que tiene el valor no-repeat, para que no ocupe el resto de la capa y sea visible una sola vez.

Además, se debe hacer que el párrafo o cualquier otro contenido que se encuentre en la capa tenga un relleno tal que dicho contenido no se monte sobre la imagen utilizada en la esquina. Este efecto puede utilizarse (modificando la posición de la imagen de fondo y utilizando una imagen apropiada) en cualquiera de las cuatro esquinas de la capa.