Crear un sitio web básico es algo que, estoy segura, la mayoría de nosotros hacemos casi con los ojos cerrados. No obstante, ¿qué pasa cuando la página tiene poco contenido y se nos «sube» el pie de la página? En navegadores que entiendan de CSS la solución es sencilla pero para Internet Explorer se hace necesario recurrir a hacks.

Imaginemos un estructura básica de página:

Ahora el CSS, que no requiere de muchas más explicaciones:

Simple y, como siempre que envuelve al explorer, no valida. Podéis dejar la hoja de estilo un poco más limpia con comentarios condicionales y hojas de estilo específicas para explorer.

Sitios de referencia de XHTML y CSS hay muchos pero ninguno tan interactivo como HTML Playground.
Podemos seleccionar una etiqueta y ver como se emplea, para que sirve y que atributos de CSS soporta.
Podemos hacer pruebas y ver automáticamente el resultado en la misma ventana.

Un recurso más a la hora de aprender y mejorar nuestro código.

HTML Playground: http://htmlplayground.com

Si quieres generar menús en HTML y CSS hechos a base de listas de forma simple y sencilla y, además, eres usuario de Windows quizá quieras probar CSS Tab Designer.

CSS Tab Designer es una herramienta gratuita (que no libre) desarrollada por OverZone Software que te permitirá generar menús de forma simple, seleccionas un estilo de entre los más de 60 disponibles, añades los enlaces que quieres incluir y generas el código que será XHTML estricto completamente válido.

Una pena que sólo esté disponible para Windows, ¿conocéis algo así (gratuito y, a poder ser, libre) para Linux o Mac OS?

CSS Tab Designer: http://www.highdots.com/css-tab-designer/

Parece que la gente de Dynamic Drive quieren sumarse a la familia de sitios que ofrecen plantillas CSS para descargar.

Dynamic Drive Layouts: http://www.dynamicdrive.com/style/layouts/

Via Ajaxian

Hace tiempo conocíamos un par de sitios donde descargar plantillas en XHTML y CSS libres, hoy gracias a Online os dejo unos cuantos más:

• Intensivnation CSS Templates Plantillas sobre las que implementar tus estilos
• Layout Gala 40 plantillas basadas en el mismo marcado
• Code Sucks CSS Layouts
• Soulcija CSS Templates Plantillas completas, listas para usar

Supongo que todos sabemos que en CSS los elementos heredan ciertos atributos de sus padres. En principio es estupendo poder definir una propiedad en un lugar y que sea heredada pero ¿Qué reglas se heredan en CSS?

Adam Risser ha creado un listado de reglas que se heredan, ordenadas alfabéticamente y coloreadas según el tipo de medio: Inheritance: Which rules apply

Hace tiempo conocía PHP Ya, una excelente forma de aprender PHP. Hoy, gracias a Bitacora de Webmaster (da gusto verlos de vuelta) descubro que la familia ha crecido con la incorporación de Javascript Ya y CSS Ya.

Javascript Ya y CSS Ya están también destinadas al aprendizaje desde cero de los lenguajes, con tutoriales y ejercicios. Ideal para iniciarse en el desarrollo web ¿no creéis?

PHP Ya: http://www.phpya.com.ar
Javascript Ya: http://www.javascriptya.com.ar/
CSS Ya: http://www.cssya.com.ar/

En febrero de este año, Eric Meyer nos recordaba la posibilidad de utilizar valores numéricos sin unidad con la propiedad line-height de CSS.

A pesar de los errores que da el (precario) validador del W3C, es una solución perfectamente estándar pero parece que algunas versiones antiguas del motor de render Gecko para Mac no saben como interpretar estos valores sin unidad. Así lo apunta Roger Johansson.
Los navegadores afectados son Mozilla en todas sus versiones pero no SeaMonkey y todas las versiones de Firefox anteriores a la 1.0.8, siempre en Mac. Tenéis toda la información necesaria para reproducir el bug en el post de Roger, además de una captura de pantalla del problema para todos los que no tenemos a mano un Mac.

Unitless line-height bug in Mozilla and Firefox

Habitualmente, cuando diseñamos nuestras páginas con XHTML y CSS tendemos a sustituir las
típicas líneas separadoras horizontales <hr> con algún estilo aplicado a un div (border-bottom por ejemplo). Es una práctica correcta e incluso recomendable pero debemos recordar que, cuando un usuario no visualiza la página con la hoja de estilo, toda referencia a esta división desaparece. En la mayoría de casos esto no tiene mayor importancia ya que las divisiones son estéticas pero cuando tu contenido precisa de esas divisiones para ser comprendido no deberías privar a usuarios de navegadores de texto o lectores de pantalla de esa ayuda.
Leer el resto de la entrada

Ya hemos hablado en otras ocasiones de aplicaciones web que nos permiten comparar tipografías en pantalla. Sin duda son de gran utilidad para hacer experimentos.

Font Tester va un paso más allá, además de dejarnos comparar hasta tres tipos de letra simultáneamente, nos permite agregarles estilos CSS y, una vez conseguido el estilo deseado, nos permite copiarlo para pegarlo directamente en nuestras hojas de estilo. Sin duda podrá ahorrarnos mucho tiempo comprobando como afectarán a nuestro texto las diferentes propiedades de CSS para tipografías. Además, por si no era suficiente, incluye un listado clickable de entidades (x)html para que las introduzcamos comodamente en nuestras pruebas.

Font Tester: http://www.fonttester.com

Via Download Squad