Domptez vos puces, dressez des listes

Par Mark Newhouse

Dès juillet 1999, je pontifiais à propos des vertus des feuilles de style dans diverses listes de discussion. Certaines choses ne changent pas.

Mais ce qui a changé, c'est la façon dont je réfléchis à la mise en forme CSS et à la structure (X)HTML sous-jacente à laquelle elle est appliquée. Par exemple, la plupart des sites que je visite ont un menu, placé dans une zone de navigation. Ceux-ci sont généralement constitués d'une suite de liens, le plus souvent placés dans des div ou des paragraphes séparés. Structurellement parlant, cependant, ils ne sont qu'une liste de liens, et devraient correspondre à un balisage de ce type.

Bien sûr, la raison pour laquelle nous ne les implémentons pas de cette manière est que nous ne voulons pas d'une puce devant chacun des liens de notre menu. Dans un précédent article, j'ai donné un aperçu des techniques mettant à profit les CSS pour construire une page web. Une de ces techniques consistait à manipuler une liste, afin qu'elle s'affiche horizontalement et non verticalement.

Aujourd'hui, je vais montrer comment utiliser les CSS pour reprendre le contrôle de listes peu maniables au premier abord. Il est temps pour vous de dire à ces listes comment les choses se passent, au lieu de les laisser faire tout et n'importe quoi dans votre page web.

Préparer le terrain

Dans le cadre de cet article, j'utilise des listes non ordonnées. Le même code CSS peut aussi bien être appliqué à des listes ordonnées, le résultat sera similaire. Sauf déclarations supplémentaires, tous les exemples de cet article utilisent le code suivant pour les listes :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5 - un peu plus long pour avoir plusieurs lignes</li>
</ul>

Chaque liste est simplement placée dans un div différent, et le code CSS définit le comportement de chaque liste en fonction du div où elle se trouve. Chaque div suit une règle de base :

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

En l'absence de règles de style supplémentaires, la liste est affichée de cette manière dans le div de base :

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Le positionnement

Parfois, l'alinéa par défaut d'une liste est trop grand pour le design sur lequel vous travaillez. Mais pour certains navigateurs, il ne suffit pas de changer la valeur du margin ou du padding de la liste non ordonnée. Pour forcer la liste à se décaler à gauche, vous devez changer à la fois la valeur du margin et du padding. Cela est dû au fait qu'Internet Explorer et Opéra ont opté pour un alinéa basé sur l'attribut margin-left, tandis que Mozilla/Nestcape utilise l'attribut padding. Pour plus d'information sur le sujet, consultez l'article Consistent List Indentation sur DevEdge.

Dans l'exemple suivant, les deux attributs margin-left et padding-left de la liste non ordonnée du div sont mis à zéro :

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Notez que les puces sont situées en-dehors du div. Si le bloc conteneur était le body du document HTML, les puces seraient peut-être affichées en-dehors de la fenêtre du navigateur, c'est-à-dire qu'elles disparaîtraient. Si vous voulez que les puces s'alignent à l'intérieur du div, mais sur son bord gauche, fixez au choix le padding-left ou le margin-left à un em.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Les puces

