Bonjour Raphael et les lecteurs,
Merci pour ta réponse rapide, c'est bien ce que je demandais, mon niveau est trop faible pour l'adapter à mon code malgré l'exemple, je ne sais pas où mettre le CSS, je n'ai qu'un fichier HTML dont voici le code dans lequel j'ai repris cette conversation.
Tu peux voir que c'est assez confus,
sur la date du message 1,
je fais un <div class="dat1 gau">
soit un pour dat1 { text-align: right;} et pour gau { float: left;}
et
sur la date du message 2,
je fais un <div class="dat1 dro">
soit un pour dat1 { text-align: right;} et pour dro{ float: right;}
pour info, j'ai appelé les classes "gau" pour l'emplacement et "che" pour la couleur, (gauche)
idem pour "dro" et "ite" (droite).
Bon ici il n'y a que 2 messages, 2 interlocuteurs donc 2 couleurs mais sur une longue conversation les couleurs sont fonction du sens de la conversation (entrant -sortant), du type de conversation (mail, tél, sms, info, courrier) et de l'interlocuteur (vacancier, hébergeur, agence, tiers).
voilà le code
<!DOCTYPE html PUBLIC " ">
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11.0000" />
<style>
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.content-main { background: rgb(255, 255, 255); padding: 0px 10px 10px 10px;}
body { line-height: 1.345; color: rgb(63, 63, 63); font-family: Arial; font-size: 12px;}
.btnModifi { cursor: pointer; -webkit-appearance: button; border: 2px solid transparent; text-align: center; font-size: 12px; padding: 5px; height: 19px; line-height: 0px; border-radius: 5px; background: rgb(221, 144, 24); color: rgb(255, 255, 255);}
.dat0 { padding: 0px 10px 0px 10px; width: 75%; text-align: left;}
.dat1 { padding: 0px 10px 0px 10px; width: 75%; margin-top: -16px; text-align: right;}
.gau { float: left;}
.dro { float: right;}
.message { margin: 0px; padding: 15px 10px 20px 20px; border-radius: 15px; font-family: Comic Sans MS; font-size: 13px; text-align: left; width: 75%; clear: both;}
.che { background-color: #9FDFC3;}
.ite { background-color: #E49AC4;}
</style></head>
<body>
<div class="content-main pull-left">
<div class="dat0 gau"><a id="Anc1"></a><br><INPUT name="msg1" class="btnModifi" id="msg1" href="Anc1" type="submit" value=n° 1> - Passer texte dessous quand je réduis la fenêtre<br />Bidoulle ⇨ Forum</div>
<div class="dat1 gau">Envoyé : jeu. 20-06-2023 à 20:30</div>
<div class="message gau che">
Bonjour,<br>
J'affiche sur une ligne un texte aligné à gauche et un texte aligné à droite.<br><br><span style="text-decoration: underline;">"Bidoulle ⇨ Raphael"</span>
et <span style="text-decoration: underline;">"Envoyé : jeu. 20-06-2023 à 20:30"</span><br><br>
Quand je réduit la taille de la fenêtre ou que j'augmente la taille de la police, ces 2 textes se chevauchent.<br>
Je voudrait à ce moment là que le texte aligné à droite passe à la ligne du dessous.<br>
Merci pour votre aide</div>
<div class="dat0 dro"><a id="Anc2"></a><br><INPUT name="msg2" class="btnModifi" id="msg2" href="Anc2" type="submit" value=n° 2> - RE: Passer texte dessous quand je réduis la fenêtre<br />Raphael ⇨ Bidoulle</div>
<div class="dat1 dro">Reçu : jeu. 20-06-2023 à 21:19</div>
<div class="message dro ite">
Hello,<br><br>Comme tu t'en doutes, il est difficile voire impossible de deviner comment t'aider sans savoir comment tu as procédé pour positionner tes éléments (float ? flexbox ? text-align ? margin ?).<br>
<br>Voici une façon de faire : <a href="https://codepen.io/alsacreations/pen/zYLZzPm" rel="noopener">https://codepen.io/alsacreations/pen/zYLZzPm</a><br><br>Mais je ne sais pas du tout si c'est adapté à ton code actuel... <br><br>Bonne soirée.</div>
</div>
</body></html>
Que tu arrives ou pas à la solution, au passage ne te gène pas pour souligner les aberrations, erreurs et autres de mon code, je n'ai rien inventé, c'est du collage de copie/coller, du pur Bidoulle Niveau 1/10. Je ne suis pas du métier, alors je collecte des miettes dans l'espoir de faire mon château.
Ah j'ai vu aussi que sur cette page du forum, quand je réduis la fenêtre, le pseudo de gauche passe au centre, la date qui était à droite passe aussi au centre mais sous le pseudo.
C'est le principe que je recherche sauf que la date devrait passer à gauche. Quand j'examine le code de cette page (bien compliquée pour mes connaissances), je ne trouve pas la partie magique de code qui opère, pour l'adapter à ma page.
A bientôt
