Discussion :

[Lutin1801]

Bonjour,

je cherche a faire quelque chose comme cela :
Lundi.............2 heures
Mardi............2 heures
Mercredi........3 heures

Mon soucis c'est de remplir la div centrale ou il y a les points, je voudrais de cette div centrale (dans mon exemple div de class points) prenne l'espace restant et soit remplit par des points.
Actuellement je remplis à la volé en JS le jour ("Lundi" - "Mardi" - "Mercredi) et l'horaire ("2 heures" - "3 heures"), qui sont des données stockées en BDD.

Ma structure html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="tab">
    <div class="ligne" id="Lundi">
        <div class="jour">Lundi</div>
        <div class="points"></div>
        <div class="horaires">2 heures</div>
    </div>
 
    <div class="ligne" id="Mardi">
        <div class="jour">Mardi</div>
        <div class="points"></div>
        <div class="horaires">2 heures</div>
    </div>
 
 
    <div class="ligne" id="Mercredi">
        <div class="jour">Mercredi</div>
        <div class="points"></div>
        <div class="horaires">2 heures</div>
    </div>
</div>

Mon css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#fichePDV .tab{ height:220px; }
#fichePDV .tab .ligne{ line-height:30px; }
#fichePDV .tab .jour{ display:inline; float:left; }
#fichePDV .tab .points{ display:inline; }
#fichePDV .tab .horaires{ display:inline; float:right; }

Je pense que c'est déjà un truc gérer et connu, juste je sais pas comment nommé mon problème pour faire une recherche sur le net, oui j'ai tenté "remplir un espace avec des points" mais vous vous en doutez ca n'a pas été concluant. Bref si quelqu'un pouvait m'orienté ce serait sympa. MERCI

[NoSmoking]

Bonjour,
ce que tu cherches à faire s'appelle si je ne m'abuse des points de conduite.

Il existe plusieurs façons d'arriver à réaliser cela.

A partir du code HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<h1>Points de conduite</h1>
<ul class="liste">
  <li><span>Lundi</span><span>Patates</span></li>
  <li><span>Mardi</span><span>Patates</span></li>
  <li><span>Mercredi</span><span>Patates</span></li>
  <li><span>Jeudi</span><span>Patates</span></li>
  <li><span>Vendredi</span><span>Patates</span></li>
  <li><span>Samedi</span><span>Frites</span></li>
  <li><span>Dimanche</span><span>Sports</span></li>
</ul>

Méthode de la border-bottom
le principe est de mettre une border-bottom "dotted" sur les <li> et de décaler les <span> vers le bas en leur mettant un couleur de fond pour caché cette bordure basse
on utilise dans ce cas le CSS suivant

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul.liste {
  max-width: 20em;
  padding: 0;
  list-style: none
}
ul.liste li {
  border-bottom: 1px dotted #000;
  position:relative;
  height:1.25em;
}
ul.liste span {
  position:absolute;
  bottom:-.5em;
  background:#fff; /* important pour masquer les points */
}
ul.liste span + span {
  padding-left:.25em;
  width:5em;
  right:0;
}

On n'a quand même pas bien le choix de l'aspect des "points" mais cette méthode simple est efficace depuis IE6, garantie de pérennité !

Méthode utilisant la pseudo-classe :before
à peine plus compliquée à mettre en oeuvre mais avec plus de CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ul.liste {
  max-width: 20em;
  padding: 0;
  list-style: none
}
/* les points de conduite */
ul.liste li:before {
  float: left;
  width: 0;                 /* important qu'il n'occupe pas de place */
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . . . "; /* il en faut suffisament pour remplir la ligne */
}
ul.liste span  {
  background:#fff; /* important pour masquer les points */
}
ul.liste span:first-child {
  padding-right: 0.25em;
}
ul.liste span + span {
  float: right;
  padding-left: 0.25em;
  width:5em;
}

la pseudo-classe :before est appliqué sur l’élément <li> pour que les "points" restent alignés, on peut personnaliser le content à souhait mais c'est plus verbeux.


Il existe également les méthodes mettant en oeuvre des images en background mais avec ces deux méthodes tu devrais obtenir ce que tu souhaites.


Remarque :
A ce jour la méthode CSS utilisant les Rendering leaders n'est encore pas opérationnelle, le sera t-elle un jour ?!

[Lutin1801]

Bonjour et merci !

J'ai testé la première proposition elle est ultra simple a mettre en place et fonctionne très bien !

C'est super