Les news !
Informations, tutoriels
Dédié principalement Joomla! mais plus si affinité
Tutorial Css

Il y a plein de tutoriels sur les listes en HTML, les balises spécifiques étant : <ul>, <ol>, <li>

On utilise les listes imbriquées pour des tables des matières ou des listes de liens hiérarchisées comme des menus.

Vous pouvez lire aussi cet article d'Alsacréations : Mes listes UL, OL, ou listes imbriquées ne sont pas valides (voir liens)

Pour ma part je vais vous montrer comment simplement utiliser les listes imbriquées pour créer un changelog comme celui de Gantry 5.

Vous trouvez ci après les codes de bases:

<div class="changelog">
<ol>
<li><a href="#new"></a>
<ul>
<li>Nouveauté 1</li>
<li>Nouveauté 2</li>
<li>Nouveauté 3</li>
</ul>
</li>
<li><a href="#improved"></a>
<ul>
<li>Amélioration 1</li>
<li>Amélioration 2</li>
<li>Amélioration 3</li>
</ul>
</li>
<li><a href="#bugfix"></a>
<ul>
<li>Bug fixe 1</li>
<li>Bug fixe 2</li>
<li>Bug fixe 3</li>
</ul>
</li>
</ol>
</div>

Les codes CSS sont :

.changelog ol{list-style:none;padding:0;margin:0 0 3rem 0}
.changelog ol a[href='#new']+ul>li:before{background-color:#207de5;content:'Nouveau'}
.changelog ol a[href='#improved']+ul>li:before{background-color:#fbca04;color:#333;content:'Amélioration'}
.changelog ol a[href='#bugfix']+ul>li:before{background-color:#fc2929;content:'Bug fix'}
.changelog ul{list-style:none;padding:0}.changelog ul li{margin-bottom:.1rem;padding-left:6rem}
.changelog ul li:before{margin-left:-6rem;display:inline-block;border-radius:2px;color:#fff;font-weight:bold;margin-right:1rem;text-align:center;width:5rem;font-size:.8rem;font-style:normal}

Les couleurs et les titres de chaque bouton sont modifiables

Le résultat final devient :

    • Nouveauté 1
    • Nouveauté 2
    • Nouveauté 3
    • Amélioration 1
    • Amélioration 2
    • Amélioration 3
    • Bug fixe 1
    • Bug fixe 2
    • Bug fixe 3

Bon codage !!

Devenez un client privilégié !

Contact

En Toutes Lettres est une société basée en Essonne (91). Nous sommes toujours présents pour une information complémentaire :

Logo Gris
  06 78 03 36 92
  06 84 56 87 95
En toutes lettres
4 rue Antoine Bréguet
91750 CHAMPCUEIL

Derniers commentaires