☆ Las hojas de estilo resuelven casi todo…

Checando entre mis listas de correo, encontre un reto interesante, mandado a la lista, acerca de que no se podia emular la funcionalidad de un header sin hacer uso de tablas.

De momento creo que todo se puede hacer por hojas de estilos, aunque en ocasiones mostrar los datos mediante un layout basado en tablas tiene algunos puntos buenos.

Como hace algunos posts comente, esto de usar tablas para layouts en paginas web, fue una mania que dio en la segunda mitad de los 90’s, cuando alguien vio el potencial de usar las tablas, para algo que no estaba pensado, y vaya que le resulto, aunque se alejo muchisimo del standard, antes de esa pequeña revolucion las paginas eran, digamos… mas aburridas.

El Reto

Caso sencillo:

http://www.msg.com.mx/~arturo/Projects/Stallman/

Trata de duplicar EXACTAMENTE la parte inicial de la pagina (lo que hace la primer tabla en el codigo). Tiene que mantener la misma disposicion aunque cambies la fuente o el tamanio de la ventana.

Si lo sacas, me cae que voy a aprender bastante, pero ya lo vimos Johnattan Hernandez y yo y hasta donde nuestro conocimiento da, no se puede implementar con layers.

Saludos,
Arturo

Se presentaron algunas soluciones, aunque usando nuevamente modelos de tablas, (aunque con css que para mi es lo mismo, solo que mas fino)

Por ejemplo la solucion de Ion (Jonathan Hernandez), es esta.

Pues usando la onda del display:table-cell si se puede, a ver, aqui esta mi entry…

http://ion.gluch.org.mx/reto/

La diferencia que tiene con el de Salvador es que uso a RMS como background, asi si aumentamos el tamanio del texto (ctrl + en mozilla) RMS siempre estara feliz en la parte inferior del div, ademas de que podemos hacer mas divs de la clase `rms’, lo malo del table-cell es que si le ponia el borde inferior a la clase `rms’ pues no abarcaba el ancho del navegador, es por eso que le puse una clase `bordecito’

Saludos,
ion

O tambien esta otra solucion que pueden ver aqui que es basicamente usando el mismo modelo…

Mi solucion, tal vez fue menos complicada (de hecho podria decir que muy sencilla), pero es trabajando casi diario con css que ya uno se acostumbra a arreglar ese tipo de detallitos, (pero aun sigo sin poder terminar mi pagina :s)

Me tope con el mismo detalle que ion sobre la linea en el bottom, y si colocoba un width: 100%;, por alguna extraña razon aparecia magicamente el scroll, asi que imite en parte la solucion de ion, y como arregle el asunto de la imagen y el texto con ubicacion similar…

con un Background-position: bottom left; acomode la imagen, lo demas con dos padding, uno desde el top para permitir que la imagen se viera, y otro para left, para recorrer el texto, y que no se encimara a la imagen de RMS

Solo encontre un problema, que si se disminuye el tamaño de la letra de lo que se toma como Normal, RMS puede ser decapitado, aunque en tamaños iguales o mayores a normal, funciona como se espera.

Mi versión del reto:

foobarra.com/reto

Deja un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.