Desarrollo »Internet» Graphics & Design »CSS

Crear un separador de tubo a través de CSS

Martes, 9 de septiembre 2008

Usted verá a menudo una serie de vínculos distribuidos horizontalmente separados por una tubería "|", el símbolo gráfico dell'asticella vertical. Además, si usted tiene una buena escritura HTML, te das cuenta de que esta serie de enlaces - aparentemente horizontal - no son más que balas UL o OL De ello se deduce que, en vez de escribir:

Texto sin formato
HTML:
  1. <p>
  2. "#1" > Link 1 </a> | <a href = "#2" > Link 2 </a> | <a href = "#n" > Link n </a> href <a = "#1"> Link 1 </ a> | href <a = "#2"> Link 2 </ a> | href <a = "#n"> n Link </ a>

Sería mejor utilizar:

Texto sin formato
HTML:
  2. > Link 1 < / a>< / li> <li> <a href = "#1"> Link 1 </ a> </ li>
  3. > Link 2 < / a>< / li> <li> <a href = "#2"> Link 2 </ a> </ li>
  4. > Link n < / a>< / li> <li> <a href = "#n"> n Link </ a> </ li>

Sin embargo, agregar la tubería como un código de carácter sucio tan limpio. Nosotros también puede usar una frontera, utilizando el código:

Texto sin formato
CSS:
  1. ul li (
  2. none ; list-style: none;
  3. left ; float: left;
  4. 0 12px 0 12px ; padding: 0 12px 0 12px;
  5. 1px solid #666 ; border-right: 1px solid # 666;
  6. )

Obtención:

Podemos ver dos problemas: el primer enlace tiene el padding a la izquierda y el último eslabón de la tubería tiene a su derecha, que no es agradable de ver! Así que aquí puede ser el uso de :first-child :last-child de CSS2 al formato de gráfica en nuestra lista. Uso de la siguiente hoja de estilos en el código HTML mostrado anteriormente:

Texto sin formato
CSS:
  1. ul li (
  2. none ; list-style: none;
  3. left ; float: left;
  4. 0 12px 0 12px ; padding: 0 12px 0 12px;
  5. 1px solid #666 ; border: 1px solid # 666;
  6. )
  7. / * Retire el material protector del hijo de la "primera", la primera LI * /
  8. ul li: primer hijo-(
  9. 0 12px 0 0 ; padding: 0 12px 0 0;
  10. )
  12. / * Retire frontera "Last Child", LI * /
  13. ul li: last-child (
  14. 0 0 0 12px ; padding: 0 0 0 12px;
  15. none ; border: none;
  16. )

De esta manera obtener un mejor resultado:

Por supuesto, como sucede a menudo, la atención a la compatibilidad con varios navegadores, especialmente Internet Explorer.

Variante a flotar

Incluso mejor, si quieres evitar el float utilice este código:

Texto sin formato
CSS:
  1. ul li (
  2. none ; list-style: none;
  3. inline ; display: inline;
  4. 0 12px 0 12px ; padding: 0 12px 0 12px;
  5. 1px solid #666 ; border-right: 1px solid # 666;
  6. )
  7. ul li: primer hijo-(
  8. 0 12px 0 0 ; padding: 0 12px 0 0;
  9. )
  10. ul li: last-child (
  11. 0 0 0 12px ; padding: 0 0 0 12px;
  12. none ; border: none;
  13. )

Mismo resultado, al menos en FireFox :)

Post relacionados

Fue útil esta información?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Cargando ...


4 comentarios a "Crear un separador de tubo a través de CSS"

  1. getAvatar 1,0
    09 sep, 2008 Giulio

    ¿Por qué, según su punto de vista, la sintaxis 

      <a href = "# 1" .....

    es peor 

      <a href = "....?

    En términos de codificación, no veo ninguna ventaja evidente, o más bien, lo veo, pero sigue siendo relativamente insignificante e integrables. Ha perdido algo?

    Responder Compartir
  2. getAvatar 1,0
    09 sep, 2008 Giovambattista Fazioli:

    @ Julius: la calidad del código que tienden a escribir el código HTML, pero el abandono al final gráfico. De ello se desprende que una "lista" de los enlaces, siendo sólo una lista, debe aparecer como UL LI A continuación, aparece horizontal o verticalmente, que debe ser - precisamente - la tarea de CSS. Sin embargo, no hay nada malo en escribir una secuencia de vínculos como una serie de TAG A La cuestión es que la eliminación de las hojas de estilo como se muestra en la página? Uso de una secuencia de etiqueta A separados por la tubería, que será tan visible incluso en ausencia de la hoja de estilo. Usando en su lugar una página de lista de UL LI todavía se vean bien y legibles, sin la hoja de estilo.

    Responder Compartir
  3. getAvatar 1,0
    12 de junio 2009 sXe:

    Truco interesante. Sin embargo, tratando de esta última opción (sustituir el flotador con display: inline), el diseño del menú cambia ligeramente. O el relleno, no es igual a la derecha e izquierda, como es el caso de la flotación.

    S.

    Responder Compartir
  4. getAvatar 1,0
    15 de junio 2009 Giovambattista Fazioli:

    @ SXe: obviamente, el float comportamiento no es idéntica a la display:inline aunque mucho depende del navegador utilizado. Sin embargo, actúa sobre el margin y el padding en display:inline es, en mi opinión, mejor que el float como usted bien sabe, tiene problemas de diseño de otros ...

    Responder Compartir

Deja tu comentario

TAG XHTML RESTRICCIONES: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL