28173 sujets

CSS et mise en forme, CSS3

Bonjour, auriez-vous une petite astuce pour simplifier le codage suivant.
Il s'agit d'une liste comportant 5 colonnes et autant de lignes qu'on veut.

Feuille de Style :

ul {list-style-type:none;}
.col1{float:left;}
.col2{float:left;}
.col3{float:left;}
.col4{float:left;}
.col5{float:left;}


Code HTML :


<div><ul>

   <li>
      <div class="col1">BlaBlaBla</div>
      <div class="col2">BlaBlaBla</div>
      <div class="col3"><b>BlaBlaBla</b></div>
      <div class="col4">BlaBlaBla</div>
      <div class="col5">BlaBlaBla</div>
   </li>

   <li>
      <div class="col1">BlaBlaBla</div>
      <div class="col2">BlaBlaBla</div>
      <div class="col3"><b>BlaBlaBla</b></div>
      <div class="col4">BlaBlaBla</div>
      <div class="col5">BlaBlaBla</div>
   </li>

   <li>
      <div class="col1">BlaBlaBla</div>
      <div class="col2">BlaBlaBla</div>
      <div class="col3"><b>BlaBlaBla</b></div>
      <div class="col4">BlaBlaBla</div>
      <div class="col5">BlaBlaBla</div>
   </li>

   <li>
      <div class="col1">BlaBlaBla</div>
      <div class="col2">BlaBlaBla</div>
      <div class="col3"><b>BlaBlaBla</b></div>
      <div class="col4">BlaBlaBla</div>
      <div class="col5">BlaBlaBla</div>
   </li>

</ul></div>


Bien cordialement. JEFHERNET
S'il n'y a rien d'autre de déclaré dans ces classes, tu peux toutes les supprimer tant dans ta feuille de styles que dans ton document HTML et leur attribuer un comportement flottant grâce au sélecteur descendant:
li div {float:left}
Je ne l'ai pas indiqué dans mon code précédent mais chacune des 5 colonnes a une largeur différente qui reste à déterminer dans la feuille de style.
Merci Benjamin D.C., très intéressant.
Je vais essayer de m'arranger pour que toutes les colonnes aient la même largeur, ça simplifiera grandement les choses.
JEFHER