Búsqueda personalizada

CSS Swag: Multi-columna muestra

Uno de los menores santo grial de XHTML y CSS es producir una única lista ordenada semánticamente lógico que se envuelve en columnas verticales.

La situación ideal, en mi opinión, sería una lista única XHTML cuyo envoltorio está controlada totalmente por CSS. Además, la lista envuelto debe tolerar el cambio de tamaño de texto (fácil de realizar por un estilo todo en EMS).

CSS y los navegadores que lo soportan todavía no nos dan “envolver vertical”, así que tenemos que aumentar la lista básica de marcas con atributos adicionales y las normas de estilo para lograr el efecto. I’ll Take You There-o tan cerca como podemos conseguir utilizando los navegadores de hoy en día, pero en el camino vamos a ver una variedad de maneras de lograr un efecto similar.

Vamos a disparar para algo que parece un poco a esto:

An ordered list styled in vertical columns

(¿Por qué, usted ha sido, sin duda pensando, es este artículo titulado “CSS Swag”? En la caza de una metáfora de la multi-estilo de lista de columnas se muestra en la captura de pantalla anterior, me imaginé a una tira de tela que colgaba, retrocedió hasta a su altura inicial, cubierto de nuevo … Una rápida en Google me llevó a este término maravilloso, que yo había asociado sólo con el paquete un vagabundo de las posesiones de Australia, y una etimología gran arrogancia que vincula a tambalearse.)

Cuidado con el escalón

Te advierto que en la delantera. Si desea presentar una lista en varias columnas, tendrá que hacer concesiones. Usted puede sacrificar los estándares del W3C y la utilización de marcas obsoletas, se puede vivir con marcado que es menos de la semántica lógica, puede tolerar una mezcla de presentaciones con contenido, puede decir adiós a la compatibilidad del navegador, o puede utilizar el marcado que está cargada de atributos y estilo que es pesado con las normas. Cada carretera se cobra un peaje.

Si bien cada uno de estos métodos es bastante simple de configurar, la prueba de fuego llega cuando añadir o eliminar elementos de la lista en el curso de mantenimiento del sitio web. ¿Qué tan fácil de modificar es el método elegido? Idealmente, deberíamos ser capaces de simplemente insertar o eliminar elementos de la lista y ver la lista Vuelva a envolver en sí.

La realidad no es tan ideal. A diferencia de la envoltura horizontal que nuestros navegadores manejan de forma automática, ajuste vertical nos exige explícitamente que los elementos de lista aparecen en las columnas o en las columnas deben romper. Para mantener una lista modificada de ajuste correctamente, hay que reorganizar los elementos de lista, las clases y los atributos de cambio en el marcado, o modificar las normas en la hoja de estilos. La única técnica que se describe aquí que no necesita nada de eso Fuss (Método 1) que no tiene problemas de conducta graves. Finalmente, debido a las proporciones verticales son tan importantes aquí, la mayoría de estas listas se va a romper, si se supone que cada elemento de la lista ocupará una línea, sólo para tener un poco de abrigo para artículos de dos o más líneas.

Entonces, ¿por qué molestarse? Bueno, porque el efecto final es tan fresco y práctico. Envolviendo una lista en columnas pueden aliviar el visitante del sitio Web de la necesidad de desplazarse por una lista larga. De tres o cuatro lista de columnas puede llenar el ancho de una página, mientras que una columna flaco solo podía salir de la presentación en busca de anemia. Hay tantas razones para ajustar las listas, ya que hay diseñadores web: definitivamente más de unos pocos.

Para trabajar, entonces.
En primer lugar, eliminar todas los espacios en blanco

La prestación por defecto de una lista ordenada XHTML en los navegadores es la de una serie vertical único de los temas:

<ol>
    <li>Aloe</li>
    <li>Bergamot</li>
    <li>Calendula</li>
  </ol>
  1. Aloe
  2. Bergamot
  3. Calendula

Para omitir algunas incoherencias navegador, he decidido marcar mis listas como esta:

<ol
    ><li>Aloe</li
    ><li>Bergamot</li
    ><li>Calendula</li
  ></ol>

