Estás mirando la versión 3 de mi sitio web, para ver la última versión por favor anda a juque.cl

juque

Juan Pablo Aqueveque: Ingeniero de Sistemas, Diseñador y Desarrollador Web que reside en Temuco, Chile.

La saga continua: Diseño sin Tablas

Publicado por Juan Pablo el 11.Ene.2005 | Comentarios (25)

He tenido bastante postergada mi entrada de Diseño sin tablas la cual forma parte de mi primer corto CSS y web standards titulado Tres chanchitos webmasters; pues bien, es hora de sacarla del congelador y continuar con esta humilde ayuda para todos aquellos que quieren diseñar sitios web en el lado claro de la fuerza y olvidar la medieval costumbre de los table, tr, td, font, p class="titulo", pixeles invisibles y todas ésas herejías.

Refrescando la memoria

Para llegar a nuestro objetivo final, hemos diseñado versiones sucesivas del sitio:

Nunca hemos tocado el contenido, es decir, el archivo .html. Para el diseño de cada versión sólo hemos intervenido la hoja de estilo o CSS (mira el código fuente de cada versión). Para revisar la evolución de cada versión dale una mirada a la entrada anterior.

Retomando el diseño: ordenando el contenido y el lateral

Ordenemos el contenido y el lateral. Según nuestro layout el contenido debe tener 400 pixeles de ancho y el lateral 200; ambas dimensiones ya están seteadas en la v5. Para un diseñador vetusto amantes de las tablas ubicar estás dos regiones se soluciona rápidamente con una tabla de dos columnas, pero para un diseñador moderno (como tú) esto se soluciona así: haremos flotar el contenido a la izquierda y a lateral le pondremos un margen izquierdo de 400 pixeles, ¡exacto! el mismo ancho de contenido.


#contenido {
width:400px;
float:left;
}
#lateral {
width:200px;
margin-left:400px;
}

Comienzan los problemas

La versión 6 contiene las nuevas reglas de estilo, si vemos esta página con un obediente navegador de estándares (como Mozilla Firefox) lucirá exactamente como la hemos diseñado, es decir, sin problemas; pero si vemos la misma versión con un renegado navegador de estándares como Internet Explorer podrás apreciar el primer motivo de dolor de cabeza que tuvo nuestro héroe cochinón. Para ilustrar el problema por favor dale una mirada a la versión 6b — que contiene algo de contenido para realzar el problema — con ambos navegadores. ¿Ya lo notaste?, sí, en Internet Explorer se desborda lateral, no desesperes y sé bienvenido al club.

Razón y solución

La pregunta ya está en tu mente y la estuvo también en la de cochinón, ¿por qué ocurre esto?, ¿cuál es el problema?, ¿arnold será presidente de EEUU?, está bien esa última pregunta está fuera de contexto pero ¿qué piensas tu?. Volvamos a nuestro diseño; el navegador de Bill, inexplicablemente, coloca una no solicitada separación entre cajas o regiones, dicha separación es aproximadamente de 2 a 3 pixeles, es un misterio así que debemos asumirlo. La aritmética nos dice entonces que reduciendo el ancho de lateral a 197 pixeles el problema se solucionaría de inmediato y efectivamente así es, pero para no rendirnos ante los caprichos de Microsoft lo dejaremos tal cual está, es decir, de 200 pixeles y para no castigar a nuestros visitantes Internet Explorer con un diseño desbordado y fuera de orden engañaremos al ese inefable navegador utilizando un truco que en el mundo CSS son llamados hack. Existen muchos hack's pero el fin de esta entrada no es el estudio de ellos, es posible que en el futuro lo sea.

Engañando a los navegadores de Bill

Mi página se verá bien siempre y cuando las personas que me visiten utilizando Internet Explorer 5 o 6 crean que el ancho de lateral es de 197 pixeles; es todo lo que debemos hacer, ¿y cómo?, así: agregando la siguiente regla a nuestra hoja de estilo:


* html #lateral {
width:197px; /* para IE5.x/ */
w\idth:197px; /* para otros IE */
}

