Author Archives: admin

UOC: Encabezamientos, pies, columnas y plantillas

Logo de Mosaic

Encabezamientos, pies, columnas y plantillas
Encabezamientos, pies, columnas y plantillas

38. Encabezamientos, pies, columnas y plantillas

Ben Henick. 3 de febrero del 2009. Publicado en: pies, composición, CSS, columnas, encabezamientos

Hasta ahora, los artículos de este curso se han centrado en temas concretos, desde conceptos “blandos” como la tipografía y el color hasta una instrucción técnica “dura” sobre partes de CSS 2.1. Este artículo tiene un enfoque más amplio; su finalidad es mostrar al lector cómo utilizar el material tratado hasta ahora para construir la plantilla de una web completa.

La principal asunción de este material es que ya estáis familiarizados con las propiedades float (flotar),display (visualizar) y position (posición) de CSS.

Los lectores autodidactas que deseen pasar directamente al jugo del CSS están invitados (contra nuestra voluntad) a pasar directamente al subapartado 4 de este módulo, pero deberán tener en cuenta que, al hacerlo, se perderán la lección sobre cómo una planificación satisfactoria del proyecto conduce a la composición e implementación de un sitio web.

Ved también

Podéis ver el subapartado 38.4 de este módulo.

Aquellas almas impacientes que ignoren las advertencias del párrafo anterior también deberán descargar las plantillas para una, dos y tres columnas que se facilitan en este artículo y se les enlazará de nuevo a su conclusión.

Archivo fuente:Composición a una columna

Archivo fuente:Composición a dos columnas

Archivo fuente:Composición a tres columnas

La estructura de este artículo es la siguiente:

Nota

Podéis descargar todo el código de ejemplo en un cómodo paquete para hacer pruebas en vuestro equipo local.

Podéis descargar el código de ejemplo en:layout_template_code.zip

Una web construida adecuadamente suele ser el producto de un proceso deliberado, principalmente por entregas, aunque el sitio lo creen una o dos personas en vez de un equipo entero de especialistas. En la figura 1 se describe una representación bastante elaborada de este proceso y de los diez pasos que aquí se describen; este artículo se centra en cuatro, en concreto:

  1. Recogida de requisitos en función de los objetivos empresariales y los consiguientes objetivos de los visitantes
  2. Clasificación de contenidos
  3. Borrador colaborativo y creación de un compuesto
  4. Establecimiento de la estructura de los documentos que se deben utilizar en la web

Una vez completados estos cuatro pasos, el estilista tiene la mayor parte de la información que necesita para crear las disposiciones de la web, que generalmente tendrán una, dos o tres columnas. Independientemente de la forma general de la composición, habrá diferencias de una sección de una web a otra, que a su vez influirá en cómo algunos elementos y selectores de estilo pasan a formar parte del diseño global de la web.

Incluso después de haber hecho las selecciones de diseño y estructurales, queda la cuestión de cómo se tratará la producción si la web se debe crear sobre un sistema de gestión de contenidos (CMS) como WordPress o Drupal.

Este artículo subraya la importancia de los cuatro pasos mencionados anteriormente; proporciona un marco único para la clasificación de contenidos y describe cómo componer una web con todos los encabezamientos, pies y columnas.

38.1. Los pasos críticos del proceso del estilista

Las dos secciones siguientes se facilitan como embellecimiento de otros artículos de este currículo, con un énfasis en la planificación y el proceso más que en la implementación. El mensaje principal es: “Mirad antes de saltar”; en otras palabras, debéis comprender claramente lo que vais a implementar antes de empezar con el etiquetado, las hojas de estilos y el código.

1. Recogida de requisitos 2. Escenarios de conducta 3. Wireframe 4. Esbozo, compuesto, asignación de espacio de nombres 5. Escribir guía de estilo 6. Crear plantillas 7. Escribir código y poblar el sitio 8. Probar 9. Reparar 10. PublicarFigura 1. Diez pasos comunes del proceso de creación de una web. Los que son especialmente relevantes para este artículo se muestran en el tramo inverso.

38.1.1. Recopilación de objetivos

El buen CSS se basa en una cadena de dependencias:

  • el CSS se basa en una estructura para trabajar;
  • la estructura se informa mediante el contenido;
  • el contenido necesita un ámbito;
  • el ámbito del contenido se define mediante los posibles objetivos de visitantes, y
  • a su vez, los objetivos de los visitantes están relacionados con los objetivos empresariales.

La cuestión de esta cadena de requisitos es que las necesidades de vuestros visitantes señalarán directamente la estructura que debéis crear para vuestro sitio y, por lo tanto, impulsarán los selectores y las técnicas aplicadas a vuestros estilos.

Cuando el proceso de recogida de requisitos se gestiona incorrectamente, los especialistas en estilos se enfrentan a retos como los siguientes:

  • Falta de activos
  • Falta de orientación respecto a la relación entre el comportamiento de la composición y la geometría de las ventanas
  • Falta de definición de los niveles de soporte de plataformas

Ved también

Podéis ver el apartado 34 del módulo “CSS”.

  • Solicitudes frecuentes de cambios, ya que los requisitos se acoplan durante el proceso de implementación
  • Falta de herramientas actuales

38.1.2. Clasificación de contenidos

Una vez que hayáis determinado el ámbito del contenido de vuestra web, debéis definir su importancia para el sitio en conjunto y decidir qué herramientas de navegación proporcionaréis a los visitantes para encontrarlo.

También debéis tener en cuenta la cuestión de qué hacer con la publicidad, las listas de enlaces, las galerías y los comentarios.

Una vez clasificados, los contenidos se pueden asociar entonces a la navegación de la web y ponderarlos. La ponderación de contenidos se tratará aquí en un contexto primario/secundario/terciario, dado que la importancia de un bloque de contenidos la debería reflejar su posición en el orden original del documento.

38.1.3. Esbozo colaborativo y creación de un compuesto

Si estáis trabajando en un proyecto en el que el diseño gráfico y la implementación de estilos son tareas asignadas a diferentes personas (como suele ser el caso en los proyectos comerciales), el diseñador gráfico deberá basarse en los diagramas de mapa del sitio y los esqueletos (si es el caso) para empezar a crear el aspecto general de la web. Puede ser útil empezar con borradores sencillos, como manera de definir elementos como el motivo general del sitio, sus características consistentes y los detalles que podrían complicar el etiquetado o la asignación de class e id.

Una vez acordados los borradores, el diseñador gráfico puede pasar entonces a los compuestos acabados, que deberían ser parecidos a capturas de pantalla que se podrían generar en el navegador de desarrollo una vez puesta la web en producción.

De ahora en adelante, en este artículo, el diseño gráfico se tratará de una manera rápida porque ya se ha explicado en los artículos sobre esqueletos y compuestos/modelos.

38.1.4. Establecimiento de una estructura entre y dentro de documentos

Con los compuestos a mano, el especialista en estilos puede empezar a escribir el etiquetado y los CSS. El primer paso de este trabajo es decidir el orden de los contenidos, el anidado de elementos, classes e ids que se utilizarán en la web de producción; un trabajo que sólo se puede hacer bien si el especialista en estilos comprende completamente el contenido que se debe ofrecer en la web y cómo se debe disponer.

38.2. Requisitos, clasificación e imbricación de elementos con más detalle

Si se siguen las buenas prácticas modernas y se adopta el paradigma de diseño centrado en el usuario (UCD, User Centered Design) para motivar las decisiones de diseño y desarrollo, entonces los objetivos de los visitantes influyen en cada uno de los pasos del proceso de diseño.

No obstante, de hecho los objetivos del patrocinador (o editor) de la web tienen prioridad desde el punto de vista del equipo de diseño, porque sin un conocimiento de aquellos objetivos, el equipo de diseño no tiene manera de prever los objetivos de los visitantes.

38.2.1. Definición de objetivos empresariales

Los objetivos “empresariales” de la web entrarán en una o varias de las siguientes definiciones generales:

  • Generación directa de ingresos (comercio electrónico)
  • Ofrecimiento de publicidad, mensajes y/o servicios de almacenamiento mediante una interfaz web (como, por ejemplo, Blogger, Flickr, Scribd, YouSendIt o Basecamp)
  • Comercialización de un producto o servicio
  • Facilitación de información
  • Entretenimiento del visitante

Una vez establecidos los objetivos generales, habrá más perfeccionamiento en función de cualquiera de una serie de factores, como la demografía, los objetivos de conversión y las limitaciones de diseño impuestas por el presupuesto del proyecto o la naturaleza del propio contenido (como podría ser el caso con el vídeo Flash).

La experiencia es, de lejos, la mejor guía en esta parte del proceso de recogida de requisitos.

38.2.2. Definición y cumplimiento de los objetivos de los visitantes

Una vez establecidos los objetivos empresariales, es decir: “esto es lo que queremos que vean y hagan nuestros visitantes”, el paso siguiente es atraer y conducir a los visitantes a aquellos destinos y tipos de funcionalidades que les resulten más adecuados.

La principal asunción de esta parte del proceso de diseño es que “los visitantes odian los obstáculos”. Las mejores maneras de tener en cuenta este supuesto son las siguientes:

  • Definir y diseñar una navegación que se adapte de la mejor manera posible a las estrategias de búsqueda más probables del visitante. Estas estrategias pueden incluir búsqueda de texto completo, listas tradicionales taxonómicas de enlaces o “etiquetado” (ya sea moderado o definido por el usuario).

Nota

Es conveniente que tengáis en cuenta que una web puede contemplar más de una estrategia de búsqueda.

  • Ofrecer siempre indicaciones para que el visitante sepa dónde se encuentra en la web en conjunto. Entre los medios habituales de hacerlo están los “rastros de migas de pan” o “breadcrumbs”, enlaces a contenido relacionado e indicaciones visuales como, por ejemplo, el diseño de enlaces de navegación dependientes del contexto.
  • Reforzar el estilo visual y escrito de la manera más rígida posible, sin caer en una consistencia ridícula. Esta práctica está íntimamente relacionada con la necesidad de dar al visitante pistas consistentes sobre la ubicación; la diferencia es que mientras el color y la disposición de la navegación ofrecen al usuario orientación por toda la web, una presentación consistente a lo largo de las páginas es esencialpara orientarse en una única página.
  • Indicar siempre en lenguaje sencillo las consecuencias de seguir un enlace o enviar un formulario. A veces esto es tan sencillo como etiquetar un botón de enviar con la palabra “Búsqueda”, pero en ocasiones es posible que debáis añadir una nota para dar más instrucciones a los visitantes de la web.
  • Proporcionar una distinción clara entre los elementos de diseño que responderán a la interacción del usuario y cualquier otra cosa. Los estilos que hacen que los enlaces sean casi indistinguibles del texto normal, el diseño inconsistente de los botones y los estilos de cursor atípicos son muy comunes y confusos. Los colores con un contraste elevado, el uso meditado de padding (para ampliar el espacio que ocupan los elementos de diseño interactivos), y los title informativos suelen ser más eficaces.
  • Minimizar la cantidad de interacción del usuario (especialmente el número de clics en enlaces o botones) necesaria para alcanzar un objetivo común, como una compra o el servicio de recursos populares. En la práctica, esto generalmente requiere ponerse en la piel del visitante y analizar sus opciones desde su punto de vista. A no ser que estas tareas se puedan completar y hasta que esto sea posible, el atajo para cumplir esta directriz es seguir el espíritu del principio KISS.

Cuando se trata de etiquetado y hojas de estilos, hay ciertas técnicas muy sencillas que hacen que estas reglas sean fáciles de seguir:

  • A la hora de elaborar vuestra hoja de estilos, debéis asignar las máximas propiedades posibles con reglas mediante selectores de elementos simples.
    Las id, por definición, son únicas y, para ser útiles, las clases se deben reservar preferentemente para casos poco comunes (o para requisitos de presentación que los navegadores antiguos no aceptarían correctamente de otra forma). No obstante, moderando su uso, los especialistas en estilos más atentos están al tanto de las ocasiones en las que el diseñador gráfico insiste en niveles de detalle potencialmente caros en sus diseños.
  • Debéis asignar una id al body de cada página.
    Si se asignan etiquetas de hojas de estilos a documentos determinados (y no sólo en las secciones de una web), los casos de presentación únicos son más fáciles de solucionar. Otra ventaja de colocar una id en el texto principal de cada página es que cuando se utiliza conjuntamente con elementos de navegación ponderados de manera similar, el estilista puede proporcionar indicaciones visuales en la navegación primaria para elementos como la sección o web visualizada actualmente, sin necesidad de utilizar lógica verbosa en el lado del servidor.
  • Debéis evitar los diseños que exigen un elevado control motriz por parte del visitante.
    Una manera más directa de describir esta instrucción es “debéis evitar los menús volantes como los creados mediante las técnicas Suckerfish, también conocidos como menús desplegables”. Hay casos claros de uso de estos diseños y todos implican webs grandes basadas en disposiciones de una y dos columnas, pero a menudo se pueden evitar. Por otra parte, los usuarios sin experiencia y con discapacidad de control motriz a menudo encuentran problemáticos los menús desplegables:

    Podéis ver “Suckerfish Dropdowns“, de Patrick Griffiths y Dan Webb.

    Podéis ver “Son of Suckerfish Dropdowns“, de Patrick Griffiths y Dan Webb.

    • – Para ser efectivos, estos elementos suelen requerir que los enlaces que contienen sean más pequeños que el tamaño predeterminado del tipo de letra del texto, una indicación visual contraintuitiva que hace que los elementos de menú tenga menos aspecto de enlaces que otros elementos de la página que les rodean.
    • – El nivel de control motriz necesario para utilizar estos elementos frustra fácilmente a los visitantes sin experiencia, ocasionales y discapacitados.
    • – La variedad de posibles destinos disponibles que hay en una sección determinada de la web permanece oculta hasta que el visitante interactúa con estos elementos y esto limita su capacidad de mantener un sentido de ubicación en la web hasta que alcanzan experiencia en su uso.

38.2.3. Clasificación de contenidos

Una vez calculado el alcance de los contenidos que se deben presentar en la web, podéis crearle una arquitectura. La arquitectura de un sitio se puede elaborar de varias maneras (podéis ver algunos ejemplos en el artículo 23).

Generalmente, podréis asignar prioridades a vuestros contenidos, que informarán de las composiciones posibles:

  1. Los contenidos primarios son la materia en torno a la que se construyen los documentos de destino individuales, como artículos, álbumes de fotos o conjuntos de datos.
  2. Los contenidos secundarios incluyen metadatos legibles para las personas que están adjuntas a los contenidos primarios, y también contenidos de barra lateral (por ejemplo, texto de exposición; extractos de críticas; enlaces a artículos relacionados en el sitio; listas de gráficos, mapas o tablas).
  3. Los contenidos terciarios comprenden los enlaces salientes a materiales relacionados (como la lista de enlaces amigos de un blog), instantáneas persistentes de contenidos de otras fuentes como webs de redes sociales o entradas de comentarios y publicidad.

Además de los contenidos, vuestro formato casi seguro incluirá dos secciones más:

El encabezamiento incluirá el título de la web (que a menudo enlaza con la portada de la web), la navegación principal, enlaces a metadatos de la cuenta de usuario (en una aplicación) y, por último, el formulario de búsqueda de contenidos principales (si está implementado).

El pie contiene la declaración de copyright, como mínimo. Los enlaces a documentos compuestos de metadatos (como canales RSS, sitemaps y la parte de metacontenidos de la web de la información de contacto) también encuentran su camino en la navegación secundaria de una web, que suele formar parte del pie.

La navegación principal y el título de una web casi siempre forman parte de (o están al mismo nivel que) el encabezamiento en un contexto visual; cada implementador puede decidir si deberán formar parte del encabezamiento de la web a nivel de etiquetado.

38.2.4. Orden del código: accesibilidad y otras consideraciones

Uno de los primeros pasos del diseño de plantillas web es decidir el orden de sus contenidos en el código, que debería ser consistente a lo largo de la web en conjunto.

El orden del código del documento de manera que se pueda leer correctamente sin la ventaja de las hojas de estilo es esencial por motivos de accesibilidad y soporte entre medios. En el primer caso, los usuarios con discapacidad visual pueden utilizar lo que se denomina lectores de pantallas: aplicaciones de software que leen los contenidos en voz alta al visitante, contenidos que no tienen ningún sentido si están ordenados de cualquier manera por motivos de presentación.

…Y de la misma manera que la información dispuesta en el orden adecuado para la visualización en pantalla probablemente exige claridad para ser leída en voz alta, aplicar estilos puede resultar imposible en otros medios como visualizaciones impresas o móviles. En este caso, el resultado suele ser la duplicidad de contenidos, lo que presenta una serie de inconvenientes:

  • Como mínimo, se debe implementar lógica adicional en la capa de vista para tener en cuenta el hecho de que la salida de un registro individual de una base de datos se puede ofrecer de más de una manera.
  • En el peor de los casos, los contenidos se duplican no sólo en el entorno en el que se encuentra el visitante, sino también en la base de datos o en el sistema de archivos del sistema principal. El resultado será la duplicidad de algunos gastos de mantenimiento.

Por lo tanto, lo más habitual es disponer las secciones más exteriores en el orden siguiente:

  1. Encabezamiento
    • Título [preferiblemente enlazado con la página de inicio]
    • Navegación principal
  2. Contenido principal
    • Título del documento
    • Texto central
  3. Contenido secundario
  4. Contenido terciario
  5. Pie
    • Navegación secundaria
    • Partes adicionales (por ejemplo, aviso de copyright)

La manera como se imbricarán estas secciones dependerá de una serie de requisitos variables, de los que el más habitual es el número de columnas estáticas en la disposición de la web.

38.2.5. Asignación de id, clases y elementos contenedores

Cuestiones de taxonomía al margen, podemos asumir que cualquier web dada cubrirá una serie de temas relacionados dentro de un ámbito entendido, ya sean operaciones y productos de una empresa, tipos específicos de acontecimientos, o tipos específicos de entretenimiento, por nombrar algunos ejemplos con los que suelen contar para atraer el interés de públicos no técnicos.

Por lo tanto, el estilista se encontrará probablemente asociando las etiquetas de hojas de estilos tanto con elementos estructurales de los contenidos de la web (por ejemplo, fragmentos de navegación, encabezamiento, texto principal) como con abanicos de contenidos, más o menos amplios.

Las prácticas varían, pero el autor generalmente asigna las siguientes etiquetas de formato a sus plantillas, etiquetas que verán su uso en este módulo.

  • #main: lienzo de contenidos
  • h1 (únic): título de la web
  • ul#nav: código de navegación del sitio
  • #breadcrumb: rastro de “migas de pan” (si se utiliza)
  • #bodyCopy: artículo principal
  • #bodyCopy>h2 (único): título de documento principal
  • #sidebar: contenido secundario
  • #footer: código del pie
  • ul#secondaryNav: navegación secundaria

Además de éstos y mucho más importante, se añade una id al body de cada página (como se ha mencionado anteriormente) que da alguna indicación del ámbito del contenido primario asociado con todo el documento. Algunos proyectos también generan un requisito para la asignación de classes a los elementos body.

38.3. Implementación de la composición a una columna

Figura 2. Elementos de la composición de una columna; probablemente el etiquetado se imbricará como se muestra aquí.

La figura 2 muestra que #main está immediatamente dentro de body, y que a la vez contiene todo el#header, #bodyCopy y #footer.

38.3.1. Centrado de la composición

El centrado del lienzo de contenidos es una cuestión de insertar (en este caso) #main {width: 960px; margin: auto; } en vuestra hoja de estilos (el valor width elegido es arbitrario).

38.3.2. ¿Es estrictamente necesario un contenedor de toda la anchura del documento?

En una web que se basa completamente en composiciones de una sola columna, no es absolutamente necesario incluir #main; se podrían aplicar igual de fácilmente los mismos pares de propiedad/valor de composición utilizados anteriormente en #header, #bodyCopy y #footer de manera combinada. No obstante, no hay nada semánticamente incorrecto en incluir #main y su inclusión ofrece al especialista en estilos más flexibilidad en relación con elementos como las reglas, los canales, las imágenes de fondo y la construcción de la prominencia de determinados elementos en la estructura de la plantilla.

38.4. Implementación de la composición a dos columnas

Dentro del lienzo tenemos un primer elemento de bloque #header, ocupando toda anchura, seguido de dos elementos #sidebar y #bodyCopy uno al lado de otro y, finalmente, un #footer que, de nuevo, ocupa todo el ancho del lienzo, dentro de un bloque #mainFigura 3. Elementos de una composición en dos columnas; probablemente el etiquetado estará anidado como se muestra aquí, con la condición de que#sidebar seguirá de hecho a #bodyCopy en el orden de origen.

La diferencia entre las composiciones a una y dos columnas es el añadido de un segundo elemento contenedor para el contenido secundario (#sidebar, que de hecho sigue a #bodyCopy en el orden de origen), y algunos cambios en la hoja de estilos que probablemente se utilizarán para una disposición a una columna.

38.4.1. Problemas de composición en relación con las disposiciones a una y dos columnas

Los cambios en el etiquetado necesarios para convertir una plantilla de una columna en una plantilla de dos columnas son sencillos, pero en muchos casos las nuevas reglas de estilo necesarias no lo son.

Colocación de #sidebar a la izquierda en vez de en su orden original

Hay dos procedimientos para hacerlo; uno funcionará independientemente de la longitud de cualquiera de las columnas, mientras que el otro requiere que #bodyCopy sea más largo que #sidebar.

El planteamiento principal y más común es utilizar float:

  1. Asignar un valor width a #bodyCopy.
  2. Añadir a esta regla un valor float de right.
  3. Asignar un width apropiado a #sidebar.
  4. Asignar valores de margin (margen) y padding (relleno) según sea necesario en #bodyCopy (texto central) y/o #footer (pie) para garantizar que exista el canal deseado entre los dos elementos.
  5. Asignar clear: both; a #footer.

Las dos columnas tienen los valores width (anchura) especificados de manera que tengan unos márgenes consistentes.

En el caso en el que #sidebar queda en el margen derecho de la composición, los pasos ya descritos se deberían continuar siguiendo, aunque el valor de float de #bodyCopy se debería establecer en left. El valor width asignado a #sidebar se debería sustituir por un valor margin-left (margen izquierdo) apropiado.

También es posible asignar un valor margin-left o margin-right (margen derecho) grande (según sea necesario) al elemento del que se ha eliminado float, en vez de width.

Un segundo planteamiento que probablemente provocará menos errores en Internet Explorer 6 es asignar un valor margin-left o margin-right grande a #bodyCopy según convenga, y posicionar #sidebar de manera absoluta. No obstante, este planteamiento es menos flexible porque los casos en los que #sidebarsea más largo que #bodyCopy harán que el elemento anterior sangre hacia #footer.

Columnas falsas: uso de una imagen de fondo para alinear las longitudes de las columnas cuando la longitud de su contenido es diferente

Un examen más minucioso de las implementaciones de columnas utilizando la propiedad float revela que cuando se quieren diferentes colores de fondo o reglas verticales entre columnas, no se puede contar con ello para establecer la longitud del área de contenidos principal cuando se aplica mediante propiedadesbackground-color o border.

La solución más fácil a este problema es crear y especificar una imagen de fondo (generalmente de un píxel de altura) a uno de los elementos antepasados de las columnas que, a causa de su asignación a este elemento antepasado, siempre se repetirá desde la parte superior a la parte inferior de la columna más alta relacionada. Por lo tanto::

#main {
   background-image: url(images/bg_2column.gif);
   background-repeat: repeat-y;
}

Si bg_2column.gif está formado por dos bandas de colores muy contrastados que corresponden con más o menos precisión a las anchuras asignadas en las columnas de contenido, el resultado serán dos columnas que parecerán tener la misma altura… aunque realmente no la tengan, como se descubriría si a continuación se insertaran las reglas siguientes:

#bodyCopy {
   background-color: #ccc;
}

#sidebar {
   background-color: #999;
}

Realizar este paso no elimina necesariamente la necesidad de aplicar propiedades color o background-color a una columna determinada; si el color del texto predeterminado no es legible sobre una o ambas columnas, sus colores de fondo y primer plano se deberían especificar explícitamente en la hoja de estilos como salvaguarda contra la posibilidad de que el navegador no cargue las imágenes de fondo.

Desplazamiento de la navegación principal en la segunda columna mientras se mantiene el orden de origen

Una vez que se ha añadido una segunda columna a la disposición, probablemente parecerá natural colocar la navegación principal de la web en la parte superior de aquella columna… sin embargo, ¿cómo hacerlo cuando la navegación descansa en una parte diferente de la estructura de la plantilla?

La respuesta a esta pregunta se encuentra en el posicionamiento:

  1. Si habéis asignado overflow: hidden; en #header, (encabezamiento), haced que #nav sea un descendiente directo de #main (principal). En casi todos los casos, será posible hacerlo sin estropear el orden de origen deseado.
  2. Asignad position: relative; (posición relativa) al antepasado inmediato de #nav, y position: absolute; en la propia #nav.
  3. Como la posición absoluta de #nav lo colocará en el vértice superior izquierdo de su antepasado de manera predeterminada, ajustad los valores left y top (superior) de #nav según dicten las circunstancias.
  4. Ajustad el valor margin-top o padding-top de #sidebar (según convenga) para reflejar la altura prevista de #nav. En los casos en los que #nav cambia de una página o sección a la siguiente, será necesario escribir algunas reglas, quizá con varios selectores en cada una; de aquí el consejo anterior de asignar una id referente del ámbito del contenido (y quizá también una class) en el body de cada documento de la web.

38.5. Implementación de la composición a tres columnas

Figura 4. Los elementos de una composición a tres columnes; observad los dos nuevos elementos contenedores y la diferente asignación de id.

Las principales diferencias de etiquetado que impone añadir una tercera columna son:

  • Un contenedor incluye dos columnas adyacentes, generalmente la primera y la segunda.
  • La tercera columna está situada en su propio contenedor.

Una vez establecido el etiquetado, la obtención de la disposición deseada es una cuestión de ordenar correctamente los valores float. No debéis olvidar que los contenedores no flotantes requieren un ajuste de márgenes para que la alineación sea correcta.

Nota

Debéis tener en cuenta que en relación con la figura 4, es mejor asignar a los elementos de la columna dual y del contenedor terciario id que ofrezcan alguna indicación del contexto, más que los id sugeridos en el propio diagrama.

Asignación flotante en cada columna en una composición de tres columnas.
Presentación deseada Contenido del
contenedor
Contenedor Primario Secundario Terciario
Tabla 1. Valores float de los cuatro elementos contenedores de una composición de tres columnas por orden de aparición de izquierda a derecha.
2-1-3 1+2 left right none none
2-3-1 2+3 left none left none
3-1-2 1+2 right left none none
3-2-1 1+2 right left none none
1-2-3 1+2 left left none none
1-3-2 2+3 right none right none

La mayor dificultad de los diseños de tres columnas y su sencilla solución

La disposición a tres columnas más flexible introduce un elemento contenedor que no tiene significado semánticamente; la alternativa es imponer las convenciones de longitud del contenido u orden del código, que crearán una carga pesada, ya sea sobre los responsables de mantenimiento (en caso de requisitos de longitud de los contenidos), o sobre los visitantes (en caso de limitaciones del orden del código).

La introducción de este contenedor “sin significado” también puede plantear problemas cuando se trata de rediseñar una web. Imaginémonos la siguiente situación:

Cuando se diseña una web desde cero, se dispone con sus columnas en orden de presentación 2-3-1, pero más adelante se rediseña con sus columnas en un orden más tradicional como 2-1-3. El elemento contenedor de dos columnas se deberá mover de manera que comprenda diferentes contenedores de columnas. Y entonces, ¿qué?

En este caso, el resultado es fácil de obtener; si el sitio funciona realmente con plantillas, entonces hay (probablemente) pocos archivos que haya que cambiar. Si, en cambio, todos los documentos de la web utilizan el mismo esquema de etiquetado, se deberá utilizar buscar y sustituir. De todos modos, esto no será difícil.

La disposición de etiquetado global de los contenedores tomará una de las dos formas siguientes:

  • <div id="#container"><div id="primary">...</div>
    <div id="secondary">...</div></div><div id="tertiary">...</div>
  • <div id="primary">...</div><div id="#container">
    <div id="secondary">...</div><div id="tertiary">...</div></div>

