Je viens à vous après des heures de prises de tête sur cet exercice. Il y a différentes étapes à valider. Après avoir placé la balise <nav> et supprimé les puces de la balise <ul>, je dois accoler deux blocs, le header et le menu. Seulement, si visuellement les deux blocs sont bien côte à côte, l’éditeur considère que ce n'est pas bon. Je m'y suis pris à six reprises, mais le résultat reste le même.
Le second problème vient de la mise en place des paragraphes, à 80% de la largeur, en justifié et centré. J'ai beau relire le cours, je n'arrive pas à valider les trois qualités demandées, il y en a toujours une qui fait défaut, j'en deviens zinzin (oui seulement à ce stade de l'apprentissage, au secours!!!!). J'utilise width et text-align mais ça reste obscur.
Merci d'avoir pris la peine de répondre et de me corriger. J'ai repris le code de zéro et ça marche...presque.
Je ne parviens pas à centrer mes balises <p> tout en justifiant le texte à 80%. La seule fois, où ça a marché visuellement c'est lorsque j'ai ajouté une classe au paragraphe. Mais bien entendu, le correcteur du code n'a pas accepté la démarche. Qu'est-ce que j'ai manqué ? (je continue à me pencher dessus :))
FICHIER HTML
<!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>
FICHIER CSS
/* Feuille de style */
/*retrait des puces*/
ul{list-style-type: none;}
#topsection /*caractéristiques du conteneur header et menu*/
{
display: flex;
width: 700px;
height: 120px;
border: 1px solid teal;
}
.element /*caractéristiques du header et du menu*/
{
width: 300px;
height: 100px;
}
p /*paragraphes centrés, justifiés à 80% de largeur*/
{
width: 80%;
text-align: justify;
margin: auto;
padding: auto;
}
bonjour, pourtant tu as bien indiquer tous les paragraphes centrer, justifier et de 80% de largeur du parent.
Deux petite chose, ce ne sont pas des erreurs, mais pas nécessaire le <div> qui entoure le <nav> et le <header>, tu peux indiquer la class sur ces deux éléments directement.
Dans la css ligne 25 inutile, un paragraphe n'a pas de padding par défaut. Et on évite de donner une hauteur directement à un élément, car si le contenu est plus important le design casse; utilise plutôt min-height.
J'ai le meme problème que lui est ce que quelqu'un peux répondre s'il vous plait c'est affreusement gênant d'etre bloqué sans rien pouvoir y faire.
Merci :)
PS: c'est étonnant qu'il n'y ai pas de correction ou meme indice car il y a tellement de possibilité seulement le "bots" n'en n'accepte qu'une donc bon...
- Edité par Tom Lefebvre 28 décembre 2016 à 22:34:10
Je voudrai simplement le code pour " Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page" dans le TD Exercice "Pratiquez"HTML-CSS, Le Globe Trotter
Car j'ai essayé un tas de truc :
/* Feuille de style */
/*retrait des puces*/
ul{list-style-type: none;}
#topsection /*caractéristiques du conteneur header et menu*/
{
display: flex;
width: 600px;
height: 120px;
border: 1px solid teal;
}
.element /*caractéristiques du header et du menu*/
{
width: 300px;
height: 100px;
}
p /*paragraphes centrés, justifiés à 80% de largeur*/
{
width: 80%;
text-align: justify;
margin: auto;
}
.global
{
text-align: justify;
margin-left: auto;
margin-right: auto;
width: 600px}
je sais que c'est beaucoup trop mais pourtant tout est centré et il ne valide pas, meme sans en mettre trop j'ai vraiment relu tout les cours et aucun amis à moi ne s'y connais :/
C'est un code html après ( l'énoncé en gros ) le voici:
<!DOCTYPE html>
<html lang="fr">
<div class="global"><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></div>
</html>
- Edité par Tom Lefebvre 30 décembre 2016 à 12:25:48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Le blog trotter</title>
</head>
<body class="body">
<!-- /////////////////////////////////////////////-->
<div class="header">
<header>
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!-- /////////////////////////////////////////////-->
<div class="p">
<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.<br><br></p>
</div>
<footer>
<p>Copyright Le Blog Trotter<br/></p>
</footer>
</body>
</html>
Eh bien, je suis content de constater que mon problème est partagé et a trouvé de bonnes propositions. Merci djoumadkamel!
Mais j'ai trouvé la solution validée par le correcteur, Tom Lefebvre . Voici comment faire :
C'est très simple (au point que j'ai envie de me trépaner), j'ai juste mis la largeur de mon conteneur à 100% et celle des éléments à 50%. En faisant ça, le correcteur a validé le code.
Ca doit être tout bête mais je vois pas le problème ...
Toujours la même consigne.
Voici mon code HTML
<!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="Gauche">
<header>
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</header>
</div>
<nav>
<div class="Droite">
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</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>
</nav>
<footer>
<p>Copyright Le Blog Trotter<br />
</footer>
</body>
</html>
bonjour, pourtant tu as bien indiquer tous les paragraphes centrer, justifier et de 80% de largeur du parent.
Deux petite chose, ce ne sont pas des erreurs, mais pas nécessaire le <div> qui entoure le <nav> et le <header>, tu peux indiquer la class sur ces deux éléments directement.
Dans la css ligne 25 inutile, un paragraphe n'a pas de padding par défaut. Et on évite de donner une hauteur directement à un élément, car si le contenu est plus important le design casse; utilise plutôt min-height.
sauf que sur les 4 conditions demandées, la première est de placée la balise nav au bon endroit, et si l'on fait <nav class="menu"> </nav> le correcteur nous dit que la balise est mal placée, alors que si on enleve le class de nav, la balise est bien placée. Pourquoi?
Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.
Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre. En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.
Au lieu de déterrer un sujet il est préférable :
soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
soit de créer un nouveau sujet décrivant votre propre contexte
ne pas répondre à un déterrage et le signaler à la modération
Pas d'aide concernant le code par MP, le forum est là pour ça :)