5549 sujets

Sémantique web et HTML

Bonjour,
J'affiche sur une ligne un texte aligné à gauche et un texte aligné à droite.
Quand je réduit la taille de la fenêtre ou que j'augmente la taille de la police, ces 2 textes se chevauchent.
Je voudrait à ce moment là que le texte aligné à droite passe à la ligne du dessous.
Merci pour votre aide
Administrateur
Hello,

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 ?).

Voici une façon de faire : https://codepen.io/alsacreations/pen/zYLZzPm

Mais je ne sais pas du tout si c'est adapté à ton code actuel...

Bonne soirée.
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°&nbsp;1> - Passer texte dessous quand je réduis la fenêtre<br />Bidoulle &#x21E8 Forum</div>
<div class="dat1 gau">Envoyé : jeu. 20-06-2023 à&ensp;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 &#x21E8 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°&nbsp;2> - RE: Passer texte dessous quand je réduis la fenêtre<br />Raphael &#x21E8 Bidoulle</div>
<div class="dat1 dro">Reçu : jeu. 20-06-2023 à&ensp;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
Bonjour
Merci à Raphael pour ta solution, je suis finalement arriver à l'inclure ma page, ça fonctionne, mais je ne la retiens pas, je ne suis as arriver à maitriser les hauteur de lignes ce que faisait moche.
J'ai aussi pioché sur le code de cette page comme je le disais dans mon deuxième post, j'en ai extrait la ligne qui faisait le job :
.p_date{margin-bottom:0;font-style:italic;font-size:.8em;text-align:left}@media screen and (min-width:545px){.p_date{float:right;text-align:left}}

je l'ai adaptée à ma page :
.dat1 {text-align:left}@media screen and (min-width:600px){.dat1{float:right; text-align:left}}

J'ai aussi un peu modifié le l'agencement du code de ma page et ça fonctionne nikel.
pour ceux qui sont intéressés voila 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; flex:1 0 0}
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 {text-align:left}@media screen and (min-width:600px){.dat1{float:right; text-align:left}}
.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>
			<INPUT 
				name="msg1" 
				class="btnModifi" 
				id="msg1" 
				href="Anc1" 
				type="submit" 
				value=n°&nbsp;1>
			 - Passer texte dessous quand je réduis la fenêtre<br>
			Bidoulle &#x21E8 Forum		
            		<div class="dat1">Envoyé : jeu. 20-06-2023 à 20:30</div>
		</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 &#x21E8 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"><br>
			<a id="Anc2"></a>
			<INPUT 
				name="msg2" 
				class="btnModifi" 
				id="msg2" 
				href="Anc2" 
				type="submit" 
				value=n°&nbsp;2>
				 - RE: Passer texte dessous quand je réduis la fenêtre<br>
			Raphael &#x21E8 Bidoulle
			<div class="dat1">Reçu : jeu. 20-06-2023 à&ensp;21:19</div>
		</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>

Je vous le redis, si vous voyez des aberrations, dans le code ayez la gentillesse de me le faire remarquer, n'ayant qu'un faible niveau, je pourrai ainsi m'améliorer.
A bientôt.