Me he mudado el ángulo de cierre del viernes de soporte> de cada fila al comienzo de la siguiente fila. Esto evita que cada elemento de la lista en una fila de por sí para el beneficio de los lectores humanos y al mismo tiempo, elimina de manera efectiva todo el espacio en blanco entre las etiquetas, esta representación más sistemática de la producción a través de navegadores.

(Mi teoría favorita de por qué Internet Explorer incluye el espacio en blanco entre la lista de las etiquetas el tema en sus cálculos de renderizado es que es un atraco más de la época prehistórica, cuando elementos de la lista, como celdas de la tabla, no tenía etiquetas de cierre. Entonces , un navegador adecuadamente atención a todo el texto incluyendo espacios en blanco de una etiqueta de comienzo <li> a la siguiente. Cuando las etiquetas de cierre se han añadido a la mezcla, al parecer, nadie en Microsoft recordar-o se considere suficientemente importante para ajustar el la lógica para dejar de análisis entre una etiqueta de cierre </ li> y el comienzo de la próxima etiqueta <li>.)

Además, estoy añadiendo un hipervínculo a cada elemento de la lista. Esto me permite para detectar anomalías en la prestación de los anclajes cuando se aplican diferentes reglas CSS:

><li><a href=”#”>Aloe</a></li

Nota: la mayoría de mis ejemplos utilizan listas ordenadas por secuencia tema es de suma importancia en este ejercicio; listas desordenadas puede, por supuesto, ser sustituido.

Y una cosa más: las páginas de ejemplo adjunto a este artículo están marcados con un doctype estricto. Yo uso esta en el trabajo de toda mi web en estos días, porque parece que puedo obtener resultados más consistentes, cross-browser con menos llanto y el crujir de dientes. Si utiliza un doctype de transición o ejecutar en modo de peculiaridades, es posible que tenga que modificar el CSS para que estos métodos de comportarse cross-browser.

Método 1: elementos de la lista flotante
De todas las técnicas que voy a describir, esto se usa el marcado más limpio XHTML y CSS algunos de los más simples. Lamentablemente, sus defectos evitar que se convierta en mi método de elección.

Method 1: Floating list items

La técnica es simple: dar a los elementos de la lista un ancho fijo y flotante a la izquierda.

Los elementos de la lista envoltura horizontal como las palabras en un párrafo. En general, cuando están en circulación una serie de bloques de izquierda o derecha, se alinean en sentido horizontal y envolver al alcanzar una anchura máxima de su contenedor. Si tan sólo tres elementos que caben en una fila, como en este ejemplo, la lista, naturalmente, se envuelve en filas de tres columnas.

El código XHTML es una lista sencilla, sin clases especiales u otros atributos necesarios. Para evitar que elementos de la página siguiente se vean afectados por el flotador que he contenía la lista en un <div> y se aclaró que el flotador con terceros A (-semántico) <br />:

<div>
  <ol
    ><li><a href="#">Aloe</a></li
    ><li><a href="#">Bergamot</a></li
    ...
    ><li><a href="#">Oregano</a></li
    ><li><a href="#">Pennyroyal</a></li
  ></ol>
  <br />
</div><!-- .wrapper -->
La CSS esencial es breve:
/* allow room for 3 columns */
  ol
  {
    width: 30em;
  }

  /* float & allow room for the widest item */
  ol li
  {
    float: left;
    width: 10em;
  }

  /* stop the float */
  br
  {
    clear: left;
  }

  /* separate the list from subsequent markup */
  div.wrapper
  {
    margin-bottom: 1em;
  }

¿Cómo editar: los elementos pueden ser añadidos o eliminados sin más cambios en la XHTML or CSS.

Este método se adapta a dos de nuestros criterios para una solución ideal. La lista en sí es una simple lista de XHTML único y la columna de la envoltura está controlada por completo de la hoja de estilos. Sin embargo, está lejos de nuestro objetivo, porque la secuencia de la lista corre a través y luego hacia abajo en lugar de descender en columnas verticales. Además, no sobrevive bien en diferentes exploradores: Internet Explorer y Opera suprimir los marcadores de punto (números ol y balas de UL) cuando flotan elementos de la lista a la izquierda oa la derecha.

Método 2: dividir las listas de numeración con los atributos de HTML