En estos dos ejemplos, los fragmentos correspondientes que se deben buscar y sustituir se muestran en negrita. Algunas de estas id serán únicas en vuestro documento, y como la ubicación de las etiquetas de cierre doble se puede prever (ya sea al lado de una tercera etiqueta de cierre o de #tertiary), escribir una operación de búsqueda y sustitución para modificarlas es un cambio relativamente sencillo.

38.6. Visión amplia de los encabezamientos y pies

Hasta ahora hemos hablado de qué debería ir en los encabezamientos y pies: logo/logotipo, búsqueda en toda la web, enlaces con información de cuentas de usuario, metadatos de la web, etc., pero la efectividad y el atractivo del encabezamiento/pie se ha tratado poco fuera de los artículos del currículo sobre esqueletos y compuestos/bocetos.

Como no sería positivo agobiaros con un discurso larguísimo en defensa de este hecho, os proponemos buscar tres webs que sean notables, ya sea por su popularidad o por la importancia de sus editores, y echar un vistazo a sus particularidades de diseño.

38.6.1. Sitio personal: Cindy Li

El fondo de la web es azul celeste para el cuerpo y un azul más grisáceo para los bordes. La tipografía de los títulos es una sans serif de formas redondeadas, para la que se usa un color cian. A la izquierda hay un dibujo de perfil de una chica con una flor en el pelo. En el menú de navegación se usa media flor como indicador de la sección en que nos encontramos. El texto central se enmarca en bocadillos de cómic blancos.Figura 5. En este caso, hay dos asuntos dignos de ser comentados, la identidad y el contraste.

Identidad

Identidad es un término que adquiere un significado especial en el reino de la publicidad y el marketing, donde hace referencia a las marcas comerciales y otros elementos de diseño que son particulares de la presentación de una empresa comercial y sus productos. La web de Cindy Li lo lleva a cabo a un nivel personal mostrando una caricatura de su perfil facial en el encabezamiento del sitio y utilizando un tipo de letra distintivo para definir el título de la web y la navegación principal.

El modo como se impone la identidad en las webs de empresa se tratará con más detalle a continuación.

Contraste

En cindyli.com, el visitante puede ver a primera vista de qué va la cosa: la identidad, el lienzo de contenidos y el contenido primario están todos colocados en huellas discretas gracias a sus colores de fondo. Además, el título de la web y la navegación tienen un contraste alto en relación con el fondo.

Y en cuanto al pie de la web:

El pie de la web. Textos en azul grisáceo y cian sobre azul celeste.
 El texto es Copyright Cindy Li, powered by Expression Engine, más un enlace al RSS del sitioFigura 6. El pie de Cindy Li es algo escaso, en él aparece la declaración de copyright, un enlace a la web de marketing de la plataforma publicitaria que utiliza (lo que probablemente es obligatorio bajo las condiciones de la licencia de uso), y un enlace a una suscripción sindicada de los artículos que publica.

Al contrario que las demás webs presentadas en este artículo, la web de Cindy no ofrece una búsqueda de texto completo, probablemente por motivos técnicos. No obstante, como la web es un blog, su diseño permite asumir que la mayoría de los lectores limitan su interés en los nuevos contenidos.

38.6.2. Redes sociales: Facebook

Cabecera del sitio web de Facebook. Textos blancos en tipografía negrita sobre fondo azul. A la izquierda tenemos el nombre de la web y enlaces a 'Home', 'Profile', 'Friends' e 'Inbox'. A la derecha tenemos el nombre del usuario, 'Settings', 'Logout' y una caja de búsqueda.Figura 7. Facebook, como muchos destinos de redes sociales, refuerza su identidad mediante el uso de la composición y el color, ya que la propia aplicación es el destino.

Igual que muchas webs comerciales, Facebook ofrece tanto una búsqueda con texto completo como un enfoque categorizado en la navegación de la web.

Pie del sitio web de Facebook. En la parte inferior tenemos una línea con un menú de aplicaciones, un enlace al chat de Facebook con el número de amigos conectados, un notificador de actualizaciones y un botón que indica y permite cambiar nuestra visibilidad en el chat. Por encima tenemos otra línea con la información de copyright, un botón para cambiar la interfaz del idioma y enlaces a metainformación del sitio ('acerca de', 'publicidad'...)Figura 8. Igual que su encabezamiento, el pie de Facebook también es pequeño, incluso si tenemos en cuenta el “widget” de aplicación persistente en la parte más inferior. Lo que tiene interés en este caso se encuentra al lado de la declaración de copyright: un artilugio para cambiar el idioma predeterminado del usuario.

Otra práctica común ejemplificada por el pie de Facebook es que mientras los enlaces de uso en la búsqueda de usuario van en el encabezamiento, el pie contiene todos los enlaces sobre el operador de la web y de la propia web.

38.6.3. Marketing de empresa y servicio al cliente: BNSF Railway

Cabecera de la web de BNSF Railway. En una primera línea, un menú de navegación con textos blancos sobre fondo naranja. Por debajo, el logotipo de la empresa, una caja de búsqueda, accesos al registro y 'log in' y un botón para canviar el perfil del usuario.Figura 9. Como la mayoría de las webs “de empresa”, el contraste más alto de las características del encabezamiento se disfruta mediante el logotipo del editor de la web… y el único tono presente es el mismo que se utiliza en el logotipo.

Repaso de la identidad

En cuanto a los diferentes logos, logotipos y otros recursos de diseño que refuerzan la identidad comercial, debéis tener en cuenta los siguientes, que son marcas omnipresentes que hacen negocios con Opera Software:

  • Nokia
    Logo de Nokia
  • Samsung Group y Samsung Electronics
    Logo de Samsung
  • Google
    Logo de Google
  • IBM
    Logo de IBM

Aparte de estos cuatro, hay otros ejemplos similares de diseño gráfico muy conocidos: el símbolo de Nike, el “Swoosh” (de hecho, este nombre está registrado), el logotipo de “la estrella de la muerte” de AT&T, el logotipo de FedEx (y la flecha en el espacio blanco contenido por sus dos últimas letras), y el “marrón de UPS” son ejemplos de identidad corporativa que el público general conoce casi universalmente (al menos en Estados Unidos).

Cualquier operador que se tome la molestia de desarrollar una identidad visual distintiva hará bien en integrar esta identidad en el diseño de la web porque tiene un fuerte impacto en la naturaleza del trabajo del especialista en estilos.

Y en cuanto a otros elementos del encabezamiento de BNSF aparte del logotipo, el más notable es el uso de dos modos de búsqueda (como en el caso de Facebook).

Pie de la web de BNSF Railway. Tres líneas de texto centradas. En la primera, texto en naranja y rojo para informar de emergencias y en rojo. En la segunda, texto en negro con enlaces a metainformación del sitio. En la tercera, también en negro, información de copyrightFigura 10. La web de BNSF tiene la disposición de pie más “tradicional” de estos tres sitios, donde se hace el mínimo esfuerzo por colocar la navegación secundaria en un plano visual distintivo con reglas horizontales o un color de fondo diferente.

38.6.4. Diseño de encabezamiento y pie: los detalles de bajo nivel

Al adoptar una visión más amplia del diseño del encabezamiento y el pie, quedan claras los siguientes elementos comunes:

  • Los destinos de empresas y aplicaciones tienden a disponer su navegación principal en una fila a lo largo del margen superior del lienzo del navegador. Este hecho los distingue de las webs de noticias y comercio electrónico, que a menudo utilizan un planteamiento más columnar para la composición de la navegación.
  • Igual que la navegación principal orientada horizontalmente es habitual, también lo es el uso de una navegación secundaria discreta en el pie. Además, la división de destino y metainformación de la web descrita anteriormente en este artículo se impone bastante a menudo.
  • Donde hay presente una búsqueda de texto completo, los campos de introducción tienden a colocarse cerca del margen derecho del encabezamiento. Esto es así sobre todo porque la búsqueda de texto completo bien implementada es una manera tan válida de navegar por el sitio como los enlaces tradicionales alimentados por una taxonomía, y es probable que un subconjunto de la población de la web abuse de ello, probablemente los usuarios con menos conocimientos técnicos.

Más información sobre la implementación de la composición de navegación

Antes de pasar a los detalles, deberíais consultar List-O-Matic, una aplicación alojada en Accessify.com que crea elementos de navegación con un estilo sencillo, preparados para ser insertados en cualquier composición de página.

Aparte del tema de las herramientas que hacen el trabajo por vosotros, hay dos enfoques básicos en la composición de la navegación:

La navegación se integra en el encabezamiento de la web (visualmente, si no literalmente) y se orienta horizontalmente. En este caso, el valor display (visualizar) de los enlaces individuales probablemente se cambiará a block, y a los elementos de su lista de contenidos se les asignará un valor float de left.

La navegación está orientada verticalmente y está colocada a la izquierda del contenido principal, ya sea en su propia columna o justo encima del contenido no primario. En este caso, lo más probable es que veáis que se utiliza algún tipo de posicionamiento no static.

38.7. Webs con diferentes números de columnas: hacer trampa con class ydisplay

Algunas webs pueden tener páginas con una o dos columnas; otras, dos o tres. La flexibilidad es uno de los puntos fuertes de CSS, y uno de los recursos de los que los diseñadores gráficos tiran inconscientemente, en su libidionosa cruzada por obtener un control férreo sobre la experiencia del usuario.

Normalmente, estos casos se tratan parcialmente con includes: scripts del sitio que permiten añadir fragmentos persistentes a una página de manera programática, en vez de copiarlos repetidamente.

Sin embargo, incluso con esas inclusiones los especialistas en estilos todavía encontrarán diferencias en la disposición; entonces, ¿cuál es la mejor manera de tratarlas?

El planteamiento más directo es añadir una class al body de cualquier página que la pueda necesitar. Esto podría asumir una naturaleza ordinal que corresponde a algunas series de disposiciones sugeridas en las directrices de identidad, o tener que ver de nuevo con el contenido y el resultado en varias reglas selectoras, como las siguientes:

.about #bodyCopy,
.contact #bodyCopy,
.privacy #bodyCopy {
   float: none; width: auto;
}

.about #sidebar,
.contact #sidebar,
.privacy #sidebar {
   display: none;
}

El único inconveniente de seguir este planteamiento sin la ventaja de incluir declaraciones (una manera pobre de hacer que el contenido desaparezca o reaparezca, si queréis) es que las políticas de los operadores de los motores de búsqueda podrían reducir el peso de aquellas páginas en sus resultados o, en el caso de implementaciones espectacularmente chapuceras, incluso sacar de sus listas las webs que las utilizan. Por este motivo (entre muchos otros que se deben tener en cuenta), cualquier tipo de alojamiento que contratéis debería aceptar algún tipo de función de inclusión.

Resumen

Aunque es tentador –sobre todo si sois principiantes– sentarse directamente y empezar a escribir etiquetado y código, este proceso no da como resultado webs especialmente atractivas, útiles o mantenibles.

No obstante, teniendo en cuenta esmeradamente el contenido que irá en una web y el modo como se debería disponer, podéis lanzar cualquier web a la estructura derivada de sus requisitos.

Plantillas básicas:

Preguntas de repaso

  1. Dada una lista de posibles enlaces proporcionados por vuestro instructor, divididlas en enlaces primarios (encabezamientos) y secundarios (pies). Justificad vuestras asignaciones basándoos en los ejemplos facilitados en este artículo.
  2. Identificad lo siguiente en un compuesto creado por un compañero:
    1. el número de columnas que se deben aplicar al diseño;
    2. las anchuras de estas columnas,
    3. el float/width/margin, y
    4. la combinació float/width/margin, si la hay, que se debería utilizar para implementar la presentación de estas columnas.
  3. Con un logotipo, una lista de requisitos y una arquitectura determinados, diseñad un encabezamiento de web.
  4. Si no podéis demostrar el uso de la sección áurea de la composición del encabezamiento diseñado en el ejercicio anterior, modificad la composición de manera apropiada y evaluad subjetivamente lo atractivo que es el resultado.
  5. Basándoos sólo en los resultados de los motores de búsqueda, obtened el motivo por el que las listas son preferibles a las colecciones de div (o de otros elementos) para estructurar los elementos de navegación. Haced referencia a las características del software de lectura de pantallas en vuestra respuesta.
  6. Revisad, de memoria, uno de los archivos de la plantilla proporcionada de manera que admita un número diferente de columnas. Modificad también de manera significativa la composición de la navegación principal, comparada con lo que se encontró en el archivo de plantilla original.

Lecturas complementarias

  • BNSF Railroad. 2006. [Fecha de consulta: 13 de enero de 2009].
  • Facebook. 2008. [Fecha de consulta: 13 de enero de 2009].
  • Henick, Ben. 2006. “Avoid edge cases by designing up front“. A List Apart. [Fecha de consulta: 13 de enero de 2009].
  • Li, Cindy (2008). “The Adventures of Cindy Li“. [Fecha de consulta: 13 de gener de 2009].
  • Morville, Peter; Rosenfeld, Louis (2006). Information architecture for the world wide web (3ª edició). Cambridge: O’Reilly Media.
Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice : Ir al artículo siguiente

UOC: Posicionamiento absoluto y fijo con CSS

Logo de Mosaic

CSS
Posicionamiento absoluto y fijo con CSS

37. Posicionamiento absoluto y fijo con CSS

Tommy Olsson. 26 de septiembre del 2008. Publicado en: índice z, apilamiento, recipiente, bloque, continente

Este es el momento de fijarnos en el segundo par de valores de propiedad de position: absolute(absoluto) y fixed (fijo). El primer par de valores: static (estática) y relative (relativo) están íntimamente relacionados, y ya los vimos en el apartado anterior.

Los elementos posicionados absolutamente se eliminan completamente del flujo del documento. Esto significa que no tienen ningún efecto sobre su elemento padre ni sobre los elementos que aparecen después de ellos en el código fuente. Por lo tanto, un elemento posicionado absolutamente se superpondrá sobre otros contenidos a no ser que se tome alguna medida para evitarlo. En ocasiones, por supuesto, esta superposición es exactamente lo que queréis, pero deberíais ser conscientes de ello para aseguraros de que obtenéis la composición que queréis.

El posicionamiento fijo es de hecho una forma especializada del posicionamiento absoluto; los elementos con posicionamiento fijo están fijos en relación con la ventana o viewport del navegador en vez de estarlo en relación con el elemento continente; incluso si se desplaza la página, se mantienen exactamente en la misma posición en la ventana del navegador.

En este apartado os daremos algunos ejemplos prácticos del uso de los posicionamientos absolute yfixed, observaremos algunos pequeños problemas de compatibilidad de navegadores y nos fijaremos en el concepto de índice z.

Pero antes de empezar a hablar de todo esto, trataremos un concepto previo esencial: los bloques contenedores.

Los contenidos de este apartado son los siguientes:

37.1. Bloques contenedores

Un concepto fundamental respecto al posicionamiento absoluto es el bloque contenedor: la caja de bloque respecto a la que se encuentran la posición y las dimensiones de la caja posicionada absolutamente.

Para las cajas estáticas y posicionadas relativamente, la caja contenedora es la antepasada del bloque más próximo o, dicho de otro modo, el elemento padre. No obstante, para los elementos posicionados absolutamente es algo más complicado. En este caso, la caja contenedora es el antepasado posicionado más próximo. Con posicionado nos referimos a un elemento cuya propiedad position está establecida enrelative, absolute o fixed, es decir, cualquier cosa excepto elementos estáticos normales.

De manera que, establecer position:relative para un elemento lo convierte en bloque contenedor de cualquier descendiente posicionado absolutamente (elementos hijos), tanto si aparecen inmediatamente debajo del elemento posicionado relativamente en la jerarquía, o más abajo.

Si un elemento posicionado absolutamente no tiene un antepasado posicionado, entonces el bloque contenedor es lo que se llama bloque contenedor inicial, que en la práctica equivale al elemento html. Si estáis mirando la página web en pantalla, se refiere a la ventana del navegador; si vais a imprimir la página, se refiere a los límites de la página.

Los elementos con posicionamiento fijo difieren ligeramente, ya que su bloque contenedor siempre es el bloque contenedor inicial.

Así pues, resumimos en una serie de sencillos pasos; para encontrar el bloque contenedor de un elemento con position:absolute, esto es lo que debéis hacer:

  1. Mirad el elemento padre del elemento posicionado absolutamente: ¿la propiedad position de este elemento tiene uno de los valores relative, absolute o fixed?
  2. Si es así, habéis encontrado el bloque contenedor.
  3. En caso contrario, pasad al elemento padre del padre y empezad de nuevo desde el paso 1 hasta que encontréis el bloque contenedor u os quedéis sin antepasados.
  4. Si habéis llegado al elemento html sin encontrar un antepasado posicionado, entonces el bloque contenedor es el elemento html.

37.2. Posicionamiento absoluto

El posicionamiento fijo es una forma especial de posicionamiento absoluto, de manera que lo estudiaremos más adelante y ahora nos concentraremos en el caso más generalizado. A no ser que se indique lo contrario, cuando utilizamos el término posicionado absolutamente desde ahora hasta el final del apartado, nos estaremos refiriendo tanto a elementos con position:fixed como a elementos conposition:absolute.

37.2.1. Especificación de la posición

Con el posicionamiento relativo, habéis aprendido que las propiedades top, right, bottom y left se pueden utilizar para especificar la posición de la caja. Para especificar la posición de una caja posicionada absolutamente se utilizan las mismas propiedades, pero la manera de utilizarlas es bastante diferente.

Para un elemento posicionado relativamente, las cuatro propiedades especifican la distancia relativa para desplazar la caja generada. Recordad que en el caso del posicionamiento relativo se complementan entre sí, de manera que top:1em y bottom:-1em quieren decir lo mismo, y no tiene mucho sentido especificar tanto top como bottom (o left y right) para el mismo elemento porque uno de los valores se ignorará.

Estos puntos no son ciertos en el caso del posicionamiento absoluto. En este caso, se pueden utilizar las cuatro propiedades al mismo tiempo para especificar la distancia desde cada borde del elemento posicionado hasta el borde correspondiente del bloque continente. También se puede especificar la posición de una de las esquinas del cuadro posicionado absolutamente, por ejemplo utilizando top y left, y entonces especificar las dimensiones del cuadro mediante width y height (o simplemente no utilizarwidth y height si queréis dejar que se ajuste para encajar su contenido).

La versión 6 de Microsoft Internet Explorer (y anteriores) no acepta el método de especificar los cuatro bordes, pero sí el método de especificar una esquina más las dimensiones.

/* Este método funciona en IE6 */
#foo {
   position: absolute;
   top: 3em;
   left: 0;
   width: 30em;
   height: 20em;
}
/* Este método funciona en IE6 */
#foo {
   position: absolute;
   top: 3em;
   right: 0;
   bottom: 3em;
   left: 0;
}

Lo que debéis recordar en este caso es que los valores que habéis establecido para las propiedades top,right, bottom y left especifican las distancias desde los bordes del elemento hasta los bordes de su bloque continente correspondiente. No es como en un sistema de coordenadas donde cada valor es relativo a un punto de origen. Por ejemplo, right:2em significa que el borde derecho del cuadro posicionado absolutamente estará a 2 em del borde derecho del bloque contenedor.

Es absolutamente esencial saber cuál es el bloque contenedor cuando se utiliza el posicionamiento absoluto. Por ello es tan útil configurar position:relative en el bloque contenedor, incluso si no se desplaza realmente la posición del cuadro. Esto permite hacer que un elemento sea el bloque contenedor de sus descendientes posicionados absolutamente, es decir, os proporciona el control.

Probemos un ejemplo para ver cómo funciona.

  1. Copiad el código siguiente en vuestro editor de texto y guardad el documento como absolute.html.
    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8">
       <title>Absolute Positioning</title>
       <link rel="stylesheet" type="text/css" href="absolute.css">
    </head>
    <body>
       <div id="outer">
          <div id="inner"></div>
       </div>
    </body>
    </html>
  2. A continuación, copiad el código siguiente en un nuevo archivo y guardadlo como absolute.css.
    html, body {
       margin: 0;
       padding: 0;
    }
    #outer {
       margin: 5em;
       border: 1px solid #f00;
    }
    #inner {
       width: 6em;
       height: 4em;
       background-color: #999;
    }
  3. Guardad los dos archivos y cargad el documento HTML en vuestro navegador. Veréis un rectángulo gris rodeado de un marco algo más ancho de color rojo. El elemento #inner tiene una anchura y altura especificadas y un color gris de fondo. El elemento #outer, que es el padre estructural de #inner, tiene un marco rojo. También tiene un margen de 5 em alrededor para alejarlo de los bordes de la ventana del navegador y dejarnos ver más claramente qué es lo que ocurre.

    Nada sorprendente hasta ahora, ¿verdad? La altura del elemento #outer viene dada por su elemento hijo (#inner) y la anchura por los márgenes horizontales.

  4. Mirad qué sucede ahora si hacéis que el elemento #inner esté posicionado absolutamente. Añadid la siguiente línea resaltada en la regla de #inner:
    #inner {
       width: 6em;
       height: 4em;
       background-color: #999;
       position: absolute;
    }
  5. Guardad y recargad. En vez de un marco rojo en torno al rectángulo gris, ahora vemos lo que parece un marco más grueso sólo en la parte superior. Y el cuadro gris no se ha movido en absoluto. ¿Os lo esperabais?

    Pasan dos cosas interesantes aquí: en primer lugar, hacer que #inner esté posicionado absolutamente lo ha eliminado completamente del flujo del documento. Esto significa que su padre,#outer, ahora no tiene hijos que se encuentren en el flujo normal y, por lo tanto, su altura se reduce a cero. Lo que parece una línea roja de 2 píxeles de grueso es realmente un borde de 1 píxel alrededor de un elemento con altura cero: estáis viendo los bordes superiores e inferiores sin nada en medio.

    Lo segundo interesante es que el cuadro posicionado absolutamente no se ha movido. El valor predeterminado para las propiedades top, right, bottom y left es auto, lo que significa que el cuadro posicionado absolutamente aparecerá exactamente donde habría estado si no hubiera sido posicionado. Pero como se ha eliminado del flujo, se superpondrá a cualquier elemento del flujo normal que lo siga.

    Esto es realmente muy útil: podéis utilizarlo si sólo queréis mover un cuadro generado en una dimensión. Por ejemplo, en un menú desplegable de CSS, los paneles “desplegables” se pueden posicionar absolutamente especificando sólo la propiedad top. Entonces aparecerán automáticamente en la coordenada prevista a lo largo del eje X (igual que su padre).

  6. A continuación, establecemos una altura para el elemento #outer de manera que vuelva a parecer un rectángulo y movemos #inner lateralmente. Añadid las siguientes líneas resaltadas a las reglas de CSS:
    #outer {
       margin: 5em;
       border: 1px solid #f00;
       height: 4em;
    }
    #inner {
       width: 6em;
       height: 4em;
       background-color: #999;
       position: absolute;
       left: 1em;
    }
  7. Guardad y recargad y veréis algunos cambios. El elemento #outer ahora es un rectángulo otra vez, ya que le habéis especificado una altura. El elemento #inner se ha desplazado lateralmente, pero no donde se podría esperar encontrarlo. No está a 1 em del borde izquierdo de su padre, sino a 1 em del borde izquierdo de la ventana.

    El motivo es que, como se ha explicado antes, #inner no tiene un antepasado posicionado, de manera que su bloque continente es el bloque continente inicial. Si especificáis una posición diferente de auto, es relativa al borde correspondiente del bloque continente. Cuando habéis establecido left:1em, el borde izquierdo de #inner ha acabado a 1 em del borde izquierdo de la ventana.

  8. Si en vez de esto lo queréis a 1 em del borde izquierdo de su elemento padre, debéis hacer padre al bloque contenedor. Para hacerlo, ahora utilizaréis el truco que hemos mencionado anteriormente en este apartado: hacer que el bloque padre esté posicionado relativamente. Añadid la siguiente línea resaltada a la regla #outer:
    #outer {
       margin: 5em;
       border: 1px solid #f00;
       height: 4em;
       position: relative;
    }
  9. Guardad y recargad: ¡pasen y vean! El rectángulo gris ahora está a 1 em del borde izquierdo del elemento padre. Establecer position:relative en la regla #outer ha hecho que esté posicionado y lo ha establecido como bloque contenedor para cualquier descendiente posicionado relativamente que pueda tener. El left:1em que habéis establecido para #inner ahora cuenta a partir del borde izquierdo de #outer, no del borde izquierdo de la ventana del navegador.

37.2.2. Especificación de las dimensiones

Los elementos posicionados absolutamente se ajustarán para encajar su contenido a no ser que especifiquéis sus dimensiones. Podéis especificar la anchura o bien definiendo las propiedades left yright, o bien definiendo la propiedad width. Podéis especificar la altura definiendo las propiedades top ybottom, o definiendo la propiedad height.

Cualquiera de estas seis propiedades se puede especificar como porcentaje. Los porcentajes son, por su propia naturaleza, relativos a alguna otra cosa. En este caso, son relativos a las dimensiones del bloque contenedor.

Para un elemento posicionado absolutamente, los valores de porcentaje para las propiedades left, righty width son relativos a la anchura del bloque continente. Los valores de porcentaje para las propiedadestop, bottom y height son relativos a la altura del bloque continente.

El navegador Internet Explorer 6 y anteriores, y también Opera 8 y anteriores, lo interpretaron de manera totalmente errónea y utilizaron las dimensiones del bloque padre en su lugar. Vamos a probar con otro ejemplo para ver cómo esto puede suponer una gran diferencia.

  1. Empezad especificando las dimensiones de #inner mediante valores de porcentaje; haced los siguientes cambios en la regla #inner:
    #inner {
       width: 50%;
       height: 50%;
       background-color: #999;
       position: absolute;
       left: 1em;
    }
  2. Guardad y recargad, y veréis que el rectángulo gris se hace más ancho y más corto (como mínimo si estáis utilizando un navegador moderno). El bloque continente es todavía #outer porque tieneposition:relative. La anchura del elemento #inner ahora es la mitad de la de #outer, y su altura es la mitad de la altura de #outer.
  3. Hacemos que el viewport sea el bloque contenedor una vez más, para ver la diferencia. Haced el siguiente cambio en #outer:
    #outer {
       margin: 5em;
       border: 1px solid #f00;
       height: 4em;
       position: static;
    }
  4. Guardad y recargad; una diferencia notable, ¿verdad? El cuadro gris es ahora la mitad de ancho y la mitad de alto que la ventana del navegador.

Como podéis ver, saber cuáles son vuestros bloques contenedores es absolutamente esencial.

37.2.3. La tercera dimensión: índice Z

Es natural considerar que una página web tiene dos dimensiones. La tecnología no ha evolucionado tanto como para que las pantallas 3D estén generalizadas, de manera que nos debemos conformar con anchura, altura y falsos efectos 3D. Pero la representación CSS realmente se produce en tres dimensiones. Esto no quiere decir que pueda hacer que un elemento vuele delante del monitor (aún), pero puede hacer otras cosas útiles con los elementos posicionados.

Los dos ejes principales de una página web son el eje horizontal X y el eje vertical Y. El origen de este sistema de coordenadas se encuentra en la esquina superior izquierda de la ventana, es decir, donde tanto el valor X como Y son 0.

Pero también hay un eje Z, que podemos imaginar como perpendicular a la superficie del monitor (o del papel, si se trata de una impresión). Los valores Z más altos indican una posición de “delante” de los valores Z más bajos. Los valores Z también pueden ser negativos, y en este caso indican una posición “detrás” de algún punto de referencia (explicaremos este punto de referencia a continuación).

Nota

Antes de continuar, debemos advertiros que éste es uno de los temas más complicados de CSS, así que no os desmoralicéis si no lo entendéis a la primera.

Los elementos posicionados (incluidos los elementos posicionados relativamente) se representan dentro de lo que se conoce como contexto de apilamiento. Los elementos dentro de un contexto de apilamiento tienen el mismo punto de referencia a lo largo del eje Z. A continuación lo explicaremos más detalladamente. Podéis cambiar la posición Z (también denominada nivel de pila) de un elemento posicionado utilizando la propiedad z-index. El valor puede ser un número entero (que puede ser negativo) o una de las palabras clave auto o inherit. El valor predeterminado es auto, lo que quiere decir que el elemento tiene el mismo nivel de pila que su padre.

Debéis tener en cuenta que sólo podéis especificar una posición índice a lo largo del eje Z. No podéis hacer que un elemento aparezca 19 píxeles detrás o 5 centímetros delante de otro. Pensad en eso como si fuera una baraja de cartas: Podéis apilar las cartas y decidir que el as de espadas esté sobre el tres de diamantes; cada carta tiene su nivel de pila, o índice Z.

Si especificáis z-index como un entero positivo, le asignáis un nivel de pila “delante de” el resto de elementos del mismo contexto de apilamiento que tienen un nivel de pila inferior. Un z-index de 0 (zero) significa lo mismo que auto, pero hay una diferencia de la que hablaremos en un momento. Un valor entero negativo para z-index asigna un nivel de pila “detrás de” el nivel de apilamiento padre.

Cuando dos elementos del mismo contexto de apilamiento tienen el mismo nivel de pila, lo que aparece posteriormente al código fuente aparecerá encima de sus hermanos predecesores.

De hecho, no puede haber menos de siete capas en un contexto de apilamiento, y en cada una de estas capas puede haber cualquier número de elementos, pero no os preocupéis: lo más probable es que nunca tengáis que tratar con siete capas en un contexto de apilamiento. El orden en el que los elementos (todos los elementos, no sólo los posicionados) se representan en un contexto de apilamiento, desde detrás hacia adelante, es el siguiente:

  1. El fondo y los bordes de los elementos que forman el contexto de apilamiento.
  2. Descendientes posicionados con niveles de pila negativos.
  3. Descendientes de nivel de bloque en el flujo normal.
  4. Descendientes flotantes.
  5. Descendientes de nivel en línea en el flujo normal.
  6. Descendientes posicionados con el nivel de pila definido como auto o 0 (cero).
  7. Descendientes posicionados con niveles de pila positivos.

Las entradas resaltadas son los elementos con un nivel de pila que se puede cambiar mediante la propiedad z-index.

Todo puede ser bastante difícil de imaginar, de modo que, hagamos algunos experimentos prácticos para ilustrar el índice Z.

  1. Empezad añadiendo la siguiente línea resaltada a vuestro pequeño documento de muestra:
    <body>
       <div id="outer">
          <div id="inner"></div>
          <div id="second"></div>
       </div>
    </body>
  2. A continuación os explicaremos cómo restaurar el CSS de manera que #outer sea el bloque contenedor y cómo establecer dimensiones no porcentuales de #inner. Hagamos que #outer sea un poco más alto, también, para tener más espacio para hacer pruebas. Haced los siguientes cambios resaltados en las dos reglas:
    #outer {
       margin: 5em;
       border: 1px solid #f00;
       height: 8em;
       position: relative;
    }
    #inner {
       width: 5em;
       height: 5em;
       background-color: #999;
       position: absolute;
       left: 1em;
    }
  3. Añadid una regla para el elemento #second, también:
    #second {
       width: 5em;
       height: 5em;
       background-color: #00f;
       position: absolute;
       top: 1em;
       left: 2em;
    }
  4. Guardad y recargad y veréis un cuadro azul brillante que se superpone a uno gris. Ambos cuadros tienen el mismo nivel de pila (auto, el valor inicial, que significa un nivel de pila 0), pero el cuadro azul se representa ante el cuadro gris porque aparece más tarde en el código fuente. Podéis hacer que el cuadro gris aparezca delante asignándole un nivel de pila positivo. Sólo debéis especificar que sea mayor que 0: no hace falta exagerar y utilizar un valor como 10.000. Añadid la siguiente línea resaltada en la regla #inner:
    #inner {
       width: 5em;
       height: 5em;
       background-color: #999;
       position: absolute;
       left: 1em;
       z-index: 1;
    }
  5. Guardad y recargad, y veréis cómo el cuadro gris aparece ante el cuadro azul.

Contextos de apilamiento local

El resto de este subapartado trata de los contextos de apilamiento locales. Muy probablemente, no os encontraréis con eso muy a menudo trabajando como diseñadores, a no ser que intentéis hacer algo realmente avanzado con posicionamiento absoluto, pero hemos decidido incluirlo igualmente por completitud. Si queréis, podéis saltaros esta sección.

Cada elemento que tenga el z-index especificado como un entero establece un contexto de apilamiento nuevo, “local”, en el que el propio elemento tiene un nivel de pila 0. Ésta es la diferencia que hemos mencionado antes entre z-index: auto y z-index: 0. El anterior no establece un nuevo contexto de apilamiento, pero el último, sí.

Cuando un elemento establece un contexto de apilamiento local, los niveles de pila de sus descendientes posicionados se aplican sólo en este contexto local. Estos descendientes se pueden volver a apilar los unos respecto a los otros, y respecto a su padre, pero no respecto a los hermanos del padre. Es como si el padre formara una jaula alrededor de sus descendientes de manera que no pueden abandonarla. Los descendientes se pueden mover arriba y abajo en esta jaula, pero no pueden abandonarla. El padre y sus descendientes formarán una unidad indivisible en el contexto de apilamiento que rodea al padre.

Imaginaos que estáis clasificando el papeleo antes de entregarlo al contable que se ocupa de vuestros asuntos fiscales. Tenéis informes de gastos, recibos, confirmaciones de pedidos, etcétera y apiláis un papel encima del otro: para facilitarle la vida a vuestro gestor, introducís los tipos de documentos que van juntos en diferentes sobres.

Un contexto de apilamiento local es parecido a este tipo de sobre. Mantiene los elementos relacionados juntos e impide que otros elementos se mezclen entre ellos. Podéis clasificar el contenido de cada sobre como queráis, pero este orden de clasificación sólo se aplica a este sobre y no afecta a la pila de documentos en conjunto. Vuestra pila contiene ahora una mezcla de documentos independientes (elementos con el nivel de pila auto) y sobres (elementos con un nivel de pila entero). Los sobres con niveles de pila positivos quedan por encima de los documentos independientes, mientras que los sobres con niveles de pila negativos aparecen debajo del todo de la pila.

Cada vez que asignáis un valor entero en la propiedad z-index de un elemento, se crea un “sobre” que contiene este elemento y sus descendientes.

Veamos cómo funcionan estos contextos de apilamiento local. Puede parecer confuso, pero realmente no es muy diferente de todo lo que ya habéis visto. Si seguís los ejemplos, acabaréis haciéndoos una buena idea de cómo funciona todo.

  1. Empezad añadiendo algún contenido a vuestros dos elementos internos; añadid las líneas resaltadas a vuestro documento HTML:
    <div id="inner">
       <span></span>
    </div>
    <div id="second">
       <span></span>
    </div>
  2. Añadid una regla CSS que se aplicará a estos dos elementos span:
    span {
       position: absolute;
       top: 2em;
       left: 2em;
       width: 3em;
       height: 3em;
    }

    Esto hace que los elementos span queden posicionados absolutamente y establece sus posiciones y dimensiones. Pero, un momento, los elementos span son en línea… ¿Cómo se pueden especificar las dimensiones de los elementos en línea? La respuesta es que los elementos posicionados absolutamente, como los elementos flotantes, generan automáticamente cajas de bloque.

    Las posiciones que especificáis se aplicarán con relación al bloque contenedor de cada span. Como ambos elementos span tienen un div posicionado absolutamente como padre, estos padres asumen la función de bloques contenedores.

  3. Añadimos ahora un poco de color a los elementos span para que podáis ver dónde aparecen; añadid las siguientes reglas a vuestra hoja de estilos:
    #inner span {
       background-color: #ff0;
    }
    #second span {
       background-color: #0ff;
    }
    
  4. Guardad y recargad y veréis un cuadrado amarillo en la esquina inferior derecha del cuadrado gris mayor y un cuadrado de color cian en la esquina inferior derecha del cuadrado azul mayor. Los cuadrados gris y amarillo aparecen ante los cuadrados azul y cian porque el cuadrado gris tiene un z-index:1.
  5. ¿Y si queréis que el cuadrado cian quede por delante de todos los otros cuadrados? Todo lo que debéis hacer es aplicarle un nivel de pila más alto que al cuadrado gris. De hecho, basta con darle exactamente el mismo nivel de pila que el cuadrado gris, ya que el cuadrado cian aparece más adelante en el etiquetado. Probémoslo; efectuad el siguiente cambio en vuestro CSS:
    #second span {
       background-color: #0ff;
       z-index: 1;
    }
  6. Guardad y recargad. Si vuestro navegador admite correctamente la recomendación CSS, el cuadrado cian debería estar ahora delante.

El cuadrado gris tiene un z-index:1, que quiere decir que establece un contexto de apilamiento local. En otras palabras, habéis creado uno de estos “sobres” y habéis colocado el cuadrado gris y su cuadrado hijo de color amarillo en el interior.