Peut-être avez-vous travaillé sur un projet qui nécessitait l'emploi de puces personnalisées. Si c'est le cas, il se peut que vous ayez réalisé cet effet en créant un tableau, avec une colonne contenant les puces GIF, alignées en haut à droite, et une autre colonne avec le contenu, qui devrait être séparé dans les items d'une liste. Avec CSS, il est possible d'utiliser une image en tant que puce. Si le navigateur ne prend pas en charge cette partie de CSS (ou n'affiche pas les images), la puce par défaut sera utilisée (ou bien, vous avez la possibilité de spécifier une autre puce HTML si vous le désirez).

La règle de style ressemble à ceci :

ul {
    list-style-image: url(puce.gif);
   }

Et le navigateur l'affiche ainsi :

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Pour spécifier une puce HTML particulière au cas où le navigateur ne supporte pas cette partie de CSS, ajoutez : list-style-type: disc; à votre règle de style. Selon l'image que vous choisissez, il se peut que celle-ci ne s'aligne pas de la manière que vous souhaiteriez avec les items de la liste. Dans ce cas vous pouvez choisir que l'image soit placée à l'intérieur du bloc que constitue la liste des items (plutôt qu'à l'extérieur du bloc). Ajoutez ceci : list-style-position: inside; à votre règle de style pour effectuer ce changement. Ces trois déclarations peuvent être combinées en une seule déclaration abrégée, comme ceci :

ul {
    list-style: disc url(puce.gif) inside;
   }
qui est équivalent à :
ul {
    list-style-type: disc;
    list-style-image: url(puce.gif);
    list-style-position: inside;
   }

Voici comment cela s'affiche dans la page web :

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Il peut arriver que vous manipuliez une liste mais que vous ne vouliez pas de puces, ou que vous vouliez utiliser une autre caractère à la place. Encore une fois, CSS offre une solution simple. Ajoutez simplement l'attribut list-style: none; à votre règle de style, et forcez les items de la liste à s'afficher avec un alinéa négatif. La règle de style ressemblera à ceci :

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
   }

Le padding ou le margin, l'un des deux au choix, doit être fixé à zéro, et l'autre à 1 em. Selon la puce que vous choisirez, vous devrez modifier cette valeur. La valeur négative du text-indent décale la première ligne vers la gauche, créant un alinéa négatif.

La page HTML contiendra notre liste non ordonnée standard, mais avec un caractère quelconque ou une entité HTML de votre choix en lieu et place des puces précédant le contenu des items. Dans notre cas, nous utiliserons &#187;, le double guillemet droit : ».

  • » Item 1
  • » Item 2
  • » Item 3
  • » Item 4
  • » Item 5 - un peu plus long pour avoir plusieurs lignes

Je dois faire remarquer que Netscape6/7/Mozilla (et les autres navigateurs basés sur le moteur de rendu Gecko) ainsi qu'Opera peuvent générer du contenu automatiquement au moyen du pseudo-élément CSS2 :before. Nous pouvons tirer parti de cela pour générer automatiquement le caractère » (ou tout autre caractère) pour les puces. Cela nous permet de n'avoir que le contenu de la liste non ordonnée. Si vous utilisez Opera ou un navigateur basé sur Gecko, le code CSS suivant aboutira à la même liste que ci-dessus, mais en utilisant la liste non ordonnée standard, sans contenu supplémentaire :

#custom-gen ul li:before {
    content: "\00BB \0020";
   }

La propriété content peut contenir des chaînes de caractères, des URIs et d'autres choses encore, y compris des des caractères spéciaux. Pour utiliser ces caractères, comme », il est nécessaire de les encoder selon leurs équivalents HEX. Pour le double guillemet droit, nous utilisons \00BB (l'autre caractère, \0020, est un espace). Le résultat final (rappelez-vous, le caractère ne sera visible que sous Opera ou Mozilla/Netscape) :

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Des listes vraiment en ligne

Qui a dit qu'une liste se devait d'être alignée verticalement avec des puces accrochées à gauche de chaque item ? Peut-être voulez-vous utiliser la structure d'une liste ordonnée de liens pour obtenir visuellement quelque chose proche d'une barre de navigation verticale dans la page web, ou peut-être voulez-vous que vos liens soient alignés horizontalement en haut de votre page.

Cela ne concerne pas seulement les listes de liens. Parfois, vous pouvez avoir besoin de faire une liste au milieu d'un paragraphe, par exemple pour lister des livres que vous aimeriez lire. Au niveau de la structure, il est logique d'utiliser une liste, mais visuellement parlant, vous ne voulez peut-être pas rompre la continuité du paragraphe. Encore une fois, CSS arrive à la rescousse !

Comme cette liste ne sera pas un élément à elle seule, séparée du reste, je ne vais pas la placer dans le div de base que les précédentes listes ont occupés. Cette fois, le balisage consistera en un paragraphe, suivi de la même liste, suivie d'un autre paragraphe.

