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

Version imprimable

18/04/2006, 13h26
adiGuba

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

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 :

Citation:

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 , mais je n'arrive pas à faire prendre toutes la place au du milieux :

Code:

Nom Unvaleur1

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

a++

Salut

J'avais ce code sous le coude...

Code:

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>

;)

18/04/2006, 14h35
adiGuba

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++