Obviamente, no todo son rosas en este camino. IE da problemas para manejar distintos tamaños (especialmente cuando se hereda un tamaño definido por un elemento “padre"). Afortunadamente, hay una solución muy simple a este problema. Basta con definir un tamaño de letra basado en porcentaje al BODY de la página. Además, “hilando fino” hay que marcar que, al posicionar con float, IE de Mac necesita que se defina el ancho de al menos uno de los bloques un poco más pequeño de lo que la lógica matemática podría decir. Cosas de la vida.
Un ejemplo muy básico sería algo como:
CSS para pegar dentro del HEAD.
<style type="text/css">
body {
font-size: 100%;
}
h1 {
text-size: 2.5em;
}
#contenido {
text-size: .85em;
width: 30em;
background-color: #f0f0f0;
}
</style>
HTML para pegar dentro del BODY.
<h1>Mi demo</h1>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec est sit amet wisi ultricies aliquam. Nulla mollis sodales diam. Duis enim purus, gravida at, varius sed, egestas sit amet, ligula. Sed est neque, ultricies ut, fermentum id, congue sed, magna. Ut sed velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat orci a ipsum. Morbi sed augue vitae arcu porta consectetuer. Sed sit amet quam et elit nonummy elementum. Suspendisse auctor leo ut wisi. Pellentesque vehicula venenatis lorem. Pellentesque tincidunt dolor at urna rutrum egestas.</p>
</div>
Como se puede ver en el ejemplo, el concepto es muy simple y una vez comprendido no es demasiado distinto del uso de píxeles para definir anchos.
También tenemos un ejemplo más complejo, con una diagramación a dos columnas con encabezado y pié. Éste ejemplo puede ser alineado a la izquierda o centrado en la ventana y puede tener la columna de extras a la izquierda o la derecha mediante un intercambiador de estilos que está en la misma columna. Nótese que el XHTML no cambia en nada, solo cambian los estilos (que están brevemente comentados en el mismo CSS). Vamos, que ya no hay excusas para no usarlo ;)
Algunas conclusionesLa realidad es que una vez que se entiende el funcionamiento de este sistema, puede usarse muy fácilmente, aunque con algunas limitaciones. El principal problema viene de la mano del uso de imágenes de fondo en los bloques de la página. No es que no se puedan usar, sino que hay que tener en cuenta algunas cosas a la hora de pensar cómo implementarlas, como por ejemplo que al achicarse un bloque éstas se cortarán y que al agrandarlo éstas no lo seguirán. Hay también algo que sí se puede aprovechar y es que se puede definir el tamaño de una imagen con “em” para el width y el height con lo cual lograremos que las imágenes así definidas se agranden o se achiquen junto con el diseño (un efecto muy simpático, a la vez que útil para una persona con problemas de visión que debe agrandar todo para verlo).
Usuarios que han visto este tema también han visto...
- Los 8 factores clave para superar a tu adversario en Google
- Acelerar velocidad del modem a 115,2 Kbps
- Apertura o Libertad: reseña de una involución
- Qué es un freelance
- Contenido valioso
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.