Je vous entends protester, « Traître ! Je pensais que vous alliez mettre une liste à l'intérieur d'un paragraphe, non pas entre deux paragraphe. »

À cela, je répondrai : « Eh bien, oui. Mais (X)HTML n'autorise pas l'inclusion d'une liste dans un paragraphe. Cependant, avec l'aide de notre feuille de style, ça en aura tout l'air dans notre page web. »

Voici à quoi ressemblent vos règles de style :

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

#liste-enligne p {
    display: inline;
   }

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

Le balisage consiste en un <div id="liste-enligne">. Ce div contient un paragraphe suivi par notre liste non ordonnée standard, elle-même suivie par un paragraphe. La liste non ordonnée a été modifiée de façon à ce que chaque item se termine par une virgule, le dernier item étant clos par un point et un espace.

Le résultat est visible ci-dessous (la liste apparaît en gras et en bleue) :

Un peu de texte avant la liste. Peut-être s'agit-il de l'histoire d'un homme que sa femme appelle pour qu'il achète quelques trucs sur le chemin de la maison, en revenant du travail. Ça n'a pas vraiment d'importance, nous avons juste besoin d'un texte qui précède la liste :

  • Item 1,
  • Item 2,
  • Item 3,
  • Item 4,
  • Item 5 - un peu plus long pour avoir plusieurs lignes.

Et ensuite, un texte qui suit la liste dans le paragraphe. Une ou deux phrases suffisent pour notre exemple.

Comme dans l'exemple précédent des puces personnalisées, nous pouvons mettre à profit les CSS pour générer automatiquement les virgules qui suivent chaque item de la liste, et le point final. Si vous n'aviez à vous soucier que d'Opera et des navigateurs basés sur Gecko, évidemment. La feuille de style ressemblerait à ceci :

#liste-enligne-gen ul li:after {
    content: ", ";
   }

#liste-enligne-gen ul li.final:after {
    content: ". ";
   }

Nous utilisons ici le pseudo-élément :after pour ajouter les virgules à la fin de chaque item, et un point et un espace après le dernier item avec class="final", comme ceci (rappelez-vous, ce ne sera visible que sous Opera ou Mozilla/Netscape) :

Un peu de texte avant la liste. Peut-être s'agit-il de l'histoire d'un homme que sa femme appelle pour qu'il achète quelques trucs sur le chemin de la maison, en revenant du travail. Ça n'a pas vraiment d'importance, nous avons juste besoin d'un texte qui précède la liste :

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 - un peu plus long pour avoir plusieurs lignes

Et ensuite, un texte qui suit la liste dans le paragraphe. Une ou deux phrases suffisent pour notre exemple.

La navigation

Comme je l'ai mentionné précédemment, les menus de liens qui apparaissent sur quasiment tous les sites devraient en toute logique être balisés comme des listes, car c'est ce qu'ils sont. De la même façon, nous ne voulons généralement pas que la mise en forme par défaut de la liste s'applique à ces liens, nous pouvons donc utiliser CSS pour changer leur apparence dans la page. Nous l'avons vu juste avant, il est possible de forcer un affichage horizontal des liens (inline) plutôt que des les obtenir empilés verticalement (le comportement par défaut). Si vous faites ainsi, les puces disparaissent et vous avez alors un grand nombre de possibilités pour séparer chaque item de la liste.

Ces exemples de listes horizontales utilisent tous le même div de base avec le style suivant :

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

Les deux prochains exemples utilisent la même liste non ordonnée que dans les exemples précédents, à l'exception de la dernière ligne rallongée. Ils utilisent aussi une classe supplémentaire qui met à part un des items de la liste.

Les bordures

Le caractère "pipe" | est souvent utilisé pour différencier les choix. C'est un séparateur classique, et il peut être imité en ajoutant une bordure aux items de la liste :

#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.premier {
    margin-left: 0;
    border-left: none;
    list-style: none;
    display: inline;
   }

Ici, nous avons ajouté class="premier" au premier item de la liste, de façon à ce qu'il n'ait pas de bordure gauche au final.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Vous pouvez modifier ces styles pour créer un effet de navigation par onglet :

#onglets ul {
    margin-left: 0;
    padding-left: 0;
    display: inline;
   }

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

#onglets ul li.courant {
    border-bottom: 1px solid #ffc;
    list-style: none;
    display: inline;
   }
  • Item 1
  • Item 2
  • Item 3
  • Item 4

Dans cet exemple, l'adjonction de class="courant" à un des items de la liste crée une bordure inférieure de la même couleur que le fond de la page, indiquant que l'onglet se rapporte à la page consultée.

Note : Randal Rust a été le premier à partager cette technique, qui a ensuite été reprise par de nombreuses personnes sur la liste de discussion CSS.

Les fils d'Ariane

Un autre type de liens généralement présentés sous une forme horizontale dans les pages web est ce qu'on appelle les fils d'Ariane (NdT : breadcrumbs en anglais, désigne les miettes de pain du Petit Poucet. Le terme est aussi connu en français sous le nom de "chemin de fer"). Les fils d'Ariane vous indiquent où vous vous situez dans l'arborescence d'un site, en la détaillant de la page d'accueil jusqu'à la section ou la page consultée. Si vous vouliez vraiment avoir un balisage significatif, vous opteriez pour la création d'une série de listes imbriquées, car chaque nouvelle section est une partie de la section qui la précède :

<div id="fil">
<ul>
    <li class="first">Accueil
    <ul>
        <li>&#187; Produits
        <ul>
            <li>&#187; Ordinateurs
            <ul>
                <li>&#187; Logiciels</li>
            </ul></li>
        </ul></li>
    </ul></li>
</ul>
</div>

produit ceci :

  • Accueil
    • » Produits
      • » Ordinateurs
        • » Logiciels

Ajouter les règles suivantes à votre feuille de style :

#fil {
    color: #ccc;
        background-color: #006;
        padding: 3px;
        margin-bottom: 25px;
   }

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

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

produit ceci :

  • Accueil
    • » Produits
      • » Ordinateurs
        • » Logiciels

Nous pouvons à nouveau générer le caractère » (ou tout autre caractère que vous voudriez utiliser comme séparateur) avec le pseudo-élément :before, combiné à une règle class="first" pour que le premier item n'en ai pas :

#fil-gen ul li:before {
    content: "\0020 \0020 \0020 \00BB \0020";
    color: #ff9;
   }

#fil-gen ul li.premier:before {
    content: " ";
   }

Et le résultat final :

  • Accueil
    • Produits
      • Ordinateurs
        • Logiciels

Une situation réelle

J'aimerais terminer avec une application en contexte réel de quelques-unes des techniques dont il a été question ici. Nous allons utiliser une liste non ordonnée standard, contenant des liens, pour créer un menu dynamique avec des effets d'états survolés. Pour obtenir ces effets d'états survolés, nous allons confier à la liste la tâche de produire la structure, et les styles des ancres produiront la plupart des effets visuels.

Ce menu est en fait une réponse à une question posée par Michael Efford sur la liste de discussion CSS. Michael avait créé exactement ce menu en utilisant un tableau, des images et JavaScript. Il a demandé sur la liste si cela pouvait être réalisé en CSS. J'ai relevé le défi, et avec l'aide de plusieurs autres membres qui ont fait la chasse aux problèmes spécifiques de quelques navigateurs, nous avons obtenu une feuille de style qui repose sur ce balisage :

<div id="boutton">
<ul>
    <li><a href="/traduction/listes#">Accueil</a></li>
    <li><a href="/traduction/listes#">Caméras cachées</a></li>
    <li><a href="/traduction/listes#">Caméras CCTV</a></li>

    <li><a href="/traduction/listes#">Vols du personnel</a></li>
    <li><a href="/traduction/listes#">Conseils utiles</a></li>
    <li><a href="/traduction/listes#">F.A.Q</a></li>

    <li><a href="/traduction/listes#">À notre sujet</a></li>
    <li><a href="/traduction/listes#">Contactez nous</a></li>
