(Ver actualización) Una buena razón por lo que muchas personas defienden el uso de tablas para la diagramación de contenidos de un sitio web, es porque éstas permiten el correcto centrado horizontal y vertical de los elementos contenidos dentro de sus celdas. La propiedad vertical-align no es soportada por los browsers actuales, y va a ser lanzada con CSS3.0 (junto con muchas otras bien interesantes). Pues, a continuación les presentaré un método donde se utiliza efectivamente vertical-align, junto a un atributo poco utilizado de display y un hack para IE, como siempre necesario. Antes que nada, necesitamos que nuestra superficie esté definida, en este caso al 100% de la pantalla (sin scroll). Esto lo logramos con height: 100% en 2 partes: el html y el contenedor de lo que queremos mostrar:

#17 – 29 Diciembre 2006

En la sintaxis de definiciones de CSS, es posible resumir algunas propiedades (tags), lo que nos da una gran ventaja ahorrándonos líneas de código, lo que a la larga hace que nuestra hoja de estilos pese bastante menos. Con esto también logramos que nuestro código sea más entendible, ya que juntamos en una sóla línea varios parámetros que pueden estar esparcidos en el mismo o varias classes e ID‘s. El orden y los parámetros de cada propiedad no son obligatorios respetarlos literalmente, pero recomiendo que por lo menos sigan ese mismo orden.

Un problemón de quien pretende entender esto del diseño con hojas de estilos, llega al momento de construir el layout y que todos los elementos se queden donde deberían estar, posicionándolos, flotándolos, como mejor se prefiera. Margin, padding, border y width dentro de un div suelen causar grandes conflictos, los que se explican en el Modelo de Caja de CSS, al cual describe las cajas rectangulares que son generadas por los elementos de la estructura del documento. Comencemos con esto. Dimensiones de la caja: Cada caja tiene un área de contenido (texto, imagen, ambos, ninguno) y las áreas que la circundan, como padding, margin y border; el tamaño de cada propiedad puede ser especificado al momento de construir y darle estilo a esos elementos. En el siguiente dibujo se muestran esas áreas y cómo se comportan.

Llega el momento de diseñar un sitio. Estás todo inspirado. comienzas el layout, Photoshop, Fireworks a mano. Pero luego comienzan las trabas. Necesitas un logo vectorizado, por último un JPG. Y el que tienen en su sitio es un GIF transparente del tamaño de un alfiler. Estás maqueteando, y de repente no tienes una imagen de un edificio, un paisaje, una flor, una familia… Tus CD’s de banco de fotos no dan a basto ya. Para qué hablar de tu catálogo tipográfico. Pero con Internet como co-piloto, tienes muchas chances de encontrar lo que necesites, en poco tiempo y de gran calidad. Entregaré unos links muy útiles para el diseñador al momento de requerir recursos gráficos gratuitos (no queremos infrigir ningún Copyright) y de muy buena calidad. Directo a tus Bookmarks: Logos Vectorizados: En Brands of the World encontrarás una gran cantidad de logotipos, isotipos vectorizados, en formato EPS y por lo tanto de gran calidad. Si estás en Chile, Logoteca puedes encontrar muchas marcas nacionales y extranjeras, subidas por los mismos usuarios (registro necesario). Tipografías: Da Font es un referente al momento de buscar fuentes digitales. Muy bien ordenados y catalogados, este sitio te da la posibilidad de previsualizar la tipografía con el texto que ingreses. Si quieres saber qué tipografía corresponde tal o cual isotipo, o con qué tipo escribieron un slogan, What The Font te permite subir un archivo de imagen con el texto de la discordia, y el sistema trata de adivinar a qué tipo de texto corresponde. Muy útil. NeatFonts también te ofrece un amplio catálogo de fuentes para lo que estimes conveniente. Íconos:

Ha resultado ser un extenso tópico el asunto de las listas. Mucho hay de qué hablar, y mucho por complementar. En esta ocasión, desenterraré varias propiedades HTML que se han dejado de utilizar por diferentes razones, pero que aún resultan esenciales para el desarrollo semántico y la presentación de contenidos. En muchas de ellas podremos utilizar CSS para ampliar su configuración. UL es archi-conocido y ampliamente utilizado en este mismo sitio. Por eso, recurriré esta vez a OL: Ordered Lists. Corresponden a listas donde el orden de los elementos se realiza automática y secuencialmente, pero donde tenemos la oportunidad de manejar algunas de ellas a través de un par de atributos. Su forma de construcción es similar a los UL (Unordered Lists):

Listas de elementos suelen ser cansativas, tediosas de leer. Aunque CSS te entrega varios diseños para variar el típico bullet circular, también te entrega la posibilidad de utilizar una imagen (generalmente un GIF muy liviano, no más de un par de KB) para reemplazarla. Pero el ingenio de alguien que tuvo suficiente tiempo también permite que regules, por ejemplo, el padding entre el bullet y el texto soportado por éste. Mostraré 2 técnicas para que reemplaces el bullet por una imagen determinada. Dependerá de tí cuál técnica utilizar: Comenzamos con el HTML de una típica lista con unos 5 elementos:     Arroz     Azúcar     Shampoo     Cerveza     Hongo Alucinógeno

Los pies de página, o footers como prefiero llamarlos, han demostrado ser un importante factor gráfico a la hora de armar sitios web, o más comúnmente, blogs. Puedes dejar estampado los derechos reservados de tu sitio, si valida, si no valida, una firma, una forma, algo importante y que debería siempre estar presente, después de todo el contenido. Existen varias formas de construirlo, aquí demuestro una bastante ingeniosa que no deja de ser interesante tener en cuenta.

Ya va 1 año desde que este proyecto se concretó, y se publicó el primer post. Mucho ha pasado, pero sólo 2 templates han existido (lo que es curioso ya que no suelo quedarme tranquilo con los diseños que hago para mí). Agradezco a todos quienes me han ayudado a que esto salga adelante, a todos quienes leen esto y principalmente quienes comentan ya que lo más importante es su feedback.

A partir de CSS2, se puede agregar más de una clase a un selector. Basta con separarlos con un espacio dentro del class de esta manera: class=“rojo bold”. Veamos un ejemplo muuuuuy simple. A continuación, dos estilos para un mismo texto: .rojo {<br />      color: #F00;<br /> }<br /> .bold {<br />      font-weight: bolder;<br /> } Ver ambas clases en un mismo tag .**** Un detalle muy importante.