Listas de definición

De acuerdo a la estructura de NNL Newsletter, normalmente se plantea un tópico e inmediatamente se procede a describirlos, como Carlos define ciertos tópicos, me parece adecuado agruparlos dentro de una lista de definiciones. Ahora bien, vamos a “maquillar” dichas listas a través de las hojas de estilos en cascada.

Primero, vamos a encargarnos de los títulos de las definiciones.

dt{
  font-weight: bold;
  font-size: 1.1em;
  background: #eee;
  margin-top: 14px;
  padding: 6px 6px 7px 12px;
  border-top: 2px solid #bbb;
}

En la regla anterior, vamos a darle cierto peso (font-weight) a los títulos, definimos el tamaño de la fuente (font-size), seleccionamos un color de fondo (background), establecemos un margen superior (margin-top), establecemos los rellenos (padding) y finalmente decoramos los títulos con un borde superior (border-top).

Ahora definamos los rellenos de las descripciones de las definiciones.

dd{
  padding: 6px 6px 10px 8px;
}

Vea el resultado de aplicar la regla de estilo a la estructura del documento.

Si detalla la muestra anterior, puede darse cuenta que después del tópico cuyo título de definición es: Feedback: Los lectores preguntaron…, la descripción de la definición de dicho es tópico es otra lista de definiciones, es decir, existe una lista de definiciones anidada, recuerde que las listas de definiciones también pueden utilizarse para representar dialogos según la especificación del XHTML. Vamos a diferenciar dicha lista de definiciones del resto.

#feedback dl{
  background: #ffe;
  border: 1px solid #999;
  border-top: 0;
  margin: 13px 2px 8px 2px;
  padding: 0 5px 10px 5px;
  color: #000;
}
#feedback dt{
  font-size: 0.95em;
  color: #fff;
  border: 0 none;
  background: #c30;
  margin: 0 -5px;
  padding: 4px 10px;
}
#feedback .nnl, #feedback .ans{
  background: #fcfcfc;
  margin: 0 5px;
  border-right: 1px solid #bbb;
  border-left: 1px solid #bbb;
}
#feedback .ans{
  color: #333;
  border-top: 1px solid #bbb;
  padding: 5px 11px 5px 9px;
}
#feedback .nnl{
  border-bottom: 1px solid #bbb;
  padding: 0 11px 10px 9px;
}
#feedback .to, #feedback .subject, #feedback .date{
  font-style: italic;
}

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

Simplemente es un “juego” con las propiedades: background, border, margin, padding, font-size, color y font-style; las cuales han sido explicadas con anterioridad.

Quizás deba resaltar la propiedad margin utilizada en la regla #feedback dt, la cual tiene valores negativos (-5px) para los márgenes izquierdo y derecho, esto lo hago simplemente con el fin de ocupar todo el espacio de la lista de definición, en la cual se ha definido previamente un relleno (padding) de 5px.

Código

Vamos a mejorar la presentación del código.

code{
  font-family: "Courier New", Courier, monospace;
  background: #ffe;
  font-size: 0.95em;
}
code.block{
  overflow: auto;
  width: 33em;
  display: block;
}
pre{
  text-align: center;
  background: #ffe;
  color: #000;
  width: 33em;
  border: 1px solid #bbb;
  margin: 6px auto;
  padding: 0;
  overflow: auto;
  height: 100%;
}
pre code{
  display: block;
  text-align: left;
  margin: 6px 7px;
  background: transparent;
}

Vea el resultado de aplicar las reglas de estilo a la estructura del documento.

En primer lugar, se le asigna una tipografía distinta de la normal, para distinguir el código del resto del flujo, en algunas ocasiones Carlos emplea en línea código extremadamente largo, lo cual causa que el código rompa con el layout, por ello he creado una clase llamada block que convertirá el selector code, el cual es un elemento en línea, en un elemento en bloque. Para el caso de los bloques de código, estos se han centrado, para lograr tal efecto he utilizado el mismo método citado en principio para centrar el layout.

Es importante resaltar, que el único concepto aplicado que puede resultarle nuevo es el uso de la propiedad overflow, la cual solamente puede ser aplicada a elementos en bloque, esta propiedad es utilizable cuando el contenido sobresale o desborda de la caja que lo contiene, cuando esto sucede, se proporcionan barras de desplazamiento para visualizar el resto del contenido, evitando así romper el layout.