</ul>
</div>

Étudions la feuille de style règle par règle, je vais vous expliquer comment est construite chacune d'entre elles.

#boutton {
    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 première règle s'applique au div #boutton. Elle définit l'espace que le menu va occuper, et indique de quelle manière la liste et les liens vont se comporter en son sein. J'ai choisi de faire un menu fluide, basé sur les préférences de taille de polices du navigateur, donc (presque) toutes les mesures sont en em. Largeur du menu comprise. La bordure noire pleine à droite provient du design original de Michael. Le padding-bottom fait se prolonger le div sous le menu pour que vous puissiez voir le fond. Encore une fois, comme sur le design original. Le margin-bottom permet de séparer le div de ce qui le suivra. Les couleurs sont celles du design original.

#boutton ul {
    list-style: none;
    margin:0;
   padding:0;
    border: none;
}

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

Ensuite, j'ai défini l'allure de la liste. Comme chacun des items devait être un lien, et que l'effet d'état survolé des liens devait être défini dans la feuille de style CSS, j'ai, pour l'essentiel, enlevé toute mise en forme de la liste. J'ai ajouté une bordure d'un pixel de la couleur d'arrière-plan du div #boutton, pour simuler un séparateur, tandis que dans le design original, il s'agissait d'une image.

#boutton 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#boutton li a {
    width: auto;
   }

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

Enfin, j'ai défini les liens. Le design original comprenait des bordures de 10 pixels de large, à droite et à gauche. Ces bordures, accordées à la couleur d'arrière-plan, changent de couleur si le lien est survolé. C'est relativement facile à restituer en CSSgrâce à la pseudo-classe :hover, donc j'ai ajouté cette règle aux styles des ancres.

Il y a juste une astuce dans cette partie de la feuille de style. Pour que les liens soient actifs sur toute la largeur du div, j'ai opté pour display: block;. Cela fonctionne partout, sauf dans Internet Explorer/Windows. Si vous donnez au bloc une largeur explicite de 100%, alors IE/Windows en tient compte. Mais procéder ainsi crée des problèmes sous IE5/Mac et Netscape/Mozilla. J'ai donc utilisé le sélecteur d'enfant '>'pour redéfinir la taille à auto. Comme IE/Windows ne prend pas en charge les sélecteurs d'enfants, il ignore cette règle. IE5/Mac, Opera et Netscape/Mozilla suivent la règle, et tout le monde est content.

La règle de style pour la pseudo-classe :hover assure le changement de couleur de l'arrière-plan et des bordures lorsque les liens sont survolés.

Les règles de style et le balisage de la liste (environ 1ko) remplacent les quelques 5ko de JavaScript et de tableau, sans compter les 8ko environ d'images pour l'effet de rollover. Le balisage n'en est que plus lisible, plus facile à adapter, car vous n'avez plus besoin de créer de nouvelles images si le nom d'un lien change. Maintenant, vous modifiez juste du texte.

La partie visible de l'iceberg

Croyez-le ou non, mais nous n'avons fait qu'effleurer les possibilités de modifications des listes avec les feuilles de style. Je ne vais pas commencer à affirmer que toutes les techniques présentées ici font parties des règles CSS que vous utiliserez le plus, mais je me prend à espérer qu'elles vous feront réfléchir sur le fait que l'utilisation des CSS peut vous amener à utiliser davantage un balisage structurel.


Translated with the permission of A List Apart and the author[s].

Fiche technique

À propos de l'auteur

Mark Newhouse crée des sites depuis 1996, et met à profit ses compétences de professeur pour présenter les techniques digitales au plus grand nombre. Auteur et présentateur régulier, il a écrit de nombreux articles techniques pour différents sites web, et se pose comme la force créative derrière le populaire site de ressources CSS, Real World Style.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site