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

CSS Diseño: Listas de Doma “CSS Design: Taming Lists”

Ya en julio de 1999 yo estaba en las listas de correo electrónico pontificar sobre las virtudes de las hojas de estilo. Algunas cosas nunca cambian.

Lo que ha cambiado es la forma en que pienso en CSS, y la estructura subyacente de (X) HTML a los que se aplica. Por ejemplo, me parece que la mayoría de las páginas en la web contiene un menú de enlaces en un área de navegación. Estos son a menudo marcado como una cadena de enlaces, a menudo en DIVs separados o párrafos. Estructuralmente, sin embargo, son una lista de enlaces, y debe ser marcado como tal.

Por supuesto, la razón de que no los marca en esa forma es que no queremos que una bala en la frente de cada eslabón de nuestra zona de navegación. En un artículo anterior señalé varias técnicas para el uso de CSS para el diseño de una página web. Una de las técnicas utilizadas para la manipulación de una lista de visualización horizontal y no vertical.

En este artículo, voy a demostrar cómo utilizar CSS para llevar listas de difícil de manejar bajo control. Es hora de que les diga a las listas de cómo comportarse, en lugar de dejar que vuele en su página web.
Preparando el escenario

Para efectos de este artículo, yo estoy usando listas desordenadas. El CSS puede aplicar el mismo, con resultados similares, así como listas ordenadas. Salvo disposición en contrario, todos los ejemplos en este artículo se utiliza el siguiente código para las listas

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5 haremos un poco más de tiempo para wrap</li>

</ul>

Cada lista simplemente se coloca dentro de un DIV diferentes, y el CSS está escrito de modo que el comportamiento de la lista es determinada por el DIV es pulgadas cada div tiene una regla de base:

#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}

Sin ningún tipo de estilos adicionales aplicadas, la lista se representa de esta manera en la base de DIV:
*  Item 1
* Item 2
* Item 3
* Item 4
* Item 5 haremos un poco más de tiempo para wrap
Posicionamiento

A veces, el guión, por defecto de una lista es demasiado para el diseño que está trabajando. Sin embargo, simplemente cambiando el margen o el relleno de la UL no funciona para todos los navegadores. Para que la lista alineado a la izquierda, por ejemplo, tiene que cambiar tanto el margen y el relleno. Esto es porque Internet Explorer y Opera optado por crear el guión con el margen izquierdo, mientras que Mozilla / Netscape uso de relleno. Para mayor información consulte el artículo DevEdge consonancia Lista sangría.

En el siguiente ejemplo, tanto el margen izquierdo y padding-left de la UL en el DIV se ponen a cero:

*  Item 1
* Item 2
* Item 3
* Item 4
* Item 5 haremos un poco más de tiempo para wrap
Tenga en cuenta que los marcadores se encuentran fuera de la DIV. Si la caja que contenía eran el cuerpo del documento HTML, los marcadores pueden ser prestados fuera de la ventana del navegador, en efecto de fuga. Si desea que los marcadores de la línea en el interior de la DIV, pero a lo largo de su lado izquierdo, o bien establecer el relleno o el margen izquierdo a una em:
*  Item 1
* Item 2
* Item 3
* Item 4
* Item 5 haremos un poco más de tiempo para wrap
Marcadores

Tal vez usted ha tenido un proyecto que requiere una bala personalizado. Si es así, podría haber marcado en una tabla con una columna que contiene las viñetas de imagen GIF alineado arriba ya la derecha, y la otra columna con el contenido de lo que debería haber sido LI. Con CSS es posible utilizar una imagen como una bala. Si el navegador no soporta esta parte del CSS (o no hacer imágenes), la bala por defecto será usada (o puede especificar una bala HTML diferente si lo desea).

La norma se ve algo como esto:

ul {
list-style-image: url(bullet.gif);
}
Y el navegador hace es el siguiente:
*  Item 1
* Item 2
* Item 3
* Item 4
* Item 5 haremos un poco más de tiempo para wrap
Para especificar una bala de HTML para utilizar si el navegador no es compatible con esta parte de la CSS, añadir:
list-style-type: disc;
a la regla hará que el cambio. Estas tres declaraciones se pueden combinar en una sola declaración, reducida tal como se ilustra en la siguiente regla:
ul {
list-style: disc url(bullet.gif) inside;
}
que es el equivalente de:
ul {
list-style-type: disc;
list-style-image: url(bullet.gif);
list-style-position: inside;
}
Esto es lo que parece en la página web:
Sin_t__tulo_2.jpg
Puede haber ocasiones en las que tienen una lista, pero no queremos balas, o si desea utilizar algún otro carácter en lugar de la bala. Una vez más, CSS proporciona una solución sencilla. Basta con añadir list-style: none; a la regla y la fuerza de la LIS para mostrar con sangrías. La norma se verá algo como esto:
ul  {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
Ya sea el relleno o el margen de las necesidades que se ponen a cero, con el otro de uno a 1em. Dependiendo de la “bala” que usted elija, puede ser necesario modificar este valor. El texto negativa guión hace que la primera línea que se desplaza a la izquierda por esa cantidad, la creación de una sangría francesa.

El HTML contendrá nuestro UL estándar, pero con cualquier carácter o entidad HTML que desea utilizar en lugar de la viñeta anterior, el contenido del elemento de la lista. En nuestro caso vamos a utilizar », el derecho de cita ángulo doble:».

navegadores que señalar que Netscape6/7/Mozilla (y otros basados en Gecko) y Opera puede crear contenidos generados a través de la CSS2: antes del pseudo-elemento. Podemos tomar ventaja de esto para generar automáticamente el carácter »(o de cualquier otro carácter) para las balas. Esto nos permite dejar que el contenido de la UL solo. Si usted está usando Opera o un navegador basado en Gecko, el siguiente CSS creará la misma lista que el anterior, pero utilizando el estándar UL sin contenido extra:
#custom-gen ul li:before {
content: “\00BB \0020″;
}

Listas de verdad en línea

¿Quién dice que una lista tiene que ser alineada verticalmente con balas colgando del lado izquierdo de cada tema? Tal vez desea que la estructura de una lista ordenada de enlaces, pero visualmente que desea que se vea como una barra de navegación vertical en la página web. O tal vez usted quiere que su lista de enlaces que se alineen horizontalmente en la parte superior de la página.

Esto se aplica a algo más que listas de enlaces. Hay veces en que es posible que tenga a la lista de varios elementos, en medio de un párrafo, tal vez una lista de libros que desea leer. Estructuralmente, tiene sentido para marcar esto como una lista, pero presentationally puede que no desee cortar el flujo del párrafo. CSS para el rescate de nuevo!

Dado que esta lista no será separado y en sí mismo, no voy a ponerla en el DIV de base que las listas anteriores han habitado. Esta vez, el margen de beneficio será un párrafo, seguido por la misma lista, seguido de otro párrafo.

Te oigo llorar, “Foul! Pensé que íbamos a poner una lista dentro de un párrafo, no entre dos párrafos. ”

A lo que contesto: “Bueno, sí. Pero (X) HTML no permite una lista que aparecen dentro de un párrafo. Sin embargo, con la ayuda de nuestra hoja de estilo, que es como se verá en la página web “.

Esto es lo que los estilos parecidos a estos:

#inline-list {
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}

#inline-list p {
display: inline;
}

#inline-list ul, #inline-list li {
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}

El margen de beneficio consiste en una <div id=”inline-list”>. Esta DIV contiene un párrafo seguido de nuestra norma UL, y un apartado de seguimiento. La lista de UL ha sido modificado de modo que cada elemento de la lista tiene una coma después de que, con el último punto seguido de un período.

Los resultados están por debajo de (la lista aparece en negrita y azul):

Un poco de texto antes de la lista aparece. Tal vez el contexto es algo acerca de un marido que una llamada de su esposa a recoger algunas cosas en el camino a casa desde el trabajo. En realidad no importa, para nuestro propósito sólo necesitamos un poco de texto precedente antes de la lista: * Tema 1, * Artículo 2, * Artículo 3, * Artículo 4, *Tema 5  haremos un poco más de tiempo para que se ajustará. Y luego está el texto que sigue a la lista en el párrafo. Uno o dos frases es suficiente para el ejemplo.
Como en el ejemplo de bala por encima de la costumbre, se podría utilizar el CSS para generar automáticamente las comas y el período que siguen a cada elemento de la lista. Si todo lo que tenía que preocuparse por la Ópera y fueron alimentados navegadores Gecko, que es. Esta vez los estilos se vería así:
#inline-list-gen ul li:after {
content: “, “;
}

#inline-list-gen ul li.last:after {
content: “. “;
}

Aquí se utiliza el: después de pseudo-elemento para agregar una coma después de cada elemento de la lista, y un período después de que un elemento de la lista con class = “anterior”, con el siguiente resultado (recuerde, sólo será visible en Opera o Mozilla / Netscape ):
Un poco de texto antes de la lista aparece. Tal vez el contexto es algo acerca de un marido que una llamada de su esposa a recoger algunas cosas en el camino a casa desde el trabajo. Realmente no importa, para nuestro propósito sólo necesitamos un poco de texto antes de la lista anterior: punto 1, * Artículo 2, punto 3, punto 4, * Tema 5 haremos un poco más de tiempo para que bajara
Y luego está el texto que sigue a la lista en el párrafo. Uno o dos frases es suficiente para el ejemplo.

#h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}

Los dos ejemplos siguientes utilizan el mismo UL como en los ejemplos anteriores, pero sin el elemento de la lista final con su texto adicional. También incluyen una clase adicional que separa una de la LIS en la lista.

Fronteras

Un carácter de canalización, |, a menudo se utiliza para diferenciar entre las opciones. Se trata de un evidente carácter de separación, y puede servir de ejemplo para agregar a la lista de artículos de las fronteras:

#pipe ul {
margin-left: 0;
padding-left: 0;
display: inline;
}
#pipe ul li {
margin-left: 0;
padding: 3px 15px;
border-left: 1px solid #000;
list-style: none;
display: inline;
}

#pipe ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
}

Aquí agregamos class = “primero” de la LI primero para que no termine con un borde en su lado izquierdo.
Usted puede modificar estos estilos para crear un efecto de navegación con pestañas:
#tabs ul {
margin-left: 0;
padding-left: 0;
display: inline;
}

#tabs ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
}

#tabs ul li.here {
border-bottom: 1px solid #ffc;
list-style: none;
display: inline;
}

En este ejemplo añadiendo class = “aquí” para un LI crea un borde inferior que coincide con el color de fondo para indicar que la ficha se refiere a la página actual.

Nota: Esta técnica fue ofrecida por Randal Rust, y luego riffed por muchos en el css-discuss lista de correo electrónico
Senderos Breadcrumb

Otra lista de enlaces que normalmente tiene una orientación horizontal en una página web es lo que se conoce como breadcrumbing. Pan rallado mostrará dónde usted está en la jerarquía de un sitio, a partir de la página de inicio y la perforación hasta la sección actual o la página. Si usted realmente quiere hacer el marcado sentido, usted quiere crear una serie de listas anidadas, ya que cada nueva sección forma parte de la sección antes de que:

<div id=”bread”>
<ul>
<li>Home
<ul>
<li>&#187; Products
<ul>
<li>&#187; Computers
<ul>
<li>&#187; Software</li>
</ul></li>
</ul></li>
</ul></li>
</ul>
</div>
crea lo siguiente:

* Home» Products» Computers» Software

Añadiendo las siguientes reglas a la hoja de estilo para la página:
#bread {
color: #ccc;
background-color: #006;
padding: 3px;
margin-bottom: 25px;
}

#bread ul {
margin-left: 0;
padding-left: 0;
display: inline;
border: none;
}

#bread ul li {
margin-left: 0;
padding-left: 2px;
border: none;
list-style: none;
display: inline;
}

crea esto:
Home» Products» Computers» Software
Una vez más, podemos generar el carácter »(o de cualquier otro carácter que usted podría usar como un separador) con: antes de pseudo-elemento, combinado con un class =” primero “para que la LI primero no genera un separador:
#bread-gen ul li:before {
content: “\0020 \0020 \0020 \00BB \0020″;
color: #ff9;
}

#bread-gen ul li.first:before {
content: ” “;
}

Y el resultado final:
Home» Products» Computers» Software
En el mundo real

Me gustaría terminar con una aplicación real de algunas de las técnicas que se han discutido aquí. Usaremos un UL estándar que contiene enlaces para crear un menú dinámico con efectos de la libración. Con el fin de obtener los efectos de la libración vamos a dejar que la UL proporcionan la estructura y los estilos de anclaje proporcionará la mayoría de los efectos visuales.

Este menú de enlaces es realmente una solución a una pregunta formulada por Michael esfuerzo en la CSS-discuss lista. Michael se había creado este efecto exacto mediante una tabla, las imágenes, y JavaScript. Pidió a la lista si se podía hacer con CSS. Tomé el reto, y con la ayuda de varios otros miembros que rastreó algunas cuestiones específicas del navegador, nos encontramos con una hoja de estilo que funciona en este marcado:
<div id=”button”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Hidden Cameras</a></li>
<li><a href=”#”>CCTV Cameras</a></li>
<li><a href=”#”>Employee Theft</a></li>
<li><a href=”#”>Helpful Hints</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
Echemos un vistazo a la regla de la hoja de estilo por la regla, y voy a explicar por qué cada regla se construye la forma en que lo es.
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: ‘Trebuchet MS’, ‘Lucida Grande’,
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;
}
La primera regla es que el botón # DIV. Se define el espacio que ocupará en el menú, y proporciona un contexto para el menú para que podamos definir la forma en la lista y los enlaces se comportan dentro de la DIV. Decidí hacer que el líquido de menú, basado en las preferencias de tamaño de fuente del navegador, así que (casi) todas las unidades están en EMS. Esto incluye a la anchura del menú. El borde negro sólido sobre el derecho se basa en el diseño original de Michael. El relleno de fondo está ahí para ampliar la DIV establecen más allá del menú de enlaces para que pueda ver el fondo de la DIV. De nuevo, esto sigue el diseño original. El margen inferior es separar la DIV de lo que sigue. Los colores vino desde el diseño original.
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

Luego me definieron lo que la lista se verá así. Dado que todos los elementos de la lista iban a ser los vínculos y la funcionalidad de vuelco se construiría en el CSS para los enlaces, que esencialmente elimina todos los estilos de las listas. Hice añadir un borde único píxel en la parte inferior de cada enlace que coincidió con el fondo de la tecla # DIV, para trabajar como el separador. En el diseño original, se trataba de una imagen.
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

Por último, se definen los vínculos. El diseño original tiene 10 píxeles de las fronteras de la derecha y la izquierda. Estas fronteras, junto con el fondo, cambian de color en el vuelco del vehículo. Esto es algo relativamente sencillo de controlar con el pseudo: hover clase en CSS, así que puse este estilo en los estilos de anclaje.

Hay una solución en esta parte de la hoja de estilo. Para establecer los vínculos activos para el ancho de la DIV, hice display: block;. Esto funciona para todo, pero IE / Windows. Si usted le da al bloque un ancho explícita del 100%, entonces IE / Windows juega a lo largo. Pero hacer esto crea problemas con IE5/Mac y Netscape / Mozilla. Así que he usado el selector de hijo “>” para redefinir el ancho de automóviles. Desde IE / Windows no entiende selectores de hijos, se ignora la regla. IE5/Mac, Opera y Netscape / Mozilla seguir la regla, y todo el mundo está feliz.

La regla para la: hover pseudo-clase crea los cambios de color en el fondo y las fronteras cuando los vínculos son moused más.

El estilo y la lista de marcado (alrededor de 1K vale la pena), sustituyó sobre 5K de JavaScript y de marcado de mesa, por no hablar de otro modo 8K o de imágenes para los efectos de vuelco. También hizo el marcado más legible y más fácil de actualizar, puesto que ya no es necesario crear nuevas imágenes, si cambia un enlace del nombre. Ahora simplemente modificar el texto. Usted puede ver el resultado final en el contexto de la página en el sitio web de Vigilancia de Activos.
Punta del Iceberg

Lo creas o no, acabamos de arañado la superficie de lo que se puede hacer para modificar las listas con las hojas de estilo. No voy a pretender que todas las técnicas presentadas aquí son la CSS más práctico que usted va a venir a través, pero espero que te hacen pensar acerca de cómo utilizar CSS puede liberar el uso de marcas más estructurada.

fuente: alistapart

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | 1 Comment

Puertas deslizantes con CSS

Una ventaja de CSS que rara vez se mencióna es la habilidad de poner las imágenes de fondo en capas, permitiendo que se deslicen para crear ciertos efectos. CSS2 requiere elementos HTML distintos para cada imagen de fondo. En muchos casos código semánticamente correcto ya provee estos distintos elementos, suficientes por lo tanto para aplicar este truco.