Esta táctica, tal vez nace de un deseo desesperado de diseño de páginas web para ser mansos como obediente como el diseño de impresión es la de dividir la lista en múltiples sub-listas y colocarlas al lado del otro.

Method 2: Numbering split lists in XHTML

Este enfoque tiene varios defectos: la integridad semántica de la lista única se sacrifica; lista de recapitulación, que considero de presentación, está totalmente determinado por el código HTML en lugar de la hoja de estilos, y numeración se restablece a “1″ con cada nueva lista.

Ese último obstáculo, al menos, puede ser saltado si no les importa usar el marcado obsoleto. (Para que esta marcado para validar, tendrás que usar un doctype de transición.)

Como demuestra el ejemplo 2, el ahora obsoleto atributos HTML de inicio y valor vamos a la lista de restablecer la numeración. Si dejamos de lado la recomendación del W3C y el uso de marcas obsoletas, podemos marcar listas separadas para dar la ilusión de una secuencia continua.

He aquí un ejemplo que he reducido a destacar la colocación de atributo:

<ol
    ><li>item</li
    ><li>item</li
  ></ol>

  <ol start="3"
    ><li>item</li
    ><li>item</li
  ></ol>

  <ol
    ><li value="5">item</li
    ><li>item</li
    ><li>item</li
  ></ol>

Estos elementos de la lista se numerarán secuencialmente 1-6 por los navegadores y otros agentes de usuario que todavía soportan el marcado obsoleto.

Trabajo sólo la hoja de estilo, entonces, es flotar en la sub-listas de lado a lado, a continuación, desactive la carroza después de la última columna. (En los viejos tiempos antes de llegar la religión, sub-listas eran comúnmente coloca dentro de las celdas de tabla adyacentes.)

¿Cómo editar: Cuando elementos de la lista se agregan o eliminan, algunos elementos tendrán que ser trasladados de un sub-lista a otro para mantener una longitud de la columna coherente. Si el número de artículos por los cambios de columna, el principio y valores de atributos de valor en XHTML tendrá que ser ajustado para mantener la numeración correcta. No hay cambios CSS son necesarias.
Método 3: dividir las listas de numeración con el contenido generado por CSS

Si usted es dividir la lista en trozos, una herramienta más para la numeración de los artículos de forma contigua es la generación de contenido CSS, en donde una hoja de estilos hace que el texto aparezca que no existe en el marcado XHTML.

Method 3: Numbering split lists with CSS

List item numbering and bulleting are actually two instances of content-generation, but they’re the only ones that are supported universally, probably because they date back to early HTML before CSS was born. The other forms of CSS content-generation are ill-supported in today’s browsers: of those tested, only Opera rendered this example properly.

The XHTML markup is similar to that in Method 2 but even cleaner: the list is divided into two or more sub-lists, but the start and value attributes are omitted.

Using CSS we suppress normal list item numbering, then apply the pseudo-element :before to insert incremental values:

ol li
  {
    list-style-type: none;
  }

  ol li:before
  {
    content: counter(item) ". ";
    counter-increment: item;
  }

Los ojos Sharp habrá alcanzado una diferencia sutil en el formato en la pantalla de arriba: los números generados con: antes de la prestación a ras de la izquierda, mientras que los navegadores suelen alinear lista ordenada de numeración alineados a la derecha. Esto afecta a la alineación de los valores de punto cuando el número de cambios de posiciones, como en 9 a 10 supra.

Cómo editar: cuando se añaden o eliminan de la lista general, algunos elementos tendrán que ser trasladadas de un sub-lista a otra en XHTML para mantener una longitud de la columna consistente. No es necesario profundizar el cambio a cualquiera de XHTML o CSS para preservar la correcta numeración.

Por desgracia, esta técnica no es práctico para cualquier propósito cross-browser hasta que haya más apoyo de los navegadores: antes de pseudo-elemento. Por ahora, el único navegador de Opera que puede hacerlo.
Numeración de las listas de separación con guión de

Mientras estamos en el tema de la generación de contenidos, voy a añadir de pasada que los productos en las listas de separación también puede ser “físicamente” numeradas de forma contigua por un script que inserta los números en los valores de partida, ya sea del lado del servidor en la página de generación de o-el lado del cliente a la página de carga.

