Partage

un background color qui s'affiche pas

Background-color

Sujet résolu

12 juin 2018 à 21:27:29

bonjour, je commence le codage et je suis entrain de faire une barre nav mais le background ne s'affiche pas, voici mes codes.

<!DOCTYPE HTML>


	<!DOCTYPE html>
	<html>
	<head>
		<title>menu simple</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>

		<nav>
			<ul>
				
					<li class="menu-html"><a href="html.html">html</a></li>
					<li class="menu-js"><a href="js.html">js</a></li>
					<li class="menu-css"><a href="css.html">css</a></li>
					<li class="menu-contact"><a href="contact.html">contact</a></li>
					

			</ul>



		</nav>
	
	</body>
	</html>

body{

       font-family: 'source code pro', Calibri,serif;
       margin:0px;
       padding: 0px;
       }
nav{

   width: 100%;
   color: #424558;
}

nav ul {
       margin:0px;
       padding: 0px;
       overflow: hidden;

}

nav li{

   list-style-type: none;
   float: left;

}

nav a {

   display: inline-block;
   text-decoration: none;
   padding: 20px 30px;
   color: #fff;]

}
.menu-html:hover{
   border-top:5px solid #e44d26;
   background-color: : rgba(228, 77, 38, 0.15);

}
.menu-css:hover{
   border-top:5px solid #0070bb;
   background: rgba(000, 112, 192, 0.15);

}
.menu-js:hover{
   border-top:5px solid #f1dc4f;
   background: rgba(241, 211, 79, 0.15);

}

.menu-contact:hover{

   border-top:5px solid #bbb;
   background: rgba(220, 220, 220, 0.15);

}
nav li : hover a{
   padding: 15px 30px 20px 30px;
}

-
Edité par Akzr158 13 juin 2018 à 21:09:45

EmmanuelBeziat

12 juin 2018 à 21:51:53

Salut,

Poste ton code, pas des screens de ton code. Il y a un bouton </> pour ça.

Ensuite, tu n'as pas défini de background, donc aucune chance pour qu'un background apparaisse.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

NeoSensEight

12 juin 2018 à 21:52:37

Bonjour,

Le forum te permet de mettre du code facilement dans ton sujet, utilise le c'est plus pratique pour tout le monde.

Je ne comprend pas ta question, tu veux parler du fond de ta barre de navigation qui s'affiche pas ?

Call me Spaceman

AbcAbc6

12 juin 2018 à 22:59:39

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. 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 d'utiliser la mise en forme de 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 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: c;">Votre code ici</pre>.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(Probleme css)

-
Edité par AbcAbc6 12 juin 2018 à 23:00:35

dimitri_b

13 juin 2018 à 2:08:50

Salut.

Je recommande (je suis débutant) d'utiliser des id et non des class lorsque tu veux définir des règles CSS a seulement un attribut. Je crois que tu as déjà dut lire ça.

Concernant le background, tu veux que la couleur change derrière les liens de ton menu lorsque la souris passe dessus c'est ça ? Pourrais-tu lire ce cours concernant les effets de rollover et tenter de modifier ton code en conséquence ? Peux-tu aussi essayer background-color plutôt que background ?

Je te conseille d'être plus explicite dans tes demandes, en expliquant ce que tu souhaites faire, ce que tu n'arrive pas à faire, et ce que tu as fait. Si moi je fonces tête baissée à l'aide, tout le monde n'a pas le temps pour ça alors que, ce monde qui n'a pas le temps, a souvent d'excellentes compétences. N'hésites pas à lire le forum ci ou là pour comprendre comment ça marche. Bon dev !

AbcAbc6

13 juin 2018 à 5:44:36

tobudim a écrit:

Je recommande (je suis débutant) d'utiliser des id et non des class lorsque tu veux définir des règles CSS

Bonjour, non c'est le contraire, c'est une question de poids du sélecteur CSS. Un id à plus de poids qu'une class et donc la surcharge.

EmmanuelBeziat

13 juin 2018 à 10:35:56

tobudim a écrit:

Je recommande (je suis débutant) d'utiliser des id et non des class lorsque tu veux définir des règles CSS a seulement un attribut.

Non non, il vaut mieux rester avec les classes. Les ID, c'est bien pour les ancres, pas plus.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Mewen_bzh

13 juin 2018 à 10:46:13

Pour les ancres et pour le javascript aussi.

Je ne réponds pas aux messages privés.

EmmanuelBeziat

13 juin 2018 à 10:48:00

Bof, pas spécialement. On peut cibler n'importe quoi en JS : classe, attribut… Et notamment, depuis que les attributs data-* sont là, c'est même tout aussi bien.

Il n'y a pas d'intérêt particulier à cibler un ID en JS ; suivant les cas, ça peut même obliger à définir une même méthode plusieurs fois…

