[Résolu] Mise en page avec points de conduite

Bonjour,

est-il possible de faire une mise en page du style "index de livre" avec des points de conduite ?
Exemple :

toto ................... p. 10
titi, tutu ........p. 15, 16

donc alignement à gauche, pour les termes, alignement à droite pour les numéros de page et le tout séparé par des points de conduite.

J'arrive à faire un truc ressemblant, en simulant les points de conduite par un border-bottom: dotted, et un décalage adéquat pour le rehausser, mais je butte sur l'alignement à droite du numéro de page dont la largeur est variable.

Merci
Modifié par zyzomys (09 Oct 2006 - 18:05)

Salut,

J'ai trouvé http://tantek.com/CSS/Examples/dotleaders.html

Merci c'est ce que je cherchais.

bonjour,

voici une soluce qui ressemble a ce que tu chercher a faire :

<p>
  <span class="index">Sommaire</span>
  <span class="page">p.1</span>
</p>

et le css de base :

.index {
float:left;
padding-right:0.5em
}
.page {
float:right;
padding-left:0.5em
}
span {
background:white;
position:relative;
top:0.2em;
height:1em
}
p {
border-bottom:1px dotted #222;
height:1em;
}

la bordure est donnée au conteneur, les contenu sont en float et legerement decallé avec un positionement relatif et un fond non transparent.

++