Défi css : remplir avec des points

Un graphiste m'a posé sans le savoir une bonne colle css :
Comment obtenir l'effet suivant :
bla........................ p12
blobloblu................ p15
g.......................... p17
gidougodubadi......... p57
Avec bien sûr les numéros de pages alignés à droite, et le remplissage avec des points de manière automatique, quelque soit la longueur du titre.
Difficulté supplémentaire : il y a un background-image, impossible donc de mettre un fond blanc au titre, qui cacherait le background à points d'un div à 100%.
C'est un effet simple de mise en page, qu'on peut faire avec des tabulations dans n'importe quel logiciel de mise en page.
Je pourrais le faire facilement avec des tableaux, mais en en faisant un par ligne, ce qui serait vraiment crade.
J'aimerais donc le faire en css. Mais j'ai essayé divers trucs, sans trouver le moyen d'avoir un block qui rempli automatiquement l'espace restant d'une ligne...

Si vous aviez une idée, ce serait cool...

Mes excuses. Dans ma tête, le bonjour était implicite. Mais c'était seulement dans ma tête
Donc bonjour tout le monde !!

Bonjour,

tu aurais un extrait de code HTML à nous montrer et pourrais nous dire sur quel élément il y a déjà un background-image STP? Je n'ai pas bien saisi ...

Y aurait-il moyen d'utiliser un GIF 2 couleurs noir+transparent représentant un point (se répétant), tout bêtement?
Modifié par Felipe (07 Nov 2006 - 17:19)

le background serait sur un élément parent. Bien sûr que le point peut-être un gif. Ce que je voulais faire, c'est avoir à droite de chaque titre un élément avec en background un point qui se répète en x.
Le problème n'est pas là.
Le problème est d'avoir un élément après le titre qui adopte automatiquement la largeur disponible.
Et puis j'avais oublié de précisé : ce serait bien si tout cela était dans une liste, vu qu'il s'agit d'une liste de lien.
En fait, le cas qui m'occupe est légèrement différent de mon exemple. Voici un extrait du doc photoshop que m'a fourni le graphiste. Il s'agit d'un menu, pour lequel l'élément sélectionné a des points qui remplissent la ligne. Il n'y a pas de numéro de page, il faut que les points n'apparaissent que pour une ligne à la fois, mais le problème est le même.

Modifié par mouloud (07 Nov 2006 - 17:36)

Hello

Bon allé, pour le fun

html

<dl>
<dt>bla</dt>
<dd><span>p12</span></dd>
<dt>blobloblu</dt>
<dd><span>p15</span></dd>
<dt>g</dt>
<dd><span>p17</span></dd>
<dt>gidougodubadi</dt>
<dd><span>p57</span></dd>
</dl>

css

dl {
font-family:arial, sans-serif;
width:50%;
overflow:hidden;
background:#fff;
border:1px solid blue;
padding:10px;
}

dt {
float:left;
clear:both;
background:#fff;
position:relative;
top:5px;
padding-right:5px;
}

dd {
text-align:right;
margin-bottom:25px;
margin-left:0;
border-bottom:1px dashed #000;
}
span {
padding-left:5px;
position:relative;
top:5px;
background:#fff;
}

Vala, vala

et oui, mais ça, c'est possible avec un fond monochrome, pas avec un background-image, malheureusement...
Mais bon, pour le jour où j'aurais à le faire sans bg, c'est effectivement la bonne solution. J'ai pas le réflexe d'utiliser les dl-dd-dt...

mouloud a écrit :
J'ai pas le réflexe d'utiliser les dl-dd-dt...

Les listes de définition n'ont rien à voir là dedans

<div>
<hn></hn>
<p></p>
<hn></hn>
<p></p>
</div>

conviendrait tout aussi bien comme support des propriétés css.

oui je sais bien. Mais il se trouve que là, ça correspond assez bien, je trouve.

mouloud a écrit :
oui je sais bien. Mais il se trouve que là, ça correspond assez bien, je trouve.

Du moment que les "blobloblu" et autres "gidougodubadi" n'aient en aucune manière un statut de titre oui ça peut passer.

- Hopla
- Hopla
- Hopla
- et Hopla

J'ai gagné le défi ?

PS : pour info, chercher "dot leaders"
Modifié par Raphael (07 Nov 2006 - 18:27)

ah oui, je connaissais pas "dot leaders". J'avais chercher "filled with dot", ce qui n'avait rien donné.
Cela dit, il faut que je regarde de plus près, mais j'ai l'impression qu'aucune de ces solutions ne marchent avec un background-image. Toutes affichent les points sur toute la largeur, et donnent une couleur fond au titre et au numéro pour que les points n'apparaissent pas en dessous...
Mais merci pour "dot leaders", j'aurais appris quelque chose en anglais
et puis je vais googelisé un peu ça, voir si quelqu'un à trouvé une solution qui marche avec le bg-image.
Modifié par mouloud (07 Nov 2006 - 18:39)

Raphael a écrit :

J'ai gagné le défi ?

Ouè ouè... C'est assez proche de ce que je proposais en fait

Donc j'ai plus gagné que toi

nananère ...