Background color ne marche pas!

25 janvier 2023 à 20:01:12

Salut tout le monde,

Je débute, mais j'ai un problème, j'ai bien écrit mon code pour avoir le fond de certaines parties du site en couleur mais lorsque je l'affiche dans mon navigateur les couleurs ne s'appliquent pas, voici des images des parties du code concernées, y-a-t-il une solution s'il vous plait?

Merci beaucoup

AbcAbc6

25 janvier 2023 à 22:05:07

Bonjour, Pas d'image de code totalement inutilisable par copier/coller pour tests éventuels.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Domi65

27 janvier 2023 à 12:59:40

Bonjour. Comme dit par AbcAbc6, nous avons besoin de code et non d'image pour t'aider.

Mais je me permets un conseil qui peut te faciliter plus tard la vie. La couleur #8e86b5, par exemple, revient souvent.

Si tu veux la modifier, tu dois le faire plusieurs fois. Tu devrais définir une variable pour le body ou le html pour pouvoir la réutiliser à l'envie. Tu n'auras qu'à modifier une seule fois cette variable pour modifier la couleur à chaque endroit.

Définition d'une variable :

html {--main-color: maroon;}

Utilisation de la variable définie pour les titres :

h1, h2, h3, h4 {color: var(--main-color);}

Un peu compliqué au départ, mais très utile.

Cordialement.

MuhsinOuebdil

30 janvier 2023 à 10:33:59

Bonjour,

Merci beaucoup pour ton conseil! Et voici la version code si ça vous permet de mieux m'éclairer..

Merci !

body {
  font-family: 'Manrope', sans-serif;
  font-size: 1em;
  background-color: #1f2039;
}

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

em {
  color: #a5b4fc;
  font-style: normal;
}

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

h2 {
  color: #f9f8ff;
}

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

.entete,
.pied-de-page {
  background-color: purple;
}

.cta {
  background: linear-gradient(#8e86b5, #acaeed);
  color: purple;
  border-radius: 50px;
}

.carre-contenu {
  border-right: 1px solid #8e86b5;
  border-bottom: 1px solid #8e86b5;
}

Mewen_bzh

30 janvier 2023 à 10:43:41

Hello,

Pas d'erreur dans le CSS.

Le problème est seulement sur la propriété background-color et tout le reste fonctionne ?

Quel est le HTML associé à ce fichier de styles ?

MuhsinOuebdil

30 janvier 2023 à 13:12:01

Non meme les bordures et carrés ne s'appliquent pas et je ne comprends pas pourquoi, voici le HTML associé:

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" >
    <title>Accueil - Robbie Lens Photographie</title>
    <link href="style.css" rel="stylesheet" >
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope&family=Montserrat&display=swap" rel="stylesheet">
</head>

<body>
    <div class="entete">
        <img src="camera-png-removebg-preview.png" alt="Logo Robbie Lens" height="40" width="40">
        <a href="a-propos.html">À propos</a>
    </div>
    <h1>Photographie</h1>
    <p>
        Où <em>professionalisme</em> s’allie avec <em>passion</em>. Depuis
        plus de 5 ans maintenant, j’exerce mon métier avec la passion
        qui m’anime : capturer l’essence de chaque instant.
    </p>
    <img src="images/robbie-lens.png" alt="Portrait avec effet de la photographe Robbie Lens" >
    <div>
        <a href="" class="cta">UN PROJET ? ÉCRIVEZ-MOI</a>
    </div>
    <div class="pied-de-page">
        <img src="camera-png-removebg-preview.png" alt="Logo Robbie Lens" height="40" width="40" >
        <a target="_blank" href="https://twitter.com/">
            <img src="twitter.png" alt="Logo Twitter" height="40" width="40">
        </a>
        <a target="_blank" href="https://www.instagram.com/">
            <img src="instagram.png" alt="Logo Instagram"  height="40" width="40">
        </a>
    </div>
</body>

</html>