¿Seguís sin verlo del todo claro? A ver si con el siguiente experimento lo acabamos de aclarar.

  1. Estableced un nivel de pila alto para el cuadrado amarillo para llevarlo adelante; haced el siguiente cambio en vuestro CSS:
    #inner span {
       background-color: #ff0;
       z-index: 4;
    }
  2. Si guardáis y recargáis, veréis… que no ha habido ningún cambio en absoluto. El nivel de pila que hemos especificado para el cuadrado amarillo se aplica en el contexto de apilamiento local establecido por el cuadrado gris, es decir: el cuadrado amarillo se encuentra en un sobre junto con su padre gris. Podríais mover el cuadrado cian hasta adelante porque su padre (el cuadrado azul) no establece un contexto de apilamiento local: tiene un z-index:auto implícito. El cuadrado azul es un papel independiente en la pila. Los cuadrados amarillo y cian están en realidad solos en pequeños sobres individuales (tienen un nivel de pila entero y establecen contextos de apilamiento local por su cuenta).
  3. Si hacéis que el cuadrado azul establezca un contexto de apilamiento local, no podréis mover el cuadrado cian hacia adelante a no ser que también llevéis a su padre (el cuadrado azul) adelante. Probémoslo. Haced los siguientes cambios en vuestro CSS:
    #inner {
    
    ...
    
    z-index: 2;
    }
    #second {
    
       ...
    
       z-index: 1;
    }
    #second span {
    
       ...
    
       z-index: 3;
    }
  4. Guardad y recargad. Ahora, tanto el cuadrado gris como el cuadrado azul establecen contextos de apilamiento local, de manera que se crean dos sobres. En la parte inferior de la pila hay un sobre con el nivel de pila 1 que incluye dos sobres interiores (el cuadrado azul y el cuadrado cian). En la parte superior de la pila hay un sobre con nivel de pila 2 que incluye dos sobres interiores (el cuadrado gris y el cuadrado amarillo). En el primer sobre, el cuadrado azul tiene un nivel de pila local 0 y, por lo tanto, se muestra detrás del cuadrado cian, que tiene un nivel de pila local 3. En el segundo sobre, el cuadrado gris tiene un nivel de pila local 0, de manera que aparece detrás del cuadrado amarillo con nivel de pila local 4.

La figura 1 muestra los cuatro cuadros y los dos contextos de apilamiento local desde el lateral, a lo largo del eje Z.

El cuadro azul está debajo de todo, seguido por el cuadro cian, el gris y el amarillo.Figura 1. Ilustración de diferentes contextos de apilamiento. Los elementos que aparecen dentro de “2” siempre aparecerán por delante de todos los elementos dentro de “1”. Después, dentro de cada contexto de apilamiento, los elementos con un número de índice z mayor aparecen por delante de los elementos con un número de índice z más pequeño. Si dos elementos tienen el mismo número de índice z, lo que aparece más tarde en el etiquetado aparecerá delante.

Esta parte probablemente os haya resultado bastante complicada, especialmente si sois nuevos con CSS. La cuestión es que debéis conocer vuestros contextos de apilamiento si estáis intentando cambiar los niveles de apilamiento de diferentes elementos. Si un elemento pertenece a un contexto de apilamiento local, sólo podéis cambiar su posición a lo largo del eje Z en este contexto local. Un elemento en un contexto de apilamiento local no se puede colar entre dos elementos de otro contexto de apilamiento local.

La buena noticia es que muy probablemente nunca os encontraréis con estos problemas. Los cambios enz-index no son muy comunes en las buenas composiciones, y en caso de que se produzcan, generalmente siempre es en un único contexto de apilamiento.

37.3. Posicionamiento fijo

Un elemento con position:fixed está fijo respecto a la ventana. Se mantiene donde está aunque se desplace el documento. Para media="print" se repetirá un elemento fijo en cada página impresa.

Tened en cuenta que las versiones 6 y anteriores de Internet Explorer no admiten el posicionamiento fijo de ninguna forma. Si utilizáis uno de estos navegadores, no podréis ver los resultados de los ejemplos de este subapartado.

Mientras que la posición y las dimensiones de un elemento con position:absolute son siempre relativas a su bloque continente, la posición y las dimensiones de un elemento con position:fixed son siempre relativas al bloque continente inicial. Este suele ser el viewport: la ventana del navegador o el cuadro de la página impresa.

Para demostrarlo, en el ejemplo siguiente haréis fijo uno de vuestros elementos. Haréis el otro muy alto para que se genere una barra de desplazamiento y así hacer más fácil el efecto que tiene.

  1. Haced los siguientes cambios en vuestro código CSS:
    #inner {
       width: 5em;
       height: 5em;
       background-color: #999;
       position: fixed;
       top: 1em;
       left: 1em;
    }
    #second
       width: 5em;
       height: 150em;
       background-color: #00f;
       position: absolute;
       top: 1em;
       left: 2em;
    }
  2. Guardad y recargad. Si no obtenéis una barra de desplazamiento vertical, aumentad el valor heightpara #second (pero ¿qué tipo de monitor gigante tenéis?).

El elemento azul alto se alarga más allá de la parte inferior de la ventana. Desplazad la página hacia abajo y observad el cuadrado gris de la esquina superior izquierda. Ahora #inner queda fijo en la posición a 1 em de la parte superior de la ventana y a 1 em del lado izquierdo y, por lo tanto, a medida que os desplacéis, el cuadro gris se quedará en el mismo lugar de la pantalla.

Resumen

Los elementos posicionados absolutamente se eliminan completamente del flujo del documento. Se superpondrán sobre otros contenidos a no ser que les hagáis espacio. Si todos los elementos hijos de un contenedor están posicionados absolutamente, la altura del padre se reducirá a cero.

Los elementos posicionados absolutamente lo están respecto a un bloque contenedor, que es el antepasado posicionado más próximo. Si no hay antepasado posicionado, el viewport será el bloque contenedor.

Los elementos con posicionamiento fijo lo están respecto a la ventana: ésta es siempre su bloque contenedor. Siempre aparecen en el mismo lugar de la ventana del navegador cuando se ven en pantalla; cuando se imprimen, aparecen en cada página.

Las posiciones de cada borde de un elemento posicionado absolutamente se pueden especificar mediante las propiedades top, right, bottom y left. El valor de cada propiedad especifica la distancia de este borde al borde correspondiente del bloque continente del elemento.

Todos los elementos posicionados se representan en un nivel de pila determinado en un contexto de apilamiento. Podéis cambiar el nivel de pila de un elemento posicionado utilizando la propiedad z-index. Cuando se especifica z-index como un valor entero, el elemento establece un contexto de apilamiento local para sus descendientes.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. Deshaced los cambios del ejemplo de posicionamiento fijo y, a continuación, cambiad el orden de apilamiento entre los cuatro cuadrados posicionados absolutamente, de manera que el cuadrado gris esté en la parte de atrás, seguido de los cuadrados azul, amarillo y cian en este orden (consejo: eliminad todas las declaraciones de z-index y empezad de nuevo).
  2. Moved el cuadrado amarillo hacia arriba y a la derecha especificando top:-1em y left:8em. A continuación, haced que aparezca detrás del elemento #outer, de manera que el borde rojo aparezca a través del cuadrado amarillo.
  3. Replicad la disposición de tres columnas que creamos en el apartado de posicionamiento estático y relativo utilizando el posicionamiento absoluto en su lugar. Como será imposible tener un pie de anchura completa, podéis eliminar el elemento #footer, pero no podéis cambiar nada más en el etiquetado (aparte del enlace a la hoja de estilos).
  4. Modificad la disposición del ejercicio anterior para hacer que la navegación utilice el posicionamiento fijo. Deberéis eliminar los márgenes horizontales automáticos del elemento body para hacerlo posible. Añadid bastante contenido a la columna principal y/o la barra lateral para que aparezca una barra de desplazamiento, de manera que podáis verificar que funciona.
Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC: Posicionamiento estático y relativo con CSS

Logo de Mosaic

CSS
Posicionamiento estático y relativo con CSS

36. Posicionamiento estático y relativo con CSS

Tommy Olsson. 26 de septiembre del 2008 Publicado en: en línea, composición, columna, bloque, IE

En este apartado explicaremos con exhaustividad el modo como se puede utilizar CSS para posicionar elementos HTML en el lugar deseado de una página con la propiedad position (posicionar) de CSS y algunas propiedades relacionadas.

La propiedad position de CSS tiene cuatro valores lícitos (aparte del omnipresente inherit): static(estático), relative (relativo), absolute (absoluto) y fixed (fijo). Estos valores tienen un impacto muy importante sobre la manera en que se representa un elemento. Los valores static y relative están muy relacionados, y en este apartado los estudiaremos con gran detalle. Los valores absolute y fixed también están muy relacionados, pero de momento los dejaremos para el próximo apartado.

Los contenidos de este apartado son los siguientes:

36.1. El maravilloso mundo de los rectángulos

Para empezar, recapitularemos un poco todo lo que hemos dicho en el apartado anterior, dedicado a los elementos flotantes y al clearing, sobre el CSS y las cajas HTML. Un documento HTML consiste en un número de elementos salpicados con datos de caracteres (texto). Cuando un documento de este tipo se reproduce en una pantalla de ordenador o en una copia impresa, estos elementos generan cajas rectangulares. De la misma manera que un conjunto de elementos HTML se divide en elementos de bloque y elementos en línea, las cajas CSS también pueden ser básicamente cajas de bloque o cajas en línea. Por defecto, la hoja de estilos del agente de usuario integrado de un navegador hace que los elementos HTML de bloque, como p y div, generen cajas de bloque, mientras que los elementos en línea, como strong yspan, generan cajas en línea. Podemos utilizar la propiedad display para controlar el tipo de caja que se generará.

Ved también

Podéis ver el apartado 35 de este módulo.

Las cajas generadas por los elementos de un documento se disponen según una serie de normas claramente definidas según la especificación CSS2.1. Estas reglas están escritas para las relativamente escasas personas que escriben software para navegadores con el fin de que puedan saber cómo funciona el CSS, pero no para aquéllos de nosotros que diseñamos páginas web para ganarnos la vida o como afición. ¡Por ello existe todo este curso! Como resultado, la especificación puede ser un tanto difícil de entender. En este apartado, intentaremos explicar los conceptos básicos de una manera que resulte apropiada para los diseñadores y desarrolladores de webs.

36.2. Posicionamiento estático

De hecho, este nombre no es nada adecuado. En realidad, los cuadros con position:static no se “posicionan” en el sentido del CSS. Simplemente se disponen en el orden en el que aparecen en el etiquetado y ocupan todo el espacio que necesitan; éste es el comportamiento por defecto que se da cuando no se aplica ningún CSS al HTML.

Existen algunas diferencias fundamentales en la manera como se distribuyen las cajas de bloque en comparación con la distribución de las cajas en línea; por tanto, examinaremos los dos tipos uno a uno. Empezaremos con las cajas de bloque porque son más sencillas.

36.2.1. Disposición de cajas de bloque

Si no aplicamos ninguna declaración CSS concreta, las cajas de bloque se disponen verticalmente de arriba abajo en el orden en el que aparecen en el etiquetado. Cada caja es normalmente tan ancha como el documento (el elemento body), pero incluso si las hacemos más estrechas, éstas no se distribuirán una al lado de la otra aunque haya espacio, sino que se seguirán situando la una bajo la otra. Podéis imaginároslo como si cada caja de bloque tuviera un salto de línea implícito antes y después, ya que así se garantiza que tendrá una “línea” propia.

La distancia vertical entre dos cajas de bloque se controla con la propiedad margin-bottom (margen-inferior) de la primera caja y la propiedad margin-top (margen-superior) de la segunda caja (en este curso ya hemos visto cómo manipular estas propiedades). Para las cajas del flujo normal, es decir, las cajas que no son flotantes o que no tienen un posicionamiento absoluto, los márgenes verticales entre dos cajas de bloque adyacentes se superpondrán, de manera que el resultado final no será la suma de los dos márgenes, sino el mayor de los dos, tal como se puede ver en la figura 1 que se muestra más adelante.

Mirad el siguiente fragmento de HTML:

<p style="margin-bottom:40px">This paragraph has a 40px bottom margin.</p>
<p style="margin-top:20px">This paragraph has a 20px top margin.</p>

Cuando se muestra en un navegador, los márgenes se superponen como se puede ver en la figura 1.

La distancia entre los dos párrafos es de 40 píxeles, no de 60 píxeles.Figura 1. Los márgenes se superponen y la distancia entre los dos es de 40 píxeles, y no de 60 píxeles.

Una caja de bloque incluirá sólo otras cajas de bloque o sólo cajas en línea. Si un elemento de bloque contiene una mezcla de hijos de bloque y en línea (algo permitido pero semánticamente cuestionable), se generará lo que se conoce como cajas de bloque anónimas para incluir las cajas hijas insertadas, de manera que la madre contenga sólo cajas de bloque.

Podéis especificar las dimensiones de una caja de bloque con las propiedades width (anchura) y height(altura). También podéis especificar los márgenes vertical y horizontal. El valor inicial (por defecto) parawidth y height es auto, y el valor inicial para las propiedades de margen es 0. Estos factores combinados significan que una caja de bloque será por defecto tan ancha como su madre, como muestra la figura 2.

Las cajas de bloque se distribuyen verticalmente.Figura 2. Las cajas de bloque se distribuyen verticalmente.

36.2.2. Disposición de cajas en línea

Nota

Este subapartado puede ser difícil de entender si no tenéis mucha experiencia con CSS, de modo que quizá deberéis leerlo unas cuantas veces, pero tampoco os debe preocupar. La experimentación por vuestra cuenta es probablemente la mejor manera para entender bien todas estas cuestiones; sólo es necesario que a la hora de hacer las pruebas utilicéis un buen navegador compatible con los estándares, como Opera o Firefox.

Las cajas en línea se generan por defecto a partir de los elementos HTML en línea, pero también hay cajas en línea anónimas generadas para incluir el contenido de texto de los elementos.

Las cajas en línea se distribuyen horizontalmente, una después de otra, en el orden en el que aparecen en el etiquetado. Según la propiedad direction, los cuadros insertados se distribuirán de izquierda a derecha (direction:ltr) o de derecha a izquierda (direction:rtl). La dirección de izquierda a derecha se utiliza, por ejemplo, con los idiomas europeos, mientras que la de derecha a izquierda se utiliza con idiomas como el árabe y el hebreo.

El grupo de cajas en línea que forman una línea en la pantalla (o en el papel) está contenido en otro rectángulo más, que se conoce como caja de línea. Las cajas de línea se distribuyen verticalmente en su bloque madre, sin ningún espacio entre ellas. Podemos modificar la altura de las cajas de línea con la propiedad line-height.

Para las cajas en línea no podemos especificar ninguna dimensión. Podemos especificar los márgenes horizontales, pero no los verticales.

Si es necesario, una caja en línea se puede dividir en varias cajas en línea distribuidas por dos o más cajas de línea. Cuando se produce una división de este tipo, todos los márgenes horizontales y separaciones, y todos los bordes verticales, se aplicarán sólo antes de la primera caja y después de la última caja. Imaginémonos un documento con la regla siguiente para los elementos em:

em {
   margin: 0 2em;
   padding: 0 1em;
   border: 1px dotted blue;
}

Con esto se obtendrá una composición similar a la que se puede ver en la figura 3, en la que los elementos con estilo se dividen en múltiples líneas.

Los márgenes, el relleno y el borde no se aplican donde se produce la rotura.Figura 3. Los márgenes, la separación y el borde no se aplican donde se produce la rotura.

La alineación vertical de las cajas en línea dentro de la caja de línea que las contiene está determinada por la propiedad vertical-align (alineación-vertical). El valor por defecto es baseline, lo que significa que las cajas en línea se alinean de manera que sus líneas base de texto quedan alineadas. La línea base es la línea imaginaria sobre la que se sitúan las letras sin astas descendentes. Esta línea se sitúa un poco por encima de la parte inferior de la caja de línea para dejar espacio para las astas ascendentes de las letras en minúsculas, tal como muestra la figura 4.

Les letras se sitúan sobre la línea base imaginaria.Figura 4. Las letras se sitúan sobre la línea base imaginaria.

Observad que la propiedad vertical-align se aplica sólo a las cajas en línea y a las celdas de tabla, y no se hereda. La figura 5 muestra algunas imágenes pequeñas con diferentes alineaciones verticales.

Imágenes situadas con los valores de la propiedad vertical-align de CSSFigura 5. Las imágenes situadas con los valores de la propiedad vertical-aligndel CSS

Cuando la anchura total de las cajas en línea en una caja de línea es inferior a la anchura de la caja de línea en sí, la alineación vertical se controla con la propiedad text-align. Con text-align:justify(alinear texto: justificar) se inserta un espacio adicional entre las cajas en línea, si es necesario, para alinear el contenido a la izquierda y a la derecha. Esta propiedad se aplica a las cajas de bloque, a las celdas de tablas y a los bloques en línea, y se hereda. La figura 6 muestra el resultado de aplicar valores diferentes de la propiedad text-align al texto que hay en el interior de las celdas de una tabla.

Control de la alineación del texto con la propiedad text-alignFigura 6. Controlar la alineación del texto con la propiedad text-align

36.3. Posicionamiento relativo

El posicionamiento relativo es un sistema de posicionamiento de CSS, pero está más relacionado con el “posicionamiento” estático que con sus primos-hermanos: el posicionamiento absoluto y el fijo.

Un elemento con position:relative se coloca en principio igual que cualquier elemento estático; de bloque o insertado. Pero entonces sucede algo muy interesante: la caja generada se desplaza según las propiedades top, bottom, left y right.

Lo que hay que recordar sobre el posicionamiento relativo es que sólo se desplaza la caja generada. El elemento sigue estando allí donde estaba en el flujo del documento estático. Aquí es donde “ocupa espacio” respecto a los otros elementos. Eso significa que la caja desplazada puede acabar encima de otras cajas de elementos, ya que éstas siguen actuando como si el elemento con un posicionamiento relativo se hubiera quedado donde debía estar antes de aplicar el posicionamiento. Respecto al flujo del documento, el elemento no se ha movido; es sólo el resultado visual final lo que muestra la caja desplazada. Veamos cómo funciona en la práctica.

  1. Copiad el siguiente código HTML en un documento nuevo del editor de textos que más os guste y guardadlo con el nombre relative.html.
    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8">
       <title>Relative Positioning</title>
    </head>
    <body>
       <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit.
       Curabitur feugiat feugiat purus.
       Aenean eu metus. Nulla facilisi.
       Pellentesque quis justo vel massa suscipit sagittis.
       Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
       per inceptos hymenaeos.
       Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, 
       ut tincidunt metus arcu vel lorem.
       Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, 
       dui.
       Sed sagittis, <span>metus a semper</span> dictum, sem 
       libero sagittis nunc, vitae adipiscing leo neque vitae tellus.
       Duis quis orci quis nisl nonummy dapibus.
       Etiam ante. Phasellus imperdiet arcu at odio.
       In hac habitasse platea dictumst. Aenean metus.
       Quisque a nibh. Morbi mattis ullamcorper ipsum.
       Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
       Nulla tortor justo, convallis iaculis, porta condimentum, interdum 
       nec, arcu.
       Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>
    </body>
    </html>
  2. Abrid el archivo con vuestro navegador web para ver qué aspecto tiene en este momento; deberíais ver sólo un párrafo de texto normal.
  3. Cread un documento nuevo en vuestro editor, copiad el código CSS siguiente y guardad el archivo con el nombre style.css.
    p {
       width: 20em;
    }
    span {
       background-color:  lime;
    }
  4. Enlazad la hoja de estilo en el documento HTML insertando la línea siguiente justo antes de la etiqueta</head>.
    <link rel="stylesheet" type="text/css" href="style.css">
  5. Guardad los dos archivos y actualizad la página en el navegador. Hemos conseguido que el párrafo sea más estrecho para que los saltos de línea estén siempre en la misma posición incluso cuando la ventana del navegador sea pequeña. Ahora el elemento span tiene un color de fondo un poco chillón para hacerlo más visible.
  6. A continuación, modificaremos la hoja de estilos añadiendo tres declaraciones a la regla para el elemento span:
    span {
       position: relative;
       top: 1em;
       left: 2em;
       background-color: lime;
    }
  7. Guardad y volved a cargar la página en el navegador para ver los efectos del posicionamiento relativo.

Habéis desplazado el elemento span tanto vertical como horizontalmente. Observad que queda superpuesto sobre la línea de texto siguiente y que en el lugar donde se encontraba ahora hay un espacio vacío.

La manera como se ha desplazado la caja generada quizá no era la que esperabais de este código. Habéis especificado top:1em, pero la caja se ha desplazado hacia abajo. Además, la caja también se ha desplazado hacia la derecha a pesar de haber especificado left:2em. ¿Por qué?

La clave para entender el funcionamiento de estas propiedades con el posicionamiento relativo es darse cuenta de que especifican el borde en el que se aplica el movimiento, y no la dirección del movimiento. Es decir, que la propiedad top desplaza la caja en relación con su borde superior, la propiedad left lo desplaza en relación con su borde izquierdo, y así sucesivamente. La caja se aleja del borde especificado; por lo tanto, top:1em desplaza el cuadro 1 em desde la posición superior, es decir, hacia abajo. Los números negativos desplazan el cuadro en la dirección opuesta y, por lo tanto, bottom:-1em es lo mismo que top:1em.

Eso nos lleva a otra conclusión: no tiene ningún sentido especificar al mismo tiempo una propiedad top y una propiedad bottom (o left y right) para el mismo elemento. Las reglas del CSS dicen que si se especifica top, entonces bottom se debe ignorar. Respecto al movimiento horizontal, esto depende de la propiedad direction. Si se especifican left y right al mismo tiempo, en un entorno de izquierda a derecha se ignora right y en un entorno de derecha a izquierda se ignora left.

El ejemplo que hemos visto explica el posicionamiento relativo, pero no parece muy útil, ¿verdad? Así pues, ¿para qué sirve el posicionamiento relativo? Echemos un vistazo a un ejemplo más complicado.

36.3.1. Disposición de múltiples columnas con requisitos de orden en el código fuente

Aviso: este ejemplo es un tanto complejo. Si es la primera vez que entráis en el mundo del CSS, os puede parecer incluso algo descorazonador, pero lo iremos explicando a un ritmo muy pausado dejando bien claro qué es lo que hacemos en cada momento. Si todavía no habéis leído el apartado anterior, que habla de los elementos flotantes y del clearing, ahora sería un buen momento para hacerlo.

Ved también

Podéis ver el apartado 35 de este módulo.

Hay un tipo de composición que es muy habitual en las páginas web. Incluye un encabezamiento, que normalmente contiene algún logotipo o insignia, bajo la que hay dos o más “columnas” una al lado de la otra. Al final suele haber un pie de página que ocupa toda la anchura, quizá con el aviso de copyright o la información de contacto. La figura 7 muestra un ejemplo de este tipo de composición.

Composición de múltiples columnas con encabezamiento y pieFigura 7. Una composición típica con múltiples columnas entre un encabezamiento y un pie de página

En la Edad Oscura (la década de 1990), este tipo de distribución se solía crear con tablas. Esto es un uso inadecuado del etiquetado del HTML para finalidades presentacionales, nada aconsejable; por lo tanto, en este curso no lo enseñaremos. CSS ofrece maneras de conseguir esto mismo con display:table-cell y similares, pero esta solución tiene un inconveniente importante: no hay ninguna versión de Internet Explorer que lo acepte, de modo que tampoco la veremos. Sólo nos quedan dos opciones: los elementos flotantes y el posicionamiento absoluto. Estos dos métodos tienen ventajas e inconvenientes, pero si queréis un pie de página que ocupe toda la anchura y no sabéis de entrada qué columna será la más larga, entonces necesitaréis los elementos flotantes para garantizar la integridad del diseño.

El problema de los elementos flotantes es que sólo se desplazan hacia la derecha o la izquierda hasta que tocan el borde del bloque padre u otro elemento flotante. Esto quiere decir que las columnas flotantes deben aparecer en el orden correcto en el etiquetado. Pero algunas veces se quiere tener un orden presentacional diferente del orden del código fuente. Quizá os interese que el contenido aparezca antes de la navegación, por ejemplo, con el fin de mejorar la usabilidad de la navegación con el teclado y la optimización en motores de búsqueda. Esto se puede conseguir, incluso con elementos flotantes, haciendo un buen uso de los márgenes negativos y el posicionamiento relativo; veamos cómo hacerlo. Empezaremos con un documento HTML que nos servirá de base para ir trabajando.

  1. Copiad el código siguiente en vuestro editor de textos y guardad el archivo con el nombrelayout.html.
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>Static and Relative Positioning</title>
       <link rel="stylesheet" type="text/css" href="layout.css">
    </head>
    <body>
       <div id="header">Header</div>
       <div id="main">Main content</div>
       <div id="sidebar">Sidebar</div>
       <div id="nav">Navigation</div>
       <div id="footer">Footer</div>
    </body>
    </html>
  2. A continuación, crearemos el embrión de una hoja de estilos. Copiad el código siguiente en vuestro editor de textos y guardad el archivo con el nombre layout.css.
    #header {
       background-color: #369;
       color: #fff;
    }
    #sidebar {
       background-color: #ff6;
    }
    #nav {
       background-color: #ddd;
    }
    #footer {   
       border-top: 1px solid #369;
    }
  3. Guardad los dos archivos y cargad la página en el navegador. Las cinco divisiones aparecen en orden, de arriba abajo.

    Imaginaos que el departamento de diseño ha especificado que la navegación debe ir a la izquierda, la barra lateral a la derecha y el contenido principal en la columna de en medio. El encabezamiento y el pie de página deben ocupar toda la anchura de la página, pero no sabemos cuál de las tres columnas será la más larga. El orden del código fuente viene determinado por los expertos en accesibilidad y usabilidad y no es negociable. ¿Cómo se pueden combinar todos estos requisitos para conseguir una composición que funcione?

    Para que funcione, deberéis añadir un elemento adicional al etiquetado. Es inevitable, pero un elemento adicional es algo que no os debería preocupar demasiado. Necesitaréis un elemento que envuelva las tres “columnas”.

  4. Insertad las dos líneas destacadas en el documento HTML:
    <div id="header">Header</div>
       <div id="wrapper">
          <div id="main">Main content</div>
          <div id="sidebar">Sidebar</div>
          <div id="nav">Navigation</div>
       </div>
    <div id="footer">Footer</div>

    Los diseñadores (que, por suerte, son conscientes de la accesibilidad y de la independencia de dispositivo) han estipulado que la navegación debe tener una anchura de 12 em y la barra lateral, de 14 em. La columna con el contenido principal debe tener una anchura fluida, de manera que la composición se adapte a diferentes tamaños de ventanas, ya que las composiciones con una anchura fija no son demasiado fáciles de utilizar por el usuario. Para evitar que las líneas de texto sean demasiado largas y dificulten la legibilidad, deberéis limitar la composición a una anchura máxima. Para evitar el solapamiento en ventanas sumamente estrechas, también deberéis limitar la composición a una anchura mínima. Dentro de estas limitaciones, la composición se debe centrar horizontalmente en la ventana del navegador.

  5. A continuación, asignad las anchuras a la navegación y a la barra lateral y definid las limitaciones de anchura y el centrado general añadiendo las reglas siguientes al final del archivo CSS:
    body{
       margin: 0 auto;
       min-width: 40em;
       max-width: 56em;
    }
    #sidebar {
       width: 13em;
       padding: 0 0.5em;
       background-color: #ff6;
    }
    #nav {
       width: 11em;
       padding: 0 0.5em;
       background-color: #ddd;
    }
  6. Guardad los archivos y volved a cargarlos; deberíais ver la barra lateral amarilla y la navegación de color gris con las anchuras deseadas. Si la ventana del navegador es bastante ancha, también veréis que toda la página tiene una anchura limitada y que aparece centrada horizontalmente.
  7. Intentad cambiar el tamaño de la ventana y mirad cómo se adapta la composición.

Nota

Si seguís los ejemplos con versiones de Internet Explorer hasta la 8 veréis resultados extraños, porque Internet Explorer tenía muchos errores de representación. En este ejemplo nos centraremos en la manera de hacer las cosas según los estándares.

Si observáis el código con atención, veréis que las anchuras están fijadas en 13 em y 11 em en lugar de 14 em y 12 em. Esto es así porque necesitamos un poco de separación horizontal; no queremos que el contenido de estas columnas toque los bordes, ya que no queda demasiado bien. La separación se añade a la anchura, con lo cual 13 em + 0,5 em + 0,5 em suman un total de 14 em, que es lo que queremos.

Crear columnas

Muy bien, ahora ya tenemos los componentes básicos, pero se muestran uno después de otro. Como queremos tres columnas, las deberemos empezar a hacer flotar.

  1. Añadid las reglas siguientes a vuestro archivo CSS:
    #main {
       float: left;
    }
    #sidebar {
       float: left;
       width: 13em;
       padding: 0 0.5em;
       background-color: #ff6;
    }
    #nav {
       float: left;
       width: 11em;
       padding: 0 0.5em;
       background-color: #ddd;
    }

    Con este código se hacen flotar las columnas, sí, pero no se muestran en el orden correcto. Además, la columna del contenido principal es demasiado estrecha. ¿Y qué ha pasado con el pie de página?

  2. En primer lugar, nos encargaremos del pie de página. El problema es que hemos hecho flotar las tres columnas, con lo que han quedado fuera del flujo del documento. El pie de página queda justo debajo del encabezamiento y la caja de línea que contiene el texto se ha acortado, de manera que la palabra “Footer” aparece a la derecha de los elementos flotantes. Podemos solucionarlo haciendo que el pie de página esté a una cierta distancia de todas las columnas flotantes. Añadid la regla siguiente a vuestro archivo CSS:
    #footer {
       clear: left;
       border-top: 1px solid #369;
    }
  3. Y ahora nos dedicaremos a las tres columnas. Lo haremos paso a paso, y durante un momento todo tendrá un aspecto horrible; pero no os desesperéis porque al final todo acabará bien.

    La clave es el elemento de envoltorio. Definiremos unos márgenes izquierdo y derecho que se correspondan con las anchuras de las columnas laterales (la navegación y la barra lateral). La columna del contenido principal ocupará toda la anchura del envoltorio y las columnas laterales se desplazarán hacia el espacio que dejan vacío los márgenes. ¿Suena complicado? No os preocupéis, lo iremos haciendo poco a poco. En primer lugar definiremos los márgenes del envoltorio añadiendo la regla siguiente al archivo CSS:

    #wrapper {
       margin: 0 14em 0 12em;
       padding: 0 1em;
    }

    Recordad que los valores de la propiedad margin abreviada se especifican en el ordenTRaBaLenguas, es decir: top (superior), right (derecho), bottom (inferior), left (izquierdo). Definimos los márgenes superior e inferior a 0, el margen derecho en 14 em (para la barra lateral) y el margen izquierdo en 12 em (para la navegación). También hemos añadido 1 em de separación horizontal porque no queremos que el contenido toque las columnas laterales, ya que debe respirar.

  4. El siguiente paso es hacer que la columna del contenido principal ocupe toda la anchura de su elemento envoltorio padre; el código también define un color de fondo chillón para esta columna, temporalmente:
    #main {
       float: left;
       width: 100%;
       background-color: lime;
    }
  5. Guardad el archivo y volved a cargarlo; veréis una columna de contenido de color verde lima con la barra lateral y la navegación debajo. También veréis que hay mucho espacio en blanco a ambos lados. Lo que debemos hacer ahora es conseguir que nuestras columnas laterales se desplacen hacia este espacio en blanco.

    De momento, nos dedicaremos a la barra lateral, que es flotante y ya tiene la anchura correcta, pero como la columna #main tiene una anchura del 100% la barra lateral se desplaza hacia abajo. ¿Cómo podemos hacer que suba y se coloque al lado de #main teniendo en cuenta que #main ocupa toda la anchura? Lo haremos en dos pasos: en primer lugar, la moveremos hacia arriba y, después, la desplazaremos hacia el margen.

  6. Para conseguir que la barra lateral flotante, que se ha desplazado hacia abajo, vuelva a ir hacia arriba, utilizaremos un truco muy ingenioso. Añadid lo siguiente a la regla #sidebar:
    #sidebar {
       float: left;
       width: 13em;
       padding: 0 0.5em;
       background-color:  #ff6;
       margin-left:  -14em;
    }
  7. Guardad, volved a cargar y veréis que la barra lateral se encuentra ahora a la misma altura vertical que la columna del contenido. Con un margen izquierdo negativo igual a la anchura de la barra lateral, estamos moviendo el elemento hacia el interior del envoltorio y ya no se desplaza hacia abajo. El problema es que queda sobre el contenido.
  8. Deberéis desplazarla hacia el margen sin que vuelva a ir hacia abajo, y aquí es donde entra en juego finalmente el posicionamiento relativo. Éste hace precisamente lo que queremos: desplaza la caja generada sin mover el elemento en sí. Añadid las propiedades destacadas del código siguiente a la regla para #sidebar:
    #sidebar {
       float: left;
       width: 13em;
       padding: 0 0.5em;
       background-color: #ff6;
       margin-left: -14em;
       position: relative;
       left: 15em;
    }

    Observad que hemos tenido que desplazar el elemento 15 em, y no 14 em. Esto es así porque en el envoltorio hay 1 em de separación a la derecha que es necesario que superemos. La barra lateral ya se encuentra en el lugar donde debe estar: hacia el margen, al lado de la columna del contenido y bien alineada con los bordes derechos del encabezamiento y el pie de página.

  9. Ahora debéis hacer lo mismo con la navegación; el procedimiento es similar, pero hay un pequeño detalle que debéis tener en cuenta. Mover y desplazar la barra lateral ha sido fácil porque los movimientos eran básicamente los mismos que la anchura de la columna: un margen negativo de 14 em y un desplazamiento de 14 em + 1 em hacia la derecha. Pero la columna de la navegación se debe mover por encima de la columna del contenido y entonces todavía se debe desplazar más hacia el margen.

    Aquí nuestros aliados serán los porcentajes. Un valor de porcentaje en los márgenes de la columna de la navegación será relativo a la anchura de su padre, el envoltorio. Como queréis mover la columna hasta el extremo del envoltorio, añadid la propiedad destacada del código siguiente a la regla para#nav:

    #nav {
       float: left;
       width: 11em;
       padding: 0 0.5em;
       background-color: #ddd;
       margin-left: -100%;
    }
  10. ¡Ya lo tenemos! Guardad, volved a cargar y veréis la navegación sobre la parte izquierda de la columna del contenido. Todo lo que debéis hacer es desplazarla hacia el margen. Añadid las siguientes propiedades resaltadas a la regla para #nav:
    #nav {
       float: left;
       width: 11em;
       padding: 0 0.5em;
       background-color: #ddd;
       margin-left: -100%;
       position: relative;
       right: 13em;
    }

    Aquí también la anchura de la navegación es de 12 em, pero tenemos 1 em de separación del envoltorio que debemos superar, por lo que es necesario que desplacemos la caja 13 em. Lo estáis desplazando hacia la izquierda, es decir, desde el borde derecho, y por ello utilizamos la propiedadright.

  11. Eliminad el fondo de color verde lima de la columna del contenido y ya lo tendréis todo.