Uno de estos casos es la navegación con pestañas. Es hora de retomar el control sobre las pestañas cuya popularidad para la navegación primaria en muchos sitios esta creciendo. Ahora que CSS es aceptado ampliamente, podemos subir la calidad y el aspecto de las pestañas de nuestros sitios. Probablemente estén al tanto de que se puede usar CSS para dominar simples listas desordenadas. Quizás hasta hayan visto listas estilizadas como pestañas de una manera similar a esta:

Esquinas Cuadradas

Que dirían si les dijese que con el mismo código HTML de las pestañas de arriba, podemos hacer algo así:

Esquinas Redondeadas

Con estilos simples, podemos.

¿Dónde esta la innovación?

Muchas de la pestañas estilizadas con CSS que he visto tienen el mismo aspecto general: rectangulos cuadrados de color, quiza con un borde, quiza con un recuadro, un borde desaparece para la pestaña activa, el color cambia en el estado :hover. ¿Esto es todo lo que CSS nos puede brindar? ¿Un puñado de cajas de colores?

Antes de la expansión de CSS, comenzamos a ver un montón de innovación en el diseño de navegación. Formas creativas, fusion de colores e imitaciónes de interfaces físicas del mundo real. Pero estos diseños dependían de una construcción compleja de imágenes mezcladas con tablas. Modificando el texto o el orden de las pestañas requerían un gran esfuerzo. Cambiar el tamaño de letra era imposible o causaba grandes desperfectos en el diseño de la página.

Navegación por texto puro es mucho más simple y carga mas rápido que usando imágenes. Ademas, aunque podemos poner atributos alt a cada imagen, texto puro es mucho más accesible ya que se puede agrandar el tamaño de letra para gente con problemas de vista. No es ningún misterio porque la navegación hecha con texto esta volviendo a la escena. Pero la mayoría de estas pestañas estilizadas con CSS siguen estando un nivel por debajo de lo que antes se podía conseguir, obviamente nada que se pueda incluir en un portfolio. Una nueva tecnología (como CSS) debería permitirnos crear algo mejor, sin perder la calidad gráfica de los modelos antiguos con tablas e imágenes incorporadas.

La técnica de puertas deslizantes

Hermosuras, componentes de interfaz verdaderamente flexibles que se expanden y contraen con el tamaño del texto son posible con dos imágenes de fondo. Una para la izquierda y otra para la derecha. Piensen que estas imágenes son como dos puertas deslizantes que completan una entrada. Las imágenes se acercan y se superponen para llenar un espacio poco ancho, o se separan para llenar un espacio mas ancho, como muestra el siguiente diagrama:

Diagrama

Con este modelo, una imagen cubre una porción de la otra. Asumiendo que queremos algo especial en la parte exterior de cada imagen, como una esquina redondeada, no queremos que la imagen superior cubra complemtamente a la inferior. Para evitar esto hacemos que la imagen de la izquierda sea lo mas fina posible. Pero lo suficientemente ancha como para que se vea el detalle especial:

Diagrama

Si el objeto se hace más grande que la anchura de las imágenes, por culpa de cambio de fuente o tamaño del texto, las imágenes se separaran y quedará un vacio feo. Tenemos que hacer una estimación de cual es la cantidad de amuento que tendrá que soportar la pestaña. ¿Cuanto creemos que podrá crecer el texto si se aumenta el tamaño? Realísticamente, debemos tener en cuenta de que el texto puede aumentar un 300%. Debemos, por lo tanto, hacer las imágenes de fondo más grandes para poder soportar ese incremento. Para nuestro ejemplo, haremos que la imagen de la derecha sea de 400x150px y la imagen de la izquierda sera de 9x150px.

Tengan en cuenta que las imágenes solo se ven en la zona delimitada por nuestra “puerta”. Las dos imágenes estan fijadas a sus respectivas esquinas. Las partes visible encajan dentro de la puerta para formar una pestaña redondeada:Diagrama

Si la pestaña se agranda, las imágenes se separan, llenando una puerta más grande, revelando más de cada imagen:

Diagrama

