18008 sujets

Questions générales et questions de débutants

Mon site ne s'affiche plus

Bonjour je suis actuellement un tuto pour apprendre le HTML et le CSS et tout se passer bien et depuis que je suis passé dans la partie CSS mon site ne s'affiche plus et j'ai beau chercher l'erreur je ne la trouve pas 
<!DOCTYPE html>
<html>
    <head>
	    <title>Menu simple HTML et CSS</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">		
	</head>
	<body>
	    <nav>
		    <ul>
			   <li class="menu-html"><a href="html.html">HTML</a>
			      <ul class="submenu">
				     <li><a href="#">Cours complet HTML et CSS</a></li>
					 <li><a href="#">Référence des éléments HTML</a></li>
					 <li><a href="#">Référence des attributs HTML</a></li>
					 <li><a href="#">Exemples et exercices</a></li>
				  </ul>
			   </li>
			   <li class="menu-css"><a href="css.html">CSS</a>
			      <ul class="submenu">
				     <li><a href="#">Cours complet HTML et CSS</a></li>
					 <li><a href="#">Référence des propriétés CSS</a></li>
					 <li><a href="#">Exemples et exercices</a></li>
				  </ul>
			   </li>
			   <li class="menu-javascript"><a href="javascript.html">JavaScript</a>
			       <ul class="submenu">
				     <li><a href="#">Cours complet JavaScript</a></li>
                       <li><a href="#">Exemples et exercices</a></li>
				  </ul>
			   </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%;
	background-color: #424558;
}

nav > ul{
	margin: 0px;
	padding: 0px;
}

nav > ul :: after{
	content:"";
	display: block;
	clear: both;
}

nav > ul > li {
	float: left;
	position: relative;
}

nav > ul > li > a{
	padding: 20px 30px;
	color: #FFF;
}


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


nav li{
	list-style-type: none;
}

.submenu{
	display: none;
}

nav a{
	display: inline-block;
	text-decoration: none;
}

nav li : hover .submenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}

.submenu li{
    border-bottom: 1px solid #CCC:
}

.submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;
    width: 270px;
}

.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-color: RGBa(000, 112, 192, 0.15);
}

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

.menu-contact: hover{
    border-top: 5px solid #BBB;
    background-color: RGBa(220, 220, 220, 0.15);
}

.menu-html .submenu{
    background-color: RGB(230, 100, 40);
}

.menu-css  .submenu{
    background-color: RGB(000, 160, 240);
}

.menu-javascript .submenu{
    background-color: RGB(250, 215, 100);
}

.submenu li:hover a{
    color: #EEE;
    font-weight: bold;
}

.menu-html .submenu li:hover{
    background-color: RGB(210, 77, 60);
}

.menu-css .submenu li:hover{
    background-color: RGB(000, 115, 200);
}

.menu-javascript .submenu li:hover{
    background-color: RGB(200, 165, 75);
}

Modifié par Robertou (20 Dec 2020 - 16:22)
Bonjour,
Bienvenue sur le forum @Robertou!

Tout d'abord, il est préférable de mettre le code entre les balises prévues à cet effet (code, HTML, CSS, PHP, MySQL, JavaScript). Je te demanderais d'éditer ton post pour respecter cette consigne.

Ensuite, ton page ne s'affiche pas car tu l'as caché.
Des contenus peuvent être cachés par 
display: none
ou 
visibility:hidden
. Ici, tu as mis 
.submenu{display: none;}
et c'est pour ça que ta page ne s'affiche pas. Il faut donc enlever ceci.

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Bonjour merci pour l'accueil ^^

Ah bon ? Mais c'est bizarre car dans le cours il le garde son display il me semble ...

https://www.youtube.com/watch?v=cWrmoGwQ1iE&list=PLwLsbqvBlImHAT6eA11g56NmqSSxxUT3I&index=2

Je viens d'enlever le display none mais maintenant le site ne s'affiche qu'à moitié j'ai juste les sous menus qui sont censé restés cacher jusqu'à que je passe la souris sur le menu principale "qui lui est invisible" c'est alors que les sous menus sont censés s'afficher
Modifié par Robertou (20 Dec 2020 - 16:27)
Robertou a écrit :
Bonjour merci pour l'accueil ^^

Si c'est pour la bienvenue, de rien, si c'est pour le code pas mis dans des balises, je m'excuse (mais c'est très pénible à lire sinon).

AH, désolé, je n'avais pas compris que c'était un menu déroulant.
Donc oui, c'est normal que ce soit caché, que le display reste.

J'ai trouvé ton erreur :
On ne met pas d'espaces où on veut en CSS. Par exemple, .x .y et .x.y sont différents (le premier veut dire une classe y fille de x, le deuxième veut dire qu'un objet a les classes x ET y).
Autre exemple, "a : hover", ça ne veut rien dire, on doit écrire "a:hover". C'est ça ton erreur.

Voici le code corrigé : https://jsfiddle.net/exercices/x57f0cvk/ et bien indenté.

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Sujet clos
Aller à