Mise en forme de 3 éléments sur une ligne

Bonjour à tous,

je perd un peu la mémoire et je ne me rappelle plus comment mettre en forme ceci :

3 éléments (<p>) sur une même ligne.
Les 3 p ont des largeurs variables
les 3 p alignés ont une taille fixe (750px par exemple)

Le p1 (a gauche) est un texte qui peut changer, donc sa taille aussi
idem pour le p3 situé à droite.
Le p2 quand à lui est juste composé de tirets (border-bottom: dashed, ou un background sinon) et rempli l'espace situé etre p2 et p3.

J'espere que c'est clair...

En gros ::

Texte 1 ---------------------------------------------------------Texte 2

avec Texte 1 + --- + Texte 2 = 750px
Texte 1 et 2 sont variables et --- est automatique.

So, any idea guys ?

Bonjour,

L'idée de travailler avec des tirets en dur est mauvaise. Une bordure ou une image de fond seraient plus adaptées.

lol, oui c'est avec un border-bottom que je le fais

les tirets c'est juste pour vous le shéma exemple

Ce que je veux dire, c'est que tu peux simplifier la structure avec quelque chose comme:

<div class="ligne">
	<p class="left">...</p>
	<p class="right">...</p>
</div>

Si tu veux tout de même utiliser trois éléments, il faudra placer p1 et p3 en premier dans le code HTML, les faire flotter sans leur donner de largeur (si ce n'est peut-être un max-width), et adapter la largeur du troisième élément (central) en utilisant un contexte de formatage.

oki

je peux faire avec 2 éléments comme tu dis, mais dans ce cas si j'applique un border à ma div, il va faire des pointillés partout, même sous les 2 textes.

L'idée est que les pointillés commencent après le texte1 et s'arrêtent avant le texte2

djedie a écrit :
mais dans ce cas si j'applique un border à ma div, il va faire des pointillés partout, même sous les 2 textes

Le principe serait alors d'utiliser les deux textes en question pour masquer les pointillés.

djedie a écrit :
L'idée est que les pointillés commencent après le texte1 et s'arrêtent avant le texte2

Et l'idée que je propose est de faire du trompe l'oeil pour donner cette impression.

Mais sinon, comme je le disais, ce que tu décris est possible avec un bon contexte de formatage. (Faire une recherche sur ce concept s'il n'est pas connu.)

Je pense faire ce que tu conseilles en appliquant un border-bottom à la div.

Comment penses-tu que je puisse cacher cette bordure avec les textes ?

je fais juste un petit up

djedie a écrit :
Comment penses-tu que je puisse cacher cette bordure avec les textes ?

En utilisant la propriété background.

Florent V. a écrit :

En utilisant la propriété background.

La propriété background sur les <p> qui contiennent les textes sont sensés cacher le background de la <div> qui contient le tout ?

Si tu as un fond uni (disons blanc), et un conteneur avec un border-bottom en pointillés, tu peux donner une couleur de fond blanche aux deux paragraphes pour cacher le fond et éventuellement du conteneur (DIV).

Si tu utilises la bordure du conteneur pour dessiner les pointillés, il faudra exploiter le dépassement des flottants ou utiliser le positionnement relatif pour faire descendre les paragraphes.
Tu peux aussi utiliser une image de fond sur ton DIV pour les pointillés.

J'ai appliqué un border-bottom a ma div et je joue avec les paddins pour reduire les pointillés et les margin negatifs pour replacer les texte en dehors des pointillés...

C'est pas tip top, surtout si le texte change beaucoup, mais mon background n'est pas blanc, c'est une image avec degradé donc pas possible de cacher les pointillés avec une image