milmazz

En este artículo se mostrará la facilidad de emplear hojas de estilos en cascada o CSS cuando poseemos una buena estructura en nuestros documentos. Como estructura vamos a utilizar una modificación que he realizado de la primera edición de NNL Newsletter. La edición de la estructura se ha explicado en el artículo Rediseñando NNL Newsletter I.

Estableciendo valores a los márgenes y rellenos

Usualmente mi primera regla en CSS es establecer los márgenes y rellenos de todos los elementos XHTML (o HTML) a cero (0), ¿por qué hacer esto?, simplemente porque los Agentes de Usuario (p.ej. Navegadores) implementan distintas reglas sobre estas dos propiedades. Desde mi punto de vista, la mejor forma de controlar estas diferencias es ir estableciendo los valores de dichas propiedades de acuerdo a las necesidades que tengamos, aunque previamente se han inicializado a cero.

Muestra de ejemplo en CSS

*{
  margin: 0;
  padding: 0;
}

Creando nuestro Layout

Antes que nada debemos pensar en que tipo de contenido mostraremos y que extensos serán estos. En nuestro ejemplo de análisis, NNL Newsletter se basa principalmente en texto, estos textos suelen ser extensos, por lo que debemos ser precavidos a la hora de mostrarlos, la lectura no debe “cansar” al lector, debemos mostrar el mayor contraste posible. Partiendo de las características del sitio en particular, podemos concluir que lo mejor es implantar un layout elástico, este tipo de diagramación simplemente se basa en el concepto de medidas relativas tanto en los bloques de la página como en las tipografías, por lo que al usuario se le facilitará la ampliación (o disminución) de los elementos mostrados desde el panel de control del navegador.

Inicialmente vamos a centrar la página.

Muestra de ejemplo en CSS

body{
  text-align: center;
}
#wrapper{
  margin: 3em auto;
  width: 35em;
  text-align: left;
}

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

En las dos reglas anteriores, quien realmente hace el trabajo de centrado del documento es la declaración margin: 3em auto;, en donde se especifica que tanto el margen superior como el margen inferior sean iguales a 3em, los márgenes izquierdo y derecho tomarán valores automáticos idénticos, lo cual centrará nuestro documento, ahora bien, para que la declaración anterior funcione correctamente debe especificarse la anchura del bloque que queremos centrar, en nuestro ejemplo hemos seleccionado el valor de 35em. Respecto a la utilización de la declaración text-align sobre el selector body simplemente es para ampliar la compatibilidad de nuestro diseño con los usuarios de IE5 en sistemas Windows, sin dicha declaración la mayoría de los navegadores aún muostrarían el layout centrado, pero IE5/Win no.

Respecto al valor que se le ha asignado a la propiedad width que aplicara sobre el bloque #wrapper, la explicación dada por Nicolás Fantino en el artículo Ni fijo, ni líquido. Elástico, seguramente aclarará las posibles dudas.

Cualquiera que se haya dedicado en algún momento de su vida al diseño gráfico editorial sabrá que existen, o al menos habrá escuchado hablar de, ciertas normas o convenciones. Una de ellas define lo que se considera el ancho óptimo de una línea de texto para ser leído en bloque. Éste es de entre 30 em y 35 em. La unidad de medida de este ancho es el “em”. Un “em” mide exactamente el ancho de la letra “M” mayúscula de una tipografía dada y a un tamaño dado. Efectivamente, según esta definición un “em” no mide físicamente siempre lo mismo. ¿Por qué se usa esta medida? porque el ancho óptimo para la lectura dependerá, necesariamente, del tipo de letra que se use y, más necesariamente aún, del tamaño de ésta.

Para ampliar la compatibilidad del layout elástico con el navegador IE (sí, otra vez), debemos previamente definir un valor cuya unidad de medida sea el porcentaje a la tipografía en el selector body, por ejemplo:

body{
  font-size: 85%;
}

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

Posteriormente dejaremos de usar la unidad de medida porcentaje, de ahora en adelante utilizaremos como unidad de medida em.

Antes de continuar, vamos a “maquillar” un poco nuestro layout.

body{
  font: 85%/145% "Trebuchet MS", Arial, Verdana, sans-serif;
  color: #333;
  border-top: 5px solid #bbb;
  background: #eee url(bg-bottom.png) repeat-x bottom left fixed;
}
#wrapper{
  border: 1px solid #bbb;
  border-top: 5px solid #bbb;
  background: #fff;
}

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

Solamente hemos “jugado” un poco con los valores de: fuentes, colores, bordes y fondos. Se han utilizado modos abreviados de escritura de código CSS para ahorrarnos unos cuantos bytes.

Pages: 1 2 3 4