Para este ejemplo, use Photoshop para crear dos pestañas tri-dimensionales que use más arriba. Para una use un relleno clarito y para la segunda lo hize más oscuro, la versión “light” será la usada para la pestaña activa. Usando esta técnica, necesitamos expandir el area de la imagen y cortarla en dos pedazos:

Diagrama

Lo mismo debemos hacer para la version “light”. Una vez que tengamos las cuatro imágenes, (1, 2, 3, 4) podemos pasar al código y el CSS de las pestañas.

Creación de pestañas

A medida que vayan explorando la creación de listas horizontales con CSS, se darán cuenta de que existen dos métodos para acomodarlos en una fila. Ambos tienen sus ventajas y desventajas. Ambos métodos son confusos y requieren un poco de paciencia. Uno usa display:inline y el otro usa position:float

El primer método, y el mas común, consiste en cambiar el display de cada item a inline. Este método es interesante por su simplicidad. Sin embargo, este método causa algunos problemas en ciertos navegadores. El segundo método es el que vamos a usar, usa float para poner cada elemento en su lugar, en una fila. Este método puede ser igual de frustrante. Su comportamiento aparentemente irregular no sigue ninguna lógica. De todas maneras, con una comprension básica de como usar multiples floats puede lograr maravillas.

Vamos a anidar varios elementos dentro del float. Hacemos esto para que los elementos esten limitados por el float, de esta manera podemos poner las imágenes de fondo en estos elementos y por lo tanto hacer que tengan las medidas de la pestaña. Es importante recordar que el siguiente elemento despues de la lista debe restaurar su posición usando la propiedad de clear. Esto evita que las pestañas afecten a la colocación de otros elementos en la pagina.

Comenzamos con el siguiente código:
<div id=”header”>
<ul>
<li><a href=”#”>Home</a></li>
<li id=”current”><a href=”#”>News</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

En realidad, la div #header puede contener un logo y un formulario de busqueda. Para nuestro ejemplo, vamos a acortar el valor de href de cada link. Obviamente, estos valores serían de direcciónes normales.

Empezamos por estilizar nuestra lista por hacer que el #header flote. Esto ayuda a asegurar que el contenedor contenga la lista que también estara flotante. Ya que el elemento esta flotando, le ponemos una anchura de 100%. El fondo temporal amarillo es para asegurar que el #header se expanda para llenar el espacio detrás de las pestañas. Tambien agregamos unas propiedades para el texto, asegurandonos que todo quede igual:
#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

Por el momento, le asignaremos “0″ a todos los valores de margin y padding de la lista y sus items, también eliminamos el marcador de lista. Cada elemento se flota a la izquierda:
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}

Hacemos que todos los enlaces sean bloques para poder controlar todos los aspectos con mayora facilidad:
#header a {
display:block;
}

Luego, añadimos la imagen derecha al elemento de lista (los cambios estan en negrita):
#header li {
float:left;
background:url(“norm_right.gif”) no-repeat right top;
margin:0;
padding:0;
}

Ahora podemos colocar la imagen de la izquierda en frente de la imagen de la derecha, aplicandola al enlace. Asimismo añadimos padding, para expandir la pestaña y alejando el texto de los bordes:
#header a {
display:block;
background:url(“norm_left.gif”) no-repeat left top;
padding:5px 15px;
}

Una nota para los confundidos usuarios de IE5/Mac que se estarán preguntando “¿Qué esta pasando? Las pestañas estan apiladas y se expanden por toda la pantalla”. No se preocupen, ya llegaremos a ese punto. Por el momento, intenten seguir o cambien temporalmente de navegador si es posible.

Ahora tenemos las imágenes de fondo en lugar de las pestañas normales, tenemos que cambiar las imágenes usadas para la pestaña activa. Hacemos esto con un nuevo elemento id=”current” y le ponemos el link dentro. Ya que no tenemos que alterar nada mas que las imágenes de fondo usamos la propiedad de background-image:
#header #current {
background-image:url(“norm_right_on.gif”);
}
#header #current a {
background-image:url(“norm_left_on.gif”);
}

Necesitamos algún tipo de borde en la parte inferior de las pestañs. Pero aplicando border a #header no permitirá que la pestaña activa se posicione encima del borde. En cambio, creamos una imagen con el borde que queremos incluir en la parte inferior de la imagen. Ya que estamos, le ponemos un gradiente suave:

