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>
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
Pas d'aide concernant le code par MP, le forum est là pour ça :)
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.
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.
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 ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)