C6Posicionar el contenido basándose en el marcado estructural

En este ejemplo se ha aplicado marcado estructural (listas de descripción) al contenido. Se ha usado CSS para dar al contenido forma de columnas. Cada clase posiciona de forma absoluta el contenido en columnas y los márgenes se han puesto a 0 para anular el comportamiento predeterminado de los agentes de usuario, que muestran las listas de definición de HTML con el elemento dd sangrado.

Este es el contenido que se va a mostrar:

<div class="box">
  <dl>
    <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
    <dt class="menu2">Locations</dt>
    <dd class="item4">Idaho</dd>
    <dd class="item5">Wisconsin</dd>
  </dl>
</div>

Este es el CSS que posiciona y da estilo a los elementos anteriores:

.item1 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item2 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .item3 {
   left: 0;
   margin: 0;
   position: absolute;
   top: 9em;
 }
 .item4 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 7em;
 }
 .item5 {
   left: 14em;
   margin: 0;
   position: absolute;
   top: 8em;
 }
 .menu1 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 0;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 .menu2 {
   background-color: #FFFFFF;
   color: #FF0000;
   font-family: sans-serif;
   font-size: 120%;
   left: 10em;
   margin: 0;
   position: absolute;
   top: 3em;
 }
 #box {
   left: 5em;
   position: absolute;
   top: 5em;
 }

Cuando se aplican las hojas de estilo, los datos se muestran en dos columnas, «Products» (productos) y «Locations» (ubicaciones). Cuando no se aplican las hojas de estilo, el texto aparece como una lista de definición que conserva la estructura y el orden de lectura.