Diseno web solamente con css

88-92-Webmasters-U174.qxd

9/19/05

14:48

Page 88

:”=}{> < . ; ~ _+ ^ #

:”=}{>< ;~ + ^ #
un contenido y un pie de página. La cabecera no es diferente de la de los sitios de dos columnas, a lo sumo agregan banners o un pequeño formulario para el registro de usuarios, pero el espacio reservado es el mismo. En el menú izquierdo podemos encontrar las secciones del portal (Terra.comtiene sus canales a la izquierda) y en la derecha, últimas noticias o anuncios publicitarios. En el área de contenido se puede esperar cualquier cosa, desde grandes imágenes con enlaces a notas internas (es el caso de Ciudad.com.ar) hasta noticias y contenido destacado (es el caso de Uol.com.ar). En el pie de página, muchos portales tienen un formulario de búsqueda (pésima decisión de usabilidad) einformación de copyright.

:”=}{> < . ; ~ _+ ^ #

: ” =}{> < . ; ~_

Internet Explorer 5. Puesto que IE5 no reconoce la declaración margin: 0 auto; (esta declaración centraría el bloque al cual se la aplica, en este caso, el contenedor), tenemos que aplicar este pequeño hack o código extra para que todo se vea bien en ese navegador. El hack tiene una segunda parte, ahora dentro del bloquecontenedor, que se encarga de alinear todo a la izquierda. Esto es para que los elementos o bloques dentro del contenedor no estén centrados, sino que se muestren de izquierda a derecha, como estaban antes de aplicar el hack. Un poco rebuscado, ¿verdad? Bien, piensen esto: acabamos de ver un hack para un sitio que no tiene más de 100 líneas de código; imagínense la cantidad de hacks para un sitiogrande como Clarín.com o Ciudad.com.ar. Sí, adivinaron bien, la culpa la tiene IE. Ahora entienden el porqué del grito de miles y miles de diseñadores web en el mundo día tras día.
■ En las líneas siguientes, utilizamos propiedades ya conoci-

el preciado layout de tres columnas al final cobre vida. Y eso es todo amigos, no más sufrimiento por hoy.
■ Por último, nos resta ver otra propiedad más,esta vez me-

nos dolorosa que float. Se trata de clear, la cual puede tener tres valores posibles: ■ clear:left. El elemento al cual se la aplica es movido una línea debajo de cualquier caja flotada a la izquierda. ■ clear:right. El elemento al cual se la aplica es movido una línea debajo de cualquier caja flotada a la derecha. ■ clear:both. El elemento al cual se la aplica es movido una líneadebajo de cualquier caja flotada a la izquierda o a la derecha. En nuestro caso, usamos clear:both en el pie de página para obligar al navegador a hacer un salto de línea entre nuestras cajas flotadas anteriormente. Y eso es todo lo que debemos saber para poder hacer sitios de 3 columnas sin tablas en CSS.

das, como width, background y border (de nuevo, pueden encontrar una referencia a estaspropiedades en el número anterior de Users), útiles para definir tamaños, colores de fondo y bordes para nuestras secciones o cajas.
■ Llegamos a los selectores de ID que tienen propiedades nuevas

AGREGAR ELEMENTOS A LA ESTRUCTURA
Ahora que ya tenemos la estructura del sitio, lo único que nos resta hacer es agregar contenido. Con todo lo que venimos aprendiendo en esta sección de la revista, yatenemos las herramientas necesarias, así que esta tarea les queda para hacer en sus casas. Un tip: no hay elementos complejos. Sólo elementos P, IMG, A y nada más. Si son listos, seguramente identificarán más secciones y las agruparán en cajas o bloques (es decir, en IDs) para facilitar su maquetación, pero más allá de eso no hay nada complicado en Tectimes. Una vez que está la estructura bienarmada y firme, podemos agregar los elementos que deseemos sin temor a romper nada.

para nosotros: #izq, #contenido y #der. Estos selectores comparten una misma propiedad de posicionamiento realmente interesante: float. Cuando una caja tiene esta propiedad, se dice que se convierte en una caja flotada. Esta propiedad:
■ Desplaza la caja hacia la izquierda o derecha tanto como sea posible,...