-
Edité par EmmanuelBeziat 13 juin 2018 à 10:50:28

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

NeoSensEight

13 juin 2018 à 10:50:30

AbcAbc6 a écrit:

tobudim a écrit:

Je recommande (je suis débutant) d'utiliser des id et non des class lorsque tu veux définir des règles CSS

Bonjour, non c'est le contraire, c'est une question de poids du sélecteur CSS. Un id à plus de poids qu'une class et donc la surcharge.

J'ai appris et compris tellement plus de choses en une page. Merci !

Call me Spaceman

dimitri_b

13 juin 2018 à 10:54:04

Ta quote ne prend pas toute ma phrase.

Je recommande (je suis débutant) d'utiliser des id et non des class lorsque tu veux définir des règles CSS a seulement un attribut.

On préfèrera ça :

<li id="accueil">Accueil</li>
<li id="cours">Cours</li>

Et on évitera ça :

<li class="accueil">Accueil</li>
<li class="cours">Cours</li>

Je ne vois pas ce que fait le poids des sélecteurs ici, si on veut styliser un attribut uniquement aux autres on préfère id, si on veut styliser plusieurs éléments à la même sauce on préférera les class. Je suis allé lire ci ou là (Alsacréations, Css-tricks, Openclassrooms) et je ne lis que ça.

Dans le code présenté par Akzr158 on doit certainement pouvoir optimiser la chose, mais à son niveau je crois mon conseil raisonné non ?

Edit :

rhooManu a écrit:

Non non, il vaut mieux rester avec les classes. Les ID, c'est bien pour les ancres, pas plus.

Ha bah mince alors, du coup tout ce que j'ai dit plus haut est erroné ? Avec les liens que j'ai mis ? Depuis toujours j'utilise cette méthode... (toujours = 9 ans, sur mes petits sites persos amusants)

-
Edité par dimitri_b 13 juin 2018 à 10:58:18

EmmanuelBeziat

13 juin 2018 à 11:00:38

Ben justement, il n'y a aucun intérêt à mettre des ID sur les éléments de ton exemple. Ça n'apporte rien de plus, par contre, ça augmente beaucoup trop la spécificité, ce qui rend l'élément inaccessible à part en utilisant un ID. Et de fil en aiguille, on se retrouve avec des sélecteurs de plus en plus lourds.

-
Edité par EmmanuelBeziat 13 juin 2018 à 11:02:11

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Lamecarlate

13 juin 2018 à 11:02:19

Bonjour,

> On préfèrera ça :

> Et on évitera ça :

Pourquoi ? D'un point de vue HTML c'est pareil, d'un point de vue CSS ça augmente la spécificité comme l'ont dit mes camarades plus haut.

> ici, si on veut styliser un attribut uniquement aux autres on préfère id

Tu prends le problème à l'envers : l'unicité d'id est une contrainte, et ça ne veut pas dire que si on n'a qu'un seul élément on *doit* utiliser id. C'est l'inverse : si on a un id, alors on ne doit l'avoir qu'une seule fois.

Et les liens que tu donnes sont intéressants - mais ne vont pas dans ton sens. Aucun ne dit "utilisez un id pour un élément qui n'existe qu'une fois sur la page".

-
Edité par Lamecarlate 13 juin 2018 à 11:02:44

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

dimitri_b

13 juin 2018 à 13:43:10

D'accord... Ouais, ça change pas mal ma vision de la chose.

Pour moi, si un élément unique avait un class au lieu d'un id, le code était moins propre. Alors que donc, pas du tout. Et du coup les articles je les lisais avec une sorte de prisme.

Si je vous suit, ont tend à ne pas utiliser id à cause de sa valeur et des contraintes derrière pour modifier un élément. On préfère toujours mettre des class.

J'ai eu un peu de mal à comprendre du coup l'utilité de mettre des id, et ce lien m'en montre quelques uns :

Relecture étrangère du code : indiquer aux autres dev ce qui est unique, indiquer qu'en modifiant telle instruction CSS ils ne modifieront qu'une chose.
Jouer avec les poids des sélecteurs.

Je n'y pensais pas une seconde, merci pour votre partage d'expérience !

Lamecarlate

13 juin 2018 à 14:15:05

C'est chouette si tu as appris quelque chose !

Autre chose : à l'instant t, on sait rarement si un élément sera réellement unique pour toujours sur la page.

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

Akzr158

13 juin 2018 à 21:06:36

rhooManu a écrit:

Salut,

Poste ton code, pas des screens de ton code. Il y a un bouton </> pour ça.

Ensuite, tu n'as pas défini de background, donc aucune chance pour qu'un background apparaisse.

haha j'ai fais des heure sans trouvé je te remercie c'était visible en plus

MERCI

-
Edité par Akzr158 13 juin 2018 à 21:13:57