Aprendiendo a crear el formato de un Blog (IV)

Continuando con mi aprendizaje de CSS para convertir el formato de este blog en algo similar a Felds Thoughs, me vi obligado a usar Style Master para entender como está estructurado el Template de Blogger. Afortunadamente, todavía estoy dentro de los 30 días de prueba que Westiv ofrece, así que el objetivo de usar sólo herramientas gratis sigue intacto, si no en la letra, al menos en espíritu.

Una vez hube creado index.html y style.css, y los encadené usando Style Master (ver posting anterior), pude empezar a entender como está estructurado el template. Encontré que las posiciones de las columnas están definidas en tres identificadores: #main (contiene los postings), #sidebar (contiene el profile y el archivo) y #content (que contiene a los dos anteriores).

Mi primera tarea fue convertir el template en uno de 3 columnas en lugar de las dos originales. Para esto amplié el ancho de #content y de #header a 800 pixels y reduje el ancho de #main y #sidebar. Esto lo hice en Style Master pues al mismo tiempo estaba entendiendo cual era cual, pero fácilmente se puede hacer en un editor de texto o directamente en Blogger. Adicionalmente creé un nuevo identificador llamado #leftbar, cuyo proposito será tener la lista de libros que estoy leyendo. Para crear #leftbar simplemente copié la definición de #sidebar y la ajusté al tamaño que me pareció conveniente.

Las dificultades empezaron cuando traté de ubicar cada columna en su sitio. Inicialmente usé posicionamiento absoluto para #leftbar y para #main y usé float left para #sidebar. Aunque en el preview de Style Master se veían bien, en realidad las columnas cambiaban de posición dependiendo del tamaño de la ventana de IE. Probé todas las combinaciones posibles para cada una de las tres columnas: static, inherit, absolut, relative. Ninguna funcionó. En unos casos #sidebar se ubicaba debajo de #main y no al lado como debía y en los casos en que se ubicaba al lado entonces cambiaba de posición.

Luego de varias horas de frustración volví a revisar el tutorial y encontré que no solo debía cambiar los tres indicadores de las columnas, sino que también debía hacer que #content fuera relative. El tutorial no da ninguna explicación de la razón, simplemente dice que es necesario. Lo hice así y finalmente pude poner las tres columnas en posición. Usé posicionamiento absolut en las tres columnas.

Finalmente cambié #header a posicionamiento absolut.

Nerd al Volante comenzaba a parecerse a lo que yo quería.

Technorati Tags: Aprender, learning, CSS, blogger template‘,