Un script de servidor como ASP o PHP, leer los valores de elemento de la lista de una base de datos o un archivo plano, puede anteponer un número consecutivo para cada elemento, como está escrito en la página. También puede dividir el número total de elementos de la lista por el número de columnas deseado y generar la sub-lista de marcas. La tarea de la organización de la sub-listas de lado a lado se puede dejar a una hoja de estilo estático.

Un script de cliente como JavaScript puede localizar el sub-listas utilizando los identificadores o clases y iterar a través de los artículos, la inserción de partidas, la supresión de lista ordenada numeración normal, y el reparto una larga lista en sub-listas como sea necesario.

No hace falta decir (pero no) que cualquier solución que utilice el cliente de secuencias de comandos de gracia debe degradarse en los navegadores con secuencias de comandos desactivadas.
Envolviendo una lista única

Como hemos visto, el tema consecutivos dividir una lista en sub-listas y obligando a la numeración puede producir el efecto estético deseado, pero las soluciones no son tan satisfactoria para mí como una que preserve la integridad de la lista única de marcas.

Para cerrar una lista única en columnas, uso de CSS para agarrar cada elemento que comienza una nueva columna y arrastre de nuevo hasta el nivel de la primera partida y después a un margen de la nueva izquierda. La prestación normal hace el resto.

Ahora estamos botín talkin ‘!

Aquí hay tres formas de marcar esto:
Método 4: Ajuste de una lista única con XHTML

Si usted está dispuesto a controlar en la columna-wrap se produce utilizando el código XHTML, es bastante fácil para marcar cada artículo según el cual la columna que pertenece. Un nombre de clase adicional marca el primer elemento de cada columna.

Method 4: Wrapping a single list with XHTML

He aquí un ejemplo abreviado:

 <ol
    ><li>item</li
    ><li>item</li

    ><li>item</li
    ><li>item</li

    ><li>item</li
    ><li>item</li
  ></ol>

La hoja de estilos utiliza estas clases para establecer las posiciones de la columna horizontal:

li.column1 { margin-left: 0em; }
  li.column2 { margin-left: 10em; }
  li.column3 { margin-left: 20em; }

Luego, el mandato de la línea de la altura de cada elemento y llevar el primer elemento de cada columna de nuevo hasta el nivel de la primera partida:

li
  {
    line-height: 1.2em;
  }

  li.reset
  {
    margin-top: -6em;
  }

Retorno Vertical = número de elementos de una columna * altura de cada elemento. En este caso, 5 puntos * 1.2em = 6em. (Cuando he tratado de hacer el line-height menor que 1.2em me he encontrado cruzada discrepancias navegador.)

Cómo editar: cuando se añaden o eliminan de la lista, el código XHTML debe ser ajustado para artículos de la columna adecuada las clases y la clase de reset debe ser trasladado al primer elemento de cada columna. Cuando el número de artículos por los cambios de columna, el li.reset CSS () norma debe modificarse en consecuencia.

Esta no es mi técnica preferida ya que la columna y embalaje, se controla desde el código XHTML en lugar de la hoja de estilos. La forma en que se mire, envolviendo una lista en columnas verticales es una cuestión de presentación, no de contenido, y por lo tanto debe ser controlada por la hoja de estilos en el interés de separar el contenido de la presentación.
Envolviendo una lista única con CSS

En Métodos de cinco y seis que siguen, los puntos en que la lista se ajusta a una nueva columna se controlan totalmente de la hoja de estilos.

El precio que pagamos es un código XHTML pesados, grávidas con nombres de clase. Check this out:

Preparamos el marcado mediante la asignación de una clase única a cada elemento de la lista:

<ol
    ><li>Aloe</a></li
    ><li>Bergamot</a></li
    ><li>Calendula</a></li
    ...
    ><li>Oregano</a></li
    ><li>Pennyroyal</a></li
  ></ol>

(Estoy usando la clase en lugar de id aquí, así que voy a tener la libertad de incluir más de una lista envueltos en la misma página, una clase puede aplicarse a más de un objeto, sino un identificador debe ser único. La cosa importante es que cada elemento se identifica dentro de su lista.)

En la hoja de estilo, se asigna un margen izquierda diferente a cada grupo de elementos que pertenecen a una columna:

