28118 sujets

CSS et mise en forme, CSS3

Comment passer à la ligne ou aligner quand on est sur un smartphone ?

Bonjour à vous tous,

Je suis confronté à une difficulté dont je ne sais absolument pas comment la résoudre.

Considérons le code HTML suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Responsive</title>
	<style>
		details{
			display: inline;
			width: 150px;
		}
	</style>
</head>
<body>

	<p>
		<details>
			<summary>
				<code>Banane</code>
			</summary>
			<code>
				<a href="#" target="_blank">couleur</a>,
				<a href="#" target="_blank">forme</a>,
				<a href="#" target="_blank">goût</a>,
				<a href="#" target="_blank">texture</a>
			</code>
		</details>
			La banane plantain est une espèce hybride de plante de la famille des Musaceae.
	</p>
	
	<p>
		<details>
			<summary>
				<code>Poire</code>
			</summary>
			<code>
				<a href="#" target="_blank">couleur</a>,
				<a href="#" target="_blank">forme</a>,
				<a href="#" target="_blank">goût</a>,
				<a href="#" target="_blank">texture</a>
			</code>
		</details>
			La poire est le fruit à pépins comestible au goût doux et sucré, produit par le poirier commun (Pyrus communis L.).
	</p>
	
	<p>
		<details>
			<summary>
				<code>Pomme</code>
			</summary>
			<code>
				<a href="#" target="_blank">couleur</a>,
				<a href="#" target="_blank">forme</a>,
				<a href="#" target="_blank">goût</a>,
				<a href="#" target="_blank">texture</a>
			</code>
		</details>
			La pomme est un fruit comestible produit par un pommier. Les pommiers sont cultivés à travers le monde.
	</p>
	
	<p>
		<details>
			<summary>
				<code>Orange</code>
			</summary>
			<code>
				<a href="#" target="_blank">couleur</a>,
				<a href="#" target="_blank">forme</a>,
				<a href="#" target="_blank">goût</a>,
				<a href="#" target="_blank">texture</a>
			</code>
		</details>
			L’orange ou orange douce est le fruit de l'oranger (Citrus sinensis L.) de la famille des Rutacées.
	</p>
	
	<p>
		<details>
			<summary>
				<code>Pamplemousse</code>
			</summary>
			<code>
				<a href="#" target="_blank">couleur</a>,
				<a href="#" target="_blank">forme</a>,
				<a href="#" target="_blank">goût</a>,
				<a href="#" target="_blank">texture</a>
			</code>
		</details>
			Le pomélo, pomelo ou pamplemousse, ou fruit défendu, ou encore chadègue, est un arbre fruitier de la famille des Rutaceae.
	</p>
	
</body>
</html>

Affichage sur un écran d'ordinateur de bureau :
upload/1664460020-62242-capture.png
Affichage sur un écran de smartphone :
upload/1664460077-62242-capture.png

Sur un écran d'ordinateur de bureau, la description du fruit tient sur une seule ligne et toutes les descriptions sont parfaitement alignées à gauche. Mais sur un écran de smartphone, étant donné que la largeur est bien plus petite, le surplus de texte de la description passe à la ligne.

Voilà ma question : y a-t-il moyen d'aligner les descriptions sur le premier caractère ou bien, à défaut, de la passer à la ligne en-dessous du nom du fruit et de ses propriétés ?

Je sais que je pourrais utiliser la balise <br> mais elle se place dans la structure HTML. Or, les propriétés d'affichage pour les smartphones ne s'affichent que dans les media queries qui se trouvent dans la feuille CSS. Donc, comment faire pour soit aligner sous la première lettre de chaque description, soit les passer toutes à la ligne sous le nom du fruit, dans un affichage smartphone ?

Merci pour votre aide.
Modifié par ObiJuanKenobi (29 Sep 2022 - 16:08)
Oui, pourquoi pas mais c'est plus ardu à construire. Il n'existe pas une propriété pour l'indentation ou pour passer à la ligne mais dans les CSS ?
Salut,

l'indentation ne changera rien au problème et la balise <br> serait une très mauvaise idée.
Et je ne comprends pas " Il n'existe pas une propriété pour l'indentation ou pour passer à la ligne mais dans les CSS ?";
C'est toujours dans le css que l'on met en forme les paragraphes et autres blocks.
Si tu veux faire passer les descriptions sous les noms des fruits, il faut mettre ces descriptions dans une div indépendante, avec une class et utiliser les @media pour les mobiles. En tous cas, pas de bricolage avec <br> ou avec les balises d'espacement en html.
Sinon, il faut faire deux blocks, un pour les titres et un autre pour les descriptions. Tu peux t'en sortir facilement avec flexbox, même s'il n'est pas inutile de connaître les "anciennes" techniques.
Modérateur
Bonjour,

Avant de t'attacher à styler ton HTML, fait en sorte qu'il soit valide et que les balises utilisées soit pertinentes .

* Un <p> est supposé ne contenir que du contenu en ligne (texte,image ) .La balise <détails> force ici le <p> à se refermer . Regarde dans l'inspecteur et voit comment ton navigateur corrige ton erreur en refermant ton <p> avant <détails> et plus loin en accolant une balise d'ouverture faisant un <p></p> vide.

* La balise code est elle aussi mal utilisée, <code>Pomme</code> n'est pas du code mais un fruit ! La balise summary ne suffit pas ?

Pour que ton texte passe sous <details>, il te faudrait la stylée en inline-block ou la faire flotter en lui donnant une largeur . 8em semble un bon compromis ici.

Exemple d'un code valide et semblant correspondre a tes attentes Smiley cligne https://jsfiddle.net/h295L7xj/1/
Modifié par gcyrillus (29 Sep 2022 - 19:58)
J'ai utilisé <code> devant un nom de fruit alors que ce n'est effectivement pas pertinent. Mais dans mon projet, c'est du véritable code informatique à la place du nom de fruit. C'est juste que j'ai mis un nom de fruit pour l'exemple à vous soumettre (mon projet est beaucoup trop long), tout comme j'aurai pu mettre un nom de voiture ou d'un ustensile de cuisine. J'ai pas réfléchi, à ce moment là, à la pertinence de l'utilisation des bonnes balises.

Ensuite, j'ai trouvé la solution. J'ai encapsulé la description du fruit dans un <span> avec une classe et celle-ci stipule dans les médias queries qu'en cas d'affichage smartphone il y a un display: block; et la description passe ainsi à la ligne. Mais dans un affichage d'écran d'ordinateur, la description reste à sa place en face du nom du fruit.

Merci gcyrillus de m'avoir orienté vers la solution !
Que le code soit avec toi !
Modifié par ObiJuanKenobi (30 Sep 2022 - 10:10)
Prévenir un modérateur
Répondre au sujet
Aller à