36.3.2. Otros usos del posicionamiento relativo

El uso más habitual del posicionamiento relativo no implica desplazar la caja generada. Esto puede sonar extraño: ¿por qué deberíais utilizar el posicionamiento relativo sin desplazar la caja? Explicaremos esta razón en el apartado siguiente porque también tiene que ver con el posicionamiento absoluto. Así pues, deberéis esperar un poco.

Definir position:relative (sin desplazar la caja) también puede ser útil con algunos problemas de representación extraños de Internet Explorer. Activa la famosa propiedad interna hasLayout, que tiene un impacto muy importante en la representación que hace Internet Explorer de los elementos.

Resumen

El posicionamiento estático es la manera por defecto de hacer las cosas. Las cajas de bloque se distribuyen verticalmente según el orden en el que aparecen en el código fuente, mientras que las cajas en línea se distribuyen horizontalmente en cajas en línea dentro de estas cajas de bloque.

El posicionamiento relativo permite desplazar la caja generada en una o dos dimensiones. El elemento sigue ocupando espacio como si fuera estático, pero la caja generada se puede desplazar a otra posición. El posicionamiento relativo se utiliza principalmente en combinación con elementos flotantes para crear composiciones en las que el orden de la presentación es diferente del orden del código fuente.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. ¿Qué sucede cuando dos márgenes adyacentes de un contexto de formato estático se superponen y uno o ambos márgenes son negativos?
  2. Añadid un borde vertical entre cada una de las columnas laterales y la columna del contenido principal. Recordad que las tres columnas son flotantes, con lo cual la altura del elemento de envoltorio ha pasado a ser cero.
  3. ¿Cómo podéis hacer que todas las columnas tengan la misma altura (o que como mínimo lo parezca), de manera que los colores de fondo lleguen hasta el pie de página sea cual sea la columna más larga? (Consejo: buscad “faux columns” en vuestro motor de búsqueda preferido.)
Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC:Elementos flotantes y clearing

Logo de Mosaic

CSS
Elementos flotantes y clearing

35. Elementos flotantes y clearing

Tommy Olsson. 26 de septiembre del 2008 Publicado en: márgenes, cuadros, ajustar, errores, contener

En este apartado veremos qué son los elementos flotantes y el clearing, dos herramientas indispensables para el diseñador de webs modernas. Son unas herramientas muy versátiles que podéis utilizar para hacer que el texto fluya en torno a las imágenes o incluso crear composiciones de múltiples columnas.

Los contenidos de este apartado son los siguientes:

35.1. ¿Para qué sirven float y clear?

Si miráis cualquier revista, veréis que hay imágenes que ilustran los apartados y que el texto las rodea y fluye a su alrededor. La propiedad float de CSS se creó para permitir este estilo de composición en las páginas web. Cuando se hace “flotar” una imagen, o cualquier otro elemento, ésta se desplaza hacia un lado y permite que el texto fluya por el otro. Aplicar clearing a un elemento flotante hace que éste se desplace hacia abajo, si es necesario, para evitar que aparezca justo al lado del texto.

Aunque en principio cualquier elemento puede ser un elemento flotante, los diseñadores utilizan esta propiedad básicamente para conseguir composiciones de múltiples columnas sin necesidad de abusar del etiquetado de tabla.

35.2. Algo de teoría muy aburrida

Para explicar cómo funcionan los elementos flotantes, primero deberemos dar un poco de teoría y ver cómo un navegador web muestra un documento HTML/CSS. No os preocupéis, será breve.

Todos los elementos HTML visibles generan una “caja” que inmediatamente se delimita. Si miráis el documento en una pantalla de ordenador o en un teléfono móvil, los cuadros aparecen en la pantalla. Si imprimís el documento, los cuadros aparecen en el papel. Si utilizáis un lector de pantalla, el contenido de los cuadros se reproduce oralmente.

De la misma manera que en HTML hay elementos de bloque y elementos en línea, en el CSS hay cajas de bloque y en línea. Por defecto, los elementos de bloque generan cajas de bloque y los elementos en línea generan cajas en línea. Aparte de las cajas generadas por los elementos, también se generarán otras cajas; por ejemplo, para el contenido textual del documento. Las cajas de bloque se presentan normalmente en el orden en el que aparecen los elementos en el etiquetado, de arriba abajo. Las cajas de bloque no pueden aparecer unas al lado de otras si no aplicamos CSS. Las cajas en línea se distribuyen horizontalmente. La propiedad direction determina si se distribuyen de izquierda a derecha o de derecha a izquierda (si no se especifica esta propiedad, estas cajas se distribuyen por defecto de izquierda a derecha).

Esto se conoce como el flujo de documento: las cajas en línea fluyen horizontalmente dentro de sus cajas de bloque madre, y las cajas de bloque fluyen verticalmente. Las cajas aparecen en el mismo orden que los elementos del etiquetado HTML.

Pongamos por caso el siguiente documento HTML, que es muy básico (sólo hemos incluido la parte que hay dentro del elemento body):

<p>This is a very simple document.</p>
<p>It consists of <em>two</em> paragraphs.</p>

La figura 1 muestra una captura de pantalla de este documento con una sobreimpresión que muestra las dos cajas de bloque generadas por los elementos p y la caja en línea generada por el elemento em.

Los elementos p generan cuadros de bloque y el elemento em genera un cuadro en línea. Figura 1. Muestra de las cajas de bloque generadas por los elementos p y de la caja en línea generada por el elemento em

Todas las cajas en línea que forman una “línea” en el dispositivo de salida están rodeadas por rectángulos imaginarios que se conocen como cajas de línea. Las cajas de línea se distribuyen siempre de arriba abajo sin ningún espacio entre ellas, tal como podéis ver en la figura 2.

Cada línea representada está cerrada en una caja de línea. Figura 2. Cada línea representada está cerrada en una caja de línea independiente.

35.3. ¿Cómo funcionan los elementos flotantes?

Ahora que ya hemos visto todas estas cuestiones teóricas tan aburridas, pasemos a ver la sintaxis de los elementos float y clear y a ver algunos ejemplos.

La propiedad float tiene cuatro valores válidos: left, right, none e inherit. Los dos primeros valores son de lejos los que se utilizan más habitualmente y hacen que una caja flote hacia la derecha o hacia la izquierda. La declaración float:none, que es el valor por defecto, se utiliza normalmente sólo para “deshacer” una declaración de alguna otra regla. El uso de float:inherit no es nada habitual; no lo hemos visto nunca en ningún sitio y probablemente sólo existe por una cuestión de coherencia. Hace que el elemento herede el valor de float de su elemento padre.

Una caja flotante se extrae del flujo del documento y se desplaza todo lo posible hacia la izquierda o hacia la derecha, según la dirección de flotación especificada. “Todo lo posible” significa normalmente hasta que el borde exterior del elemento flotante toca el borde del bloque que lo contiene (el interior de su relleno, si está definido). Así pues, en el caso de float:left, la caja se desplaza hacia la izquierda hasta que el margen izquierdo del elemento flotante toca el borde izquierdo del padre.

Los lectores que hayan estado alerta pueden haber visto que hemos ido utilizando “normalmente”. Si ya hay una caja flotada hacia la izquierda cuando flotamos otra en esta misma dirección, la segunda caja se detendrá cuando toque a esta primera. Es decir, que los elementos flotantes no se pueden poner los unos sobre los otros.

Ya ha llegado el momento de ver los elementos flotantes en acción, de manera que ya podéis preparar vuestro editor de textos.

  1. Cread un archivo nuevo, copiad el código siguiente y guardad el documento como float.html.
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset=utf-8">
          <title>Floating</title>
       </head>
    <body>
       <p id="p1"><span id="span-a">Lorem ipsum</span>
       <span id="span-b">dolor sit amet</span>
       <span id="span-c">consectetuer</span> adipiscing elit.
        Curabitur feugiat feugiat purus.
        Aenean eu metus. Nulla facilisi.
        Pellentesque quis justo vel massa suscipit sagittis.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra,
        per inceptos hymenaeos.
        Quisque mollis, justo vel rhoncus aliquam, urna tortor varius lacus, ut 
        tincidunt metus arcu vel lorem.
        Praesent metus orci, adipiscing eget, fermentum ut, pellentesque non, dui.
        Sed sagittis, metus a semper dictum, sem libero sagittis nunc, vitae 
        adipiscing leo neque vitae tellus.
        Duis quis orci quis nisl nonummy dapibus.
        Etiam ante.  Phasellus imperdiet arcu at odio.
        In hac habitasse platea dictumst. Aenean metus.
        Quisque a nibh.  Morbi mattis ullamcorper ipsum.
        Nullam odio urna, feugiat sed, bibendum sed, vulputate in, magna.
        Nulla tortor justo, convallis iaculis, porta condimentum, interdum nec, arcu.
        Proin lectus purus, vehicula et, cursus ut, nonummy et, diam.</p>
       <p id="p2">Nunc ac elit. Vestibulum placerat dictum nibh. Proin massa.
        Curabitur at lectus egestas quam interdum mollis.
        Cras id velit a lacus sollicitudin faucibus.
        Proin at ante id nisi porttitor scelerisque.
        In metus.  Aenean nonummy semper enim.
        Aenean tristique neque quis arcu tincidunt auctor.
        Fusce consequat auctor ligula.
        Fusce nulla lorem, sagittis a, lacinia et, nonummy in, eros.
        In nisi augue, aliquam eget, convallis vel, malesuada quis, libero.</p>
       <p id="p3">Hello, World!</p>
    </body>
    </html>

    Ya sé que es mucho contenido, pero lo necesitamos para ver bien cómo funciona.

  2. Abrid el documento en vuestro navegador web para ver qué aspecto tiene. Aburrido, ¿verdad?
  3. Cread otro documento con el editor de textos, copiad el código siguiente y guardadlo con el nombrestyle.css en el mismo directorio que el fichero HTML del paso 1.
    #span-a {
       float: left;
       background-color:  #cfc;
       color: #030;
    }
  4. Enlazad la hoja de estilo al documento HTML insertando la línea siguiente justo antes de la etiqueta</head>.
    <link rel="stylesheet" type="text/css" href="style.css">
  5. Guardadlo y actualizad la página en el navegador. Veréis que el elemento span que contiene las palabras “Lorem ipsum” se ha desplazado flotando hacia la izquierda. También hemos puesto un fondo de color verde claro para hacer que destaque un poco.
  6. Todavía no es fácil ver qué sucede aquí, o sea que haremos que el elemento flotante sea un poco mayor. Añadid la siguiente declaración a vuestra hoja de estilos:
    #span-a {
       float: left;
       background-color:  #cfc;
       color: #030;
       padding: 1em;
    }
  7. Guardad y actualizad, y veréis que el área de color ahora es un poco mayor, ya que hemos añadido un poco de relleno por los cuatro lados del cuadro. El elemento flotante ocupa la altura de tres líneas de texto y podemos ver claramente que el otro texto fluye en torno a este elemento flotante.

35.3.1. Los detalles

Ahora analizaremos con más detalle qué es lo que sucede realmente aquí. La caja flotante generada por el primer elemento span se ha desplazado hacia la izquierda, hasta el borde del documento, y las cajas de línea adyacentes se han reducido. Aunque todavía no es visible, la caja de bloque generada por el párrafo que contiene el elemento flotante se ve afectada. Ahora destacaremos el párrafo para que quede más claro.

  1. Añadid la siguiente regla CSS a la hoja de estilos:
    p {
       border: 1px solid #f00;
    }
  2. Volved a guardar el archivo CSS y actualizad la ventana del navegador. Ahora deberíais ver un borde rojo en torno a cada uno de los párrafos; observad que el elemento flotante se encuentra dentro de uno de los párrafos.
  3. Ahora modificaremos la última regla para verificar que el elemento flotante se detiene cuando llega al borde interior del área de separación del padre:
    p {
       border: 1px solid #f00;
       padding: 1em;
       background-color:  #ff9;
    }
  4. Guardad y actualizad, y veréis la prueba de lo que os hemos dicho antes: el cuadro flotante se desplaza hasta cerca del bloque que lo contiene, mientras que la separación del padre queda fuera de éste. También veréis que el fondo amarillo del párrafo se extiende por debajo de la caja flotante. Claramente, el hecho de flotar una caja hija no afecta en absoluto a la caja del párrafo, sólo a las cajas de línea que hay en su interior.
  5. Ahora haremos unos cuantos experimentos más: ¿qué ocurre si el elemento flotante es más alto que su padre? Modificad la regla para el elemento flotante de la manera siguiente:
    #span-a {
       float: left;
       background-color: #cfc;
       color: #030;
       padding: 1em 1em 10em;
    }

Nota

Si la ventana del navegador es estrecha, es posible que debáis utilizar un valor mayor que 10 em para la separación inferior con el fin de que el área verde se extienda más allá del borde inferior del párrafo.

Ahora veréis algo muy interesante: la caja flotante sobresale fuera de la caja madre; la caja madre no se amplía para poder contener a su caja hija flotante. También podéis ver (si habéis utilizado una separación inferior lo bastante grande) que las cajas de línea adyacentes al elemento flotante del segundo párrafo se han acortado.

35.3.2. Más elementos flotantes

Ahora crearemos otro elemento flotante para ver qué sucede cuando se desplazan dos elementos flotantes en la misma dirección.

  1. Añadid una regla nueva a la hoja de estilos, guardad y actualizad igual que habéis hecho antes.
    #span-b {
       float: left;
       background-color: #ccf;
       color: #003;
       padding: 1em;
    }

    El elemento span que contiene las palabras “dolor sit amet” también se ha desplazado flotando hacia la izquierda. Veréis que se ha desplazado hacia la izquierda hasta tocar el primer elemento flotante; es decir, “todo lo posible”.

  2. ¿Y por qué sólo dos elementos flotantes? Crearemos aún un tercero. Añadid la regla siguiente a vuestra hoja de estilos:
    #span-c {
       float: left;
       background-color: #fcc;
       color: #300;
       padding:2em 1em;
    }
  3. También queremos añadir una regla temporal para ver un ejemplo de qué ocurre cuando no hay suficiente espacio para un elemento flotante en una línea. Añadid la regla siguiente al final de la hoja de estilos:
    span {
       width: 34%;
    }
  4. Igual que antes, guardad vuestra hoja de estilos y actualizad el documento en el navegador; veréis algo similar a lo que hay en la figura 3.
El tercer elemento flotante aparece bajo el segundo, lo que no era lo que os esperabais.Figura 3. ¿No es exactamente lo que esperabais?

¡Mira por dónde! ¿Qué ha pasado? El tercer elemento flotante aparece ahora bajo el segundo. (Y, además, Internet Explorer 6 hace otras cosas extrañas, que de momento ignoraremos). Como la anchura de cada uno de los elementos span es el 34% de la anchura del párrafo (como especifica la regla añadida en el paso 3), más un poco de separación, no hay suficiente espacio para los tres uno al lado del otro (3 × 34% = 102%). Los dos primeros elementos flotantes caben en la misma línea, pero el tercero no y se desplaza hacia abajo. Lo que es importante es que se desplaza hacia abajo sólo lo necesario para caber en la línea. No se desplaza bajo el primer elemento flotante más alto porque hay espacio suficiente a su derecha.

Otra cosa interesante que hay que tener en cuenta es que habéis asignado una anchura a los elementosspan. Esto no debería representar ninguna diferencia porque span es un tipo de elemento en línea. No obstante, cuando se hace flotar una caja, ésta se convierte automáticamente en caja de bloque, lo que significa que le podemos asignar dimensiones y márgenes verticales.

35.3.3. Márgenes en los elementos flotantes

Ahora veremos lo que se puede hacer con los márgenes de los elementos flotantes.

  1. En primer lugar, eliminad la regla temporal para los elementos span que habéis añadido antes y después guardad y actualizad, de manera que los tres elementos flotantes vuelvan a quedar uno al lado del otro. Es decir, borrad esta regla:
    span {
       width: 34%;
    }

    Ahora los tres elementos flotantes están totalmente juntos y el texto adyacente empieza inmediatamente después del último elemento flotante (a no ser que utilicéis Microsoft Internet Explorer 6 o una versión anterior, ya que en este caso habrá un espacio de 3 píxeles a la derecha a causa delproblema de los tres píxeles). ¿Cómo se puede crear un poco de espacio en torno a un cuadro flotante? La respuesta son los márgenes.

  2. Lo probaremos con el elemento flotante central; cambiaremos la regla CSS para el elemento flotante central de la manera siguiente y entonces guardaremos y actualizaremos:
    #span-b {
       float: left;
       background-color: #ccf;
       color: #003;
       padding: 1em;
       margin-left: 1em;
       margin-right: 1em;
    }

    Ahora sí que hay un poco de espacio a ambos lados del elemento flotante central.

  3. También podéis definir márgenes verticales para una caja flotante; haced los cambios siguientes en la regla para el tercer elemento flotante, guardad y actualizad.
    #span-c {
       float: left;
       background-color:  #fcc;
       color: #300;
       padding:2em 1em;
       margin-top:  2em;
       margin-bottom:  2em;
    }

    El tercer elemento flotante se ha desplazado hacia abajo y también hay un poco de espacio adicional debajo.

  4. Como ya vamos lanzados hacia la aventura, veamos qué ocurre si empezamos a jugar con márgenes negativos. Haced los cambios siguientes en la regla para el tercer elemento flotante, guardad y actualizad:
    #span-c {
       float: left;
       background-color: #fcc;
       color: #300;
       padding:2em 1em;
       margin-top: 2em;
       margin-bottom: 2em;
       margin-left: -4em;
    }

Ahora veréis el resultado que se muestra en la figura 4:

Elemento flotante encima de otro a causa de los márgenes negativosFigura 4. ¡Ahora los elementos flotantes aparecen unos sobre otros!

¿Cómo puede ser? ¿Quién ha dicho que los elementos flotantes no pueden aparecer los unos sobre los otros? El margen negativo desplaza todo el elemento flotante hacia la izquierda.

El uso de márgenes negativos en los elementos flotantes puede ser muy útil para crear algunos tipos de composiciones de múltiples columnas.

35.4. Clearing

Ahora que ya hemos visto las bases de los elementos flotantes, podemos pasar a otro tema muy relacionado: el clearing.

Como hemos visto en los ejemplos a lo largo de este apartado, el texto fluye en torno a un elemento flotante y las cajas de bloque no se ven afectadas por los elementos flotantes. Algunas veces es preferible que un elemento no acabe colocado justo al lado de un elemento flotante. Por ejemplo, un título que introduce una sección nueva de un apartado no debe aparecer al lado de una imagen de la sección previa. Es mucho mejor hacer que el título aparezca bajo la imagen, incluso aunque la imagen sobresalga por debajo del último párrafo. La única manera de hacerlo es usar la propiedad clear (distanciar) en el título.

Otro ejemplo de esto es la omnipresente composición de tres columnas con un pie de página que ocupa toda la anchura. Si las columnas son flotantes, entonces utilizaréis la propiedad clear en el pie para garantizar que aparezca bajo todas las columnas, sea cual sea la más larga.

La propiedad clear tiene tres valores útiles: left (izquierda), right (derecha) y both (ambos). También son válidos los valores none (ninguno), que es el valor por defecto, e inherit (heredar).

El uso de clear:left en un elemento garantiza que su caja generada aparezca bajo cualquier caja flotada previamente hacia la izquierda. Si utilizáis clear:both, aparecerá bajo todos los elementos flotantes previos de ambos lados.

La distancia se consigue desplazando el elemento hacia abajo (el espacio en blanco se añade sobre su margen superior), si es necesario, hasta que su borde superior se encuentre bajo los bordes inferiores de todos los cuadros flotantes en la o las direcciones especificadas. Veamos un ejemplo para ilustrarlo mejor.

  1. Antes de hacer la prueba, limpiemos primero la hoja de estilos. Eliminad las reglas para #span-b y#span-c de manera que quede sólo el elemento flotante verde de la izquierda. Comprobad que su separación inferior sea lo suficientemente grande como para extenderse dentro del segundo párrafo.
  2. Añadid la regla siguiente para el segundo párrafo, guardad y actualizad:
    #p2 {
       clear: left;
    }

    ¡Mirad! El segundo párrafo se desplaza hacia abajo hasta que queda por debajo del elemento flotante, tal como podéis ver en la figura 5.

    Distanciamiento del segundo párrafo por debajo del primeroFigura 5. Ahora el segundo párrafo queda por debajo del primero.

    Para complicar todavía más las cosas, podemos utilizar float y clear en el mismo elemento.

  3. Añadid una regla al segundo elemento flotante para separarlo del primero, guardad y actualizad:
    #span-b {
       float: left;
       clear: left;
       padding: 1em;
       background-color: #ccf;
       color: #003;
    }

    El elemento flotante azul aparece ahora bajo el elemento flotante verde, totalmente fuera del párrafo padre. Como también se ha flotado hacia la izquierda, el segundo párrafo se desplaza un poco más hacia abajo para quedar separado.

35.5. Elementos flotantes contenedores

Como ya hemos visto antes, la caja madre no se amplía normalmente para contener a los hijos flotantes. Esto a menudo puede provocar confusiones, por ejemplo cuando todos los hijos de un elemento flotan al crear un menú horizontal a partir de una lista no ordenada mediante la flotación de todos los elementos li. Como las cajas flotantes se sacan del flujo y no afectan a la caja madre, el hecho de hacer flotar las hijas hace que en realidad la madre quede vacía y que pase a tener una altura cero. Algunas veces esto no es lo que queremos, por ejemplo a la hora de definir un fondo para la madre. Si la madre tiene una altura cero, el fondo no se verá.

Es evidente que necesitamos algún mecanismo para conseguir que una caja madre se amplíe para incluir a sus hijas flotantes. El método tradicional consistía en incluir un elemento adicional en el etiquetado, justo antes de la etiqueta de cierre de la caja madre, y definir en él clear:both. Esto funciona, pero no es muy aceptable porque implica introducir un etiquetado adicional poco semántico e innecesario. Por suerte, hay otras maneras que explicaremos a continuación.

El primer método consiste sencillamente en hacer flotar también a la madre. Las cajas flotantes se amplían siempre para incluir todos sus cajas hijas.

  1. Para probarlo en nuestro documento de ejemplo, eliminad otra vez la regla para #span-b, haced flotar el primer párrafo de la manera siguiente y guardad y actualizad:
    #p1 {
       float: left;
    }

    El párrafo se amplía ahora hasta incluir el elemento flotante de color verde. Todo eso está muy bien, pero algunas veces no tenemos la opción de flotar a la madre. Otra manera de hacer lo mismo sin flotar a la caja madre es definiendo la propiedad overflow (desbordamiento) de la madre a un valor diferente de visible. Si definís el valor hidden y no especificáis ninguna altura, la caja madre incluirá las cajas hijas flotantes.

  2. Sustituid la última regla por la siguiente, guardad y actualizad:
    #p1 {
       overflow: hidden;
    }

Tened en cuenta que el último método no funciona con Internet Explorer 6 o anterior.

35.6. Ajustar

Ya hemos comentado antes que el hecho de hacer flotar una caja en línea hacía que se convirtiera en una caja de bloque, lo que permite especificar sus dimensiones y márgenes verticales. Hacer flotar una caja de bloque también tiene una consecuencia sorprendente: si no se especifica la anchura de la caja, ésta “se ajusta” para adaptarse a su contenido. Esto no era visible en el documento de ejemplo cuando habéis hecho flotar el primer párrafo porque ya tenía suficiente contenido para llenar toda la ventana (a no ser que tuvierais un monitor realmente ancho).

Ahora haremos flotar el último párrafo para ver el efecto. De hecho, sólo para tener un poco de variación, haremos una locura y lo haremos flotar a la derecha.

Añadid la regla siguiente en la hoja de estilos, guardad y actualizad:

#p3 {
   float: right;
}

El párrafo que dice “Hello, World!” flotará hacia la derecha y tendrá sólo la anchura del texto, más un poco de relleno que habéis especificado en una regla anterior para todos los párrafos.

35.7. Centrar elementos flotantes

Algunas veces querréis hacer flotar un elemento, quizá para que incluya hijos flotantes, pero a la vez mantenerlo centrado horizontalmente dentro de su padre. Esto representa un problema: no es posible utilizar el truco habitual de definir los márgenes izquierdo y derecho en auto para los elementos flotantes, y no existe ningún valor float:center. ¿Hay alguna manera de solucionarlo?

Sí, la hay. El gurú del CSS Paul O’Brien explica cómo hacerlo en su artículo When is a float not a float?. Implica el uso de un elemento de envoltorio adicional, pero es perfectamente asumible. El principio utiliza el posicionamiento relativo, que explicaremos en el apartado siguiente. Desplazando el elemento de envoltorio hacia la derecha y a continuación el elemento flotante hacia la izquierda, se puede llegar a centrar un elemento flotante ajustado de anchura desconocida. (Podéis utilizar este conocimiento para impresionar a vuestra pareja en vuestra próxima cita. No falla nunca).

Ved también

Podéis ver el apartado 36 de este módulo.

Intentémoslo. En el ejemplo siguiente añadiremos una barra de menú horizontal a vuestra página. El menú estará basado en una lista no ordenada con elementos flotantes.

  1. Insertad el etiquetado siguiente justo después de la etiqueta <body> de vuestro documento HTML:
    <div class="wrap">
       <ul id="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Services</a></li>
       </ul>
    </div>
    <!--Necesitamos esto para Internet Explorer-->
    <div class="clear"></div>
  2. Añadid las reglas siguientes de CSS en la hoja de estilos para aplicar estilos al menú:
    #menu {
       margin: 0;
       padding: 0.5em;
       font-family:  Verdana,sans-serif;
    }
    #menu li {
       float: left;
       list-style-type:  none;
       margin: 0 0 0 0.5em;
       padding: 0.25em;
       background-color: #600;
       color: #ff9;
       border: 2px solid #f00;
    }
    #menu a {
       color: #ff9;
       text-decoration:  none;
    }
    .wrap {
       float: left;
       margin-bottom:  2em;
    }
    .clear {
       clear: left;
       height: 1px;
       margin-top: -1px;
    }
  3. Guardad los dos archivos y actualizad el navegador. Veréis el menú en la parte superior izquierda. Ahora lo centraremos horizontalmente.
  4. Desplazad el elemento de envoltorio hasta el punto central modificando la regla de .wrap como se indica a continuación:
    .wrap {
       float: left;
       margin-bottom: 2em;
       position: relative;
       left: 50%;
    }

    El menú empezará en el centro horizontal de la página, pero esto no es lo que queríamos; está demasiado desplazado hacia la derecha, o sea que lo deberemos desplazar un poco hacia la izquierda. Como habéis flotado el elemento de envoltorio, éste se ha ajustado para adaptarse a la lista. Debéis desplazar la lista una distancia equivalente a la mitad de su anchura, lo que también significa la mitad de la anchura del envoltorio, o sea que lo deberemos desplazar un -50%.

  5. Modificad la regla #menu de la manera siguiente:
    #menu {
       margin: 0;
       padding: 0.5em;
       font-family: Verdana,sans-serif;
       position: relative;
       left: -50%;
    }

    El menú ya está centrado; el único problema es que puede haber una barra de desplazamiento horizontal según la anchura de la lista y de la ventana del navegador. Esto ocurre porque habéis desplazado el elemento de envoltorio hasta el centro de la pantalla; si la lista es más ancha que la mitad de la ventana, una parte de ésta quedará fuera.

  6. Podéis evitarlo definiendo overflow:hidden en un elemento padre adecuado para ocultar el desbordamiento. En este caso, el padre del envoltorio es el body. Algunas veces no es factible ocultar el desbordamiento del elemento body, y en este caso necesitaréis un envoltorio para el envoltorio; aquí, sin embargo, todo funciona correctamente.

    Añadid la regla siguiente a vuestra hoja de estilos:

    body{
       overflow: hidden;
    }
  7. De hecho, aún hay otro problema. Si lo abrís con Internet Explorer, veréis que aún no funciona del todo bien. La manera de solucionarlo es hacer flotar la lista misma, pero sólo en Internet Explorer, ya que en otros navegadores quedaría rota. Podéis solucionarlo utilizando un pequeño truco que garantiza que esta regla sólo se aplicará en Internet Explorer.

    Añadid la regla siguiente a vuestra hoja de estilos:

    * html #menu {
       float: left;
    }

35.8.¡Errores!

Los elementos flotantes y el clearing son muy útiles, pero por desgracia la mayoría de los navegadores (de hecho, casi todos) aplica estas propiedades de una manera errónea. Internet Explorer 6 presenta una serie increíble de comportamientos extraños con los elementos flotantes, que incluyen la desaparición del contenido, márgenes dobles y el famoso problema de los tres píxeles. Pero cuando se trata de aplicar los elementos flotantes y el clearing, ni siquiera Firefox ni Opera están totalmente libres de problemas. Position Is Everything es un recurso muy valioso en el que se documentan todos estos problemas, junto con soluciones para la mayoría de los casos.

Resumen

El hecho de hacer flotar una caja provoca que ésta se desplace todo lo posible hacia la izquierda o la derecha dentro de su elemento padre. Una caja flotante se extrae del flujo del documento y no afecta a la caja madre ni a las cajas de bloque siguientes, aunque las cajas de línea adyacentes se acortan. Cuando no hay espacio para una caja flotante en una línea a causa de otros elementos flotantes previos, ésta se desplaza hacia abajo hasta que quepa (o hasta que no haya otros elementos flotantes).

Cuando se hace flotar una caja en línea, ésta se convierte en una caja de bloque. Si se hace flotar una caja de bloque y no se especifica ninguna anchura concreta, ésta se ajusta para adaptarse a su contenido.

Para centrar elementos flotantes hay que desplazar el contenido hacia abajo, si es necesario, hasta que su borde superior se encuentre por debajo de los bordes inferiores de todas las cajas flotantes en la dirección especificada.

Para centrar una caja flotante contenida se puede añadir un elemento de envoltorio y utilizar juiciosamente el posicionamiento relativo.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. ¿Qué sucede si flotáis un elemento en medio de un párrafo, es decir, si hay texto antes del elemento flotante? Probadlo en navegadores diferentes, porque se comportan de maneras diferentes. Opera y Safari lo hacen bien, pero Firefox e Internet Explorer no.
  2. ¿Cómo se pueden utilizar los elementos flotantes para mostrar miniaturas de imágenes en una galería como “celdas” del mismo tamaño sin utilizar una tabla para la distribución?
  3. ¿Cómo podéis tener un menú de navegación vertical a la izquierda de la página y una columna de contenido a la derecha sin que el texto del contenido rodee el menú por debajo?
  4. Una composición web muy habitual consiste en una cabecera que ocupa toda la anchura, tres columnas de contenido debajo de ésta y a continuación un pie de página al final que vuelve a ocupar toda la anchura. ¿Cómo se puede conseguir esta composición con elementos flotantes y clearing?
Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC:Estilos de listas y enlaces

Logo de Mosaic

CSS
Estilos de listas y enlaces

32. Estilos de listas y enlaces

Ben Buchanan. 26 de septiembre del 2008 Publicado en: subrayar, estados, navegación, relleno, margen

Muchos elementos de las páginas web son un tanto “indulgentes” en cuanto al diseño: no es muy grave si no están “del todo bien”. Pero listas y enlaces son otra historia, porque si no se hacen bien, pueden causar problemas graves a la gente que quiera utilizar vuestro sitio web.

En concreto, los enlaces tienen algunos requisitos básicos en cuanto al estilo y a las expectativas de los usuarios. Los enlaces con estilos mal hechos pueden arruinar la experiencia que tendrá el usuario cuando utilice la web porque la gente deberá detenerse a pensar dónde debe hacer clic. En el peor de los casos, el usuario no sabrá determinar ni siquiera qué elementos de la página son enlaces.

En este apartado, nos centraremos en las competencias básicas necesarias para crear unos estilos de listas y de enlaces bien hechos. También hablaremos de algunas maneras de evitar errores fundamentales de estos elementos y de producir un resultado final que funcione en cualquier navegador y que sea accesible para los usuarios con discapacidades.