Fondo

Aplicamos esa imagen como fondo de #header (en reemplazo del amarillo que habia previamente), empujamos la imagen contra el borde inferior y usamos el color que tenga dicha imagen arriba. Tambien, le sacamos el padding al elemento body que teniamos incialmente, y aplicamos 10px de padding arriba, a la derecha y a la izquierda de la lista:
#header {
float:left;
width:100%;
background:#DAE0D2 url(“bg.gif”) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

Para completar el effecto de pestaña, necesitamos que la pestaña activa este por encima del borde. Lo lógico sería aplicar un borde inferior con el mismo color del borde de #header y luego cambiarlo para la pestaña activa. Pero si hacemos esto nos quedara un escalón de un píxel. En cambio, si cambiamos el padding dentro de la pestaña activa:

Diagrama

Hacemos esto decrementando el padding del enlace por un píxel (5px – 1px = 4px), y luego se lo sumamos a la pestaña activa:
#header a {
display:block;
background:url(“norm_left.gif”) no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url(“norm_left_on.gif”);
padding-bottom:5px;
}

Toques finales

Aquellos que tengan buena vista habrán notado que se ven las esquinas blancas de las pestañas. Estas esquinas opacas impiden que se vea el fondo. En teoría podriamos hacer que ese color fuese similar a la zona de la imagen de fondo, para que se disimule. Pero como queremos que nuestras pestañas puedan cambiar de tamaño esto seria imposible. Para soluciónar este problema hacemos que las esquinas de las pestañas sean transparentes. Si las curvas tienen anti-alising, las combinamos con un color de fondo similar al de la imagen de fondo.

Ahora que las esquinas son transparentes, un pedazo de la imagen de fondo de la derecha se ve a traves de la zona transparente de la imagen de la izquierda. Para evitar esto le ponemos un poco de padding izquierdo al elemento de lista equivalente a la anchura de la imagen de la izquierda (9px). Como ya teníamos un padding, tendremos que eliminar otra tanto al enlance para que quede centrado (15px – 9px = 6px):

#header li {
float:left;
background:url(“right.gif”) no-repeat right top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url(“left.gif”) no-repeat left top;
padding:5px 15px 4px 6px;
}

Sin embargo, no lo podemos dejar así tampoco, porque ahora nuestra imagen de fondo izquierda se aleja del borde de la pestaña unos 9px. Ahora que los lados interiores de ambas imágenes están juntas, no necesitamos que la imagen de fondo izquierda este arriba. Asi que podemos intercambiarlas, aplicandolas a los elementos opuestos. Necesitamos intercambiar las imágenes de la pestaña activa también:
#header li {
float:left;
background:url(“left.gif”) no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url(“right.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url(“left_on.gif”);
}
#header #current a {
background-image:url(“right_on.gif”);
padding-bottom:5px;
}

Un hack consistente

En la mayoria de los navegadores, cuando flotamos un elemento, este se achicara lo maximo posible. Si el elemento contiene una imagen entonces tendrá las dimensiones de la imagen.

Un problema se presenta para Mac cuando un elemento bloque de anchura indefinida se mete dentro del elemento flotado. Otros navegadores achicarían el elemento independientemente del tamaño de lo que hubiese dentro, pero Mac no lo hace. Lo que hace es exandir el elemento flotado lo maximo posible. Para soluciónar el problema tenemos que flotar el enlace, pero solo para Mac, para que no salten problemas en otros navegadores. Primero haremos que el enlace flote y luego usaremos el Commented Backslash Hack para esconder una nueva definición de Mac que elimina el float para los otros navegadores:
#header a {
float:left;
display:block;
background:url(“right.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#header a {float:none;}
/* End IE5-Mac hack */

No debería haber ningun diferencia entre el ejemplo 5 y 6 para los otros navegadores. Notese que IE5.0/Mac sufre de muchos problemas que se arreglaron con IE5.1./Mac Por eso, este truco no sirve en la versión 5.0. Ya que la actualización a IE5.1/Mac ha estado disponible por algún tiempo la cantidad de Macs con OS 9 y IE5.0 debería ser infima.

Título Original: Sliding Doors of CSS
Autor: Douglas Bowman
Fuente: scourdesign

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en CSS | Responder

Novedades