Álvaro Castaño

Parte de la culpa de que los diseños y la web en general esté cambiando de aspecto es por el abandono de las odiosas tablas, sus horribles bordes y lo que retrasan la carga de la página y ensucian el código fuente. Ahora cualquier cosa que una tabla podía hacer, se puede conseguir perfectamente con una capa (div) o una lista (ol,ul,li) con menos bytes usados y con mucho mejor rendimiento. Voy a contaros algunos truquillos útiles cuando se usan las capas:

» ¿Uso ID o CLASS?

Para darle color, un borde, alineación.. etc a una capa, esto se puede hacer de tres formas. La primera, que desaconsejo desde ya, es haciéndolo en el mismo archivo HTML:

<div style="background-color:white;border:1px solid black">Blah</div>

Lo correcto sería definir ese estilo desde una hoja de estilos (CSS) y aplicársela a la capa usando ID o CLASS. ¿Cuándo usar una y cuándo otra?

• Usa ID siempre que puedas, en cualquier caso excepto cuando has de usar el mismo estilo para dos o más capas distintas. ID tiene 3 letras menos que class (50 capas usando ID ocupan ~200 bytes menos que con class). Además puedes usar elementos como el común “↑ Volver arriba “.
• Usa CLASS cuando tengas que usar un estilo varias veces. El ID es cómo el ADN, irrepetible. Sin embargo, el CLASS es un elemento como el color de pelo, que pueden compartir muchos individuos distintos.

» ¿Cómo evito liarme con el código?

Existen básicamente 3 técnicas (que yo conozca) para escribir el código de manera que al volver a editarlo, sepas qué capa está dentro de cuál. Aparte de usar saltos de línea, lo cual ya aclara bastante la maraña de código, se suelen hacer estas tres cosas:

• Usar nombres que reflejen jerarquía: Llamar a una capa padre, y a una en su interior hijo, refleja bastante bien qué capa está dentro de cuál. Esto es algo bastante utilizado y a veces simpático. También se pueden usar números o letras ordenados.
• Usar tabulación: Seguramente lo más usado. Una capa más a la derecha que otra, refleja que está contenida en ella.
• Usar comentarios: Quizá lo más cómodo, documentar el fin de cada capa. Puedes usar algo como <!– Termina cabecera –> para saber que ahí terminó esa capa, y lo anterior está dentro de ella.

Los tres métodos usados a la vez daría algo así:

<div id="padre">
     <div id="hijo">
          <div id="nieto">
          </div> <!-- Aquí termina nieto -->
     </div> <!-- Aquí termina hijo -->
</div> <!-- Aquí termina padre -->

» ¿Cómo se colocan capas horizontalmente?

Lo que lleva a mucha gente a usar las tablas es su capacidad de crear columnas. Pero es que con capas (y también con listas) también se puede, y con mucho menos código. Para ello, en tu hoja de estilos creas la clase “columna”, y asignas la propiedad de que flote:

.columna{ float:left }

Con ello, si en tu página añades esto:

<div class="columna">Inicio</div>
<div class="columna">Archivos</div>
<div class="columna">Acerca de </div>

Te saldrán tres capas alineadas horizontalmente al estilo de un menú. También, si quieres simplemente dos capas flotantes, a una le pones de atributo float left y a la otra right.

» ¿Cómo posiciono una capa independientemente del tamaño de pantalla?

Para centrar una capa horizontalmente (esto se usa en el 99.9% de los casos), se le aplica este estilo CSS:

.centrarhorizontal { margin: 0 auto }

Espero que algo hayáis aprendido ;-)