Nota

En este apartado se utilizarán varios ejemplos, de modo que os podéis descargar los ficheros de muestra de las listas y los enlaces para ir viéndolos a medida que sigáis la lección.

Ved ejemplos reales en:styling-lists-and-links examples

Los contenidos de este apartado son los siguientes:

32.1. Aplicar estilos a las listas

Antes de nada, os enseñaremos los conceptos básicos relacionados con la aplicación de estilos a las listas con CSS y después pasaremos a echar un vistazo a algunas de las técnicas algo más complicadas.

32.1.1. Picos y números básicos

El punto más básico que se debe tener en cuenta a la hora de crear un estilo para una lista es pensar en qué forma de pico o de número queremos utilizar. También puede ser que no queráis utilizar ningún tipo de pico o de número. Como habéis aprendido al ver el HTML para las listas, existen muchas posibilidades que se establecen mediante la propiedad list-style-type.

Ved también

Podéis ver las listas en el apartado 16 del módulo “El texto central de HTML”.

Por ejemplo, para especificar que todas las listas no ordenadas del sitio web utilicen picos cuadrados, podéis utilizar este CSS:

ul li {
   list-style-type: square;
}

De esta manera, conseguiremos un resultado parecido al de la figura 1:

Captura de pantalla de una lista con picos cuadradosFigura 1. Lista desordenada con picos cuadrados

En la figura 2 se muestran algunos ejemplos de lista muy habituales:

Captura de pantalla de algunos tipos de lista habituales: discos, cuadrados, círculos y sin pico para las listas no ordenadas, números decimales, decimales con cero a la izquierda, letras minúsculas y números romanos en minúscula para las listas ordenadasFigura 2. Estilos más habituales de listas

Podéis ver algunas opciones más en la página de ejemplos en:styling-lists-example-basics

Fijaos en que los picos y los números se representan con el color que se especifique en li o que éste herede. Si necesitáis que el pico sea de un color diferente del texto, deberéis utilizar una imagen o solucionarlo utilizando otros elementos de los puntos enumerados en la lista (puede ser muy fácil si la lista está formada por enlaces, por ejemplo).

32.1.2. Picos personalizados mediante imágenes

El conjunto de picos estándar es suficiente para el contenido básico, pero a menudo se pide a los diseñadores que sustituyan los picos por una imagen propia.

La especificación de CSS incluye la propiedad list-style-image para añadir una imagen de lista personalizada. No obstante, la propiedad tiene pocas opciones de colocación de la imagen de fondo y, en determinadas circunstancias, no funciona en absoluto en IE. Por ello, ha acabado siendo mucho más habitual establecer una imagen de fondo en los elementos enumerados en la lista.

Pongamos por caso que tenéis una lista de canales de información RSS y queréis cambiar el pico por el típico icono naranja de RSS. Aplicaremos la clase “rss” a la lista para diferenciarla de otras listas.

<ul class="rss">
   <li><a href="http://example.com/rss.xml">News</a></li>
   <li><a href="http://example.com/rss.xml">Sport</a></li>
   <li><a href="http://example.com/rss.xml">Weather</a></li>
   <li><a href="http://example.com/rss.xml">Business</a></li>
   <li><a href="http://example.com/rss.xml">Entertainment</a></li>
   <li><a href="http://example.com/rss.xml">Funny News</a></li>
</ul>

Primero estableceremos que la lista no tenga list-style-type y eliminaremos el margen y el relleno (padding). Entonces, sólo hay que añadir una imagen de fondo en cada elemento enumerado de la lista, algo de relleno a la izquierda para desplazar el texto para que se pueda ver la imagen y algo de relleno alrededor del botón para espaciar los elementos de la lista.

.rss {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.rss li {
   background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
   padding: 0 0 5px 15px;
}

De esta manera, nos quedará una lista con la imagen de RSS en lugar de picos, tal como se puede observar en la figura 3:

Captura de pantalla de una lista con los picos sustituidos por imágenesFigura 3. Lista con picos hechos con una imagen

Tened en cuenta que la imagen de fondo está situada utilizando píxeles para colocarla de manera precisa. Dependiendo del diseño que queráis aplicar, puede ser que también podáis utilizar %, em o palabras clave. De todos modos, id con cuidado cuando el diseño incluya contenido que pueda hacer que un elemento de la lista acabe teniendo varias líneas de texto, porque si establecéis el fondo en center o 50% verticalmente, puede quedar bastante extraño, como se ve en la figura 4:

Captura de pantalla que muestra cómo queda el pico centrado verticalmente en medio del texto en lugar de estar centrado en la primera línea del texto.Figura 4. Demostración de imágenes de pico centradas verticalmente en un elemento de lista de varias líneas

En cambio, si establecéis que la imagen quede en la parte superior del elemento de la lista, conservaréis el comportamiento tradicional de los picos (es decir, quedará delante de la primera línea). Podéis ver la figura 5:

Captura de pantalla de imágenes de pico colocadas en la parte superior.Figura 5. Demostración de imágenes de pico alineadas en la parte superior de un elemento de lista con más de una línea

32.1.3. Márgenes y relleno de listas

Si se utilizan bien, los márgenes y el relleno pueden hacer que las listas queden mucho más ordenadas y profesionales, pero debéis saber qué estáis haciendo y tener en cuenta que la situación es diferente para cada tipo de lista. En este subapartado os enseñaremos cómo aplicar márgenes y relleno a los dos tipos de lista más habituales de manera juiciosa.

Listas no ordenadas

Algo que probablemente notaréis enseguida es que el estilo predeterminado de las listas aplica un sangrado más destacado que el estilo predeterminado para los párrafos. Podéis ver la figura 6:

Captura de pantalla de estilos de lista por defecto con un sangrado mayor que el de los párrafosFigura 6. Las listas con el estilo predeterminado tienen un sangrado a la izquierda.

Si queréis que los elementos de una lista no ordenada queden alineados en el mismo punto que el resto de contenido, deberéis crear algunos estilos para modificar el sangrado como más os guste. Cada navegador requiere unos parámetros diferentes, en algunos se debe eliminar el margen y en otros se debe eliminar el relleno. Por lo tanto, para establecer los valores iniciales en todos los navegadores, estableced lo siguiente:

ul {
   margin: 0;
   padding: 0;
}

Puede que eso no tenga el efecto que esperabais porque hará que todo el texto quede a la misma altura tocando a la izquierda, pero los picos quedarán más allá del texto, como se ve en la figura 7:

Captura de pantalla de picos más allá del textoFigura 7. Los picos quedan más a la izquierda que el texto.

Por lo tanto, para alinear los picos a la izquierda, lo que debéis hacer es establecer un margen para la lista de elementos y que así quede todo al mismo nivel:

ul {
   margin-left: 0;
   padding-left: 0;
}
ul li {
   margin-left: 1em;
}

Llegados a este punto, aún encontraréis alguna diferencia de un píxel entre un navegador y otro, pero el efecto es básicamente el más consistente posible. Podéis ver la figura 8:

Captura de pantalla de picos alineados a la izquierda como los párrafosFigura 8. Los picos colocados al mismo nivel que los párrafos anteriores y posteriores

Listas ordenadas

Ahora debéis tener en cuenta lo mismo, pero aplicado a las listas ordenadas. Estas listas son más complicadas porque los símbolos numéricos están alineados según el elemento de la lista que tenga el número más alto. Por ejemplo, si tenéis una lista de 10 elementos, los decimales se colocarán de manera que el elemento de dos dígitos, el “10”, quede como se ve en la figura 9:

Captura de pantalla de una lista de diez elementos con los marcadores sangrados para que quepa el 10.Figura 9. Los símbolos numéricos de los elementos del 1 al 9 tienen un relleno a la izquierda para quedar alineados con el elemento 10.

Por lo tanto, en realidad no se puede hacer que esta lista quede toda alineada a la izquierda y al mismo nivel que el resto del texto, a no ser que establezcáis que la lista utilice list-style-type: decimal-leading-cero;, que solucionará el problema tal como se ve en la figura 10:

Captura de pantalla de ceros al principio para que todos los números queden bien alineados a la izquierda.Figura 10. Los ceros a la izquierda llenan el espacio vacío de los elementos del 1 al 9.

Es más habitual aceptar sencillamente la diferencia de espaciado. Sin embargo, esto significa que los símbolos de las listas ordenadas y desordenadas no podrán alinearse fácilmente a la izquierda de manera consistente. Sólo se podrá alinear el texto de las listas.

ul, ol {
   margin-left: 0;
   padding-left: 0;
}
li {
   margin-left: 2em;
}

Necesitáis como mínimo 2 em de margen a la izquierda para incluir tanto las listas ordenadas como las no ordenadas. En la figura 11, fijaos en cómo se alinea el texto de los elementos en las dos listas.

Captura de pantalla de listas con todo el texto alineado a la izquierdaFigura 11. El texto se alinea tanto en las listas ordenadas como en las desordenadas.

¿Entonces qué hay que hacer?

Básicamente tenéis tres opciones:

  1. Aceptar la colocación por defecto de las listas y de sus símbolos.
  2. Especificar la alineación del texto de las listas.
  3. Establecer un estilo diferente para ul y ol.

No hay una manera correcta ni incorrecta de hacerlo y es bastante habitual que se deje todo con la configuración predeterminada para las listas de contenido general.

32.1.4. Utilizar una colocación de tipo lista

Si queréis que el texto de elementos de más de una línea quede por debajo del símbolo de la lista, deberéis configurar la propiedad list-style-position en inside para así obtener el resultado que se ve en la figura 12:

Captura de pantalla de una lista desordenada con texto de más de una línea por debajo de los picosFigura 12. La posición de la lista inside hace que, a partir de la segunda línea, el texto quede por debajo del símbolo en lugar de alineado con el sangrado del texto.

Este estilo de símbolos rodeados de texto no es muy popular. La propiedad list-style-position está establecida por defecto en outside, lo que produce el resultado del que se habla más adelante en este apartado.

32.1.5. ¿Y las listas de definiciones, qué?

En general, las listas de definiciones no requieren mucha atención aparte de establecer un estilo dt(normalmente texto en negrita) y controlar el sangrado de las definiciones:

dt {
   font-weight: bold;
}
dd {
   margin-left: 2em;
}

Eso define un estilo claro y sencillo para listas de definiciones, como se ve en la figura 13:

Captura de pantalla de una lista de definiciones con términos en negrita y definiciones con sangradoFigura 13. Una lista de definiciones con un estilo muy sencillo

Aunque las listas de definiciones pueden reestructurarse con elementos flotantes y posicionamientos, esto es complicado y, en general, es mejor hacer las cosas sencillas. Como ya son bastante útiles, sólo les hace falta un poco de ayuda para hacer que los términos de la definición destaquen un poco más y que las definiciones tengan un sangrado adecuado.

32.1.6. Listas anidadas

Ya aprendisteis a anidar listas. Cuando creéis vuestro propio CSS, debéis ir con cuidado de mantener unos rasgos de diseño muy claros para mostrar la relación entre una lista anidada y la lista que la incluye. La manera más fácil de conseguirlo es aplicar un sangrado a los elementos de la lista anidada que, de hecho, es la configuración predeterminada en todos los navegadores.

Ved también

Podéis ver las listas en el subapartado 16.4 del módulo “El texto central de HTML”.

Si establecéis vuestro sangrado de lista personal, la configuración básica se multiplicará. Por ejemplo, podéis ver el CSS siguiente:

ul, ol {
   margin-left: 0;
   padding-left: 0;
}
li {
   margin-left: 2em;
}

Cada elemento subsiguiente de la lista hija de la cadena hereda el valor de margin de su elemento de lista padre además de tener 2 em propios más añadidos encima. Así pues, un elemento de lista de nivel superior (uno que no tenga un elemento de lista como elemento padre) tendrá un margen izquierdo de 2 em, mientras que un elemento de lista hijo del primer elemento de lista heredará 2 em de su padre y tendrá 2 em más añadidos encima, es decir, un total de 4 em, etc.

32.1.7. Listas horizontales

Uno de los cambios más comunes que son necesarios para trabajar con una lista es crear una lista horizontal, es decir, hacer que los elementos de la lista aparezcan uno al lado del otro en vez de uno debajo del otro. Se trata de un truco muy habitual para la navegación por el sitio. Veamos un ejemplo del apartado de los menús de navegación (figura 14):

Captura de pantalla de una lista sencilla con picosFigura 14. Una lista sencilla

Convirtámosla en una lista horizontal como se ve en la figura 15:

Captura de pantalla de una lista con los elementos uno al lado del otroFigura 15. Una lista horizontal sencilla

Para conseguir este efecto, hemos de hacerle tres cosas a la lista:

  1. Eliminar margin y padding de <ul>.
  2. Establecer los elementos de la lista en display: inline;.
  3. Aplicar un poco de espaciado a la derecha de los elementos de la lista para que no choquen.

En este ejemplo, la lista tiene el ID “mainmenu” (menú principal), de manera que lo utilizaremos como selector contextual para garantizar que sólo cambiamos la lista que queremos cambiar. El CSS es el siguiente:

#mainmenu {
   margin: 0;
   padding: 0;
}
#mainmenu {
   display: inline;
   padding: 0 1em 0 0;
}

En este sencillo ejemplo sólo hay que establecer los elementos de la lista en display: inline;. Tened en cuenta que si utilizáis float: left; también conseguiréis un resultado parecido. Más adelante aprenderéis más cosas sobre los elementos flotantes.

Ved también

Podéis ver los elementos flotantes en el apartado 35 de este módulo didáctico.

32.1.8. “Columnas falsas”

Antes hemos creado una lista de canales de información de RSS. Ahora imaginaos que aquella lista se ha situado en una barra lateral de vuestro sitio. El diseñador quiere que la lista aparezca en dos columnas con un borde alrededor de todo el grupo como se ve en la figura 16:

Captura de pantalla de una lista en dos columnasFigura 16. Una lista de canales de información en dos columnas con un icono de RSS como pico

Ved el ejemplo en:Styling lists example columns

Supongamos que la lista se encuentra dentro de un <div> que establece la anchura y el borde. La lista básica quedaría de una manera parecida a la figura 17:

Captura de pantalla de lista básicaFigura 17. La lista sin estilos dentro del borde

Ved la lista básica original en:Styling lists example image bullet

Para conseguir el efecto de “faux columns” o columnas falsas, añadid el icono RSS como hemos visto antes y aplicad un margen de 5 píxeles arriba, a la derecha y a la izquierda.

.rss {
   margin: 5px 5px 0 5px;
   padding: 0;
}
.rss li {
   list-style-type: none;
   background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
   padding: 0 0 5px 15px;
   display:-moz-inline-box;
}

Nota

Fijaos en que se añade display:-moz-inline-box; para que el ejemplo se pueda ver correctamente con Firefox 2.

No es necesario que le añadamos margen al botón porque el último elemento de la lista ya aplicará el espaciado adecuado con su relleno tal como se observa en la figura 18:

Captura de pantalla de lista con el espaciado y los iconos correctosFigura 18. Ya casi hemos terminado; ahora tenemos un espaciado y unos iconos de pico bien hechos.

Ahora estableced los elementos de la lista en display: inline-block; y estableced la anchura a 40% y el margen derecho a 2% (también podéis utilizar anchuras en píxeles). También debéis especificar que el <ul>tenga una anchura de 100% para garantizar que los elementos de más de una línea queden como deben quedar y que la lista tenga el tamaño correcto:

.rss {
   margin: 5px 5px 0 5px;
   padding: 0;
   width: 100%;
}
.rss li {
   display: inline-block;
   width: 40%;            
   margin: 0 2% 0 0;
   list-style-type: none;
   background: #fff url("icon-rssfeed.gif") 0 3px no-repeat;
   padding: 0 0 5px 15px;
   display:-moz-inline-box;
}

En la mayoría de los navegadores, con esto será suficiente para crear el efecto de la columna, pero deberéis especificar que IE haga que “floten” los elementos de la lista a la izquierda. Utilizamos un estilo condicional para todas las versiones hasta IE 7.

<!--[if lte IE 7]>
   <style type="text/css">
      .rss li {
         float: left;
      }
   </style>
<![endif]-->

Ahora ya tenemos el efecto de las dos columnas, tal como se ve en la figura 19:

Captura de pantalla de una lista en dos columnasFigura 19. La lista completa

Navegadores antiguos

Si se os pide que creéis este diseño para navegadores más antiguos que no aceptan inline-block(bloque en línea), deberéis hacer que “floten” los elementos de la lista a la izquierda en todos los navegadores y utilizar un ajuste de distancia como el que se describe en el “How to clear floats without structural markup“. Por suerte, la última hornada de navegadores han hecho que el inline-block sea una propiedad de visualización viable, así que, a no ser que tengáis una cuota muy grande de navegadores antiguos como Firefox 2, deberíais poder utilizar el método inline-block.

32.1.9. Conclusión de las listas

Ya hemos cubierto un conjunto básico de opciones de aplicación de estilos y métodos para listas. Podéis utilizar estos ejemplos como punto de partida y combinarlos para crear un gran número de diseños. Como las listas a menudo se combinan con enlaces, pasamos a hablar de estos.

Aplicar estilos a los enlaces puede considerarse una especie de arte. En este campo hay muchos requisitos en juego y puede ser difícil cumplirlos todos y, a la vez, obtener un resultado estéticamente satisfactorio. Por otra parte, es perfectamente posible siempre y cuando se tengan en cuenta una serie de normas muy sencillas:

  • comprender los diferentes estados de los enlaces,
  • no apartarse mucho de las expectativas del usuario,
  • utilizar los colores adecuadamente.

Si seguís estas reglas, podréis crear enlaces claros y fáciles de utilizar.

32.2.1. Comprender los estados de los enlaces

Antes de aplicar estilos a los enlaces, debéis comprender los diferentes estados de los enlaces. Hay un total de cinco estados: no visitado o predeterminado, visitado, seleccionado, por encima y activo.

  • No visitado (unvisited). El estado por defecto de un enlace cuando todavía no se ha activado o visitado.
  • Visitado (visited). El estado de un enlace que el usuario ya ha visitado.
  • Seleccionado (focus). Se aplica mientras el enlace está seleccionado; por ejemplo, cuando el cursor del usuario del teclado se encuentra sobre el enlace.
  • Por encima (hover). Se aplica cuando un usuario tiene el puntero del ratón por encima del enlace pero todavía no ha hecho clic sobre él.
  • Activo (active). Se aplica cuando el usuario activa el enlace, es decir, mientras está haciendo clic sobre él. En algunos navegadores, este estilo también se aplica cuando el enlace se ha abierto en otra ventana o pestaña.

Siempre debéis especificar el CSS para cada uno de estos estados. Cada uno aporta información al usuario sobre el hecho de interactuar con un enlace. En caso de duda sobre si utilizar focus, hover oactive, podéis aplicar el estilo focus y hover de la misma manera porque sus funciones son bastante parecidas para no causar confusión con el mismo estilo de enlace. Después podéis añadir alguna variación sencilla para active, por ejemplo poner el texto en cursiva. En caso de que sea necesario, podéis aplicar el mismo estilo a los tres.

Nota

Fijaos en que no todos estos estados son mutuamente excluyentes (aunque en realidad no es posible que un enlace esté visitado y no visitado a la vez); es perfectamente posible que un enlace esté en estado “por encima”, “activo” y “visitado” a la vez.

32.2.2. Cómo la evolución de los navegadores creó expectativas

Para entender mejor algunas expectativas de los usuarios respecto a los enlaces, va bien saber un poco de la historia de la web.

Puede que hayáis oído hablar de los “valores por defecto de Netscape” de los enlaces o que los enlaces siempre deberían ser azules y morados. Esto se remonta a los principios de la creación de la web, cuando los navegadores establecían los colores del contenido y los creadores de webs no tenían demasiado control sobre la manera de representación de sus páginas.

El texto era negro, el fondo era gris y todos los enlaces estaban subrayados. Los enlaces sin visitar eran azules, los enlaces visitados eran morados y los enlaces activos eran rojos. Esto era todo. Podéis ver la figura 20 para observar una muestra.

Captura de pantalla de la página de inicio de Mosaic/Navigator donde se explica qué son los hiperenlaces.Figura 20. Una captura de pantalla de Mosaic

Aunque era un poco monótono, era totalmente consistente y estableció la base de las futuras expectativas de los usuarios. Concretamente, los usuarios todavía a día de hoy esperan que el texto subrayado sea un enlace. Quizá no se esperen que todos los enlaces estén subrayados, pero sí esperan que se pueda hacer clic sobre un texto subrayado. Y es mejor no ir en contra de esta expectativa.

Algunos sitios utilizan enlaces azules y morados, que aún son los colores predeterminados del contenido sin estilo en la mayoría de los navegadores. Aunque siempre podéis adaptaros a la moda “retro” y seguir con esta pareja de colores, en general a los usuarios no les importa encontrarse con otros colores, dentro de ciertos límites.

32.2.3. Expectativas del usuario

Hay una serie de reglas generales para las expectativas del usuario en cuanto a los enlaces.

  • Los usuarios esperan encontrar enlaces que tengan un aspecto diferente del resto del texto que no son enlaces.
  • Los usuarios esperan que los enlaces reaccionen de alguna manera cuando se pasa el cursor por encima o cuando se selecciona el enlace.
  • Los usuarios esperan que los enlaces cambien después de visitarlos.
  • A los usuarios les gusta la consistencia de los estilos de los enlaces de la misma función para así saber sobre qué deben hacer clic.
  • Los usuarios esperan que el texto subrayado sea un enlace, así que no subrayéis otra cosa.

Siempre debéis cumplir estas normas básicas porque contribuyen a que los usuarios puedan identificar y utilizar los enlaces rápidamente. Debéis crear estilos que no obliguen a la gente a dudar de qué partes del texto son enlaces.

Estas expectativas se traducen en unas normas de codificación muy sencillas:

  • definir estilos para todos los estados de enlace,
  • utilizar el subrayado sólo para los enlaces.

32.2.4. Utilización adecuada de los colores

Cuando apliquéis estilos a los enlaces, id con cuidado de no basaros únicamente en el color para distinguir los diferentes estados de enlace. No todo el mundo puede ver igual los colores (como los daltónicos), de manera que debéis utilizar colores y también estilos como diferentes subrayados, iconos o colores invertidos.

También deberíais aseguraros de que los colores que elegís tengan bastante contraste. Es muy fácil si se utilizan herramientas como Colour Contrast Analyser (tanto para PC como para Mac) o la barra de herramientas de accesibilidad web para Opera (ambas de Paciello Group).

Con el Colour Contrast Analyser (podéis ver la figura 21) se puede utilizar un selector de colores para seleccionar los colores de letra y de fondo de la pantalla y después obtener una evaluación sencilla del contraste que hacen:

Prueba de color del título hecha con el programa CCA. Dados dos colores de fondo y primer plano, el programa indica se se superan cuatro criterios de contraste entre ambos.Figura 21. Captura de pantalla del Colour Contrast Analyser

Si los cuatro resultados son “pass” (superado), la combinación de colores es adecuada. No os olvidéis de comprobar todos los estados de enlace. Puede que debáis introducir algunos manualmente en el campo “hex” para comprobar el estado “seleccionado”, “por encima” y “activo”.

Ahora que ya entendéis las normas básicas de los enlaces, pasemos a ver el código. En este subapartado se describe todo el CSS que necesitaréis para aplicar estilos como es debido.

Aplicar estilos de estado de enlace en el orden adecuado

Para empezar, tened en cuenta que si no aplicáis los estilos a los enlaces en el orden correcto en la hoja de estilo, las definiciones se anularán entre ellas y los estados de los enlaces no funcionarán. Los estilos de los enlaces siempre deben ir en este orden:

  1. link
  2. visited
  3. focus
  4. hover
  5. active

Un truco mnemotécnico para recordarlo podría ser: “Los Visitantes Fueron Hasta Allí”. Si creéis que no os acordaréis de esta frase, deberéis recordar el orden de las propiedades de memoria o copiar y pegar el bloque de código que se muestra a continuación.

Los estilos de los diferentes estados de los enlaces se aplican utilizando sus “pseudoclases” (:link :visited :focus :hover :active) que se adjuntan al selector de elemento de enlace, a. Por lo tanto, el CSS inicial debería ser el siguiente:

a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

Si queréis definir una regla de CSS para todos los enlaces en todos los estados, podéis aplicar el estilo adirectamente. Sólo debéis acordaros de colocar primero la regla genérica para mantener el orden:

a {}
a:link{}
a:visited{}
a:focus{}
a:hover{}
a:active{}

Eso va muy bien si tenéis pensado sustituir el subrayado por defecto por un borde inferior, que es lo que se suele hacer para obtener un mejor control visual del estilo.

Controlar las opciones por defecto

Por defecto, la mayoría de los navegadores establecen que todos los enlaces estén subrayados y los enlaces en estado “seleccionado” tienen un contorno, como se puede ver en la figura 22:

Los estilos por defecto de 'seleccionado' de Opera 9, Firefox 2 e IE 7. Opera 9 subraya en morado, y deja el texto en blanco sobre azul con un recuadro azul claro. Firefox 2 pone el texto subrayado en morado sobre blanco, con contorno punteado. IE7 hace lo mismo, con un tono diferente de moradoFigura 22. De izquierda a derecha: los estilos por defecto de “seleccionado” de Opera 9, Firefox 2 e IE 7

Si queréis sustituir estos estilos por otros, podéis cambiar o desactivar estos valores predeterminados.

Subrayados

El subrayado (underline) se define mediante la propiedad text-decoration:

a {
   text-decoration: underline;
}

Podéis desactivar el subrayado estableciendo la propiedad en none:

a {
   text-decoration: none;
}

Incluso si mantenéis el estilo del subrayado, puede que os resulte más fácil desactivar text-decoration y utilizar border-bottom para establecer un subrayado falso. En el ejemplo que se muestra más adelante lo veremos más detenidamente.

Contorno

El contorno del estado “seleccionado” se controla con la propiedad outline. El contorno es muy parecido a un borde, pero no ocupa espacio ni provoca que la página refluya cuando aparece (tened en cuenta que IE 7 y versiones anteriores no lo soportan). La manera más fácil de controlar el contorno es con la propiedad de abreviación:

a:focus{
   outline: thick solid #000;
}

Este ejemplo se representaría más o menos como se ve en la figura 23:

Enlace con un borde negro gruesoFigura 23. Representación de ejemplo de un contorno negro y grueso

Si tenéis dudas sobre qué hacer con el contorno, limitaos a dejarlo en la forma predeterminada por el navegador.

32.2.6. Ejemplo: recreación de las opciones por defecto de Netscape

Para dar un ejemplo fácil de estilo de los enlaces, recrearemos las opciones por defecto de Netscape, es decir, el azul, el morado y el rojo. Mantendremos el subrayado, pero haremos que el estado activo se muestre en cursiva. Aumentaremos el tamaño del texto sólo para ver cómo queda y estableceremos un fondo blanco para la página.

body{
   background: #fff;
   color: #000;
   font-size: 2em;
}
a {
   text-decoration: underline;
}
a:link{
   color: #0000CC;
}
a:visited{
   color: #6D006D;
}
a:focus{
   color: #CC0000;
}
a:hover{
   color: #CC0000;
}
a:active{
   color: #CC0000;
   font-style: italic;
}

De esta manera, conseguiremos un resultado parecido al de la figura 24:

Ejemplo de representación de los estilos definidos anteriormenteFigura 24. Recreación de las opciones por defecto de Netscape

Subrayados falsos con border-bottom

Muchos diseñadores han observado que el subrayado es un poco demasiado grueso y tapa las astas descendentes de las letras minúsculas, es decir, la línea del subrayado cruza la parte inferior de las letras “g”, “j”, “p”, e “y”, tal como se muestra la figura 25:

La palabra pygmy con una línea de subrayado que corta las letras.Figura 25. La línea del subrayado corta las astas descendentes de las minúsculas.

Pongamos por caso que la persona que se encarga del diseño de la página está de acuerdo y le gustaría que la línea del subrayado fuera más fina y que no tocara el texto. Para cumplir este requisito, que es muy habitual, utilizaremos un borde en lugar de un subrayado de manera que quede como la figura 26:

La palabra pygmy con un borde falso de subrayado que no corta las letras.Figura 26. Utilizar un borde en vez del subrayado queda más bonito.

Primero, desactivad el subrayado para todos los estados de enlace y, después, estableced un borde inferior que encaje con el color del enlace en cada estado.

body{
   background: #fff;
   color: #000;
   font-size: 2em;
   line-height: 2em;
}
a {
   text-decoration: none;
}
a:link{
   color: #00c;
   border-bottom: 1px solid #00c;
}
a:visited{
   color: #6D006D;
   border-bottom: 1px solid #6D006D;
}
a:focus{
   color: #c00;
   border-bottom: 1px solid #c00;
}
a:hover{
   color: #c00;
   border-bottom: 1px solid #c00;
}
a:active{
   color: #c00;
   border-bottom: 1px solid #c00;
   font-style: italic;
}

De esta manera, conseguiremos un resultado parecido al de la figura 27:

Ejemplo de representación de los estilos definidos anteriormenteFigura 27. Enlaces con el subrayado falso aplicado

Si utilizáis el método del borde falso, id con cuidado de tener suficiente line-height (altura de línea) establecido para que el subrayado no choque con el texto de la línea siguiente.

Estilos no basados en el color

Como el ejemplo que hemos utilizado hasta ahora se basa totalmente en los colores para distinguir cuatro de los cinco estados de los enlaces, deberíamos dar el paso siguiente y cambiar el borde inferior para los estados “visitado”, “seleccionado” y “por encima”. Demos a los enlaces visitados un borde de puntos y a los enlaces “por encima” y “seleccionado” un borde discontinuo:

body{
   background: #fff;
   color: #000;
   font-size: 2em;
}
a {
   text-decoration: none;
}
a:link{
   color: #00c;
   border-bottom: 1px solid #00c;
}
a:visited{
   color: #6D006D;
   border-bottom: 1px dotted #6D006D;
}
a:focus{
   color: #c00;
   border-bottom: 1px dashed #c00;
}
a:hover{
   color: #c00;
   border-bottom: 1px dashed #c00;
}
a:active{
   color: #c00;
   border-bottom: 1px solid #c00;
   font-style: italic;
}

De este modo, conseguiremos un resultado parecido al de la figura 28:

Ejemplo de representación donde se ve cómo los bordes sirven para diferenciar los estados del enlace.Figura 28. Cambiar el estilo de borde para cada estado de enlace

Este método, si se aceptan “focus” y “hover” como estados con estilos equivalentes, provoca que los estados de enlace se distingan con más factores además del color. Incluso si tuvierais que ver estos enlaces en blanco y negro, podríais identificar los diferentes estados de enlace tal como se muestra la figura 29:

El mismo ejemplo todo en negro para resaltar las diferencias del bordeFigura 29. Ahora los estados de enlace pueden distinguirse aunque estén en blanco y negro.

Algunos sitios web utilizan iconos y símbolos para añadir información sobre los enlaces. Por ejemplo, algunas páginas utilizan una flecha para indicar que un enlace conduce a un sitio externo, o utilizan una marca de aprobado para indicar que el enlace ya se ha visitado.

Estos efectos son muy fáciles de aplicar con imágenes de fondo, como se muestra en la figura 30:

Ejemplo de representación de enlaces con iconosFigura 30. Ejemplo de enlaces con iconos distintivos

Para añadir un icono de flecha a los enlaces externos, podéis añadir la clase external a la etiqueta del enlace (link):

<a href="http://example.com/" class="external">external link</a>

Después, en vuestra hoja de estilo, aplicad una imagen de fondo para esta clase sin olvidaros añadir el relleno para que quepa la imagen:

a.external {
   background: #fff url("icon-external.gif") center right no-repeat;
   padding-right: 30px;
}

Este ejemplo aplicaría el icono a todos los casos de enlaces visitados, a todos los estados. Si quisierais limitar el icono sólo a los enlaces externos no visitados, podéis combinar las clases y las pseudoclases del estado de enlace en el selector.

a.external:link{
   background: #fff url("icon-external.gif") center right no-repeat;
   padding-right: 30px;
}

Combinar clases y estados proporciona una amplia gama de posibilidades creativas para aplicar a los enlaces. Mientras recordéis comprobar los colores, el único límite a partir de aquí es vuestra imaginación.

Para demostrar una manera de combinar las listas y los enlaces, el zip de ejemplos incluye un submenú desplegable de navegación sencillo, como se ve en la figura 31. Los submenús desplegables son un sistema de navegación muy habitual.

Captura de pantalla de la sublista desplegable de ejemplo.Figura 31. Captura de pantalla del submenú de ejemplo

Ved los ejemplos en:Simple flyout navigation menu

Resumen

