Développement »Internet» Graphisme & Design »CSS

Créer un séparateur de tuyau par CSS

Mardi, Septembre 9, 2008

Vous verrez souvent une série de liens répartition horizontale séparées par un pipe "|", le symbole graphique dell'asticella verticale. Aussi, si vous avez une bonne écriture HTML, vous vous rendez compte que cette série de liens - apparemment horizontale - ne sont rien que des balles UL ou OL Il s'ensuit qu'au lieu d'écrire:

PLAIN TEXT
HTML:
  1. <p>
  2. "#1" > Link 1 </a> | <a href = "#2" > Link 2 </a> | <a href = "#n" > Link n </a> <a href = "#1"> Link 1 </ a> | href <a = "#2"> Link 2 </ a> | href <a = "#n"> n Link </ a>

Il serait préférable d'utiliser:

PLAIN TEXT
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>

Toutefois ajouter la pipe comme un code de caractère sale donc propre. Nous pouvons également utiliser une frontière, en utilisant le code:

PLAIN TEXT
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. )

Obtention:

Nous pouvons voir deux problèmes: le premier lien a le padding sur la gauche et le dernier maillon a la pipe à sa droite, ce qui n'est pas beau à voir! Alors, voici mai est d'utiliser :first-child :last-child de CSS2 pour mettre en forme graphiquement notre liste. Utilisation de la feuille de style ci-dessous pour le code HTML ci-dessus:

PLAIN TEXT
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. / * Supprimer le rembourrage du fils du «premier», la LI premier * /
  8. ul li: first-child (
  9. 0 12px 0 0 ; padding: 0 12px 0 0;
  10. )
  12. / * Suppression de la frontière "Last Child", LI * /
  13. ul li: last-child (
  14. 0 0 0 12px ; padding: 0 0 0 12px;
  15. none ; border: none;
  16. )

Ainsi obtenir un meilleur résultat:

Bien sûr, comme il arrive souvent, l'attention à la compatibilité avec les différents navigateurs, notamment Internet Explorer.

Variante de flotter

Encore mieux, si vous voulez éviter le float l'utilisation de ce code:

PLAIN TEXT
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: first-child (
  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. )

Même résultat, au moins dans FireFox :)

Related Post

Cet article était utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Chargement ...


4 commentaires pour "Créer un séparateur de tuyau par CSS"

  1. getAvatar 1.0
    09 sept., 2008 Giulio

    Pourquoi, selon votre point de vue, la syntaxe 

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

    est pire 

      <a href = "....?

    En termes de codage, je ne vois aucun avantage évident, ou plutôt, je vois, mais encore relativement négligeable et intégrable. Il a raté quelque chose?

    Répondre Partager
  2. getAvatar 1.0
    09 sept., 2008 Giovambattista Fazioli:

    @ Julius: la qualité du code que vous avez tendance à écrire le code HTML, mais négligent la fin graphique. Il s'ensuit qu'une "liste" de liens, d'être simplement une liste, doit être répertorié comme UL LI Puis, affichée horizontalement ou verticalement, il devrait être - justement - la tâche de CSS. Toutefois, il n'y a rien de mal à écrire une suite de liens comme une série de TAG A Le problème est que l'élimination des feuilles de style comme indiqué dans la page? En utilisant une séquence tag A séparés par des tuyaux, ils vous seront très visibles, même en l'absence de la feuille de style. Utilisant à la place une liste UL LI page UL LI aura encore l'air agréable et lisible sans la feuille de style.

    Répondre Partager
  3. getAvatar 1.0
    12 juin 2009 sXe:

    Astuce intéressante. Essaie toutefois que cette dernière option (remplacer le flotteur avec display: inline), la présentation de la carte change légèrement. Ou le rembourrage n'est pas égale à droite et à gauche, comme c'est le cas avec le flotteur.

    S.

    Répondre Partager
  4. getAvatar 1.0
    15 juin 2009 Giovambattista Fazioli:

    @ SXe: évidemment le float comportement n'est pas identique à display:inline même si beaucoup dépend du navigateur utilisé. Toutefois, agissant sur la margin et padding sur display:inline est, à mon avis, mieux que le float comme vous le savez bien, a des problèmes de disposition d'autres ...

    Répondre Partager

Laissez un commentaire

TAG PERMISSIONS XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <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