¿Pero qué demonios?, ¿qué es esta regla tan extraña?, creo que está mal escrita; tranquilo comienza a sentirte como uno más de nuestra familia. El truco está en aprovecharse de un bug o problema — qué extraño viniendo de Microsoft — de IExplorer, el selector universal (*) y html antepuesto a lateral nos otorgan la seguridad que ésta regla será reconocida sólo por el navegador de Bill, los demás (Firefox, Opera) la pasarán por alto. Dentro de la nueva regla existe dos seteos para ancho y uno de ellos está intencionalmente mal escrito. El primero es reconocido sólo por las versiones 5 y 5.5 y el otro por las otras versiones por ejemplo la 6. Listo, hemos engañado a Internet Explorer, siéntete orgulloso, la versión 7 puede jactarse de verse igual para cualquier navegador.

Definiendo el menú

Ahora que ya tenemos ordenadas contenido y lateral definiremos el menu. Por primera vez vamos a intervenir el .html agregando la siguiente lista de ítemes a la caja menu:


<ul>
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ul>

Ahora volvemos a editar nuestra hoja de estilo, la versión 8 ahora tiene el menú incorporado. La tarea es dar a la lista de itemes la apariencia de un menú horizontal, el cual subraye el item al momento de pasear con mouse sobre él. El elemento ul posee un margen implícito que no necesitamos y una distancia con su margen inferior de 20 pixeles para lograr el efecto On Mouse Over:


#menu ul {
margin: 0;
padding: 0 0 20px 0;
}

Debes notar que la propiedad padding tiene sus valores resumidos en orden a los punteros del reloj: superior, derecha, inferior, izquierda; es una buena práctiva que ahorra líneas de código. Ahora setearemos li eliminando los márgenes y rellenos, además de mostrar los elementos en línea y eliminar el estilo:


#menu ul li {
margin: 0; 
padding: 0;
display: inline;
list-style-type: none;
}

Ahora fijaremos el comportamiento de los links, es decir, seteares el selector a:


#menu ul li a:link, #menu ul li a:visited {
float: left;
font-size: 12px;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #000;
}

Y por último daremos algo de glamour a nuestro menú subrayando cada ítem al momento de pasearnos con el mouse sobre alguno de ellos:


#menu ul li a.actual:link, #menu ul li a.actual:visited, #menu ul li a:hover {
border-bottom: 3px solid #000;
padding-bottom: 2px;
color: #000;
}

Por favor notar que hemos agregado un clase actual para orientar al nuestro visitante con el típico tu estás aquí. La versión 9 posee todas la reglas que hemos desarrollado hasta el momento, nuestro sitio comienza a tomar forma.

Poniéndole color

Vamos a darle color a nuestro diseño: body con un fondo de #ccc, contenedor con #fff y el pie con #666. Por último y hecho adrede daremos un color de fondo #bfd88b a lateral. La versión 10 está con estas nuevas reglas.

Un consejo: siempre limpia tus flujos

Pon atención. ¿Qué ocurre si ponemos algo de contenido a contenido?, veamos que ocurre en la versión 10b.¡Queeeee!, ¡pero que demonios pasó!, el contenido se desbordó de contenido, esto no estaba en mis planes —ni en los míos tampoco, creemelo—. Nadie dijo que iba a ser fácil esto de las CSS, lo que sucedió fue que no limpiamos nuestro flujo, recuerda que contenido flota a la izquierda y en ninguna parte hemos limpiado aquel flujo, el lugar más indicado es en pie:


#pie {
clear:left;
background-color:#666; 
}

Perfecto la versión 11c está lista, ahora queda el último paso, conservar el fondo de lateral, ¿acaso no te habías dado cuenta?, lateral sólo muestra el color de fondo #bfd88b sólo hasta donde llega el su contenido, pero ¿cómo hacer llegar el color de fondo hasta el final de la página?. Mhhhhh peliagudo problema.

Una imagen de fondo al contenedor

¿Qué tal si ponemos una imagen de fondo a contenedor que se repita en su eje y, es decir horizontalmente?. Usando, por ejemplo Fireworks MX, creamos una imagen de 2 pixeles de ancho por... adivina...,sí, 600 pixeles de ancho, con la condición de que 400 pixeles de esa imagen sean transparentes y el resto de 200 pixeles de color... ¡sí sí! #bfd88b, el mismo color del fondo de lateral. Una vez confeccionada contenedor.gif (ese nombre le daremos) ahora lo agregaremos como fondo a contenedor:


#contenedor {
width:600px;
text-align:left; /* alinear textos */
margin:0 auto; /* centra el contenedor */
background: #fff url(contenedor.gif) repeat-y;
}

Listo, la versión 11 tiene todo lo que hemos visto y ya se puede considerar un sitio desarrollado íntegramente con web estándares, una combinación perfecta de correcto XHTML y CSS. Aunque la versión 12 está un poco más depurada, obviamente lo último que hizo cochinón fue validar su sitio :). Hasta la próxima.

Enlace Permanente, Comentarios (25), Publicada en: CSS

Comentarios

1. Funk
11.Ene.2005

huuuuuuu! primero!!

Que grande que sos JP, felicitiaciones por el tutorial da placer leerte.

Saludos

2. konus
11.Ene.2005

Una vez más.... muy agradecido :)

Salu2

3. Roberto
11.Ene.2005

Artículo ideal para evangelizar. Todo bien explicado Juque, se agradece el tiempo y el trabajo que tomaste en preparar esto.

Normalmente se tienen muchos problemas con 'float', sobre todo si se trata de un marcado complejo. Nunca lo había pensado como tu lo pusiste, eso de 'limpiar el flujo'...nice and clean.

No soy un especialista, pero siempre compruebo que el CSS es cosa de lógica, y un poco de paciencia. Gracias de nuevo por el artículo.

Por cierto, aprovecho de felicitarte por tu sitio; se nota que has puesto trabajo en el.

4. juque
12.Ene.2005

Hola Roberto: Gracias por tu comentario. Sí, efectivamente es un trabajo que requiere algo de tiempo y dedicación pero me deja satisfecho el saber que es de ayuda. Nadie nace sabiendo y no me considero un "tacaño" de mis limitados conocimientos, si puedo ayudar lo hago.

5. FrancoG
12.Ene.2005

ya se lo reenvie a todos mis amigos que todavia usan tablas... muy bueno, felicitaciones! ;)

6. Potter System
13.Ene.2005

Como agradecimiento a Cochinón, trataré de no comer más ni costillar, ni chuletas, ni nada que venga de cerdo *.

Gracias!

*Sí, claaro

7. hyoga
14.Ene.2005

Está muy bueno el tutorial. Me quedó clarito.

Ahora, hay que comenzar la concientización de los "wezmaster" que andan dando vueltas por ahí.

8. JJLR
15.Ene.2005

saludos amigo, muy buen articulo, justamente hoy abro un sitio y se me presento el inconvieniente del IE y aplique lo de

1. * html #lateral { 2. width:197px; /* para IE5.x/ */ 3. w\idth:197px; /* para otros IE */ 4. }

pero no funciona, intentare echar cabeza a ver que logro :)

9. Michel
22.Ene.2005

Perdona Juan Pablo, el trackback iba dirigido al post del nofollow.

Un saludo.

10. Rodrigo Ruiz
3.Feb.2005

Me gusta, he aplicado mucho el trabajo con css soportando divs en mis sitios, considero que el diseño queda muy "limpio". El problema es cuando quiero mostrar listados de personas por ejemplo... todas las personas que son usuarios de un sitio por poner algun ejemplo rapido, esto me hace imposible no recurrir a las tablas... si tuvieses algun dato o solución, te lo agradecería.

Gracias...

11. Ruben
3.Feb.2005

Hola! Buscando información sobre el css sin malditas tablas llegué hasta aquí. El tutorial está muy bien explicado, y se agradece mucho poder entender de que te hablan XD

Sólo tengo una pequeña duda o comentario. Utilizas la propiedad flote para que flote uno de los divs, ¿pero si quisieramos otra tercera tabla en el lateral?

Digamos como si fuese un típico table de 3 columnas....¿Bastaría con aplicar otra "flote"?

Saludos

12. juque
3.Feb.2005

Rodrigo: Las tablas fueron inventadas para listar cosas, y si lo que tu buscas es eso, entonces el uso de ellas es la solución a tu problema.

Cuando uno se inicia en CSS en normal desarrollar cierta "alergia" al uso de tablas, el mostrar elementos tabulados es tarea de tablas, no es una herejía utilizarlas. Ahora bien, si utilizas las tablas para organizar la presentación de tu contenido te digo de inmediato: NO hagas tal, eso es asunto CSS's.

13. juque
3.Feb.2005

Ruben: No basta con aplicar otro caja flotante. Como es común en CSS existen varias soluciones para el layout de 3 columnas, una de ellas puede ser la siguiente:

Poner dos cajas A y B (contenedor y d), una de ellas flotando a la derecha. A su vez la caja A tendrá dos cajas más (i y c) en su interior. Oberva y aplica el siguiente código CSS:

#contenedor { float:left; border:1px solid #f00; } #i { width:100px; float:left; border:1px solid #ccc; } #c { width:200px; margin-left:110px; border:1px solid #ccc; } #d { width:100px; margin-left:320px; border:1px solid #ccc; }

Y el HTML sería:

<div id="contenedor"> <div id="i">izquierda</div> <div id="c">centro</div> </div> <div id="d">derecha</div> <br style="clear:both" />

14. Rossi C.
10.Feb.2005

Juan Pablo, sos un genio. Especialmente por compartir tus conocimientos en forma clara y explicita. He navegado por horas en internet buscando respuestas al posicionamiento de cajas y sus problemas. Y lo encontre aqui y lo mejor de todos en español. Gracias otra vez..!!

15. Ruben
13.Feb.2005

Gracias por tu ayuda!

16. maxi
24.Feb.2005

estimado, una vez más muchas gracias, el tutorial está super!

saludos

17. Liz
8.Abr.2005

Excellente artículo! Gracias!

18. Rodrigo
17.May.2005

Wow.. hace tiempo venía buscando algo que me motivara a dejar las tablas para la estructuración. Muchas gracias por este grandioso tutorial. Saludos!

Rodrigo.-

19. gus_
30.Jun.2005

Ahora que me puse a ver todo este asunto de css, standars, w3c y xhtml, realmente siento que viví mucho tiempo en el oscurantismo en lo que interfaces de usuario se refiere. (Si habré hecho barrabasadas con tablas!)

Los artículos están muy buenos. Estaría bueno también algunos links para profundizar un poco más en esto de crear layout con divs.

20. angelica
13.Jul.2005

En primer lugar felicitarte por tu artículo acerca de css, es mucho mejor que trabajar con tablas en cuestión de diseño; sin embargo tengo un gran problema relacionado con la configuracion de la pantalla. Antes de usar css usaba un (dentro del html) para determinar la configuracion de la pantalla; y este script seleccionaba como acomodar las tablas para el tamaño determinado; cuando cambié a css, creé dos archivos css externos en el que definí el menu el contenedor ,lateral, etc. , cada cual para una configuracion de pantalla, luego desde html determino con un script el tamaño de la pantalla y si es de 600*800 abro uno.css y si es 1024*786 abro dos.css. Funciona bien pero cuando guardo la pagina no se guadan ni uno.css ni dos.css, de tal manera que mi pagina aparece desconfigurada. Gracias por todo y estoy segura que tendré tu ayuda

21. juque
13.Jul.2005

angelica: Qué bueno saber que el artículo fue de tu agrado. No entiendo para que tener dos archivos CSS, por lo que leo quieres adaptar el layout al tamaño de la pantalla-cliente, pues el camino para eso es usar un diseño liquido, es decir, adaptar el tamaño de las regiones (contenedor, lateral, etc). En este tutorial yo usé un diseño fijo (pixeles), en tu caso creo que deberías usar un diseño liquido (porcentajes '%') y dejar ese script de lado.

Ahh casi lo olvido, las tablas también debes dejarlas en % para que se adapte al tamaño. Todo esto lo puede manejar fácilmente en un archivo CSS único.

Un consejo final: Antes de diseñar cualquier sitio yo me hago la pregunta. ¿Haré un diseño liquido o fijo?, resuelta la interrogante me pongo a trabajar.

22. Hernan
15.Jul.2005

Hola juque, muy bueno el tuto, me sirvio en gran parte. Ahora tengo un inconveniente que esta explicado aca en forosdelweb http://www.forosdelweb.com/showthread.php?t=317109 , si me puedes dar una mano te lo agradeceré, seguro que para ti es una pavada.

saludos

23. geograf
17.Jul.2005

hola que buen manual, justo estoy metido en un problema similar y ya se me han despejado varias dudas, gracias por tomarte ese tiempo y hacer algo asi, felicitaciones : )

24. José Machado
22.Jul.2005

Muy buen tutorial. Saludos desde Misiones - Argentina

25. marco
26.Ene.2006

un año despues de posteado este articulo y apenas lo descubro

el articulo, genial. la explicacion, no menos

con esto ya e empezado a elaborar mi sitio (ya que me resulto muy facil gracias a tu juque)

tenia mas de un año intentando el css y nomas no daba "pie con bola", pero gracias a esto ahi la llevo

felicitaciones!!!