Para un diseñador web es esencial saber muy bien cómo aplicar estilos a listas y enlaces porque se utilizan por todas partes. Se suelen combinar para crear la navegación por el sitio, y un estilo claro de los enlaces es vital para que un sitio web sea fácil de utilizar. Unos estilos de enlaces mal hechos pueden confundir mucho a todo el mundo e incluso pueden hacer que determinadas personas no puedan utilizar el sitio.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. ¿Cómo se pueden elegir los estilos básicos de las listas, como por ejemplo picos cuadrados o números romanos, en una lista ordenada?
  2. ¿Qué es un sprite de imagen y para qué se puede utilizar?
  3. ¿Por qué el contraste de los colores es importante y cómo se puede garantizar que los colores de los enlaces sean de colores adecuados?
  4. ¿Cuál es el orden correcto para aplicar estilos a cada estado de enlace?

Bibliografía

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC: Imágenes de fondo en CSS

Logo de Mosaic

CSS
Imágenes de fondo en CSS

31. Imágenes de fondo en CSS

Nicole Sullivan. 26 de septiembre del 2008 Publicado en: repetir, adjuntar, sprite, prueba, posición

¡Admitidlo! Desde el primer apartado de este curso os habéis estado muriendo de ganas de aprender cómo conseguir que vuestra web quede impresionante y fabulosa. ¡Incluso es posible que os hayáis saltado los otros apartados para llegar a éste directamente!

Las imágenes de fondo sirven para hacer que vuestro sitio quede atractivo, pero quizá os sorprenda saber que están muy relacionadas con los conceptos fundamentales que ya habéis aprendido.

Tal como ya habéis visto en este curso, uno de los cambios más importantes que aporta el CSS es la capacidad para separar la presentación, o el aspecto de las cosas, de la semántica, o el significado de las cosas. La imagen de fondo de CSS es una de las herramientas más importantes que podéis utilizar porque permite aplicar imágenes decorativas en determinadas partes de vuestro HTML sin añadir peso adicional al HTML. Antes, los creadores web (¡como vosotros!) se veían obligados a llenar el código de etiquetas img.

El CSS, y sobre todo la propiedad background (fondo), hacen que vuestro HTML deje de estar abarrotado de elementos presentacionales. De esta manera, rediseñar un sitio o realizar otras transiciones de la vida de una página web creada con métodos modernos puede hacerse de una manera mucho más sencilla. Podréis actualizar toda la página cambiando únicamente la hoja de estilo en lugar de tener que grabar todas y cada una de las páginas HTML. Dependiendo del tamaño del sitio, esto puede ahorraros una gran cantidad de tiempo.

En este apartado veremos los conceptos básicos del funcionamiento de las imágenes de fondo de CSS, incluida la aplicación de una imagen de fondo a través de CSS, cómo ajustar su colocación, repetirla en vertical u horizontal y combinar imágenes de fondo con sprites CSS para mejorar el rendimiento del sitio.

Los contenidos de este apartado son los siguientes:

¿Cómo funciona?

El CSS para fondo se divide en varias propiedades. Utilizando estas propiedades, como position y color, podéis empezar a controlar el aspecto de vuestra página. En este apartado, repasaremos detalladamente las imágenes de fondo de CSS y crearemos un mensaje de alerta como ejemplo paso a paso.

Antes de nada, debemos saber más cosas sobre las diferentes propiedades que podemos utilizar.

31.1.1. Propiedades de fondo

Propiedad Definición Descripción
Tabla 1. Propiedades de fondo
background-color Establece el color de fondo del elemento de HTML. Hay varias maneras de indicar el background-color o color de fondo, como incluir valores y palabras clave RGB. La mayoría de la gente utiliza la notación hexadecimal, un símbolo de almohadilla o barra (#) seguido de seis caracteres. La primera pareja indica los niveles rojos y la segunda y la tercera indican los niveles verde y azul respectivamente: #RRGGBB.

Hay muchas herramientas para elegir colores que pueden ayudaros a encontrar la notación hexadecimal de un color determinado. El rojo puro, por ejemplo, sería el #FF0000.

La herramienta Selector de color de Photoshop proporciona el valor hexadecimal del color.

Los valores válidos incluyen un valor de color, transparento inherit.

image Indica la ruta o URL de la imagen de fondo. Establece la background-image o imagen de fondo mostrando al navegador dónde encontrar la imagen utilizando la URL. Por ejemplo: url(alert.png). Fijaos en que la ruta va precedida de la palabra clave url y entre paréntesis. Esta sintaxis es importante para que el navegador entienda que queréis indicar una ubicación.

Los valores válidos incluyen una URL, none o inherit.

repeat Indica en qué dirección se debe repetir la imagen de fondo. Las imágenes pueden repetirse en vertical u horizontal, o en ambas direcciones, para llenar toda la anchura o altura de un elemento HTML. Utilizad background-repeat para indicar al navegador que repita una imagen de fondo.

Los valores válidos son repeat, repeat-x, repeat-y y no-repeat.

attachment Define el comportamiento de la imagen de fondo cuando el usuario se desplaza. Las imágenes pueden desplazarse con el contenido o quedarse fijas en la pantalla de visualización. Los valores válidos son: scroll, fixed e inherit.
position Indica al navegador dónde colocar la imagen de fondo. Las imágenes pueden mostrarse en cualquier punto dentro de los bordes del elemento de HTML en el que estén aplicadas. Utilizad background-position para colocar las imágenes con precisión o para crear efectos visuales y capas.

Hay muchas maneras útiles de indicar la posición, las palabras clave y los valores numéricos del fondo. Las palabras clave (como top y bottom) son muy útiles y fáciles de leer. Los valores en píxeles son muy precisos pero no se adaptan a los cambios de altura y anchura. Los valores de píxeles negativos son muy útiles cuando se utilizan spritesCSS, como veremos más adelante.

Cuando se utilizan sprites y píxeles, el punto inicial siempre es el extremo superior izquierdo del elemento HTML, aunque la manera de funcionar de la colocación de la imagen es algo diferente con píxeles o con porcentajes. Los píxeles siempre mueven la imagen un número concreto de píxeles hacia la parte inferior derecha de la caja contenedora (o hacia la parte superior izquierda si son valores negativos), sea cual sea el tamaño de la imagen y de la caja contenedora. Los porcentajes, en cambio, mueven la imagen un porcentaje de la diferencia entre la caja contenedora y el tamaño de la imagen. Si la imagen y la caja contenedora son igual de grandes, los porcentajes no moverán la imagen en absoluto.

Los valores válidos incluyen length (normalmente en píxeles), percentage (de la anchura del elemento) y las palabras clave top, right, bottom, left y center. Fijaos en que center se puede utilizar para indicar un centro vertical u horizontal. Fijaos también en que podéis mezclar porcentajes y píxeles en las reglas, pero no palabras clave y píxeles ni palabras clave y porcentajes.

background La propiedad abreviada que se puede utilizar para describir todo el resto de propiedades de una línea. Las propiedades abreviadas son realmente prácticas. La mayoría de los desarrolladores las utilizan para mantener el CSS lo más sencillo posible y para agrupar propiedades relacionadas. Se puede escribir una regla general utilizando la abreviación y después anularla según sea necesario con propiedades específicas.

Las propiedades siempre se deberían indicar en el mismo orden para que los navegadores puedan interpretar fácilmente los estilos.

  1. color
  2. url
  3. repeat
  4. attachment (no se utiliza casi nunca, se puede omitir)
  5. horizontal-position
  6. vertical-position

Un ejemplo de esta abreviación con todas las propiedades utilizadas (excepto attachment):

background: green url(logo.gif) no repeat left top;.

31.2. Crear un mensaje de alerta

Ahora que ya hemos visto la sintaxis básica necesaria, os enseñaremos cómo crear un ejemplo completo de caja de alerta que servirá para demostrar todos los aspectos de las imágenes de fondo.

31.2.1. El diseño

Pongamos por caso que un diseñador gráfico os ha presentado un boceto visual del mensaje de alerta que queréis crear para vuestro sitio web. Fijaos en que la alerta tiene el fondo de color naranja claro para diferenciarlo de los párrafos que lo rodean. También tiene un icono de alerta a diez píxeles del extremo superior izquierdo.

Fijaos en que el boceto sólo tiene una línea de texto, pero que en otros casos puede tener más. Uno de los rasgos más importantes del desarrollador web es prever cómo acabará evolucionando un diseño. En parte, respetar la visión artística de un sitio supone pensar en la consistencia desde que se inicia hasta que se rediseña. Por lo tanto, el mensaje de alerta podría incluir más de una línea de texto o incluso múltiples párrafos, listas u otros elementos HTML. Deberíais intentar ser tan agnósticos en cuestión de elementos como os sea posible. De esta manera, aumentarán las probabilidades de reutilización del código y el sitio web tendrá la máxima velocidad y eficiencia. El boceto es el que se ve en la figura 1:

El texto de alerta aparece sobre un fondo naranja claro. A la izquierda aparece un signo de exclamación sobre un triángulo naranjaFigura 1. El boceto del diseñador gráfico de la caja de alerta

El diseñador también os ha proporcionado el icono que debéis utilizar, como se muestra en la figura 2:

Signo de exclamación sobre un triángulo naranja.Figura 2. El icono de alerta

31.2.2. El código

Basándoos en todo lo que habéis aprendido de los fondos de CSS en la primera parte de este apartado, ya podéis ir pensando en cómo crear este mensaje de aviso. Os animamos a que lo probéis ahora mismo y que después comparéis el resultado con nuestro ejemplo.

Muy bien, ¿ya lo habéis probado? Vayamos paso a paso. Haced pruebas con el código, aumentad o reducid los valores e intentad probar alternativas. También puede ser que queráis ir siguiendo todos los pasos escribiendo cada línea nueva de código en una herramienta como por ejemplo Opera Dragonfly o Firebug para poder ir viendo los resultados de cada paso inmediatamente.

Nota

En la versión web, cada copia de pantalla tiene un enlace a ejemplos de código para que podáis comprobar la fuente en cada paso.

Crear el vínculo o selector de CSS

Para empezar, debéis crear una clase alert para que el CSS se pueda enlazar con él. Cread los ficheros esqueleto nuevos de CSS y HTML, enlazad el CSS en el fichero HTML y añadidle el código siguiente:

El CSS:

.alert { ... }

El HTML:

<p class="alert">
   <strong>Alert!</strong> The text of our alert message goes here.
</p>

En este caso, hemos aplicado estilos a la alerta con un class y no con un id porque podría tener más de una alerta en la página, por ejemplo, en un elemento de formulario con varios errores. El CSS se debe hacer lo más flexible que se pueda y limitarlo todo a fin de que se corresponda al diseño cuando se crea el HTML.

Muy bien, pues ya tenéis unas bases, pero todavía parece un párrafo normal porque todavía no le habéis añadido ningún estilo. Hagámoslo.

Nota

Hemos decidido intencionadamente no limitar la clase alert a párrafos; las cajas de alerta también podrían contener fácilmente otros elementos. Deberíais dejar que el CSS tenga la máxima flexibilidad posible.

Añadir el color de fondo

Ya habéis aprendido cómo utilizar el color de fondo con los estilos de texto. Los mismos principios se aplican a cualquier elemento HTML y pueden combinarse con imágenes de fondo para crear efectos visuales. Si el color de fondo no se ha establecido ni heredado, será transparente por defecto.

Ved también

Podéis ver cómo utilizar el color de fondo con los estilos de texto en el apartado 29 de este módulo.

Añadimos el color de fondo naranja claro a la caja de alerta para que resalte entre el texto que tiene alrededor. No debería ser demasiado oscuro porque es importante que mantengáis un nivel razonable de contraste entre el texto y el color de fondo. Añadid la propiedad siguiente a vuestra regla de CSS:

.alert{background-color: #FFFFCC;}

Ahora la caja de alerta se parecerá más a la figura 3:

Texto sobre fondo naranja claroFigura 3. Una caja de alerta con color de fondo añadido

Archivo fuente:Figura 3

Aplicar la imagen de fondo

Pasemos a añadir la imagen. La ruta a la imagen de fondo debe estar entre url(), como se observa en el código siguiente. Añadid la línea resaltada a la regla de CSS:

.alert{
   background-color: #FFFFCC;
   background-image: url(alert.png);
}

Ahora la caja de alerta quedará como en la figura 4:

Texto sobre una colección de triángulos naranja. Muy poco legibleFigura 4. Se ha añadido la imagen de fondo, pero la repetición queda horrible.

Archivo fuente:Figura 4

Recordad que cada propiedad de fondo tiene un valor por defecto que se le aplicará si no especificáis ningún valor. Seguramente ya os habréis dado cuenta de que la imagen se repite por toda la alerta como si fueran las teselas de un mosaico. ¿Cuál es la conclusión de todo esto? Las imágenes de fondo están configuradas por defecto para repetirse tanto horizontal como verticalmente. Los fondos que se repiten son especialmente útiles para gradaciones de colores y patrones que llenan la pantalla o un elemento de HTML en concreto, pero en este caso no es lo que queremos.

Controlar la repetición del fondo

Una pared de azulejos, con dos flechadas dibujadas, una vertical y otra horizontalFigura 5. De manera parecida a nuestra imagen de fondo, estas teselas se repiten tanto en horizontal como en vertical.

Leer especificaciones puede ser una tarea intimidante, pero la especificación es muy buen lugar para averiguar cómo se supone que funciona el CSS antes de pasar ver con detalle la miríada de diferencias existentes entre navegadores. Echadle un vistazo a la parte de los colores y los fondos de la especificación del W3C e intentad encontrar la palabra clave para utilizarlos cuando no queráis que se repita una imagen de fondo. A continuación, la utilizaremos en un ejemplo.

¿Ya la habéis encontrado? Fijaos en que existe una sección para cada propiedad de fondo, background-repeat incluida. En Value veréis todas las opciones posibles, incluyendo repeat, repeat-x, repeat-y, no-repeat e inherit. Por defecto, las imágenes de fondo (iniciales) se repiten. No se especifica ninguna dirección, de modo que la imagen se repetirá tanto horizontal como verticalmente. Seguramente ya os habréis imaginado que no-repeat (sin repetición) es el valor que necesitáis para impedir que la imagen se repita en cualquier dirección. Añadid la siguiente línea resaltada a la regla de CSS:

.alert{
   background-color: #FFFFCC;
   background-image: url(alert.png);
   background-repeat: no-repeat;
}

Ahora la caja de alerta quedará como en la figura 6:

Ahora el triángulo naranja aparece una única vez.Figura 6. La caja de alerta con una única copia de la imagen de fondo (sin repeticiones)

Archivo fuente:Figura 6

Además, también podéis repetir en ambas direcciones (como si fueran teselas de un mosaico) o en ninguna. Las gradaciones suelen repetirse horizontal o verticalmente (podéis ver la figura 7). No es necesario que sepáis el tamaño del elemento HTML; sólo debéis cortar un trozo de la gradación y hacer que se repita en la dirección que queráis; ya sea “x” para horizontal o “y” para vertical. Los patrones a menudo se repiten en ambas direcciones y los iconos normalmente no se repiten. Más adelante examinaréis background-repeat con más detenimiento en otro ejemplo.

Pared de azulejos. Una línea horizontal de ellos tiene un color diferente al resto y está remarcada con una flecha horizontal.Figura 7. Las teselas o baldosas de este ejemplo sólo se repiten en horizontal.

Fijaos ahora en un ejemplo práctico de mi web, observad la figura 8:

Una imagen muy pequeña se repite horizontalmente para crear un patrón de tres colores a lo largo de la parte superior de mi sitio web.Figura 8. Un ejemplo de imagen repetida de mi web

Archivo fuente:Figura 8

El CSS que utilizamos para añadir este efecto decorativo es relativamente sencillo. Hicimos que el fondo se repitiera horizontalmente con repeat-x:

body{background-repeat:
repeat-x}

Attachment

attachment permite especificar cómo funciona el fondo cuando el usuario desplaza la página hacia abajo. El funcionamiento por defecto es scroll, que hace que la imagen de fondo se desplace junto con el contenido.

Por otra parte, si se establece background-attachment en fixed, el elemento se queda fijo en la ventana del navegador, de modo que no se mueve cuando se desplaza el contenido de dentro del elemento en el que está adjunto. Esto crea algunos efectos extraños que sólo serán visibles cuando desplacéis la página por encima el elemento de HTML en el que está adjunto. La W3C lo utiliza para señalar el estado de las especificaciones, como por ejemplo la imagen de la “W3C Candidate Recommendation” de arriba del todo a la izquierda en sus especificaciones. Desplazad la página hacia abajo y veréis que la imagen se queda fija en el rincón superior izquierdo. Está adjunta al elemento body, de manera que siempre es visible.

Este paso no tendrá ningún efecto en nuestra visualización porque los navegadores establecen por defecto que las imágenes de fondo se desplacen, pero añadámoslo igualmente al código para que podáis ver cómo se utiliza la propiedad. Añadid la línea resaltada a la regla de CSS:

.alert{
   background-color: #FFFFCC;
   background-image: url(alert.png);
   background-repeat: no-repeat;
   background-attachment: scroll;
}

Como se observa en la figura 9, la visualización de la caja de alerta no es muy diferente de como era antes.

El aspecto de la alerta no ha cambiado.Figura 9. No ha cambiado mucho, aún.

Archivo fuente:Figura 9

Colocar la imagen

La propiedad de colocación permite disponer la imagen de fondo exactamente donde queráis ponerla, tanto horizontal como verticalmente, en el elemento de HTML. Esta propiedad acepta palabras clave y valores como: top, center, right, 100%, -10%, 50px y -30 em.

En la figura 10 se muestran los valores que pueden utilizarse para colocar las imágenes de fondo en diferentes posiciones.

Ejemplos de posibles posiciones del fondo. En un rectángulo de 350 por 90 píxeles vemos ejemplos de imágenes posicionadas con su código. Arriba a la izquierda con left, top, o con 0, 0; arriba centrado horizontalmente con center, top, o con 50%, 0; arriba a la derecha con right, top, o con 100%, 0; centrado vericalmente, a la izquierda con left, center, o con 0, 50%; centrado con center, center, o 50%, 50%; centrado verticalmente y a la derecha con right, center, o 100%, 50%; abajo a la izquierda con left, bottom, o 0, 100%; centrado horizontalmente y abajo con center, bottom, o 50%, 100%. -50px, 50px hace que el centro de la imagen esté a 60 píxeles del margen superior y que sobresalga 25 píxeles por la izquierda. 350px, 60px sitúa el centro de la imagen a 350 píxeles del borde izquierdo y 60 píxeles por debajo del borde superior; finalmente, 350px, -60 px sitúa el centro de la imagen 60 píxeles por encima del borde superior, 350 píxeles a la derecha del borde izquierdo.Figura 10. Varios ejemplos de posición del fondo mediante palabras clave, porcentajes y píxeles

Pasemos ahora a colocar la imagen de fondo: queréis que quede en el extremo superior izquierdo, pero sin tocar los lados, de manera que necesitáis establecer una distancia de 10 píxeles tanto desde el límite superior como desde el izquierdo. Esto se puede hacer añadiendo la siguiente línea resaltada en la regla CSS. Hacedlo ahora.

.alert{
   background-color: #FFFFCC;
   background-image: url(alert.png);
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: 10px 10px;
}

El primer valor es la distancia horizontal y el segundo, la vertical. En este caso, son el mismo. Ahora la caja de alerta quedará como en la figura 11:

Ahora la posición del triángulo se ajusta a lo explicado en el texto.Figura 11. Hemos utilizado la colocación para situar la imagen de fondo.

Archivo fuente:Figura 11

Consejo

Utilizad o bien sólo palabras clave o bien sólo valores numéricos, ya que los navegadores antiguos puede que ignoren vuestra declaración si los utilizáis los dos a la vez. Si utilizáis right y bottom, conseguiréis lo mismo que 100% horizontal y verticalmente.

Utilizar la abreviación para combinarlo todo como un profesional

Como ya habéis podido observar, algunas propiedades de CSS pueden combinarse. Por ejemplo, el fondo y todas las subpropiedades relacionadas. El código de CSS que hemos escrito hasta ahora se puede reescribir abreviadamente así:

.alert{background: #FFFFCC url(alert.png) no-repeat scroll 10px 10px;}

Consejo

Cuando combinéis subpropiedades de background, poned siempre las propiedades en el orden siguiente. Es importante tanto para la compatibilidad de todos los navegadores, como para la organización y el mantenimiento de la hoja de estilo:

  1. color
  2. image
  3. repeat
  4. attachment
  5. posició horizontal
  6. posició vertical

Intentad sustituir el CSS antiguo con la abreviación anterior, y vuestro ejemplo os debería quedar exactamente igual. Podéis ver la figura 12.

La imagen sigue siendo exactamente igual que en el ejemplo anterior.Figura 12. ¡La abreviación funciona de maravilla!

Archivo fuente:Figura 12

31.2.3. Hacer pruebas con el código

La mejor manera de recordar todos los detalles de CSS es probar las opciones uno mismo. Intentad cambiar algunas de las propiedades del ejemplo y ved cómo queda. Estableced la background-position a100% 100%, y fijaos en que da el mismo resultado que utilizar las palabras clave de right y bottom. ¿Y si lo cambiarais a -5px 0? ¿Por qué creéis que ahora no podéis ver parte de la imagen?

31.2.4. Comprobar la calidad

Hacer pruebas es extremadamente importante para ofrecer una buena experiencia de usuario. El hecho de que el sitio funcione bien en vuestro equipo con vuestra configuración específica no quiere decir que se vea bien en todos los ordenadores. Cuando comprobéis la caja de alerta, deberíais seguir estos pasos básicos mínimos:

  • Aumentad o reducid la cantidad de texto en el interior de la alerta.
  • Aumentad el tamaño del texto de vuestro navegador como mínimo dos niveles. ¿Habría sido mejor utilizar ems para colocar la imagen? ¿Y qué sucede cuando aumentáis el tamaño del texto?
  • Aplicad la alerta class a otros elementos como div, p, ul, strong o em. ¿Qué necesitáis cambiar para hacer que la clase sea agnóstica?
  • Incluid unos cuantos párrafos y una lista dentro del div de la alerta. ¿Aún funciona el código?
  • Verificad la alerta visualmente en los navegadores de grado 1 (también llamado grado A). Mi consejo es que escribáis para buenos navegadores y adaptéis para Internet Explorer después de que funcione el código.

Realizar una serie rigurosa de pruebas forma parte del proceso de aprender a escribir CSS. Si vais con mucho cuidado a la hora de aprender, acabaréis yendo muy rápido.

31.3. Sprites

Los usuarios lo quieren todo. Quieren que vuestro sitio sea atractivo, interactivo y, encima, rápido, pero incluir grandes cantidades de imágenes de fondo de CSS puede ralentizar mucho la web, ya que cuantas más peticiones HTTP hagáis, más lento será el sitio (una petición HTTP es cuando el ordenador está accediendo a una página web y necesita pedir al servidor que le envíe otro valor que compone el sitio, como un fichero o una imagen de CSS; cada petición adicional significa más tiempo de carga del sitio). Con el fin de superar esta limitación, podéis combinar iconos relacionados para formar una sola imagen, los llamados sprites CSS. La propiedad de background-position permite colocar la imagen en la posición adecuada de manera que los iconos se vean a través de la ventana del elemento HTML donde están adjuntos los sprites CSS.

En la figura 13, por ejemplo, observaréis que para ver el icono de la Tierra a través de la ventana HTML debéis colocar la imagen utilizando left top. Para mover la posición de la imagen de manera que se vea el icono de alerta, la posición del fondo se debe cambiar a -80 px 0. El valor negativo horizontal hace que la imagen se desplace a la izquierda.

Tres imágenes. En la primera se combinan un icono con la Tierra con dos iconos más, uno que representa a dos personas y otro, un signo de advertencia. En la segunda imagen se resalta el icono de la Tierra. En la tercera imagen se aprecia un elemento CSS en el que sólo se ve el icono de la Tierra.Figura 13. Utilización de sprites CSS para reducir las peticiones de HTTP

Nota

Si utilizáis posiciones de fondo negativas, Safari repetirá la imagen aunque hayáis especificado no repeat. Esto hay que tenerlo en cuenta cuando empecéis a jugar con las imágenes de fondo para crear composiciones más complicadas.

31.3.1. Un ejemplo de sprite complejo e imagen de fondo

Fijémonos ahora en cómo se pueden utilizar los sprites CSS para conseguir buenos efectos. Imaginémonos que nuestro amigo diseñador nos ha enviado otro boceto. En este caso, se trata de una lista de enlaces a la página de destino de un blog. Conduce al perfil LinkedIn, la suscripción RSS, fotos Flickr y los enlaces favoritos del escritor del blog. Si nos fijamos en cada enlace, nos daremos cuenta de que hay una gradación de color que empieza siendo blanco hasta llegar al gris en la parte superior e inferior del enlace y, para acabar de complicarlo más, el diseñador nos ha pedido si podemos hacer que el fondo de cada enlace sea de color blanco neutro sin gradación cuando los visitantes pasen el cursor por encima; podéis ver la figura 14.

La imagen descrita en el párrafo anteriorFigura 14. El boceto del nuevo diseño

Los logos podrían incluirse utilizando elementos img en el etiquetado, pero utilizar sprites CSS es mucho más práctico, porque como sólo hay que cargar una imagen (y no cuatro), los sprites se cargan más deprisa, lo que simplifica el HTML y reduce la cantidad de etiquetado necesario.

Crear el sprite

El primer paso es recortar los cuatro logos y crear el conjunto de sprites como en la figura 15.

Sprites de los cuatro logotipos mencionados, LinkedIn, RSS, Flickr y DeliciousFigura 15. El conjunto de sprites

También hay que recortar un trozo de la gradación de un píxel de anchura. Para mejorar la visibilidad, hemos recortado un trozo ligeramente mayor, pero vosotros sólo necesitáis un píxel; podéis ver la figura 16.

Un recorte de unos pocos píxels de ancho del fondo de gradaciónFigura 16. El trozo de nuestro fondo de gradación

El HTML de la lista es una lista no ordenada de enlaces. Fijaos en los elementos span vacíos que hay en los enlaces. Es muy importante no tener una height y width fija en los elementos que contienen texto, porque al fin y al cabo no sabemos cómo será de grande el texto. ¿Qué sucedería si se tradujera el texto al alemán? Se pueden utilizar estos spans adicionales para mostrar los logos. Alternativamente, podéis decidir que no queréis tener etiquetado no semántico superfluo abarrotando el HTML. En este caso, necesitaréis utilizar un sprite mayor y dejar espacio blanco entre los iconos. Tened en cuenta que esto será más lento para los usuarios con conexiones lentas, sobre todo los que acceden a Internet por teléfono móvil. El código de la lista es el siguiente (añadidlo a una plantilla HTML):

<ul class="navigation">
   <li id="resume">
      <a href="#"><span></span>Resume</a>
   </li>
   <li id="rss">
      <a href="#"><span></span>RSS Feed</a>
   </li>
   <li id="photos">
      <a href="#"><span></span>Photos</a>
   </li>
   <li id="links">
      <a href="#"><span></span>Links</a>
   </li>
</ul>

El CSS utiliza las dos imágenes de fondo. Primero, fijaos en la gradación de la imagen de fondo. Tiene tres aspectos interesantes:

  1. El primero es que la imagen se repite horizontalmente (repeat-x). De esta manera podemos hacer que una imagen tan pequeña se extienda por toda la lista.
  2. El segundo es que la imagen está centrada verticalmente. El trozo redondo de la imagen debe quedar en medio del elemento de la lista, de modo que debéis utilizar una posición de fondo de left center.
  3. Para acabar, en el CSS hemos aplicado un color de fondo que es el mismo gris que el de nuestra imagen de gradación. Así, si el elemento se hace más grande, no quedará roto. Para saber más sobre esta técnica, recomendamos leer Bulletproof Web Design, de Dan Cederholm.

Añadid el siguiente CSS a un nuevo fichero CSS y enlazadlo al fichero HTML:

.navigation, .navigation li {
   margin:0;   
   padding:0;
}
.navigation li {
   border-top: 1px solid white;
   list-style-type:none
}
.navigation li a {
   background:
   #E2E2E2 url(sprite_gradient_bkg.jpg)
   repeat-x left center;
   padding:20px;
   display:block;
   font-family: Arial, Helvetica, sans-serif;
   color:#333;
   font-size:18px;
   text-decoration:none
}
/* hover effects */
.navigation li a:hover, .navigation li a:focus{
   background: transparent none;
}

La última línea significa que el elemento no debería tener color ni imagen de fondo cuando el usuario pase el ratón por encima o lo seleccione con el teclado. Puede que os estéis preguntando por qué hemos aplicado propiedades de fondo al enlace y no al elemento de la lista. La respuesta es que Internet Explorer 6 y las versiones anteriores no reconocen pseudoclases como hover en elementos que no sean enlaces. Hemos hecho el ajuste para adaptarnos a esta limitación.

A continuación, podéis crear el CSS para los logos pequeños. Como siempre, podéis empezar definiendo el caso más general para todos los elementos span de vuestro módulo de navegación. Es aquí donde definís la imagen que se utilizará en todos los spans, la repetición y la posición del fondo (cada uno es diferente, de manera que utilizaremos la primera). Para esta regla podéis utilizar la abreviación. Fijaos en que utilizamos comentarios de CSS para dividir secciones del código en trozos más prácticos. Añadid el siguiente código al final del fichero CSS:

/* caso general */
.navigation span {
   background:url(sprite_logo.gif) no-repeat left top;
   height:15px;
   width: 15px;
   margin-right:20px;
   display:-moz-inline-box;
   display:inline-block;
   vertical-align: middle;
}

Una vez bien definido el caso general, ya podéis pasar a definir las excepciones, o lo que tiene de diferente cada logo en concreto. En este caso, el único CSS que cambia es la background-position. Cada elemento de la lista respectivo necesita tener la imagen 15 píxeles más hacia la izquierda porque cada logo tiene 15 píxeles de anchura. Añadid el siguiente código al final del fichero CSS:

/* exceptions */
#rss span {
   background-position: -15px 0;
}
#photos span {
   background-position: -30px 0;
}
#links span {
   background-position: -45px 0;
}

Este ejemplo puede intimidar un poco al principio, pero centraos en las imágenes de fondo. En este caso hemos utilizado valores de píxel negativos para mover la imagen de fondo hacia la izquierda de manera que se vea la parte relevante de la imagen. Los valores positivos mueven la imagen de fondo hacia abajo y hacia la derecha, mientras que los negativos mueven la imagen hacia arriba y hacia la izquierda.

Haced pruebas con los valores de posición de la imagen de fondo con el ejemplo acabado para entender mejor cómo ajustar la colocación de los sprites.

Ved el ejemplo acabado en:Sprite example

Resumen

Ahora ya deberíais entender las imágenes de fondo de CSS y, además, ya estaréis adquiriendo práctica en leer las especificaciones, de manera que si tenéis alguna duda sobre alguna propiedad en particular, deberíais saber cómo consultarla. En este apartado hemos hablado del color de fondo, la imagen, la repetición, la adjunción y la posición. También habéis aprendido por qué los desarrolladores utilizan spritesde CSS y cómo utilizar esta técnica avanzada.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. Un párrafo tiene unas dimensiones de 40 píxeles por 180 píxeles y la imagen de fondo es de 60 píxeles por 200 píxeles. ¿Veréis toda la imagen o sólo una parte? ¿Por qué?
  2. Debéis hacer que una imagen quede colocada en el extremo inferior izquierdo del elementoblockquote. Llenad los espacios con los valores correctos.blockquote{background: yellow url(quote.png) no repeat scroll ____ ____;}
  3. Pongamos por caso que queréis que a cada h2 de vuestro documento con una class de “pregunta” se le aplique un patrón de gradación. ¿Utilizaríais repeat-x, repeat-y, no-repeat o repeat para conseguir un resultado parecido al ejemplo siguiente? ¿Por qué?
    Se aprecia un patrón de gradación, de un color dorado intenso en la parte superior, y dorado suave en la inferior.
  4. ¿Cuál sería la posición del fondo del ejemplo de la pregunta 3? ¿Cómo podríais utilizar un color de fondo de manera creativa para garantizar que el fondo pueda ampliarse a cualquier altura? ¿Por qué es esto importante?
  5. ¿Qué abreviación podéis utilizar para eliminar todas las propiedades de fondo?
  6. ¿Para qué sirven los sprites CSS?

Lecturas complementarias

Créditos de las imágenes

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC:El modelo de composición de CSS: cajas, bordes, márgenes, relleno

Logo de Mosaic

CSS
El modelo de composición de CSS: cajas, bordes, márgenes, relleno

30. El modelo de composición de CSS: cajas, bordes, márgenes, relleno

Ben Henick. 26 de septiembre del 2008 Publicado en: desbordamiento, abreviamiento, modelo, flotante, caja.

A primera vista, el modelo de composición de CSS es muy sencillo. Las cajas, los bordes y los márgenes son elementos bastante simples y la sintaxis de CSS ofrece una manera fácil de describir sus características.

Sin embargo, los motores de representación de los navegadores siguen una lista de reglas descritas en la Recomendación CSS y unas cuantas propias. Por esta razón, hay muchos detalles que debemos comprender antes de poder añadir técnicas avanzadas al repertorio de un especialista en estilos.

