Bonjour à tous !
Je suis en train de suivre le tutoriel "Menu responsive". Et je suis bloqué.
Voici le code :
index.html
<!DOCTYPE html>
<html xmls="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Menu responsive</title>
<link href="http://fonts.googleapi.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/app.scss">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="header">
<a href="#" class="header__logo">Logo</a>
<nav class="menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</nav>
</header>
<div class="site-content">
<div class="container">
<h1>contenu du site</h1>
</div>
</div>
</body>
</html>
app.scss
html, body{
font-family: Roboto;
font-size: 16px;
line-height: 1.4;
height: 100%;
margin: 0;
padding: 0;
}
a{ text-decoration: none; color:inherit; }
.header{
position: fixed;
left: 0;
right: 0;
height: 66px;
line-height: 66px;
color:#FFF;
background-color: #2e7d32;
}
.header__logo{
font-weight: bold;
padding: 0 25px;
float: left;
}
.menu{
float: left;
a{
padding: 0 10px;
}
}
Le problème est au .menu du fichier scss qui ne fonctionne pas. Je ne vois aucun changement lorsque j'actualise la page. Normalement, pour l'instant il doit y avoir un espace entre Item 1, Item 2 ...
J'ai vérifié avec le tutoriel si j'ai fait une erreur, mais je ne trouves pas. J'utilise notepad++ pour écrire le code.
Avez-vous eu le même problème ?
Merci beaucoup !
humanoid89