li.aloe,
  li.berg,
  li.cale,
  li.dami,
  li.elde
  {
    margin-left: 0em;
  }

  li.feve,
  li.ging,
  li.hops,
  li.iris,
  li.juni
  {
    margin-left: 10em;
  }

  li.kava,
  li.lave,
  li.marj,
  li.nutm,
  li.oreg,
  li.penn
  {
    margin-left: 20em;
  }

Esto es una reminiscencia de la “ColumnN” clases en el método 4, sin embargo aquí la determinación de qué elemento pertenece a la columna que se decide exclusivamente en el lado del CSS de la calle.

¡Oh, la ironía de todo esto! La perspectiva de la asignación de una clase única a cada elemento de la lista es suficiente para hacer que los ojos de la cruz y los dedos se doblen. Después de todo, la razón por la que estamos usando listas ordenadas en primer lugar, es aprovechar de la lista de numeración automática de los navegadores que ofrecen. Si tenemos que el nombre de cada clase de elemento de lista única, ¿por qué no sólo el número de la lista de artículos a sí mismos y hacerse con él?

Tranquilo. Respira. La asignación de las clases de punto único, no se trata de la numeración de los artículos, se trata de la presentación de la lista de todo el encontrar maneras de convencer al navegador para que lo envuelve en columnas sin tener que cortar la lista en pedazos y pegarlos al lado del otro. En el diseño de páginas web que le asignamos a las clases y los identificadores de elementos de página de forma rutinaria para guiar la presentación CSS, que es lo que están ahí. No nos equivoquemos, la asignación de una clase diferente para cada ítem en una lista es la idea de nadie de código elegante, pero funciona, valida, y no (en mi humilde opinión) que el marcado intrínsecamente ‘un-semántico.

Si vale la pena su tiempo para administrar el código de cualquiera de estas técnicas cuando se modifica una lista dependerá de cuánto usted quiere listas de varias columnas a trabajar. Afortunadamente, no es gran cosa. Edición de listas pequeñas a mano es fácil, y si tienes una lista muy larga que está en constante cambio probablemente se debe generar desde una base de datos en el primer lugar. Un consuelo es que cuando estamos generando las páginas de un script de servidor que podemos asignar clases de pieza única lista automáticamente, de modo que no tenemos para conseguir nuestros dedos sucios. (O cansado.)
Método 5: Ajuste de una lista única utilizando posicionamiento absoluto

Debido a que ahora hemos identificado cada elemento singular dentro de la lista, un enfoque posible es simplemente la posición de cada elemento de forma explícita.

Method 5: Wrapping a single list using absolute positioning

Tenga en cuenta que esta no es una solución práctica cruz navegador hoy en día para listas ordenadas, ya que ni Internet Explorer 6, ni Opera 7 se mostrarán los marcadores de la lista cuando elementos de la lista son de estilo (position: absolute;).

Para hacer este trabajo para el resto de los navegadores, la lista completa debe ser encerrado dentro de un div con (position: relative): aporta los elementos de lista absolutamente posicionado un marco de referencia para que podamos evitar que simplemente volar hasta el la parte superior de la página. Entonces es simplemente una cuestión de asignación de la posición vertical a cada elemento. Podemos hacer esto en las filas:

li
  {
    position: absolute;
  }

  li.aloe, li.feve, li.kava { top: 0.0em; }
  li.berg, li.ging, li.lave { top: 1.2em; }
  li.cale, li.hops, li.marj { top: 2.4em; }
  li.dami, li.iris, li.nutm { top: 3.6em; }
  li.elde, li.juni, li.oreg { top: 4.8em; }
  li.penn                   { top: 6.0em; }

¿Cómo editar: Cuando el número de artículos por los cambios de columna, la hoja de estilos tendrá que ser cambiado. Cuando los elementos se agregan o eliminan de la lista, la hoja de estilo debe ser editado para volver a determinar los elementos que residen en las columnas. Cada elemento de la lista nueva que se le asignará una clase única en XHTML.

Absolutamente posicionamiento cada elemento de una lista de control es un sueño de freak, el tipo de enfoque de muchos de nosotros cuando nos tomó por primera vez a la web desde el diseño de impresión y todavía no había aprendido a dejar ir. Para crear listas de varias columnas, no es necesario a la posición de cada elemento, como el método 6 demostrará, pero estoy incluyendo aquí en aras de la exhaustividad. Lo hace ‘break’ de manera diferente a Método 6, y que podría ser una base para la elección es el siguiente:

Si algún elemento de la lista es lo suficientemente largo para envolver a una segunda línea, ¿cómo puede eso afectar a la disposición de la lista? Cuando elementos de la lista son absolutamente posicionado como en el método 5, la disposición general se mantendrá sin cambios, pero el elemento de la lista que se envuelve se superpone el orden del día, en la lista que se cobrará su posición respecto a la anterior, sin texto, ya que la posición absoluta de cada toma producto fuera de la corriente. En cambio, en el método 6 debajo de cada columna de elementos de la lista desciende por el flujo normal, un elemento de la lista que envuelve a empujar los temas siguientes, el alargamiento de la columna es in Debido a que el método asume una altura de la columna fija, el retorno vertical, no será suficiente para que la siguiente columna de nuevo hasta la parte superior, crear un diseño escalonado.

Puede haber otras ramificaciones de la posición absoluta que afectará a nuestra elección: por ejemplo, algunos navegadores no permiten al usuario para resaltar el texto en bloques completamente posicionada.
Método 6: Envolver una sola lista, usando el flujo normal de

Por último, aquí está la técnica que prefieren utilizar: un solo semánticamente lista lógica y embalaje, cuya columna se controla por completo de CSS, se basa en el flujo normal, y trabaja en la mayoría de navegadores modernos.

Method 6: Wrapping a single list using normal flow

Como en el método anterior, cada elemento de la lista se le asigna un nombre de clase única en XHTML, y el margen izquierdo de cada columna se establece en el CSS.

Lo que diferencia este método es que aquí usamos las clases de punto único para llevar el primer elemento de cada columna de nuevo a la cima con un margen negativo-top:

li
  {
    line-height: 1.2em;
  }

  li.feve,
  li.kava
  {
    margin-top: -6em;
  }

Una vez más, el retorno verticales = número de elementos de una columna * altura de cada elemento. En este caso, 5 puntos * 1.2em line-height = 6em.

Cómo editar: cuando se añaden o eliminan de la lista, la unicidad de nombres de clase el tema debe mantenerse en XHTML y la hoja de estilo debe ser ajustado a cambio de artículos a sus columnas correspondientes.
Gettin ‘de lujo

Con un poco de estilo y algunas imágenes de fondo, la lista puede estar listo a la fiesta sin romper el multi-flujo de la columna.

Example 7: Gettin’ fancy

¿Y ahora?

Hay muchas maneras para mostrar una lista de múltiples columnas. Como hemos visto, muchos de ellos requieren un compromiso de estándares de la web o el navegador de compatibilidad, así como algunas marcas muy peludos y de estilo. La mejor opción, en mi opinión, es dar el código XHTML suficiente “ganchos” para permitir que la columna de la envoltura a ser controlado por completo de CSS.

Lo que realmente necesitamos es que alguna bombilla brillante para venir y averiguar cómo hacer esto con el formato de repuesto y concluyeron que el Santo Grial.

Ahora, ir adelante y botín!
Navegadores y ayudantes

Los ejemplos para este artículo aspecto sustancialmente la misma (salvo que se indique en el texto) en los navegadores Firefox 1.0, Internet Explorer 6, Mozilla 1.7.2, Netscape 7.1 y 6.2 y Opera 7.23, y en los navegadores Macintosh Firefox 1.0, Internet Explorer 5.2 y Safari 1.0.3.

Con menos éxito con estos métodos son Windows Internet Explorer 5.x y anteriores, Linux Konqueror 3, y Netscape 4.x Tal vez con la persuasión que podrían ser persuadidos a venir también.

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | 1 Comment

1 Comentario hasta el momento

Suscribirme a éste comentario RSS or TrackBack 'CSS Swag: Multi-columna muestra'.

  1. nov 19, 2009 at 14:53

    Jim says,

    que tal… sabes donde puedo llevar una capacitación para llevar CSS/XHTML, y poder maquetear, optimizar navegadores, etc etc.. sería buena voz.

    saludos.

Déjanos tu comentario

Por favor, sea educado sobre el tema. Tu email no será publicado.

Novedades