En este apartado se presentan las propiedades de CSS que manipulan la composición de los elementos HTML como los bordes, los márgenes y muchos más. También se tratan algunas de las reglas mencionadas antes. En próximos apartados se hablará de la disposición avanzada de columnas y las técnicas de parrilla, y se tratará con más detalle la composición de los formularios, los elementos flotantes, la distancia y el posicionamiento.

Nota

A lo largo de todo el apartado encontraréis muchos ejemplos de código enlazados para demostrar las técnicas de las que se habla, pero si queréis trabajar con el código en vuestro ordenador, podéis descargaros todos los ejemplos de código.

Descargad los ejemplos en:article30_examples.zip

Los contenidos de este apartado son los siguientes:

30.1. Cambiar la composición: márgenes, bordes y relleno en CSS

Muchos elementos de HTML, como los elementos div y los títulos, se representan por defecto de manera que ocupen todo el ancho del lienzo del navegador y fuercen un salto de línea terminal, de modo que una serie de estos elementos se representaría como una pila de principio a fin sobre el lienzo del documento.

Sin embargo, los elementos de HTML y los estilos que el navegador suele asignarles no son adecuados para la gama completa de casos de uso que se pide a los desarrolladores que tengan en cuenta cuando hacen su trabajo. El modo como CSS y HTML se combinan se ha ajustado a una relación de “llenar los agujeros”, de manera que las class e id puedan añadir significado semántico al etiquetado mientras que las reglas de hoja de estilo pueden cambiar la composición y la presentación del contenido de manera precisa, quizá incluso cancelando gran parte de los estilos predeterminados del navegador.

El control cuidado del espacio en blanco es una de las herramientas más importantes del diseñador y, según el autor de estas líneas, la más importante de todas. No obstante, el grado de control del espacio en blanco que aporta un valor de producción elevado al diseño de un sitio no está presente en las hojas de estilo predeterminadas de los navegadores, lo que significa que los especialistas en estilos suelen utilizar a menudo los márgenes, los bordes, el relleno y otras propiedades de CSS que se explican en este apartado.

Los márgenes (margin), los bordes (border) y el relleno (padding) se disponen tal como se muestra en la figura 1.

Vemos un texto, rodeado por dos cajas. La primera caja es el borde, y la separación entre texto y borde es el relleno. La segunda caja es el margen.Figura 1. Representación explícita de las diferentes partes de una caja de elementos, con las respectivas etiquetas de las propiedades de CSS pertinentes

30.1.1. Colocar espacio en blanco en torno a un elemento: las propiedades margin-top, margin-right,margin-bottom, margin-left y margin

Los márgenes pueden especificarse de manera individual o en una regla abreviada. Además, la regla abreviada sigue permitiendo controlar cada uno de los bordes que rodean un objeto. Los valores válidos suelen especificarse en unidades px o em (píxeles o ems). En las hojas de estilo específicas de impresión pueden utilizarse las unidades in, cm, o pt (pulgadas, centímetros o puntos).

En todos los casos, % (porcentaje) es un valor válido, pero se debe utilizar con cuidado porque estos valores se calculan como una proporción de la anchura del elemento padre, y una previsión no suficientemente precisa de valores podría tener consecuencias no deseadas. Esta dificultad se explica con más detalle cuando se habla del modelo de caja de CSS.

Ved también

Podéis ver la explicación del modelo de caja de CSS en el subapartado 29.2 de este módulo.

Exceptuando las imágenes, los elementos en línea carecen de márgenes y no aceptan valores de margen.

Ved también

En la tabla 2 que se muestra en el subapartado 30.4.1, hay una lista de los elementos en línea.

Márgenes automáticos

Dependiendo de las circunstancias, la provisión de un valor auto ordena al navegador que represente un margen según el valor proporcionado en su propia hoja de estilo. Sin embargo, cuando se aplica un margen así a un elemento con una anchura significativa, un margen auto provoca que todo el espacio disponible se represente como espacio en blanco.

Con la regla siguiente:

.narrowWaisted {
   width: 16.667em;
   margin: 1em auto 1em auto;
}

un elemento de bloque de la clase narrowWaisted (clase cintura estrecha) se centrará en medio del lienzo disponible.

También puede asignarse al margen derecho de un elemento aplicable un valor relativamente pequeño, mientras que al margen izquierdo se le asigna un valor auto.

Cuando se hace esto, un elemento así se representará casi pegado a la derecha.

Márgenes negativos

A todas las propiedades de márgenes se les pueden asignar valores negativos. En este caso, un margen adyacente puede ser “cancelado” a cualquier nivel. Si se aplica un valor lo suficientemente negativo a un elemento lo suficientemente grande, el elemento adyacente afectado puede acabar quedando por debajo del otro.

Como ejemplo, pongamos por caso los siguientes elementos sencillos div:

<div id="header"><h1>Lovely header</h1></div>
<div id="content"><p>Overlapping text is entirely unreadable</p></div>

Cuando se le aplican estilos con el CSS siguiente:

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }

se crea lo que se puede ver en la figura 2:

Figura 2. Los dos elementos de nuestro sencillo ejemplo. No tiene nada de especial.

Archivo fuente:Negativemargins1 example

Pero ahora viene la parte interesante. Ahora añadiremos un margen negativo bastante grande encima del elemento inferior mediante la regla siguiente:

#content {margin-top:-3em;}

Esto provoca el efecto visual de cambiar el elemento de manera que se superponga con el título tal como se puede ver en la figura 3.

Dos elementos sin márgenes negativos aplicadosFigura 3. Cuando se le aplica un margen negativo, el elemento inferior pasa arriba y se superpone con el título.

Archivo fuente:Negativemargins2 example

Colapso de los márgenes

En los casos en los que dos elementos de bloque adyacentes y parecidos comparten márgenes que son mayores que cero, sólo se aplicará el margen mayor de los dos. Por ejemplo, pongamos por caso la regla siguiente:

p {
   margin: 1em auto 1.5em auto;
}

Si un documento que incluya esta regla de estilo se representa de manera literal, el margen final entre los dos párrafos seguidos sería de 2.5 em, es decir, la suma del margen inferior del párrafo 1 (1,5 em) y el margen superior del párrafo 2 (1 em). No obstante, a causa de la aplicación de márgenes colapsados, el margen entre ellos es sólo de 1.5 em.

Las listas y títulos son peculiares entre los elementos de bloque, de manera que sus márgenes no se colapsarán sobre los márgenes de los demás elementos de bloque.

Demostración 1

En el apartado anterior, de aplicación de estilos al texto, se hizo la tipografía de la sección introductoria de una historia de F. Scott Fitzgerald con la mayoría de herramientas de CSS. De cara a la demostración de este apartado, se utiliza aquella misma página con algunos pequeños cambios (principalmente, la adición de un elemento contenedor en torno a todo el texto central). Los estilos del texto no cambian, pero se han eliminado los pocos estilos de composición que se habían aplicado a aquella demostración.

Para empezar, se añadirán márgenes a todos los elementos que los necesiten.

body { margin: 0; }
   #main { margin: 0 auto 0 auto; }
   h1 { margin: 0 0 1em 0; }
   .pullQuote { margin: auto 0 1em 1em; }
   p { margin: 0; }
   .attribution { margin: 0 0 1.5em 0; }

Archivo fuente de:Ejemplo con sólo el mínimo de estilos

Archivo fuente de:Hoja de estilo de inicio

Archivo fuente de:Ejemplo con márgenes nuevos en body, título, texto destacado, contenedor de documentos y párrafos

Archivo fuente de:Hoja de estilo de la demostración 1

30.1.2. Añadir un borde a un elemento: propiedades de borde

Hay una propiedad de border (borde) abreviada, pero sólo es útil cuando se quiere proporcionar un borde completo y consistente alrededor de los cuatro lados de un elemento. También es posible establecer el peso (anchura), estilo y color de cualquiera de los cuatro bordes de un elemento mediante cualquier combinación significativa de las propiedades siguientes:

  • border-width
  • border-style
  • border-color
  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color

Las propiedades border-width

Estas propiedades se comportan exactamente como sería de esperar: asignan peso explícito a uno o más bordes.

La propiedad abreviada border-width (anchura de borde) acepta valores con la misma notación que la propiedad abreviada de margin (margen), pero no acepta valores porcentuales. Puede ser que en el futuro debáis redactar una regla como la siguiente:

td {
   border-width: 1px 0 0 1px;
}

Las propiedades border-style

Ocho valores diferentes del estilo de borde CSS: dashed (con rayas), dotted (con puntos), doble (con doble línea continua), inset, groove, outset y ridge (con perfiles simulando profundidad) y solid (línea sólida continua)Figura 4. Los ocho estilos de borde más habituales

Las propiedades border-style (estilo de borde) suelen aceptar cualquiera de los valores siguientes:

  • dashed. La longitud de las secciones de línea y la cantidad de espacio en blanco entre ellas las determina el navegador.
  • dotted. La cantidad de espacio en blanco entre los puntos (que pueden tener cualquier forma con una proporción de 1) la determina el navegador.
  • double. La anchura proporcionada se dividirá en tercios y se asignará en el orden lleno-negativo-lleno.
  • groove. Se representará un outset inmediatamente dentro de y junto a un inset.
  • inset. Al borde se le aplicará una sombra para que parezca que el elemento al que se aplica está incrustado en el lienzo.
  • none. Equivalente a especificar una -width (anchura) de cero.
  • outset. Al borde se le aplicará una sombra para que parezca que el elemento al que se aplica sobresale del lienzo.
  • ridge. Se representará un inset inmediatamente dentro de y junto a un outset.
  • solid. El borde es una línea continua sin sombra.

Cuando se utiliza la propiedad abreviada border-style (estilo de borde), ésta acepta hasta cuatro valores que se aplican de la misma manera que los valores abreviados margin (margen).

La práctica de oscurecer un borde (en lugar de omitirlo) se controla con las propiedades -color.

Las propiedades border-color

Para terminar, es posible establecer cualquier color en cualquier borde concreto, tanto con una única propiedad como las que se acaban de enumerar, como con la propiedad abreviada border-color (color de borde).

Ved también

Podéis consultar la explicación de la propiedad abreviada de margin (margen) en el subapartado 27.4 para saber más detalles sobre los resultados de proporcionar menos de cuatro valores.

De la misma manera que background-color, border-color puede adoptar un valor de transparent. Esto puede ser útil para los casos límite que necesitan una composición consistente pero no un uso consistente de los bordes.

La propiedad abreviada border y sus cuatro primos, con más detalle

Al contrario que las distintas propiedades de borde -width, -style y -color, estas cinco propiedades permiten definir las tres características de los cuatro bordes de un objeto o de cualquier borde concreto en cualquier momento. Los valores abreviados de border (etc.) incluyen alguna o todas las propiedades de anchura, estilo y color que se aplican a un borde; la única limitación es que se debe hacer referencia o bien a un único lado cualquiera de un elemento o bien a los cuatro a la vez.

Tened en cuenta la siguiente regla de border:

#borderShorthandExample {
   border: 2px outset rgb(160,0,0);
   padding: .857em;
   background-color: rgb(255,224,224);
}

Un elemento sobre el que se haya aplicado la norma anterior, presentará exactamente este aspecto.

Cuando se omite un valor de una regla abreviada de border, el elemento representado mostrará un resultado por defecto:

  • La anchura del borde la determinará el navegador.
  • El estilo del borde será solid.
  • El color del borde será idéntico al color aplicado al elemento en cuestión.

Crear reglas: la razón de ser de cinco propiedades abreviadas de borde en vez de una sola

Las “reglas” que se mencionan aquí son líneas trazadas sobre una composición y no directrices que haya que seguir. Estas líneas mejoran el contraste entre un elemento y el espacio que tiene alrededor y, en la mayoría de los casos, contribuyen a crear la ilusión de profundidad en una composición. Este último resultado se ejemplifica por la existencia de los estilos de borde inset y outset.

Si bien estos mismos efectos pueden conseguirse colocando bordes en torno a los cuatro lados de un elemento, la habilidad para trazar líneas definidas con precisión en una composición permite al diseñador alcanzar un control considerable sobre los detalles.

¿…Y por qué tantas propiedades? Sólo son bordes, ¿no?

Cuando se crea una composición que exige mucha pericia de un experto en estilos, siempre existe la necesidad de tener en cuenta casos límite.

Ved también

Podéis ver los casos límite en el apartado 27 sobre los márgenes.

A causa del modo como se ejecutan los diseños de los sitios, os encontraréis muchos casos en los que algún elemento pueda llegar a tener propiedades estructurales parecidas a otros elementos de un documento pero que tenga requisitos de presentación diferentes. En estos casos, tiene todo el sentido del mundo escribir una regla para el caso más común y reglas adicionales para cada uno de los casos límite. Por este motivo, existen los valores auto (automático) e inherit (heredar): para utilizar un estilo predeterminado como caso límite.

En el caso de los bordes, los casos límite puede ser que requieran la modificación de una sola característica de un borde de un único lado de un elemento, y cuando se es lo bastante sabio para seguir el principio KISS, normalmente lo mejor es cambiar únicamente los detalles que sean estrictamente necesarios.

Ved también

Podéis ver el principio KISS en el subapartado 27.4 de este módulo.

Demostración 2

Determinadas secciones del documento deberían decorarse con reglas y bordes.

h1 { border-bottom: 1px solid rgb(153,153,153); }
.pullQuote { border: 1px solid rgb(153,153,153); }

Archivo fuente de:Ejemplo con una regla inferior en el título y un borde alrededor del texto destacado

Archivo fuente de:Hoja de estilo de la demostración 2

30.1.3. Cuando sólo con los márgenes no es suficiente: propiedades padding

Encontraréis elementos con colores de fondo de tonos secundarios o destacados que necesitan canales entre el contenido y los márgenes. También puede ser que necesitéis incluir espacio entre los bordes y el texto que hay cerca.

En estos casos y en muchos otros os serán muy útiles las propiedades padding (relleno), padding-top(relleno superior), padding-right (relleno derecha), padding-bottom (relleno inferior) y padding-left(relleno izquierda). Estas propiedades insertan espacio negativo entre los márgenes o bordes de un elemento y su contenido. Podéis ver la figura 1 anterior como claro ejemplo de la relación entre márgenes, bordes y relleno.

Ved también

Podéis ver la figura 1 en el subapartado 30.1 de este módulo.

Estas propiedades se comportan exactamente igual que las propiedades de margen pero con las excepciones siguientes:

  • Los valores auto son funcionalmente inútiles en referencias a las propiedades de relleno.
  • Los valores negativos de relleno son inválidos.
  • El relleno nunca se colapsa.
  • Los valores de margen no se aplican a los elementos en línea, pero los valores de relleno sí.

Ved también

Podéis ver las propiedades de margen en el subapartado 30.1 de este módulo.

Demostración 3

Los canales deberían aplicarse a los elementos a los que ya se han aplicado bordes previamente.

body { padding: 0; }
   h1 { padding: .5em 0 .5em 0; }
   .pullQuote { padding: .5em; }

Archivo fuente de:Ejemplo de inserción de canales adyacentes a los bordes previamente aplicados al título y al texto destacado

Archivo fuente de:Hoja de estilo de la demostración 3

30.2. Trabajar con la anchura y altura de los elementos

Pueden modificarse las dimensiones de la mayoría de los elementos.

Ved también

Anteriormente en el subapartado 30.1.1, cuando hablábamos de los márgenes auto, ya se ha demostrado que la mayoría de los elementos se pueden modificar.

Las propiedades CSS utilizadas para modificar las dimensiones de los elementos son: width, height, min-width, max-width, min-height y max-height. Estas propiedades pueden separarse de (o enlazarse a) las dimensiones del contenido de los elementos con la propiedad overflow.

También hay una propiedad clip (recorte) que esconde partes de un elemento dentro de los márgenes. Sin embargo, no hablaremos de ello en este apartado a causa de sus limitadas posibilidades de uso.

30.2.1. Conceptos básicos de width y height

En general, width y height producen exactamente los resultados que cabría esperar. No obstante, su uso implica algunas notas importantes.

  • width y height no pueden aplicarse a elementos inline hay varios elementos (como span,strong y em) que ignoran la aplicación de los valores width y height en circunstancias normales.

Ved también

Podéis ver una lista de los elementos que ignoran la aplicación de los valores width y height en el subapartado 30.3 de este módulo.

  • … excepto a las imágenes, a las que se les puede asignar width y height aunque sean elementos en línea. La Recomendación CSS 2.1 habla de las imágenes como elementos “sustituidos”, lo que significa que los navegadores siempre deberían tratarlas como si tuvieran dimensiones estáticas. Por este motivo, estas dimensiones pueden modificarse arbitrariamente.
  • width y height sólo son dos de las propiedades que pueden afectar a las dimensiones funcionales de un elemento. Por lo tanto, es fácil encontrarse en situaciones en las que un elemento sea demasiado pequeño (normalmente demasiado estrecho) para contener el contenido como debería, lo que provoca errores.

Ved también

Podéis ver cómo las propiedades pueden afectar a las dimensiones funcionales de un elemento en el subapartado 30.3 de este módulo, que trata sobre el modelo de cajas de CSS.

  • Los errores de representación de Microsoft Internet Explorer (IE) hacen necesario especificar las parejas de valor/propiedad de width o height para algunos elementos. Hay algunas peculiaridades del motor de representación de IE que sólo pueden resolverse con la fuerza bruta. La mayoría de estas peculiaridades son bien conocidas y se eliminarán de IE 8, pero hasta que esta versión sustituya a sus predecesoras en el mercado, este problema seguirá siendo un caso de prueba inevitable. PositionIsEverything.net y la wiki de discusión de CSS ofrecen mucha información sobre este asunto y técnicas para resolverlo.
  • De vez en cuando, los algoritmos de redondeo provocan diferencias fuera de especificación en los navegadores que muestran los contenidos con medios de visualización LCD, LED o CRT (type="screen"). El tipo de medio screen (pantalla) requiere que todas las unidades se conviertan en medidas de píxeles, de manera que la imagen puede quedar diferente en cada navegador.

30.2.2. min-width, max-width, min-height y max-height

En ocasiones os encontraréis situaciones en las que necesitáis limitar el tamaño de un elemento, generalmente para garantizar que una columna de tamaño proporcional conserve siempre una anchura legible. Las distintas propiedades min- y max- responden a este requisito. Del mismo modo que con widthy height, los resultados que pueden esperarse de utilizar estas propiedades son bastante previsibles en realidad.

Demostración 4

Se colocaron márgenes auto a la izquierda y a la derecha del contenedor de la página. Ahora es necesaria una width para que los valores de margen tengan sentido. Además, el plan es asignar un valor float al texto destacado de manera que también obtenga una anchura.

#main { width: 42em; }
.pullQuote { width: 14em; }

Archivo fuente de:Ejemplo de cambio de la anchura del contenedor del documento y del texto destacado

Archivo fuente de:Hoja de estilo de la demostración 4

30.2.3. Desbordamiento: poner barreras al código o dejarlo libre

Cuando se establece la width o la height de un elemento, a veces es necesario pensar qué resultados son deseables en caso de que los contenidos de este elemento ocupen más espacio del que hay disponible. Esto es especialmente cierto para los sitios con contenido generado por el usuario y con especificaciones de composición estrictas.

La propiedad overflow (desbordamiento) y sus cuatro valores válidos (visible, hidden, auto y scroll) existen para hacer frente a estas circunstancias. En la figura 5 puede observarse el efecto que tienen cuando se aplican a un elemento cuyo contenido se desborda de los límites de su caja.

Los efectos de la propiedad de desbordamiento de CSSFigura 5. Los efectos de la propiedad de desbordamiento de CSS

Los resultados de los cuatro valores de overflow

  • visible (por defecto). El contenido que sobrepasa las dimensiones de la caja de un elemento se muestra sin afectar al flujo o los márgenes de los elementos adyacentes. En consecuencia, puede parecer que el contenido de un elemento choque con el contenido de un elemento adyacente. En subapartados posteriores, se habla de las técnicas para evitar esta situación y casos especiales provocados por problemas de representación en IE.
  • hidden. Cualquier contenido que esté fuera de los límites de un elemento quedará escondido.
  • auto. Las dimensiones de un elemento estarán limitadas igual que cuando se utiliza el valor hidden(escondido), pero se crearán las barras de desplazamiento que sean necesarias para que el contenido que no quepa sea accesible al visitante.
  • scroll. Se incorporarán barras de desplazamiento verticales y horizontales al elemento aunque no sean necesarias.

30.3. Los modelos de caja de CSS: hacer que todo encaje

Ahora que ya hemos hablado de las propiedades fundamentales de composición, es el momento de descubrir cómo el navegador representa la anchura de un elemento según sus propiedades de CSS y cómo evitar que los elementos creen errores en las composiciones. Algunos resultados tendrán todo el sentido del mundo y otros parecerán horriblemente antiintuitivos.

30.3.1. Elegir las unidades adecuadas para la composición

Tal como sucede con el texto, el tamaño de los elementos puede ajustarse con unidades proporcionales como % o em, o con unidades estáticas como px. Otro elemento que se debe tener en cuenta es que el lienzo del navegador siempre tiene un tamaño de un valor estático que no se puede asumir sin utilizar un script en el lado del cliente para recuperar el tamaño de la ventana o cambiarlo, técnicas que se ajustan mal a las exigencias de la accesibilidad, usabilidad y portabilidad de medios.

La regla principal de aplicar tamaño a los elementos: mezclar unidades proporcionales y estáticas con cuidado, o no hacerlo

El valor por defecto tanto de width como de height es auto, que es una directiva que significa: “Utiliza el espacio disponible”. El resultado de los elementos de bloque es que su width computada ocupa todo este espacio. En cuanto a la height, los elementos se amplían por defecto para incluir su contenido.

Si cambiáis los valores de width y height, debéis ir con mucho cuidado para garantizar que el contenido de un elemento encaje (con los márgenes, los bordes y el relleno) con la anchura que habéis especificado. La manera más fácil de hacerlo es llevar a cabo el proceso siguiente:

  1. Pensad en el ancho máximo que pueda tener vuestra composición teniendo en cuenta las resoluciones de visualización habituales y/o el tamaño de la tipografía. En el momento de escribir estas líneas, esta anchura será normalmente de unos 1.024 píxeles. Un valor muy común que se suele usar es el de 960 píxeles puesto que, por un lado, es muy fácil de dividir en hasta 12 columnas y, por otro, que muchos navegadores de dispositivos móviles tienden a asumir que las páginas web tienen este ancho.
  2. Cread un elemento contenedor para todo el documento ajustado a una anchura determinada inferior a la calculada en el paso #1.
  3. Utilizad el mismo tipo de unidad cuando establezcáis las propiedades de composición de los elementos en el elemento contenedor creado en el paso #2.

Elegir el tipo de unidad adecuada para la composición: ventajas y desventajas

Unidad Ventajas Desventajas
Tabla 1. Ventajas y desventajas del porcentaje, de em y de unidades de píxel que especifiquen propiedades de composición.
em Es más adecuado para crear cuadrículas de composición muy precisas en dos dimensiones.

Cuando se utiliza en relación con contenedores de documentos, posibilita composiciones que se amplían o se contraen según el tamaño del texto central.

Las dimensiones computadas de los elementos se convierten en fácilmente previsibles.

Puede ser que las unidades fraccionarias se amplíen o se contraigan con ligeras diferencias entre navegadores.

Para conseguir los mejores resultados, todos los valores de font-size y line-height del documento deberían establecerse en valores explícitos y previsibles.

porcentaje Es más adecuado para composiciones totalmente flexibles.

Es más fácil para crear elementos como columnas iguales.

Para evitar errores, quizá se necesiten elementos contenedores adicionales.

Puede resultar en elementos anchos de manera inaceptable o estrechos.

Los resultados dependen mucho del contexto.

px Ofrece el mayor control sobre la composición.

Elimina la mayoría de la variación en la composición entre navegadores.

Es el menos adecuado para requisitos de accesibilidad y aceptación de todo tipo de medios.

Es el más susceptible de causar errores.

30.3.2. Los componentes del modelo de cajas

En realidad, el modelo de cajas sólo es una serie de directivas que definen cómo interactúan entre sí las diferentes especificaciones de composición de un elemento. Los componentes que incluye el modelo de caja son:

  1. Lienzo de documento.
  2. Márgenes.
  3. Bordes.
  4. Relleno.
  5. Anchuras y alturas de los elementos.
  6. Propiedades de elementos hijo.

El último de estos elementos incluye a los otros cinco. Sin embargo, para simplificar, este subapartado se centrará en las relaciones sencillas de padre-hijo, y se reserva el tema de las interacciones de modelos de caja de múltiples niveles para futuros apartados que tratarán con más detalle los puntos de la composición de página.

30.3.3. El modelo de caja del W3C: todo es acumulable

La regla básica es que la anchura o altura computada de un elemento es igual a:

margin + border + padding + (width|height)

En muchos casos, la width y/o height se establecerán en su valor predeterminado de auto, lo que significa que la zona del lienzo reservada para el contenido es igual a:

lienzo_disponible - margin - padding - border

En una expresión de este tipo, lienzo_disponible es un valor discreto en sí (aunque a menudo autocomputado), del que se restan las cantidades correspondientes a márgenes, bordes y relleno. Este número es de gran importancia para la anchura de los elementos porque los errores de cálculo de anchura que cometa un diseñador tendrán la desagradable consecuencia de provocar que aparezca una barra de desplazamiento horizontal en la ventana del navegador. Adicionalmente, los navegadores siempre sitúan los elementos en el margen izquierdo del lienzo del navegador, ya que, en caso contrario, se desbordan fuera del margen derecho de la ventana del navegador si no se especifica lo contrario.

Fijaos en la siguiente regla de hoja de estilo:

#myLayoutColumn {
   width: 50em;
   margin: 1.5em auto 1.5em auto;
   border: .1em;
   padding: .9em;
}

Como ya hemos comentado en la explicación de las propiedades del margen, se puede esperar que#myLayoutColumn se centre en su elemento contenedor, independientemente de si el contenedor es body o algo creado por el grupo de producción.

Además, también se puede esperar que la anchura no marginal computada prevista sea:

.1em + .9em + 50em + .9em + .1em = 52em

En los medios screen, el navegador tomará este valor, redondeará todos los valores de manera separada hasta el píxel más próximo y representará el resultado de acuerdo con ello.

Márgenes proporcionales y relleno

Los márgenes proporcionales y el relleno se computan en relación con la width computada del elemento contenedor. Por poner un ejemplo, si especificáis margin: 20% para un elemento incluido en un elemento que tiene 800 píxeles de anchura, el margen que se representa alrededor del primer elemento será de 160 píxeles por todos los lados (ya que el 20% de 800 son 160).

Si a este mismo elemento se le asigna padding: 5%, la anchura computada del contenido será de 400 píxeles:

20% + 5% + 5% + 20% = 50%
0.50 × 800 = 400
800 - 400 = 400

30.4. Trabajar con flujo de documentos

Los próximos apartados tratan de la creación de composiciones de múltiples columnas, de manera que debemos presentar tres propiedades de CSS que aún nos faltan en este apartado: display, float y clear.

30.4.1. Tipos de elementos y la propiedad display

Excepto las partes de html, body y table, todos los elementos de la Recomendación de HTML relacionados con contenido primario tienen un tipo asociado “en línea” o “bloque”. Cada tipo determina el comportamiento de la composición por defecto de varias maneras.

  1. En línea
    • El texto y las imágenes que hay inmediatamente delante y/o detrás de elementos en línea se representan sobre una línea base común con el contenido del elemento en línea, a no ser que sean tan largos que se superpongan sobre el límite del elemento contenedor, en cuyo caso el contenido insertado acabará sobre una nueva línea base por debajo de la primera.
    • Las líneas de texto dentro de elementos en línea se disponen con saltos de línea blandos según sea necesario (o según se pueda), excepto en los casos en los que este comportamiento se modifica por el uso de la propiedad white-space (espacio en blanco).
    • Las propiedades margin, width, height y float en reglas de hoja de estilo aplicables a estos elementos (excepto img y object) se ignoran.
    • Los elementos en línea sólo pueden contener texto u otros elementos en línea.
  2. Bloque
    • Estos elementos se representan como bloques discretos dentro de sus contenedores.
    • A no ser que se les asigne un valor float de left o right, siempre se representarán con saltos de línea precedentes y posteriores.
    • En general, los saltos de línea entre elementos de bloque anidados que no tienen ningún contenido entre ellos se colapsarán.
    • Los elementos de bloque con una anchura de auto (la predeterminada) siempre se ampliarán para llenar toda la anchura que puedan.

La propiedad display (visualizar) tiene tres valores que se utilizan habitualmente: block, inline y none, de los cuales dos hacen referencia a los tipos de elemento correspondiente. El efecto de cambiar el valor de display de un elemento es provocar que un elemento en línea se comporte como un elemento de bloque, que un elemento de bloque se comporte como uno en línea o modificar la representación del documento como si el elemento (y todo su contenido) no existiera en absoluto.

De hecho, es fundamental saber qué elementos se corresponden con qué tipos por defecto. Las relaciones se exponen brevemente en la tabla 2:

Elemento Tipo Subtipo Notas
Tabla 2. Elementos de HTML de uso frecuente y sus tipos. Sólo se colapsarán los márgenes entre dos elementos de bloque adyacentes del mismo subtipo.
a en línea especial
abbr en línea frase
address bloque En la práctica se comporta de manera parecida a p.
blockquote bloque
body Engloba todo el lienzo del documento; normalmente tiene un margen (en IE, Firefox y Safari) o un relleno (en Opera) de10px cuando el medio es screen.
cite en línea frase
div bloque
em en línea frase
fieldset bloque Normalmente se representa por defecto con border: 1px black;.
form bloque
h1... h6 bloque título
input en línea control de formulario
img en línea especial
label en línea control de formulario
li bloque Tipo de elemento no especificado en la Definición de Tipo de Documento, pero este elemento puede contener elementos de bloque o insertados; la Recomendación CSS 2.1 completa reserva un valor display para elementos de lista.
ol bloque lista
p bloque Sólo puede incluir elementos en línea, que normalmente se representan con márgenes superiores e inferiores.
span en línea especial
strong en línea frase
table bloque
ul bloque lista

Demostración 5

¿Y si eliminamos la anotación “Prólogo” del título únicamente para esta demostración?

.sectionNote { display: none; }

Archivo fuente de:Ejemplo con eliminación de la parte superflua de un apartado

Archivo fuente de:Hoja de estilo de la demostración 5

30.4.2. Hacer que algunos elementos fluyan en torno a otros: la propiedad float

Un gato con tocino pegado en el lomo con cinta adhesiva.

Hay una foto colocada a la izquierda de este párrafo. Prácticamente todos veréis que el texto siguiente fluye de manera natural a su alrededor, aunque puede que algunos primero debáis dejar de preguntaros por qué un famoso escritor de novelas de ciencia ficción decide pegar tocino a su gato con cinta adhesiva, por muy aburrido que esté. Los atributos del HTML pueden utilizarse para especificar el comportamiento de la composición que podéis observar, pero en este caso los resultados se han conseguido con CSS.

Tal como os podéis imaginar, la pareja propiedad/valor que lo hace posible es float: left;. En futuros apartados se tratarán las sutilezas de trabajar con elementos flotantes, pero, de momento, es necesario tocar este tema de pasada. float: right también es una pareja de propiedad/valor perfectamente útil, y para aquellas ocasiones en las que necesitáis contradecir una asignación de class que invoque float, podéis especificar float: none.

La propiedad float sí que tiene unas cuantas instrucciones de uso:

  • Un valor float sólo tendrá relevancia si se aplica a un elemento de bloque con una width explícita.
  • Las propiedades float, clear y margin aparecen juntas en las reglas de hojas de estilo para crear columnas en una composición.
  • Es complicado hacer que un elemento flotante se estire hasta llegar a la parte inferior de su contenedor, pero no es imposible. La manera habitual de hacerlo se denomina faux-columns.

Demostración 6

Ya hemos hablado de la colocación de un valor float en el texto destacado, de manera que ahora lo haremos y veremos cómo queda. Y, ya que estamos, añadámosle un poco de color de fondo para que se distinga mejor del contenido principal.

.pullQuote { float: right;
background-color: rgb(204,204,204); }

Archivo fuente de:Ejemplo de hacer ‘flotar’ el texto destacado hacia el margen derecho

Archivo fuente de:Hoja de estilo de la demostración 6

30.4.3. Forzar elementos por debajo de sus predecesores flotantes: la propiedad clear

De la misma manera que la propiedad float, a la propiedad clear puede asignársele uno de los valoresleft, right o none. El valor both (ambos) también es posible.

Aunque la propiedad float rige cómo debería fluir el contenido de los elementos subsiguientes a su alrededor, la propiedad clear rige cómo debe fluir un elemento en torno a todos sus vecinos; en la mayoría de los casos, no debería fluir en absoluto.

La figura 6 demuestra el funcionamiento de clear: left; en una composición en la que a dos elementos consecutivos se les han asignado valores idénticos de height y valores de float de left y right:

Composición de tres columnas adyecentes con un pie inferior. La columna izquierda tiene identificador #fLeftWidget, una anchura de 25%, una altura (height) de 14 em y el valor de left asignado a la propiedad float. La columna derecha tiene identificador #fRightWidget, una anchura de 25%, una altura (height) de 14 em y el valor de right asignado a la propiedad float. El pie tiene identificador #clearWidget y el valor de left asignado a la propiedad clear. En la columna central hay un texto en latín.Figura 6. clear:left permite que la caja inferior corte las dos columnas porque son de la misma altura.

En la demostración anterior, el flujo por defecto de #cLeftWidget lo colocaría justo por debajo del texto en latín, es decir, entre #fLeftWidget y #fRightWidget.

Pensad qué sucede cuando el primero de la misma colección de elementos se hace más corto que su hermano que toca a la derecha, tal como se ve en la figura 7.

La misma composición de tres columnas y un pie de la imagen anterior. Ahora la columna de la derecha se solapa con el pie. En la columna izquierda se ha reducido el valor de la propiedad height de 14 a 10.5 ems.Figura 7. Cuando la columna derecha es más larga que la columna izquierda,clear:left no cortará las dos columnas y, por lo tanto, hay que utilizarclear:both.

En el primer ejemplo, el valor clear del elemento final se establece en left para demostrar este hecho: como los dos elementos con float son igual de altos, el elemento con clear se coloca automáticamente por debajo de los dos. Sin embargo, el segundo ejemplo demuestra que para conseguir el mismo resultado con elementos con float de alturas diferentes, hay que utilizar clear: both;.

Esta información sobre la propiedad clear está pensada sólo como una pequeña introducción a sus efectos, ya que los detalles de la técnica asociada a su uso se tratarán en apartados posteriores.

Resumen

Entre las diferencias entre motores de representación, la necesidad de incluir una amplia gama de terreno definido tradicionalmente y la inhabilidad para predecir las dimensiones exactas de una ventana de navegador, la composición de documentos web está llena de dificultades y riesgos. A pesar de todo, el nivel habitual de soporte de CSS ha avanzado hasta el punto de que no es difícil conseguir que los documentos web den resultados aceptables en cualquier navegador.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. ¿En qué circunstancias es mejor utilizar el valor abreviado como margin o una única propiedad de margen como margin-top?
  2. Cuando las propiedades abreviadas de margin, padding y border-width se presentan con los cuatro valores, ¿en qué orden se aplican estos valores a los cuatro lados de un elemento?
  3. Si quisierais colocar una regla bajo el texto de cada título de un documento, ¿qué propiedad utilizaríais?
  4. ¿Qué valor de border-style utilizaríais para hacer que un elemento parezca un botón de interfaz?
  5. Sí o no: ¿especificar un borde alrededor de un elemento también creará automáticamente un canal en torno al elemento?
  6. Si creáis un elemento que no sea tan ancho como su contenedor, ¿qué pareja de propiedad/valor debéis establecer para garantizar que el elemento quede centrado horizontalmente en su contenedor?
  7. Sí o no: si colocáis un elemento contenedor dentro de body y establecéis la width en un valor superior a 100%, ¿cambiará el comportamiento del lienzo del documento?
  8. Si una imagen es demasiado grande para el elemento contenedor, ¿qué pareja de propiedad/valor utilizaríais para garantizar que no se creen errores en la composición de la página y por qué?
  9. Si asignáis un valor de display de block a un elemento a (enlace) y dais una altura y una anchura razonables a este elemento, ¿cómo cambia el comportamiento del enlace cuando se pasa el ratón por encima en un medio de visualización screen?
  10. En circunstancias normales, un elemento de bloque se amplía hasta llenar la anchura de su contenedor (menos márgenes, bordes y relleno). Por defecto, ¿cambia realmente este comportamiento cuando este elemento va precedido de un elemento con float, o sólo parece que cambia?
  11. Si pretendéis aplicar un valor float a un elemento, ¿qué otra propiedad también debéis establecer en este elemento?
  12. Si quisierais estar del todo seguros de que un elemento siempre se ampliará para llenar la anchura de su contenedor, ¿qué parejas de propiedad/valor estableceríais?

Lecturas complementarias

Bergevin, Holly; Gallant, John (2006). Explorer exposed. Position Is Everything. [Fecha de consulta: 1 de julio del 2008].

Bos, Bert y otros (2007). Cascading style sheets level 2 revision 1 (CSS 2.1) specification. World Wide Web Consortium. [Fecha de consulta: 30 de junio del 2008].

Raggett, Dave y otros (1999). HTML 4.01 specification. World Wide Web Consortium. [Fecha de consulta: 30 de junio del 2008].

Raymond, Eric; Steele, Guy (eds.) (2003). Brute force. The Jargon File (Version 4.4.7). [Fecha de consulta: 30 de junio del 2008].

Scalzi, John (2006). Clearly you people thought I was kidding. Whatever. [Fecha de consulta: 30 de junio del 2008].

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :

UOC:Creación de estilos de texto con CSS

Logo de Mosaic

CSS
Creación de estilos de texto con CSS

29. Creación de estilos de texto con CSS

Ben Henick. 3 de octubre del 2008. Publicado en: alineación, texto, aliasing, fuente, tipografía

Como la web es una colección de documentos, algunos dinámicos, otros estáticos y otros funcionales, las convenciones con las que se les aplica un formato se extraen de nuestro mejor punto de referencia: los seis siglos de historia de la imprenta. Y esto incluye la tipografía. Sin embargo, la web es un medio nuevo y diferente, y la tipografía para sitios web necesita un conjunto de competencias de diseño editorial muy diferente y, además, está mucho más limitada.

Este apartado se basa en los conocimientos adquiridos previamente en el curso y ofrece una guía detallada para aplicar estilo a un texto de manera efectiva utilizando CSS.

Nota

A continuación, se enlaza con varios ejemplos que demuestran las técnicas mencionadas; podéis descargaros los 29 ejemplos del apartado con el fichero “article29_examples.zip”.

Descargad los ejemplos en:article29_examples.zip

Los contenidos de este apartado son los siguientes:

29.1. Repaso de tipografía en la web

En la web, los diseñadores tienen mucho menos control sobre la presentación que en otros medios. Este hecho se ve claramente cuando se trata de las propiedades del lienzo del documento como el tamaño, la resolución y el contraste. También hay muchas limitaciones con respecto a la calidad de la tipografía de la web, un tema que ya se ha tratado.

Ved también

Podéis ver los conceptos básicos de tipografía en el apartado 11 del módulo “Conceptos de diseño web”.

Otros aspectos que merecen ser tratados son el contraste y la facilidad de lectura, de los cuales hablaremos a continuación.

29.1.1. Contraste

El contraste del tipo de letra, la facilidad con la que pueden distinguirse las líneas del espacio en blanco y de las líneas adyacentes, depende de varios factores como la luminosidad, el color, el tamaño y la composición. Se menciona en este apartado por el mero hecho de destacar que el texto de contraste bajo se debería establecer en el mayor tamaño posible.

29.1.2. Facilidad de lectura

En un contexto de diseño utilizamos la palabra inglesa legibility para referirnos a la facilidad con la que podemos buscar fragmentos específicos de información, mientras que con su sinónimo readabilty nos referimos a la facilidad de comprensión de un texto. Las decisiones de diseño que potencian una u otra calidad se enumeran en la tabla 1.

Objetivo Longitud de línea Canales y espacio interlineal Tipos Justificado
Tabla 1. Características de la facilidad de lectura.
‘Readability’ moderada aumentados serif inexistente
[izquierda]
‘Legibility’ corta normales sans-serif variable, a menudo completo

En el próximo apartado, “El modelo de composición de CSS”, se hablará sobre la anchura óptima de columna.

29.2. Propiedades CSS de fuentes: cambiar el aspecto del texto

La composición de textos es la manipulación del texto con respecto a la composición general y al aspecto de las letras y las palabras. Esta segunda tarea se lleva a cabo mediante las propiedades CSS de fuente, de las que hablaremos a continuación.

29.2.1. font-size y selección del tipo de unidad

Como los documentos generalmente varían de tamaño de fuente más que de tipo de letra y las variantes de fuentes suelen manipularse con las hojas de estilos de usuario, la propiedad principal de interés es font-size (tamaño de la fuente). Cuando se utiliza en una regla, va seguida de un valor que especifica una medida de unidad o, en ocasiones, un tamaño de palabra clave (como pequeño o medio).

Cómo se hace

La declaración de font-size más importante de una hoja de estilo es más o menos así:

body {...
   font-size: 14px;
...}

La herencia hace que todas las especificaciones de tamaño de la fuente de un documento se basen en el tamaño declarado por el documento body, ya sea en la hoja de estilo del navegador o en la nuestra.

El valor por defecto típico de 16 píxeles de los navegadores es un buen punto de inicio para la parte central del texto, pero la mayoría de los visitantes pueden leer sin problemas tipos de letra más pequeños. Por lo tanto, la mayoría de los diseñadores eligen un tamaño más pequeño, de unos 11-14 píxeles.

La herencia se aplica al tamaño del tipo de letra cuando se especifica un tamaño relativo y cuando se especifica un tamaño de palabra clave para un elemento con un progenitor cuyo tamaño no se especifica con una palabra clave.

¿Qué tipos de unidad pueden aplicarse en las propiedades de texto CSS?

En las reglas de hojas de estilo, los tipos de unidad que suelen aplicarse más a menudo al texto son píxeles (px), ems (em, se explica más adelante), porcentajes (%) y puntos (pt). En la tabla 2 se describe el comportamiento del texto redimensionado con estas unidades.

Unidad Definición1 Uso
Tabla 2. Unidades de CSS convenientes para dimensionar un texto
1 ∆ es la proporción de cambio en el tamaño de la fuente a partir del valor heredado.
2 Sólo se hereda el valor del tamaño no especificado en palabra clave más cercano.
Ems de CSS ∆ = x 1,333 em
Palabras clave Definido por el agente de usuario2 large, etc.
Porcentaje ∆ = x / 100 133.3%
Píxels Unidad absoluta 16 px
Puntos Unidad absoluta 12 pt

Otros tipos de unidad posibles son las palabras clave de tamaño, las picas (pc, una pica equivale exactamente a 12 puntos) y las exes (ex). También están disponibles la mayoría de los otros tipos de unidad que acepta CSS2, pero no se utilizan casi nunca cuando se trabaja con texto.

¿Para qué sirve tener tantos tipos de unidad diferentes?

Como se indica en la tabla 2, hay unidades de tamaño relativo y absoluto. Las palabras clave incluyen ambas características, es decir, tamaño absoluto entre sí, pero relativas al valor no especificado en palabra clave que heredan. La mejor manera de utilizarlas es ésta:

  • Los tamaños absolutes (px, unidades estandarizadas como pt) es mejor aplicarlas a composiciones que no cambien en relación con las propiedades de lienzo del documento, las llamadas composiciones “fijas”, “estáticas” o “de hielo”.
  • Los tamaños relativos (em, %) deberían utilizarse en composiciones no estáticas y en situaciones en las que hay que establecer un compromiso entre la usabilidad del sitio y el control del diseñador de la composición.
  • Los tamaños de palabra clave (que se explican a continuación) deberían utilizarse cuando la usabilidad prevalezca por encima de todas las demás consideraciones del diseño.

Tamaños absolutos y usabilidad

Las versiones antiguas de Internet Explorer no permiten al visitante modificar el tamaño del texto que se ha establecido en tamaños absolutos y las interfaces de modificación del tamaño del texto de algunos navegadores que sí que permiten este nivel de control de usuario pueden costar de encontrar (los usuarios de Opera y Firefox lo tienen fácil con Shift + Ctrl/Cmd + más/menos y Ctrl/Cmd + más/menos, respectivamente). A causa de estas limitaciones, se suele establecer el font-size de body en un valor relativo, normalmente en unidades em, que se supone que el navegador controla por defecto.

¿Cuál es el equivalente físico de un píxel?

Aunque es estrictamente imposible definir o predecir las dimensiones literales de un píxel, los patrocinadores de proyectos comerciales más nerviosos suelen sorprenderse cuando descubren que el diseño de su sitio adquiere un aspecto diferente en los ordenadores de los clientes que tienen una configuración diferente de la suya y riñen al diseñador web por este motivo. Por lo tanto, puede ser útil comprender cómo funcionan los píxeles. Esta información os servirá para cuando alguien que os haya encargado crear una página web se queje de que el texto no queda exactamente igual en diferentes ordenadores.

Las empresas de software mantienen un acuerdo informal según el cual, 96 ppp (píxeles por pulgada) es un tamaño razonable. De esta manera, un texto central de 16 píxeles se imprimirá a un tamaño de una sexta parte de una pulgada o 12 puntos. En la pantalla de cristal líquido cada vez más habitual de 17″ 1280×800, un texto de 16 píxeles tendrá un tamaño aproximado de 13 puntos en la pantalla, pero en una pantalla parecida de ordenador portátil de 15″, el tamaño será de 11,44 puntos.

Estas medidas son efectivas con la configuración por defecto. La mayoría de los entornos permiten al usuario final establecer una medida habitual de ppp, de manera que siempre se darán casos diferentes.

En conclusión: un píxel es un píxel, pero todo lo demás es variable.

Ems, porcentajes y puntos según el CSS

Tradicionalmente, un em es equivalente a la altura de la “M” mayúscula de la fuente de que hablemos. Sin embargo, en CSS, la unidad em es el equivalente a la altura total de una línea; o, dicho de otro modo, para un elemento al que se le ha establecido el font-size a 14 píxeles:

1em = 100% = 14px

En entornos normales, esta declaración puede ampliarse a:

1em = 100% = 14px = 10,5pt

El aumento y la reducción del tamaño funcionan de manera multiplicativa, de modo que si hay un segundo elemento que se quiera definir con un tamaño de 16 píxeles, teniendo en cuenta la herencia habitual, todo lo que se muestra a continuación obtendría el resultado deseado:

1,143em = 114,3% diferent de 16px = 12pt

Breve comentario sobre la recomendación oficial de CSS

En ocasiones, os dirán que consultéis la Recomendación Candidata o Candidate Recommendation delWorld Wide Web Consortium para la especificación CSS. Como todas las recomendaciones del W3C, este documento puede considerarse la definición de un estándar web; algunos se siguen más que otros, tanto por parte de los fabricantes de navegadores como por los desarrolladores de webs.

Aunque es útil conocer de arriba abajo las recomendaciones del W3C, este curso se ha diseñado para proporcionar una introducción concisa y fácil de asimilar al diseño/desarrollo web y las recomendaciones del W3C pueden ser un poco pesadas. En todos los casos en los que se os pida visitar la recomendación de CSS, se os está dirigiendo a un material demasiado complejo como para justificar una explicación detallada en este apartado.

Palabras clave de tamaño

También se pueden utilizar palabras clave de tamaño, como se ha mencionado anteriormente. Hay siete, desde xx-small hasta xx-large, y medium es el valor medio (y predeterminado). La lista completa de los siete valores se muestra más adelante en la tabla 3, que incluye todas las palabras clave que aceptan las distintas propiedades CSS mencionadas en este apartado.

La recomendación de CSS ofrece una gran cantidad de información adicional sobre las palabras clave defont-size.

Demostración 1

De vez en cuando, este texto enlazará con un documento de Demostración cada vez con más estilo que mostrará las propiedades CSS de las que hablamos en su uso real. El primero de los ejemplos es el documento HTML de muestra sin ningún tipo de estilo aplicado.

Archivo fuente de:Ejemplo sin estilos

Nuevas reglas

body { font-size: 14px; }
h1 { font-size: x-large; }
.sectionNote { font-size: medium; }
.attribution { font-size: small; }

Archivo fuente de:Ejemplo con título redimensionado, atribuciones y parte central del texto aplicados

Archivo fuente de:Ejemplo de hoja de estilo de la Demostración 1

29.2.2. font-family y selección de tipos de letra

Cuando tengáis el texto con el tamaño que os guste, ya podéis pasar a seleccionar uno o dos tipos de letra. Esto se hace con la propiedad font-family, que se utiliza como se muestra a continuación en la Demostración 2.

Cuando se ofrece un valor para la propiedad font-family, hay que seguir estas reglas:

  1. Las tipografías se deben llamar exactamente como se llaman en la biblioteca de fuentes del ordenador cliente, utilizando como guía la fuente no variante.
  2. Todas las tipografías con nombre deben separarse con comas, con espacio detrás o sin él.
  3. En los casos en que el nombre de una tipografía contenga más de una palabra, hay que poner comillas simples o dobles al principio y al final. Ejemplo: 'Times New Roman‘.
  4. Hay que enumerar las tipografías por orden ascendente de posible disponibilidad. Por ejemplo, si queréis que los usuarios de Macintosh vean una página con el texto en Palatino, la declaración de valor de propiedad probablemente debería ser así: font-family: Palatino, Georgia, serif;. La Palatino es exactamente la que queréis, pero puede ser que algunos usuarios no la tengan; la Georgia tiene más probabilidades de estar disponible y se parece a la Palatino; serif hace referencia a la fuente serif predeterminada genérica; si no se dispone de la Palatino ni de la Georgia, el sistema volverá a su fuente serif por defecto.
  5. Como método de seguridad, el valor font-family siempre debería acabar con el nombre genérico apropiado, tal como se ha explicado anteriormente. En la figura 1 se muestran las tipografías que se utilizan en las familias genéricas en MacOS 10.5.

Tipografía genérica por defecto de MacOs 10.5.Figura 1. Las tipografías “genéricas” predeterminadas de MacOS 10.5 tal como quedan representadas a 24 píxeles en Safari 3.1.

En la recomendación del CSS se enumeran varias tipografías más que pueden aplicarse a cada familia genérica.

Demostración 2

Ahora que el tamaño del texto es previsible, queremos optimizar las tipografías utilizadas. Lo mejor es aplicar una tipografía sans serif al título para que sea de fácil lectura y al texto en sí, una tipografía serif.

Nuevas reglas

body { font-family: Palatino,'Palatino Linotype',Georgia, sans-serif; }
h1 { font-family: Helvetica,Arial,sans-serif; }
blockquote { font-family: Helvetica,Arial,sans-serif; }

Archivo fuente de:Hoja de estilo de la Demostración 2

29.2.3. font-style, font-variant y font-weight: cambiar los detalles

La propiedad font-style manipula la cursiva sin tener que utilizar el elemento i; sus tres valores válidos son italic, oblique y normal.

Los valores italic y oblique proporcionan resultados funcionalmente idénticos en las versiones más recientes de todos los navegadores web del mercado general, aunque hay una diferencia técnica significativa entre los dos estilos.

¿Por qué hay que utilizar la propiedad font-style cuando los elementos “em” e “i” ya parecen bastante adecuados?

Como ya hemos visto, cada uno de estos elementos tiene usos específicos. Además, la apariencia real del texto marcado con em, i, o cualquier otro elemento, puede variar entre varios navegadores.

Hay situaciones en las que el uso de em y su hermano strong pueden requerir un punto de vista diferente. Por ejemplo, supongamos que queréis dar énfasis al texto haciéndolo más grande. Lo que habría que hacer para dar un mayor énfasis sería añadir cursiva, lo que daría lugar a reglas como las siguientes:

em {
   font-size: large;
   font-style: normal;
}
strong {
   font-size: large;
   font-weight: normal;
   font-style: italic;
}

Demostración 3

En el texto de demostración no hay palabras ni fragmentos en cursiva, y las atribuciones ya contienen la cursiva necesaria gracias al uso del elemento cite. Teniendo en cuenta la falta de opciones, el título es el mejor candidato para estar en cursiva.

h1 { font-style: italic; }
.sectionNote { font-style: normal; }

Archivo fuente de:Ejemplo con título en cursiva

Archivo fuente de:Hoja de estilo de la demostración 3

29.2.4. font-variant como herramienta para resaltar pasajes cortos

La propiedad font-variant tiene dos valores posibles, small-caps y normal. Algunos diseñadores utilizan versalitas o “small caps” para resaltar la frase inicial de un texto largo o para dar énfasis a la indicación de una cita, como por ejemplo:

ABANDONAD TODA ESPERANZA LOS QUE AQUÍ ENTRÁIS.

Demostración 4

opening { font-variant: small-caps; }

Archivo fuente de:Ejemplo con la frase inicial en versalitas

Archivo fuente de:Hoja de estilo de la demostración 4

29.2.5. font-weight: negrita y la falta de ésta

La propiedad font-weight (peso de la fuente) permite modificar el nivel de negrita de cualquier fragmento de texto al que se aplique.

Los valores habituales de la propiedad font-weight son normal y bold. La recomendación CSS proporciona los varios valores posibles.

Demostración 5

Poner el nombre de un autor en negrita es una técnica de diseño que se suele utilizar en las publicaciones periódicas, pero que aún encaja en varias situaciones de la web.

author { font-weight: bold; }

Archivo fuente de:Ejemplo con el nombre del autor en negrita

Archivo fuente de:Hoja de estilo de la demostración 5

29.2.6. La propiedad abreviada fuente

Muchas propiedades de texto pueden proporcionarse en el valor para una única propiedad, si procede, de una manera parecida a las propiedades de fondo.

A continuación, se muestra un ejemplo de regla abreviada de fuente:

h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

Para obtener los mejores resultados, el valor dado a esta propiedad debería incluir los valores pretendidos para todas las propiedades individuales siguientes exactamente en este orden, separadas con espacios:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size, seguido, si es necesario, de una barra y del valor de line-height (podéis verlo a continuación).
  5. font-family, que en este caso también puede ser una palabra reservada que especifica una fuente de sistema; los valores múltiples deberían estar separados por comas, pero no por espacios.
Propiedad Valores
Tabla 3. Valores de palabra clave aceptados para las propiedades que se han tratado en este apartado
font-family cursive, fantasy, monospace, sans-serif, serif
font-size xx-small, x-small, small, medium, large, x-large, xx-large
font-style italic, normal, oblique
font-variant normal, small-caps
font-weight bold, normal
line-height normal
text-align center, justify, left, right
text-decoration line-through, none, overline, underline
text-transform capitalize, lowercase, none, uppercase
white-space normal, nowrap, pre, pre-line, pre-wrap

29.3. Las propiedades de texto y alineación de CSS. Modificar la composición

Un especialista en estilos que trabaje con letras y palabras trata con detalles: líneas, curvas, puntos, píxeles y otras partes celulares de un diseño. Sin embargo, un diseño es todo un conjunto; tiene componentes más grandes que se destacan mediante el control de la composición principalmente a través del modelo de disposición de CSS. Además de este modelo de disposición, CSS también implementa propiedades de texto y alineación que afectan a la composición. El resto de este apartado trata sobre estas propiedades.

29.3.1. Alineación y justificación del texto

Como sucede con los entornos de procesamiento de texto, la propiedad text-align acepta cuatro valores de justificación: left, right, center y justify. Este último proporciona justificación completa: márgenes de texto visibles que son consistentes tanto por la izquierda como por la derecha de un bloque de texto.

Justificación adecuada del texto escrito en alfabetos occidentales

La mejor manera de utilizar las diferentes alineaciones disponibles es así:

  • La justificación izquierda es más adecuada para fragmentos de texto largos.
  • La justificación derecha es más adecuada para la columna de la izquierda del todo de tablas de datos y disposiciones de columna múltiple. Cuando la columna adyacente se deja justificada y colocada en el otro lado de un canal adecuadamente ancho, el resultado es mejorar la legibilidad de ambas columnas.
  • La justificación completa funciona bien para bloques pequeños, como citas de bloques y textos de ejemplo. Cuando se utiliza en fragmentos largos como texto de ancho óptimo con márgenes anchos, la justificación completa también mejora la coherencia de la maquetación.
  • El centrado se suele utilizar para los elementos de interfaz y listas en serie como las que se encuentran en los pies de página.

Demostración 6

Como la demostración se basa en un fragmento de texto de ficción extraído de un libro, ¿por qué no le aplicamos la justificación?

p { text-align: justify; }
blockquote p { text-align: left; }

Archivo fuente de:Página con justificación completa del texto central del fragmento

Archivo fuente de:Hoja de estilo de la demostración 6

29.3.2. Modificar el espaciado: las propiedades letter-spacing y word-spacing

El mismo nombre ya lo dice todo, es decir, estas propiedades permiten modificar la cantidad de espacio en blanco entre letras y palabras, respectivamente.

El uso más habitual de letter-spacing (espaciado de letra) es para dar un énfasis sutil parecido al efecto que proporciona font-variant: small-caps; también puede utilizarse para modificar sutilmente la composición de elementos de interfaz.

La propiedad word-spacing (espaciado de palabras) es mejor utilizarla para modificar deliberadamente la cantidad de palabras que es probable que aparezcan en una única línea de texto. Por ejemplo, puede utilizarse si tenéis un bloque de texto de la anchura habitual pero de tamaño de fuente atípica.

En la impresión, el espaciado de letras y el de palabras también se aplican ad hoc para evitar errores de composición, pero en la web esta técnica tiene una utilidad limitada.

Además de los valores de unidad, estas propiedades aceptan el valor normal.

Utilizar unidades em para un buen control

Cuando se cambia el espaciado entre letras de un texto, un pequeño espacio significa una gran distancia; el espaciado de letra predeterminado suele ser entre una décima y una vigésima parte de un em, de manera que los valores de letter-spacing que superen más del doble o la mitad del valor predeterminado pueden acabar haciendo que el texto sea ilegible.

Demostración 7

Al texto señal del que hablamos hacia el final le iría bien un poco de énfasis sutil… y, como la cita introductoria tiene un tamaño mayor, puede mejorarse mediante el espaciado entre palabras.

q { letter-spacing: .143em; }
.pullQuote { word-spacing: .143em; }

Archivo fuente de:Página con espaciado entre letras en los saludos propuestos en el penúltimo párrafo del fragmento

Archivo fuente de: Hoja de estilo de la demostración 7

29.3.3. Sangrar las primeras líneas: la propiedad text-indent

La propiedad text-indent (sangrado de texto) permite sangrar los párrafos de la misma manera que en el papel impreso. Además, esta propiedad y el hecho de que acepte valores negativos permite toda una serie de técnicas de maquetación avanzadas.

Los valores que acepta esta propiedad son los mismos que los que acepta font-size, además de normal.

Demostración 8

Por la misma razón que el fragmento tenía justificación completa, quizá debería tener sangrado en todas las primeras líneas de los párrafos.

p { text-indent: 1.429em; }
blockquote p { text-indent: 0; }

Archivo fuente de:Página con sangrado inicial en los párrafos del texto central

Archivo fuente de:Hoja de estilo de la demostración 8

29.3.4. Mayúsculas: La propiedad text-transform

De la misma manera que la propiedad font-variant proporciona acceso a las letras versalitas, la propiedad text-transform se ocupa específicamente de las mayúsculas. Los valores que permite cubren todas las mayúsculas, minúsculas o todo el texto inicial completamente en mayúsculas. Podéis ver la lista de los valores aceptados en la tabla 3.

Demostración 9

author { text-transform: uppercase; }

Archivo fuente de: “Página con el autor del fragmento destacado en versalitas

Archivo fuente de:Hoja de estilo de la demostración 9

29.3.5. Aplicar estilos a los enlaces y mostrar las eliminaciones: la propiedad text-decoration

Esta propiedad permite poner líneas por encima, por debajo y a través del texto. Su uso más habitual es para manipular el subrayado por defecto de los enlaces, aunque en las wikis o en textos satíricos y en otros entornos también va muy bien para tachar palabras. En estos casos, se utilizan los elementos ins (insertar) y del (eliminar), que ofrecen estilos equivalentes a:

ins {
text-decoration: underline;
}
del {
text-decoration: line-through;
}

Incluso sin reglas de hoja de estilo hechas a medida, ins y del aplican estilo de etiquetado de la siguiente manera:

Mark Twain Benjamin Disraeli es famoso por sus dichos agudos, como “hay mentiras, grandes mentiras y estadística”.

Márgenes, no subrayados, abbr

Algunos diseñadores suelen modificar el aspecto del elemento abbr para que aparezca con un subrayado que a primera vista parece una línea de puntos. No obstante, en realidad este efecto se consigue con un valor de border-bottom. (Recordad que algunos navegadores lo hacen automáticamente, pero otros, como IE 6, no.)

Demostración 10

source a { text-decoration: none; }

Archivo fuente de:Página con eliminación del subrayado del enlace a fuente del texto de muestra

Archivo fuente de:Hoja de estilo de la demostración 10

29.3.6. Ajuste del espacio interlineal y line-height

Es bien sabido que disponer de espacio en blanco entre líneas tiende a aumentar su facilidad de lectura porque el espacio adicional garantiza que las astas ascendentes y las astas descendentes (podéis ver la figura 2 para encontrar una explicación) en líneas adyacentes no competirán por la atención visual.

En la imagen se ve la palabra inglesa gallantly. Se dibujan sobre ella las líneas de base y media. Se aprecia como las letras l superan la línea media y la g y la y griega cruzan la línea baseFigura 2. Las astas ascendentes son la parte de las letras que sobresale de la línea media del texto y las astas descendentes son la parte de las letras que se extiende por debajo de la línea base sobre la que descansa el texto.

Existe una tenue relación entre el font-size (el tamaño de la fuente) de un elemento y su line-height(interlineado), pero, por defecto, todos los agentes de usuario insertan algo de espacio interlineal en cada línea de texto, normalmente del 10 al 15% de la altura de las letras. Como esta cantidad por defecto cambia de una tipografía a otra, la propiedad line-height (interlínea) acepta un valor de normal además de valores numéricos.

También cabe mencionar que, al contrario que la mayoría de las propiedades CSS, line-height(interlínea) acepta valores numéricos sin unidades, que después se representan como una proporción del valor básico predeterminado.

Demostración 11

Se ha hablado mucho de la relación entre espacio interlineal y legibilidad, de modo que aquí tenemos la demostración.

p { line-height: 1.5; }
attribution { line-height: 1.5; }

Archivo fuente de:Página con aplicación de una cantidad adecuada de interineado en un fragmento de texto

Archivo fuente de:Hoja de estilo de la demostración 1

29.3.7. Suplantar pre y br: La propiedad white-space

Estrictamente hablando, los saltos de línea forzados son un elemento de presentación, aunque hay muchas circunstancias en las que son un elemento deseable para el diseño de un sitio. Junto con la costumbre de los navegadores de cortar las líneas en espacios arbitrarios, ejercer el nivel de control deseado únicamente con el etiquetado puede ser complicado.

El elemento pre sirve para hacer frente a estos retos, aunque presenta sus propios retos, razón por la que CSS ofrece la propiedad white-space (espacio en blanco). Los valores que acepta, que se enumeran en la tabla 3, permiten al diseñador elegir si el navegador debe representar los espacios en blanco y los saltos de línea que se han añadido al etiquetado de origen o que se han insertado como contenido generado.

La recomendación CSS ofrece detalles exhaustivos sobre la implementación y el uso recomendados de la propiedad white-space (espacio en blanco).

Resumen

Un buen diseño de sitio requiere un nivel elevado de atención al detalle y el ajuste adecuado de la interacción de numerosos elementos, uno de los cuales es la tipografía.

La combinación de propiedades de fuente y texto que ofrecen las implementaciones de CSS de los navegadores actuales da prácticamente el nivel de control máximo sobre la tipografía que permite el hardware y depende del diseñador concienciado aprender a utilizarlas como es debido. Cuando estas propiedades se utilizan bien, se producen sitios que pueden aspirar a acercarse a los estándares de calidad de la tipografía que normalmente se asocian al medio impreso, que se ha ido desarrollando durante siglos, aunque la Web aún no hace ni una generación que existe.

Preguntas de repaso

Preguntes que hauríeu de poder respondre:

  1. Decid tres elementos HTML que no sean b ni i, que por defecto se representen con fuentes variantes. Haced una descripción breve del propósito original de los elementos que habéis mencionado y explicad cómo el uso de una fuente variante es apropiado para los propósitos de estos elementos.
  2. Comprobad de manera subjetiva la facilidad de lectura de un fragmento de un texto largo cualquiera con diferentes valores de line-height (interlínea). Resumid brevemente los resultados.
  3. Aplicad text-transform: uppercase; a un único párrafo del fragmento utilizado en el ejercicio anterior y repetid la prueba subjetiva de legibilidad. Resumid brevemente los resultados.
  4. Explicad brevemente las ventajas y desventajas del antialiasing utilizando el repaso de la tipografía de este apartado como ejemplo.
  5. Describid el orden en el que deben especificarse las tipografías en un valor de font-family
  6. Sin consultar el material didáctico, elegid como mínimo tres propiedades de las descritas en este apartado y decid como mínimo un valor válido (aparte del predeterminado) de cada una. Demostrad o describid los resultados del uso de estas parejas de propiedades y valores en una hoja de estilo.
  7. Cread un elemento, añadidle texto central y asignadle un valor de font-size (tamaño de la fuente) de9px. Abrid el documento que contiene este elemento con Internet Explorer y pasad de un tamaño de fuente a otro de los que se proporcionan en el menú Visualiza > Tamaño del texto. Evaluad la conveniencia de estos resultados en sitios web con grandes cantidades de visitantes de mediana edad y de edad avanzada.

Lecturas complementarias

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial – Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :