Mettre en forme les cartes et le bloc de contact
Objectif : Appliquer une mise en page stable aux conseils pratiques et aux informations de contact.
Une carte peut contenir les mêmes informations qu’une autre tout en paraissant désordonnée si son titre, son texte et son espacement ne suivent pas une structure constante. Un bloc de contact pose un problème voisin : les coordonnées doivent être faciles à repérer et à lire, sans se confondre avec les conseils pratiques.
Dans cette étape du projet, vous allez définir une composition réutilisable pour les cartes, puis organiser les informations de contact avec les mêmes repères d’espacement. La navigation et les zones de la page sont déjà en place : vous réutiliserez les règles vues dans les leçons correspondantes, sans les redéfinir ici.
1. Donner une structure constante aux cartes
Chaque conseil possède un titre, une explication et, éventuellement, une indication d’action. Gardez cet ordre dans le HTML : il fournit une lecture prévisible et reste compréhensible sans styles. Donnez aux cartes une classe commune, ici carte-conseil, pour appliquer une seule règle de présentation à toutes.
<main class="mise-en-page">
<section class="horaires" aria-labelledby="titre-horaires">
<h2 id="titre-horaires">Horaires de l’atelier</h2>
<p>Samedi, de 9 h à 12 h.</p>
</section>
<section class="conseils" aria-labelledby="titre-conseils">
<h2 id="titre-conseils">Conseils pratiques</h2>
<div class="liste-conseils">
<article class="carte-conseil">
<h3>Préparez vos outils</h3>
<p>Nettoyez vos outils avant de commencer et vérifiez leur état.</p>
<p class="detail-conseil">À prévoir : gants et sécateur.</p>
</article>
<article class="carte-conseil">
<h3>Arrosez au bon moment</h3>
<p>Arrosez de préférence le matin pour limiter l’évaporation.</p>
<p class="detail-conseil">Adaptez la quantité à la météo.</p>
</article>
<article class="carte-conseil">
<h3>Observez le sol</h3>
<p>Un sol légèrement humide aide les jeunes plantations à s’installer.</p>
<p class="detail-conseil">Touchez la terre avant d’arroser.</p>
</article>
</div>
</section>
<aside class="contact" aria-labelledby="titre-contact">
<h2 id="titre-contact">Nous contacter</h2>
<p>Une question avant l’atelier ? Écrivez-nous ou appelez-nous.</p>
<address>
<a href="mailto:[email protected]">[email protected]</a>
<a href="tel:+33123456789">01 23 45 67 89</a>
</address>
</aside>
</main>Les titres de section et les titres de carte suivent des niveaux différents : la section annonce le sujet général, puis chaque carte présente un conseil particulier. L’élément address regroupe ici les coordonnées de contact. Les liens mailto: et tel: permettent d’ouvrir l’outil correspondant lorsqu’un visiteur les active.
2. Régler les espacements à l’échelle du composant
L’espacement intérieur, réglé avec padding, éloigne le contenu des bords de la carte. L’espacement extérieur, réglé avec margin, sépare un composant de ce qui l’entoure. Ici, l’écart entre les cartes est géré par le conteneur liste-conseils, tandis que chaque carte règle ses propres marges de titre et de paragraphe.
/* style.css : styles des conseils et du contact */
:root {
--couleur-texte: #24352a;
--couleur-fond: #f4f7f0;
--couleur-carte: #ffffff;
--couleur-accent: #356b45;
--espace-petit: 0.5rem;
--espace-moyen: 1rem;
--espace-grand: 1.5rem;
--rayon-carte: 0.75rem;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--couleur-texte);
background: var(--couleur-fond);
font-family: Arial, sans-serif;
line-height: 1.6;
}
.mise-en-page {
display: grid;
grid-template-areas: "horaires conseils contact";
grid-template-columns: 1fr 2fr 1fr;
gap: var(--espace-grand);
max-width: 72rem;
margin: 0 auto;
padding: var(--espace-grand);
}
.horaires {
grid-area: horaires;
}
.conseils {
grid-area: conseils;
}
.contact {
grid-area: contact;
}
.horaires,
.conseils,
.contact {
min-width: 0;
}
.liste-conseils {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--espace-moyen);
}
.carte-conseil,
.contact {
padding: var(--espace-grand);
border-radius: var(--rayon-carte);
background: var(--couleur-carte);
}
.carte-conseil h3,
.contact h2 {
margin: 0 0 var(--espace-petit);
color: var(--couleur-accent);
line-height: 1.3;
}
.carte-conseil p,
.contact p {
margin: 0 0 var(--espace-moyen);
}
.carte-conseil .detail-conseil {
margin-bottom: 0;
font-size: 0.9rem;
}
.contact address {
display: grid;
gap: var(--espace-petit);
font-style: normal;
}
.contact a {
color: var(--couleur-accent);
overflow-wrap: anywhere;
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Le résultat est une section de conseils composée de cartes blanches, avec deux cartes par rangée dans cette configuration. Les titres partagent une couleur et un espacement inférieur identiques ; les détails restent visuellement secondaires. Le contact forme un bloc distinct, et ses coordonnées sont empilées avec un écart régulier plutôt que séparées par des marges disparates.
3. Vérifier la composition avant de poursuivre
Vérifiez que chaque carte conserve le même remplissage et que ses titres ne sont pas séparés du texte par des espaces excessifs. Contrôlez aussi le contact : l’adresse électronique et le numéro doivent apparaître comme des liens distincts, et le contenu ne doit pas toucher les bords du bloc. Dans l’exemple, min-width: 0 évite que le contenu impose une largeur minimale indésirable à une zone de la grille ; la gestion générale des débordements sera approfondie dans une autre leçon.
À retenir
- Structurez chaque carte dans un ordre constant : titre, explication, puis détail éventuel.
- Appliquez les styles communs avec une classe partagée, plutôt que de répéter des règles carte par carte.
- Distinguez le remplissage intérieur du composant et l’écart qui le sépare des éléments voisins.
- Réutilisez les variables CSS pour garder des espacements cohérents entre les cartes et le contact.
Dans la prochaine leçon, vous adapterez la page à plusieurs largeurs d’écran et ajusterez la navigation et les zones selon le contenu disponible.