[resolu] Pointillé sur un texte en css

Humm, bonjour à toi aussi, au-revoir, merci, etc.

http://forum.alsacreations.com/topic.php?fid=9&tid=235

a écrit :
10ème règle :
La politesse élémentaire est d'usage sur ce Forum (Bonjour, Merci d'avoir répondu à ma question, ...) et sera appréciée par les modérateurs (et autres membres).
Les nouveaux inscrits qui le souhaitent peuvent se présenter dans ce sujet du Bar du forum.
Quant aux membres que vous avez dépanné et qui après 48h ne vous ont même pas laissé un "merci", n'hésitez pas à le faire remarquer par un "j'adore être remercié comme ça smile " de votre goût. cligne

tout d'abord je m'excuse de ne pas mettre présenté
Mon empressement et mon aggacement de ne pas réussir a obtenir ce que je souhaite m'a fait oublier ces rêgles de politesse.

On va donc reprendre depuis le début.

Bonjour, je m'appele Victor, et je code actuellement un site en php/mysql de gestion de musique (de façon a exécuter un fichier a distance sur un serveur local)

Afin de rendre l'interface plus attrayante, j'ai décidé de me lancer dans le css que je ne maitrise pas encore énormement.

Et actuellement je bute sur un problème que j'ai décrit en 1er post

Si quelqu'un pouvait m'apporter ne serait-ce qu'une petite aide afin que je puisse continuer mon projet, je lui en serai très reconnaissant

Merci d'avance

En plus propre :

<p><span class="gch">bla bla</span> <span class="dte">blu blu</span></p>

Et pour les CSS

		p
		{
			background: url(img_pointillé) repeat-x ;
		}

		span.gch
		{
			float: left ;
			background: #fff ;
		}
		
		span.dte
		{
			float: right ;
			background: #fff ;
		}

Modifié le 30 Nov 2004 - 13:41

Après tests, c'est pas tout à fait ça, voici une meilleure solution :

<div><p class="gch">bla bla</p> <p class="dte">blu blu</p><hr /></div>

Et les CSS

		div { width: 550px ; background: url(pointille.gif) repeat-x 0 65% ; }
		p { margin: 0 ; }
		p.gch { float: left ; background: #fff ; }
		p.dte { float: right ; background: #fff ; }
		hr { clear: both ; visibility: hidden ; }

Voilà un exemple
http://www.elmoustikoblog.net/divers/text/

(Note : j'ai renommé le titre du sujet pour le rendre plus clair et plus facile à retrouver par la suite)

merci pour ces réponses
C'est plutot intéressant comme solution et en tout cas ça m'apprend pas mal de truc sur la façon d'intégrer le css
(j'utilisais uniquement le class="" pour le moment)
sur ton test, ce qu'on voit en fait, c'est un trait pointillé qui souligne le tout
ce que je recherche c'est un trait pointillé qui se met entre bla bla et blu blu, où le résultat est le même que pour un menu où a chaque ligne on suit les pointillés pour arriver au prix

En fait, je testai sur Firefox, et sur firefox ça marche impec, le trait est là où il faut.

En effet sous IE c'est pas ça , pas trop le temps de voir plus en détail pour le moment, désolé !

Sinon, je te conseil tout de même firefox pour tes tests et aussi pour ta navigation et ensuite voir les dégats sous IE et tenter de trouver des solutions.

Par contre, pour chipoter, la relation entre le l'objet et son prix ne me semble pas exprimée, non pas dans la présentation mais dans le code html.
Selon moi l'option des pointillés est un héritage de l'imprimerie qui n'est peut-être pas le plus adapté à une présentation écran.

l'option des pointillés permet de pouvoir suivre bien a quelle ligne correspond chaque prix (si la distance est assez éloignée)

J'ai réussi a bricoler une solution qui passe a l'écran.
En faite, je commence par mettre les pointillés en les laissant déborder a gauche
Et ensuite je repasse dessus avec le texte, en mettant un background de la même couleur que le fond.
C'est pas propre mais j'obtient au moins le résultat voulu

A tester (fonctionne sur IE6 et FF) :

.bloc	{
position: relative;
border-bottom: 1px dotted gray ;
}
.gauche, .droite {
position: absolute;
top: -1em;
background: #fff ;
}
.gauche {
float: left ;
left:0;
}
.droite {
float: right ;
right:0;
}


<p class="bloc"><span class="gauche">bla bla</span><span class="droite">blu blu</span></p>
<p class="bloc"><span class="gauche">bla bla bla bla</span><span class="droite">blu blu</span></p>
<p class="bloc"><span class="gauche">bla bla bla bla bla bla bla bla bla bla</span><span class="droite">blu blu</span></p>

Aperçu sur Mozilla :

PS : tu n'oublieras pas de rajouter un [Résolu] en éditant le titre de ton sujet dès que le problème sera réglé ?

Euhh question stupide :
C'est pour quoi faire ton truc ??

Tu es sûr qu'un tableau ne serait pas plus adapté ?
Quand tu me parles de correspondance de prix avec le début de ligne, je pense à faire un tableau moi.

J'allais justement en faire mention. L'utilisation d'un tableau me semble plus adapté pour ce genre de présentation, et il suffirait d'utiliser les pointillés en background à une position précise pour chaque cellule. Ca devrait bien s'afficher partout.

Effectivement, structurellement l'emploi d'un tableau est plus que justifié... par contre il me semble difficile d'obtenir exactement l'effet recherché avec des cellules (les pointillés seront dans une cellule adjacente et pas toujours collés au textes dont la longueur varie)

Bah en ajoutant un span avec background blanc pour le texte variable, on arrive à s'en sortir.

Petit rappel :
Privilégier un code correct, ayant du sens par rapport à son utilisation plutot que différents gadgets (graphiques ou non) quitte à obtenir un visuel légèrement moins esthétique, même si là on ne parle pas vraiment d'esthétisme.
La meilleure solution pour bien faire correspondre le texte de la colone de gauche et celui de la colone de droite reste d'alterner les couleurs de fond des lignes une ligne sur 2. En plus visuellement ça peut très bien rendre.

merci, grace ça vous j'ai résolu le problème comme il fallait
pour l'utilisation d'un tableau, j'ai du mal a imaginer comme faire

peux être que mon code n'est pas 100% optimisé mais l'essentiel y est

je vais changer le nom du topic en

a une prochaine fois

Pour le tableau, ce n'est pas forcément la solution la plus adaptée, tout dépend de ce que tu veux faire (ce qu'on ne sait pas vraiment ).

Mais en supposant que tu veuilles faire d'un coté par exemple des article et de l'autre le prix correspondant à cet article, il est clair que le tableau est le plus adapté, et pour le mettre en place rien de plus simple, un ligne de titres de colones (article / prix) avec des <th>, et ensuite une ligne par article.

Pour des tableaux accessibles et stylés avec css : Habillage de tableaux avec des css