Des pointillés à la mode "Carte de restaurant"

Bonjour Messieurs, ici vous parle une geekette en détresse,

Bon j'ai un peu honte, mais je suis bloquée sur un problème de pointillés entre deux blocs et j'avoue que je sais même pas si on peut le faire en css.

Je m'explique : il s'agit d'une liste (ul li), enfin pour le moment, qui indique à gauche, une caractéristique d'un bateau et en face la valeur de la caractéristique. Et ma gentille graphiste voudrait qu'entre ces deux valeurs, il y ait des pointillés... comme dans la carte des plats d'un restau.

J'ai donc mis trois span dans chaque <li> (j'espère que c'est déjà pas trop grave de faire cela), que j'ai display:blocké (néologisme de geekette) et que j'ai flotté à gauche pour la caractéristique et le span du centre (sensé contenir des pointillés) et à droite pour la valeur de la caractéristique. Ca donne ça pour l'html :

<ul>
...
<li><span class="carac">Budget assurance </span><span class="pointill"></span><span class="valCarac">1000 €</span></li>
...
</ul>

Et ça pour le css :

#info_spe ul li span{
	display: block;
	float : left;
}

#info_spe ul li span.carac{
	clear : both;
}

#info_spe ul li span.valCarac{
	float : right;
}

#info_spe ul li span.pointill{
	border-bottom : 1px dotted black;
}

Le problème, c'est que comme je ne veux pas donner de taille aux blocs de droite et de gauche, le bloc du centre n'a pas de taille et donc je n'ai pas de pointillés...

Comment puis-je faire ? (je suis sûre que c'est tout bête, ça m'énerve)
Modifié par Cygnus (09 Jun 2008 - 10:24)

Bonjour à toi (nota... y a pas que des mecs sur le Forum )

Pourrais-tu nous montrer ce que tu souhaites obtenir car en l'état, je ne vois pas des masses.
J'ai bien une petite idée en tête, mais ta précision je ne veux pas donner de taille aux blocs de droite et de gauche me met le doute.

Le joli jpeg que ta graphiste t'a pondu par exemple...

Bonjour,

Rien de prévu pour ça en CSS. Tu peux tricher avec une image de fond sur le conteneur, et une couleur de fond sur les deux SPAN de contenu. La couleur de fond sur les SPAN sert alors à masquer les pointillés lorsqu'il y a un contenu.

Cette astuce ne fonctionne que si le fond est de couleur unie.

Voici un exemple : du résultat que je dois avoir...

L'aide de mes congénères féminines est aussi la bienvenue bien évidemment !
Modifié par aurora_borealis (05 Jun 2008 - 16:44)

Ah, ok...

Hum, comme le dis Florent, la seule solution qui m'apparait consiste à placer une image de fond représentant tes pointillés sur tous tes éléments de liste.
Puis à masquer cette dernière là où il y a du texte en affectant à tes éléments <span> un arrière-plan blanc.
Modifié par Cygnus (05 Jun 2008 - 16:46)

Ok très bien, merci à vous deux, j'ai fais comme vous me l'avez suggérer et ça passe très bien !