Créer des colonnes en CSS à partir d'une liste

Comment créer des colonnes avec l'utilisation du CSS et d'une liste?

Comme une majoritée de webmaster, j'ai tendance à utiliser les tables pour afficher des colonnes et forcément les 3/4 du temps .. je me plante! Il ma été rappelé que l'utilisation des tables est faites pour des données tabulaires, c'est à dire sous forme de colonnes verticales et de lignes horizontales et ayant une correspondance entre les deux.

Lorsque qu'il sagit de « présentation » l'utilisation du CSS pour créer des colonnes semble nettement plus approprié et voici ce que ça donne :

  • A
  • B
  • C
  • D
  • E
  • F

Le code XHTML :

<ul class="simple">
 
  <li>A</li>
 
  <li>B</li>
 
  <li>C</li>
 
  <li>D</li>
 
  <li>E</li>
 
  <li>F</li>
 
</ul>

Comme vous le voyez, c'est une simple liste!

Le code CSS :
ul.simple{
width: 100% ;
}
ul.simple li {
display:block;
width : 33%;
height : 34px;
float:left;
}
ul.simple li[float="left"] + li {
float:none;
}

Dans un premier temps, il faut assigner une longueur à la liste <ul> et transformer chaque élément de la liste <li> en block et leur attribuer une largeur et une hauteur.

Dans un second temps, il faut faire "flotter" ces éléments avec un float:left; et de ne pas faire flotter ceux utilisant la class : ul.simple li[float="left"] + li.

Pour fixer le nombre de colonne, il suffit simplement de changer la valeur width : 33%; de la class ul.simple li. Ainsi, une longueur de 50% donnera 2 colonnes, 33% donnera 3 colonnes, 25% donnera 4 colonnes, etc...
Il va de soit que ces chiffres sont à peaufiner en fonction de la taille de la class ul.simple ainsi que du gabarit de votre site!

Voici un autre exemple avec une petite pointe en plus de CSS, histoire de bien vous rendre compte de l'utilitée de ce code :


Le code CSS :

ul.liste{width: 100% ;}
ul.liste li {
display:block;
width : 33%;
height : 34px;
float:left;
}
ul.liste li[float="left"] + li {
float:none;
}
.liste li {
background:#000;
border: 1px solid #000;
margin:5px;
padding:5px;
display:block;
text-align:center;
}
.liste li:hover{
background:#FFF;
border: 1px solid #000;
}
.liste a {color:red;}
.liste a:hover {color:red;}
La partie XHTML :
<ul class="liste">
 
  <li><a href="#">A</a></li>
 
  <li><a href="#">B</a></li>
 
  <li><a href="#">C</a></li>
 
  <li><a href="#">D</a></li>
 
  <li><a href="#">E</a></li>
 
  <li><a href="#">F</a></li>
 
</ul>

Voir/déposer un commentaire (7) | Signaler un problème