News !
Informations, tutorials
Dedicated mainly about Joomla! But more if affinity
I have started English version of the blog august 2017, most of previous articles are in french, sorry
Tutoriel CSS

There are plenty of tutorials on lists in HTML, the specific tags being : <ul>, <ol>, <li>

Nested lists are used for tables of contents or hierarchical link lists such as menus.

You can also read this Alsacréations article: My UL, OL, or nested lists are not valid (see links)

For my part I'll show you how to simply use nested lists to create a changelog like the one in Gantry 5.

You find below the basic codes:

<div class="changelog-en">
<ol>
<li><a href="#new"></a>
<ul>
<li>News 1</li>
<li>News 2</li>
<li>News 3</li>
</ul>
</li>
<li><a href="#improved"></a>
<ul>
<li>improved 1</li>
<li>improved 2</li>
<li>improved 3</li>
</ul>
</li>
<li><a href="#bugfix"></a>
<ul>
<li>Bug fix 1</li>
<li>Bug fix 2</li>
<li>Bug fix 3</li>
</ul>
</li>
</ol>
</div>

French usage

<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 h5{margin-bottom:.5rem;}
.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;}
.changelog-en h5{margin-bottom:.5rem;}
.changelog-en ol{list-style:none;padding:0;margin:0 0 3rem 0;}
.changelog-en ol a[href='#new']+ul>li:before{background-color:#207de5;content:'New';}
.changelog-en ol a[href='#improved']+ul>li:before{background-color:#fbca04;color:#333;content:'Improved';}
.changelog-en ol a[href='#bugfix']+ul>li:before{background-color:#fc2929;content:'Bug fix';}
.changelog-en ul{list-style:none;padding:0;}
.changelog-en ul li{margin-bottom:.1rem;padding-left:6rem;}
.changelog-en 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;}

The colors and titles of each button are editable

The end result becomes :

    • News 1
    • News 2
    • News 3
    • Improve 1
    • Improve 2
    • Improve 3
    • Bug fix 1
    • Bug fix 2
    • Bug fix 3

French usage

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

Good coding !!

Become a privileged customer!

Contact

En Toutes Lettres is a french company but have no border. We are always present for additional information :

logo gris
  (33) 6 29 16 98 38
En toutes lettres
4 rue Antoine Bréguet
91750 CHAMPCUEIL
France
 

Last comments