Sémantiquement parlant voici comment il faudrait que tu organise ton code
<header>
<h1>Le titre de ton site</h1>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>
</header>
et ton css
header{
width:100%;
height:50px;
}
header>h1,
header>nav{
display:inline-block;//alignement horizontale des 2 blocks
vertical-align:middle;//alignement vertical des 2 blocks
}
header>h1{
width:40%;
}
header>nav{
width:59%;
}
header>h1 + header>nav{
margin-left:1%;//espace entre le titre et le menu
}
//ensuite on gére ton menu
header>nav>ul{
list-style:none;//retrait des puces
padding:0;
margin:0;
}
Je vais essayer de comprendre vos réponses. J'ai l'impression que ça nécessite d'utiliser des choses non abordées dans le cours (ca avait été le principe jusqu'à présent). Notamment inline-block alors que le cours d'avant nous apprend à utiliser Flexbox.
Pour l'histoire des puces :
Histoire d’être sur qu'on parle bien de la même chose, l'exercice demandait à retirer les puces (pour ca qu'elle n'apparait pas dans mon code html, je les ai remplacé par des div). Mais le bot ne valide pas le fait que je les ai enlevé, c’était ca mon problème.
Et je vois dans le post du dessus le "list-style:none" et c'est peut être ca la solution. Mais ca n'avait pas été abordé dans le cours...
---
edit
---
Bon et bien grace à votre inspiration (et en reprenant l'exercice avec du recul) , j'ai réussi à valider toutes les étapes demandées par le bot :
-
Une balise sémantique <nav> manque. Pouvez-vous l'ajouter au bon endroit ?
-
Retirez les puces de la liste à puces
-
Placez le header et le menu côte à côte
-
Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page
Avec ces codes (pas très jolis) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Le blog trotter</title>
</head>
<body>
<div id="topsection">
<div class="element">
<header>
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</header>
</div>
<div class="element">
<nav>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<h1>La Chine</h1>
<p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
<h1>L'Espagne</h1>
<p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
<footer>
<p>Copyright Le Blog Trotter<br />
</footer>
</body>
</html>
/* Feuille de style */
ul
{
list-style:none;
}
#topsection
{
display: flex;
}
p
{
text-align : justify;
width : 80%;
margin : auto
}
Salut les gars, je deterre le sujet. Je n'arrive pas à valider la 1ère étape de l'exercice: https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/4214576-pratiquez (le reste est ok)
Voici mon code html:
<body>
<div id="topsection">
<header>
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</header>
<nav>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
Je devais placer ma <nav> au bon endroit. Je ne vois que la, mais cela ne le valide pas. Pouvez vous m'aider?
Salut, quand tu postes du code utilise le bouton à cette effet '</>'
Je viens d'essayer l'exercice et ton code fonctionne bien. C'est peut-être un bug du logiciel. Essaye de recharger la page et de recommencer. (Par contre si tu recharges la page, il faudra tout refaire l'exercice)
Pas d'aide concernant le code par MP, le forum est là pour ça :)