bug attribut class avec html et CSS

Sujet résolu

22 septembre 2024 à 19:16:35

Bonjour,
décidément celui la j'ai du mal à le comprendre.

je ne comprend pas pourquoi mes balises entête et pied-de-page ne voulait pas rester en fond blanc avec l'utilisation d'attribut class.

j'ai du rajouter une balise div pour pouvoir faire apparaitre le fond en blanc.
mon code n'est du coup pas du tout "optimisé"

quelqu'un peut m'éclairer à ce sujet svp ?

merci d'avance

PS : j'ai joint qu'une page de l'html car l'autre est plus ou moins identique.

<body>
        <div class="entete">
            <a href="../index.html"> 
                <img src="../images/logo.png" alt="Logo Robbie Lens">
            </a>
            <a href="../index.html">Accueil</a>
        </div>
        <h1> A propos de Robbie Lens</h1>
        <p>
            Photographe depuis plus de 5 ans, je réalise des reportages aux photos dynamiques et 
            pertinentes pour vos projets de communication. Créativité, qualité, et sérénité pour vous ! 
            Je gère tout, depuis la direction artistique, la réalisation du reportage, jusqu’à la livraison de vos photos retouchées, prêtes à l’emploi.
        </p>
        <h2>Services</h2>
        <ul>
            <li>Portrait seul ou à plusieurs,</li>
            <li>Shooting mode,</li>
            <li>Retouches sur mesure,</li>
            <li>Développement.</li>
        </ul>

        <div>
            <a href="" class="degrade">VOIR MON PORTFOLIO</a>
        </div>

        <div class="pied-de-page">
            <a href="../index.html">
                <img src="../images/logo.png" alt="Logo Robbie Lens">
            </a>
            <a target="_blank" href="https://www.twitter.com/">
                <img src="../images/twitter.png" alt="Twitter"/>
            </a>
            <a target="_blank" href="https://www.instagram.com/">
                <img src="../images/instagram.png" alt="Instagram"/>
            </a> 
        </div>
    </body>

ody {
    font-family: "Manrope", sans-serif;
    font-size: 1em;
    background-color: #1F2039;
}

a {
    color: #242424;
    text-decoration: none;
}

em {
    color: #A5B4FC;
    font-size: normal;
}

h1 {
    font-size: 3.5em;
    font-family: "Montserrat", sans-serif;;
    color: #A5B4FC
}

h2 {
    color: #F9F8FF;
}

p, li {
    font-size: 1.1em;
    color: #F9F8FF;
}

.entete
.pied-de-page {
    background-color: white;
    color: white;
}
 
.degrade {
    background: linear-Gradient(#8E86B5,#ACAEED);
    color: white;
}

div {
    background-color: white;
    color: white; 
}

Aurélien10!

22 septembre 2024 à 20:26:58

Bonjour,

il manque une , entre ".entete" et ".pied-de-page" afin de dire que cela s'applique au deux classes

Activer les erreurs PDO / (julp) htmlspecialchars / FAQ PHP / Pas d'aide par MP

SégolèneGevin

22 septembre 2024 à 20:52:14

olala merci beaucoup Aurélien. Quand je lis ta réponse c'est si évident !

Aurélien10!

22 septembre 2024 à 20:54:41

de rien, n'oublie pas de passer le sujet en résolu

Activer les erreurs PDO / (julp) htmlspecialchars / FAQ PHP / Pas d'aide par MP

AbcAbc6

23 septembre 2024 à 0:57:03

Bonjour,

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e

J'ajoute qu'il serait intéressant de ne pas attraper la divite o_O , en effet il faut utiliser la balise <div> si il n'y a pas d'autre balises qui conviennent mieux sémantiquement parlant. La sémantique est le fait d'utiliser les balises pour leurs rôles.

<div class="entete"> devrait être <header class="entete">

<div class="pied-de-page"> devrait être <footer class="pied-de-page">

Vous pouvez séparer les différentes partie de votre page en section grâce à la balise <section>.

Retrouvez toutes les balises et leurs définitions dans la doc MDN => https://developer.mozilla.org/fr/docs/Web/HTML/Element

-
Edité par AbcAbc6 23 septembre 2024 à 0:59:35