[CSS] Termes séparé par des pointillées

**adiGuba** · 18/04/2006, 13h26

Salut,

Je voudrais faire une ligne pointillé avec deux termes aligné respectivement à gauche et à droite, et relier par des pointillé (un peu comme dans un sommaire). Par exemple :

Nom Un.................................valeur 1
Nom Deux.................................valeur 2
Nom Trois.................................valeur 3

Je voudrais bien sûr que les termes de droite soient toujours bien aligné à droite, et que les pointillé s'adapte à l'espace entre les deux termes...

J'ai décomposé mes lignes en trois <span>, mais je n'arrive pas à faire prendre toutes la place au <span> du milieux :

Code :

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

<span>Nom Un</span><span class="pointille"></span><span>valeur1</span>

Si quelqu'un a une idée...
Merc d'avance

a++

**ilood** · 18/04/2006, 13h32

Salut

J'avais ce code sous le coude...

Code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
      <title>Test Sommaire</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <style type="text/css">
      #sommaire{
         float:left;
         margin:1em 0;
         padding:0;
         list-style-type:none;
      }
      #sommaire li{
         position:relative;
         float:left;
         clear:left;
         margin:.2em 0;
         padding:0;
         width:100%;
         border-bottom:1px dashed #000;
         z-index:1;
      }
      #sommaire li span{
         position:relative;
         margin-bottom:-.25em;
         background-color:#fff;
         z-index:2;
      }
      #sommaire li span.libelle{
         float:left;
         padding-right:.2em;
      }
      #sommaire li span.num_page{
         float:right;
         padding-left:.2em;
      }
      hr{
         clear:both;
         visibility:hidden;
      }
      </style>
   </head>
   <body>
      <ul id="sommaire">
         <li>
            <span class="libelle">Chapitre 1</span> <span class="num_page">page 1</span>
         </li>
         <li>
            <span class="libelle">Chapitre 2</span> <span class="num_page">page 6</span>
         </li>
         <li>
            <span class="libelle">Chapitre 3</span> <span class="num_page">page 8</span>
         </li>
         <li>
            <span class="libelle">Chapitre 4</span> <span class="num_page">page 11</span>
         </li>
      </ul>
      <hr />
   </body>
</html>

**adiGuba** · 18/04/2006, 14h35

Merci c'est presque parfait !!!

Mon problème vient du fait que je dois conserver une couleur de fond transparente car j'ai une image de fond (un dégradé en fait)

je vais voir si je peux adapter cela...

a++

[CSS] Termes séparé par des pointillées

CSS

Discussions similaires

Partager

Partager