por Mark Newhouse
La iniciativa de actualizar los programas navegadores de The Web Standards Project (BUI), ha empujado a muchos diseñadores a avanzar hacia un diseño más respetuoso con los estándares, utilizando CSS en lugar de tablas para maquetar y ahorrar ancho de banda, y al mismo tiempo mejorando los valores semánticos, de accesibilidad y alcance del sitio.
“Las tablas han muerto...”
Varios diseñadores han seguido la dirección propuesta por Jeffrey Zeldman al proponer tutoriales que nos hayn ayudado a superar el desconcierto inicial de diseñar sin tablas. Los primeros intentos se han enfocado en crear dos o más columnas utilizando posicionamiento CSS en lugar de tablas, permitiendo una completa separación de la estructura y la presentación. Estas técnicas se han documentado y archivado en los sitios de Eric Costello, glish y de Rob Chandanais, Blue Robot.
Muchos otros se han unido, como Owen Briggs con Box lesson y Tantek Çelik, con su box model hack, explicado por Eric Costello, yel propio Tantek. Dotfile cita centenares de sitios diseñados con maquetación basada en CSS.
“...Larga vida a las tablas”
Aunque estos excelentes recursos se proponen crear una maquetación general utilizando sólo posicionamiento con CSS, surgen otras cuestiones a medida que nosotros, como diseñadores, nos encontramos con un problema fácil de resolver con tablas, pero no tan obvio con CSS. Una cuestión así se planteó en Webdesign-L, una lista de correo, con el asunto “Tables are dead ... long live tables.”
La cuestión
Supogamos que tienes una serie de miniaturas de imágenes que enlazan a versiones más grandes de estas mismas imágenes – un tipo de página muy común. Supongamos, además, aque cada imagen tiene una pequeña descripción que nos gustaría que apareciera centrada debajo de ella. Aparte, para conservar espacio en la ventana, queremos que las imágenes y sus pies se alineen en filas a través de la pantalla, de manera que se adapten al ancho de la pantalla (diseño líquido). Con este último requerimiento hemos salido del dominio de las tablas y hemos entrado en el de CSS.
Paso a paso
Vayamos paso a paso. El primer requisito es que las miniaturas tengan su pie centrado debajo. Esto es relativamente fácil: en el HTML colocamos la imagen, seguida de un retorno de carro (o salto de línea, BR), y después , colocamos el pie en un párrafo que está centrado (mediante CSS).
A continuación queremos alinear los pares de imagen/pie a través de la ventana del navegador. Utilizando tablas, cada uno de estos pares iría dentro de una celda TD separada. Usando CSS necesitamos colocarlos en DIVs separados. Para que se alineen horizontalmente a través de la ventana utilizamos CSS para hacer que cada uno de estos DIVs floten (FLOAT) a la izquierda.
El CSS en este punto es así:
div.float {
float: left;
}
div.float p {
text-align: center;
}
And the HTML:
caption 1
caption 2
caption 3
Y así se muestra en el navegador:
El siguiente requisito sólo se puede resolver mediante CSS. Queremos que los pares de imagen y pie se adapten al ancho de la ventana del navegador. Flotando los DIVs a la izquierda ya ha resuelto este problema. Si repetimos estas miniaturas varias veces, se adaptarán a la ventana:
div.container {
border: 2px dashed #333;
background-color: #ffe;
} Sin embargo, al hacerlo nos topamos con un problema. Cuando flotamos un elemento con CSS, ya no consume ningún “espacio” y el fondo y el borde se muestran sobre las imágenes en lugar de rodearlas. Necesitamos poner algo de contenido además de los DIVs flotantes dentro del contenedor DIV. Algo como un DIV que haga de espaciador:
div.spacer {
clear: both;
}
El siguiente HTML (fíjate que hay espaciadores en forma de DIVs en la parte superior e inferior del contenedor):
alt="image 1" / />
caption 1
alt="image 2" / />
caption 2
alt="image 3" / />
caption 3
...nos da como resultado:
DIVs anidados o TABLEs anidadas, ¿qué diferencia hay?
Así que ahora tenemos un puñado de DIVs anidados. ¿Qué mejora supone esto respecto de las tablas que reemplazan? La respuesta está en la manera en que cada etiqueta se concibió para ser utilizada. Los DIVs suponen un agrupamiento estrucutral o lógico. Incluso cuando están anidados permanecen como código estructural. en nuestro ejemplo agrupamos imágenes con sus pies (primer nivel) y después agrupamos los pares imagen/pie con otros pares semejantes (segundo nivel) Estos dos son ejemplos claros de agrupación estructural que la etiqueta DIV asume perfectamente.
Sin embargo, las tablas implican una relación entre columnas y/o filas o encabezamientos, y los datos en las celdas. Cuando las utilizamos para la maquetación de páginas, perdemos la estructura semántica de una tabla. Y estamos utilizando otra vez el HTML para el layout. Anidar tablas sólo agrava el problema.
FORM(s) y su funciónOtro uso común de la maquetación con tablas es alinear los elementos de un formulario, FORM, con sus etiquetas. Aunque se puede argumentar que este es un uso apropiado para las tablas, la técnica de CSS que describiré a continuación demostrará ser útil para otras necesidades similares.
Una disposición típica para un FORM tiene las etiquetas a la izquierda, alineadas a la derecha, con los elementos del formulario a la derecha, y alineados a la izquierda, y todo se encuentra en el centro:
Basado en código original de Eric Meyer.
El formulario precedente se creó sin ninguna tabla. De nuevo empleamos FLOAT para conseguir el posicionamiento. El truco está en crear un DIV que funciona como la fila de una tabla, tal como estamos acostumbrados. Entonces creamos dos SPANs: uno para las etiquetas y otro para los elementos del formulario. Flotamos el SPAN con la etiqueta a la izquierda, y el SPAN para el campo del formulario, a la derecha, alineando respectivamente el texto a la derecha y a la izquierda.
El CSS será así:
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: right;
width: 335px;
text-align: left;
} Este CSS también incluye valores de ancho para los SPANs. Estos valores pueden ser absolutos, como en el ejemplo, o porcentajes que sumen un 100% o un valor ligeramente inferior, dependiendo del espaciado interior y los bordes (y el modelo de caja para el que estés diseñando.) En el ejemplo he envuelto el formulario dentro de otro DIV para dotarlo de un borde y un fondo.
El HTML de este ejemplo es así:
Al frente y al centro
Habrás notado ua parte del atributo del DIV anterior, en el que se indica: margin: 0px auto;. Esto resulta en un DIV que tiene 400 píxels centrado en los navegadores que cumplen los estándares. Otros navegadores, como IE5.x Windows lo ignoran, pero (incorrectamente) centran los DIVs que tienen un valor de TEXT-ALIGN: center. Para centrar un DIV en estos navegadores encierra un DIV con TEXT-ALIGN centrado, alrededor de otro DIV que indica MARGIN:auto (y TEXT-ALIGN a la izquierda para que el texto se alinee correctamente). En el sitio de Rob Chandanais Layout Reservoir encontramos esta y otras técnicas de centrado.
Un layout similar que típicamente se resuelve con tablas es esencialmente el opuesto del anterior. En lugar de encontrarse en el centro, puede que te interese tener dos elementos en partes opuestas de la ventana. Por ejemplo, cuando tenemos un pequeño logo en la esquina superior derecha y algunos elementos de navegación en la parte superior izquierda:
Aquí utilizaremos los mismos DIV.ROW, pero diferentes SPANs que los que empleamos para alinear los elementos de un formulario. El SPAN a la izquierda flotará a la izquierda, y contendrá texto alineado a la izquierda. El SPAN de la derecha flotará a la derecha y contendrá texto alineado a la derecha.
CSS:
div.row span.left {
float: left;
text-align: left;
font-weight: bold;
color: #fff;
width: 49%;
}
div.row span.right {
float: right;
text-align: right;
font-weight: bold;
color: #fff;
width: 49%;
}
HTML:
Home > Products
[logo]
Ayudas con CSS
Las etiquetas ACRONYM y ABBR tags son útiles, aunque poco usadas. Utilizan el atributo de título, TITLE, para expandir el acrónimo o la abreviatura. La mayor parte de navegadores actuales no hacen nada para avisar a los visitantes de un sitio de que hay algo más detrás de las palabras en la página que les puede ayudar a entender el significado de las abreviaturas o acrónimos.
Puedes añadir un borde en la hoja de estilos para que estas etiquetas llamen la atención en la página. También puedes utilizar CSS para que el cursor cambie a "Ayuda" (normalmente un interrogante) para aquellos navegadores que no lo reconozcan. Y no estás limitado a las etiquetas del HTML. Crea una clase llamada .help y emplea SPANs para dar más información acerca de palabras o frases sobre las que los lectores puedan tener dudas.
Este CSS:
abbr, acronym, .help { border-bottom: 1px dotted #333; cursor: help; }... se puede usar conjuntamente con el atributo TITLE en una ABBR o un ACRONYM para crear un efecto de subrayado diferente del que presenten los enlaces. Cambiar el cursor a un cursor de “ayuda” implica que la palabra no se puede pulsar como enlace, y que el atributo de TITLE expandirá la abreviatura o acrónimo. La primera vez que vi esta aplicación fue en un sitio de Sander Tekelenburg.
Repasando...La primera vez que leí acerca de cambiar la forma de mostrar una lista para disponerse en línea fue en Cascading Style Sheets de Bos y Lie. Lo vi aplicado por primera vez en el sitio de Christopher Schmitt, Babble List. El truco hace que la lista se disponga horizontalmente (en línea), así que en lugar de:
- Item one
- Item two
- Item three
- Item one
- Item two
- Item three
Y añadiendo algo de espaciado y un borde, consigues:
- Item one
- Item two
- Item three
- Item one
- Item two
- Item three
0 comentarios:
Publicar un comentario