Partage
  • Partager sur Facebook
  • Partager sur Twitter

HTML CSS flexbox aligner paragraphe avec un titre.

HTML CSS, flexbox, aligner un paragraphe en fonction d’un titre.

    28 décembre 2024 à 12:23:29

    Bonjour à toutes et tous,

    Je m'entraîne sur HTML et CSS. J'ai créé une simple page qui correspond à une recette de cuisine. Que du texte pour l'instant :

          Titre de la recette
          Ingrédients      Étapes
          Notes

    les sections Ingrédients et Étapes sont dans un même bloc positionné via flexbox, afin quelles se retrouvent l'une à côté de l'autre.

    Voici ce que je n'arrive pas à faire. J'aimerais que le texte des différentes étapes de la recette soit aligné/justifié avec la fin du titre et qu'il s'élargisse automatiquement en fonction de la longueur de celui-ci, afin de toujours rester aligné. Comme la ligne <hr> dans le footer.

    Je pense que c'est un souci avec les contenants flex, peut être le titre qui n'est pas dans le bon contenant ou il manque une propriété dans le code CSS.

    Je sèche un peu.

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Titre</title>
    	<link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
    	<!-- Commentaire -->
    	<div class="contenant_global">
    		<header>
    			<h1>Assaisonnement en poudre très épicé</h1>
    		<header/>
    		<div class="sections_flex_contenant">			
    			<section>
    				<ul title="Ingrédients">
    					<li>4 tbsp de piment en poudre</li>
    					<li>2 tbsp de cumin moulu</li>
    					<li>2 tsp de paprika en poudre</li>
    					<li>2 tsp de sel</li>
    					<li>2 tsp de poivre noir</li>
    					<li>1 tsp d'ail en poudre</li>
    					<li>1 tsp d'oignon en poudre</li>
    					<li>1 tsp d'origan séché</li>
    				</ul>
    			</section>
    			<section>
    				<ol title="Étapes">
    					<li>
    					Cras vel aliquet leo. Nam luctus dapibus enim. Ut mattis mauris risus, ac viverra est tristique quis. Donec blandit, felis 
    					eget aliquam aliquet, elit diam cursus enim, id rutrum urna lectus nec nisi. Vestibulum id est eget augue ornare imperdiet. Nam faucibus vehicula 
    					diam, eget feugiat risus consectetur quis. Suspendisse quis ultricies augue. Donec quis massa sollicitudin, fermentum lacus eget, bibendum mi.
    					</li>
    					<li>
    					Cras vel aliquet leo. Nam luctus dapibus enim. Ut mattis mauris risus, ac viverra est tristique quis. Donec blandit, felis 
    					eget aliquam aliquet, elit diam cursus enim, id rutrum urna lectus nec nisi. Vestibulum id est eget augue ornare imperdiet. Nam faucibus vehicula 
    					diam, eget feugiat risus consectetur quis. Suspendisse quis ultricies augue. Donec quis massa sollicitudin, fermentum lacus eget, bibendum mi.
    					</li>
    					<li>
    					Cras vel aliquet leo. Nam luctus dapibus enim. Ut mattis mauris risus, ac viverra est tristique quis. Donec blandit, felis 
    					eget aliquam aliquet, elit diam cursus enim, id rutrum urna lectus nec nisi. Vestibulum id est eget augue ornare imperdiet. Nam faucibus vehicula 
    					diam, eget feugiat risus consectetur quis. Suspendisse quis ultricies augue. Donec quis massa sollicitudin, fermentum lacus eget, bibendum mi.
    					</li>
    					<li>
    					Cras vel aliquet leo. Nam luctus dapibus enim. Ut mattis mauris risus, ac viverra est tristique quis. Donec blandit, felis 
    					eget aliquam aliquet, elit diam cursus enim, id rutrum urna lectus nec nisi. Vestibulum id est eget augue ornare imperdiet. Nam faucibus vehicula 
    					diam, eget feugiat risus consectetur quis. Suspendisse quis ultricies augue. Donec quis massa sollicitudin, fermentum lacus eget, bibendum mi.
    					</li>
    				</ol>
    			</section>
    		</div>
    	<hr>
    		<footer>
    			<h2>Notes</h2>
    			<p>Cras vel aliquet leo. Nam luctus dapibus enim. Ut mattis mauris risus, ac viverra est tristique quis.</p>
    		</footer>
    	</div>
    	
    	
    </body>
    </html>
    html, body {
    	margin: 0px; 
    	padding: 0px; 
    	border: 0px;
    	color: #303030;
    }
    
    .contenant_global {
            width: 100%;
            min-height: 100vh;
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: center;
    	align-content: center;
    }
    
    h1 {
    	font-size: 50px;
    	margin: 0px;
    	margin-bottom: 10px;
    }
    
    .sections_flex_contenant {
      display: flex;
      gap: 45px;
    }
    
     ul {
    	margin-left: 0;
    	padding-left: 0;
    	width: 200px;
    	font-size: 13px;
    }
    
    ul[title]::before {
    	content: attr(title);
    	display: block;
    	font-size: 21px;
    	font-weight: 600;
    	margin-bottom: 20px;
    }
    
     ul li {
    	margin-bottom: 10px;
    	list-style-type: none;
    }
    
    ol {
    	counter-reset: item;
    	padding-left: 0;
    	list-style-position:inside;
    	width: 450px;
    	font-size: 13px;
    	text-align: justify;
    }
    
    ol[title]::before {
    	content: attr(title);
    	display: block;
    	font-size: 21px;
    	font-weight: 600;
    	margin-bottom: 20px;
    }
    
    ol li {
    	margin-bottom: 20px;
    	display: block;
    }
    
    ol li::before {
    	display: inline-block;
    	content: counter(item) " ";
    	counter-increment: item;
    	font-size: 19px;
    	font-weight: 600;
    }
    
    hr {
    	border: solid 1px;
    }
    
    footer h2 {
    	font-size: 21px;
    	font-weight: 600;
    	margin: 0px;
    	margin-bottom: 3px;
    }
    
    footer p {
    	font-size: 13px;
    	margin: 0px;
    }

    Merci de l'aide que vous pouvez m'apporter. :)

    -
    Edité par MBMI 28 décembre 2024 à 12:27:42

    • Partager sur Facebook
    • Partager sur Twitter
      28 décembre 2024 à 12:35:07

      Bonjour,

      je vois plusieurs choses :

      • attention, ton header ne se ferme pas bien, ça change potentiellement et la sémantique et le visuel → change ça en premier et avise
      • tu as forcé la largeur du <ol> à 450px, donc c'est normal que ça ne s'élargisse pas, à mon sens
      • évite de changer le display des <li>, tu risques de perdre en sémantique ; si tu utilises list-style: "", ça aura le même effet de cacher le chiffre, si c'est bien ce que tu cherches à faire
      • évite le texte justifié sur le web, ça diminue la lisibilité (dans des livres ou magazines, c'est OK, parce qu'on a le contrôle total des mots et des espacements et qu'on peut faire des modifications précises aux endroits nécessaires)
      • utilise de vrais titres (h2) pour les ingrédients et étapes

      Une fois que ceci est fait (surtout le premier élément, qui a mon sens va changer beaucoup), reviens nous voir :)

      -
      Edité par Lamecarlate 28 décembre 2024 à 12:35:21

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        28 décembre 2024 à 21:52:52

        Bonjour Lamecarlate,

        Merci pour la réponse rapide.

        Alors, bien vue pour la balise <header> de fermeture. J'ai corrigé ça, mais malheureusement ça ne change rien. J'utilise Geany pour taper du code, je suis sous Linux, les balises HTML sont fermées automatiquement donc je ne pense pas tout le temps à vérifier. Erreur de ma part, je vais faire plus attention.

        Concernant les titres dans les listes <ul> et <ol>, j'ai remplacé par des titres <h2>.

        Concernant les chiffres de la liste ordonnée <ol> c'est normal. En fait, je souhaite bien les afficher, mais modifier leur design pour les afficher en gras et en plus gros. J'ai trouvé cette solution dans un sujet Stack Overflow, ça fonctionne.

        Je viens à la base de l'infographie papier et l'imprimerie, mes études en lycée professionnel, il y a longtemps. Je ne travaille pas dans ce domaine, mais il me reste des compétences et j'ai tendance à justifier mes paragraphes. :D

        J'ai tout copié-collé dans un Pen CodePen pour que ce soit plus lisible et compréhensible.

        Pour rappel, je souhaite que les paragraphes des différentes étapes de la recette soit alignés avec le titre, qu'ils prennent automatiquement la même longueur que lui.

        https://codepen.io/mbmi/pen/bNbrQEP

        Merci. ;)

        -
        Edité par MBMI 28 décembre 2024 à 21:54:54

        • Partager sur Facebook
        • Partager sur Twitter
          29 décembre 2024 à 9:21:23

          Merci pour les modifications :)

          Pour les chiffres, j'avais bien compris, et je te suggérais une manière propre de les cacher pour n'afficher que ceux que tu as choisi avec counter. Mais pas de souci, c'est un peu du pinaillage de ma part.

          Je souhaite que les paragraphes des différentes étapes de la recette soit alignés avec le titre, qu'ils prennent automatiquement la même longueur que lui.

          Donc, si le titre est très court, genre juste « Assaisonnement », les étapes seront très étroites, c'est ce que tu veux ? Si non, peux-tu faire plusieurs schémas, afin de montrer différents états ?

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            10 janvier 2025 à 20:18:01

            Bonjour,

            Meilleurs vœux pour cette année 2025 à toi et tous tes proches.

            Je réponds un peu tardivement désolé.

            Alors, pour le titre je me suis débrouillé autrement, finalement il sera centré via Flexbox ce sera plus simple et tout aussi bien.

            Pour les chiffres OL j'ai bien utilisé counter non ? Peut-être pas de la bonne manière ?

            ol {
            	counter-reset: item;
            	padding-left: 0;
            	list-style-position:inside;
            	width: auto;
            }
            
            ol li {
            	margin-bottom: 20px;
            	display: block;
            }
            
            ol li::before {
            	display: inline-block;
            	content: counter(item) " ";
            	counter-increment: item;
            	font-size: 19px;
            	font-weight: 600;
            }

            Ce qui donne dans le CodePen : https://codepen.io/mbmi/pen/bNbrQEP

            Le width: 50% de la classe sections_flex_contenant c'est pour centrer le tout horizontalement

            -
            Edité par MBMI 10 janvier 2025 à 20:20:21

            • Partager sur Facebook
            • Partager sur Twitter

            HTML CSS flexbox aligner paragraphe avec un titre.

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown