Qué bien quedan esos blockquote que tienen unas grandes comillas tipográficas al comienzo y al final ¿verdad? Existen muchos métodos para conseguirlas pero el escaso soporte para CSS 2.1 de Internet Explorer 6 las hace caer en el ámbito de lo que pudo ser y no fue, al menos durante los años que tardemos en sacárnoslo de encima.
Otras soluciones pasan por utilizar Javascript o trucos con imágenes posicionadas absolutamente, nada especialmente aconsejable.
Hoy he descubierto, gracias a Natalie Downe, que, en realidad, conseguir unos blockquote con estilo es tan simple como sacar ventaja de nuestros amados estándares y las hojas de estilo en cascada.
Me explico: para que un blockquote sea válido tiene que tener la siguiente estructura:
Esto es el contenido de un blockquote, rodeado de sus etiquetas p, como dios manda
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:
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
font: 400 0.8em verdana, arial, sans-serif;
background: #666;
color: #EEE;
}
#footer {
float: left;
width: 100%;
position: relative;
z-index: 3;
font-size: 0.85em;
margin-top: -1.5em;
background: #000;
}
#content {
height: 100%;
min-height: 100%;
text-align: left;
/*hack de max-width para Explorer que no comprende la propiedad css */
width: expression(document.body.clientWidth > 1000 ? “1000px” : “94%”);
max-width: 1000px;
margin: 0 auto;
}
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:
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.
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.
(más…)
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios
