PUBLIC MARKS from camel with tags list & css

Aujourd'hui je vais vous montrer comment rendre encore plus agréable à l'oeil vos listes HTML ! Ce tutoriel n'a pas de but particulier à part celui de faire plaisir à vos visiteurs lorsqu'ils tomberont sur vos listes trop fashion ^^ ! De plus il est extrêmement simple à mettre en œuvre. ;)

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.

StyleMap v2 uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an unordered list (UL). The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project. Keep in mind that although we'll cover the details of how the sitemap works, in practice you'll only need to worry about changing the markup to match your website structure. The CSS and Javascript can then be added as they are and will take care of the rest!

Si l'on veut créer une bordure uniquement entre les éléments d'une liste par exemple (ni avant le premier, ni après le dernier) l'utilisation du sélecteur first-child permet de le faire facilement. On définit une bordure pour les éléments de la liste et à l'aide de first-child, on supprime la bordure du premier élément. Le problème est que first-child n'est pas reconnu par tous les navigateurs, notamment internet explorer. Pour réaliser la même chose, on peut alors donner une classe spécifique au premier élément de la liste pour en supprimer la bordure. Cette solution n'est pas toujours utilisable, lorsque l'on travaille avec un CMS ou une équipe de développeurs par exemple et que l'on n'a pas un contrôle complet sur le code généré. Plutôt que chercher à cibler le premier élément pour en supprimer la bordure ou l'image de fond, on peut essayer de "masquer" la bordure indésirable. La propriété clip qui permet de définir la zone d'affichage peut être une solution, mais elle nécessite l'utilisation de position absolue ce qui n'est pas toujours pratique. Une autre piste est l'utilisation des marges négatives.

Voici donc la traduction de l'article de Stewart Rosenberger sur A List Apart, intitulé Dynamic Text Replacement, et qui traite d'un procédé permettant de remplacer dynamiquement, à la volée, des "bouts de texte" par leur équivalent image dans la police/couleur/taille que vous aurez choisi, tout en respectant les standards et l'accessibilité. Il s'agit de deux scripts, un PHP et un JavaScript, associés à deux trois règles CSS, et vous voilà parti ! Les commentaires des deux scripts ont eux aussi été traduits en français.

Générateur de css pour les menus listes