Mais bon la déjà ca va agir sur toutes tes images, le mieux serrait de le faire en donnant une classe propre a ton image, si en plus le but est de la coller en background autant agir directement dessus avec ton width et ton height, mais comme je te l'ai dit ce n'est pas recommandé tu t'en rendras vite compte en changeant de taille d'écran
@Cécile bonjour, pour insérer du code sur le forum merci d'utiliser le bouton code </> prévu à cet effet.
Pour votre premier code le src de votre image est faux, l'image doit ce trouver dans votre dossier de travail. Pas de liaison avec c://......
Pour votre deuxième code, votre image est t'elle bien dans le même répertoire que votre fichier HTML?
Bien qu'il soit possible d'omettre les guillemets, au stade de votre apprentissage il est plus rigoureux de les indiquer pour chaque valeur de chaque attribut HTML. Vous aurez moins de problème par la suite si vous être rigoureuse dans votre travail.
Autre chose, Pas de paragraphe autour d'une liste et tout autre block. Passer votre code au validateur pour voir vos erreurs https://validator.w3.org/
Je ne comprends pas vraiment les corrections que j'ai reçues : lorsque j'affiche la page dans mon navigateur, elle s'affiche très bien. Or notamment une personne a mentionné que ça ne s'affichait pas vraiment comme un CV... Comment se fait-il qu'il y ait des différences d'affichage aussi grande?
De la même façon, la photo s'affiche très bien sur mon navigateur, et je suis capable de l'agrandir sans pb ; or les 3 correcteurs ont mentionné qu'ils ne pouvaient pas l'agrandir. Mais je ne comprends pas d'où vient le problème, puisque dans mon fichier zip il y a bien les 3 fichiers (.htm, et mon image mini et mon image).
J'ai suivi le conseil précédent et passé mon code au validateur, et rien ne ressort par rapport aux images...
D'avance, un grand merci!
Camille
ps: et je seconde Cécile sur le "sans jugement" et "sans critique"... certains commentaires ne sont pas très agréables à lire dans les corrections.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Le blog trotter</title>
</head>
<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>
<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</p>
</footer>
</body>
</html>
Bonjour, alors pour le balise nav , je ne comprends pas, moi ça passe, et j'ai fais comme toi. J'ai test en mettant tout sur une ligne des fois que soit une source d'erreur:
2ème cours en ligne après "Les Bases du Web". Juste pour remercier OpenClassRooms, les cours sont très ludiques et bien expliqués ! C'est TOP ! Pour ma part, aucun soucis sur les corrections des autres étudiants, je vois que pour certains ça ne semble pas être le cas, c'est fort dommage :-/
Sinon, bah ...je n'avais aucune question car tout est fluide pour moi jusqu'à présent :-D
Juste pour prévenir que le commentaire d'une de mes corrections ne correspond PAS DU TOUT au contenu de mon CV ! Ce qui veut dire que la personne m'a noté pour un autre CV que le miens. Du coup un 0/4 à coté de mes 2 4/4, ça fait TELLEMENT plaisir
Afin de vous assurer d'avoir une réponse le plus rapidement possible, je vous invite à directement contacter l'équipe du site via l'adresse hello@openclassrooms.com. En effet, l'équipe du site ne passant que très rarement sur les forums, il sera beaucoup plus efficace de les contacter directement.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Je suis bloquée depuis hier sur l'exercice de pratique de mise en page du site.
J'ai revérifié plusieurs fois mon code, tenté de nombreuses alternatives mais rien n'y fait, impossible de valider les tâches suivantes :
Une balise sémantique "nav" manque. Pouvez-vous l'ajouter au bon endroit ?
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
Pouvez-vous m'aider s'il vous plait ? Merci par avance
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">
<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>
<section id="contenu">
<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>
</section>
<footer>
<p>Copyright Le Blog Trotter</p>
</footer>
</body>
</html>
Je suis bloquée depuis hier sur l'exercice de pratique de mise en page du site.
J'ai revérifié plusieurs fois mon code, tenté de nombreuses alternatives mais rien n'y fait, impossible de valider les tâches suivantes :
Une balise sémantique "nav"[...] header et le menu côte à côte[...] paragraphes en justifié, sur 80%
Pouvez-vous m'aider s'il vous plait ? Merci par avance
Bonjour, bonne nouvelle, j'ai rien vu de spéciale, du coup j'ai fait un copier/coller (des fois que je sois un nivoirien) et : bingo: tout fonctionne, l'exercice est validé.
Non, bah en fait, en ciblant mieux c'est ton header qui fiche le basard. Enlève le et ça passe.
- Edité par ThierryGonthier 16 octobre 2018 à 12:23:47
Je ne comprends pas vraiment les corrections que j'ai reçues : lorsque j'affiche la page dans mon navigateur, elle s'affiche très bien. Or notamment une personne a mentionné que ça ne s'affichait pas vraiment comme un CV... Comment se fait-il qu'il y ait des différences d'affichage aussi grande?
De la même façon, la photo s'affiche très bien sur mon navigateur, et je suis capable de l'agrandir sans pb ; or les 3 correcteurs ont mentionné qu'ils ne pouvaient pas l'agrandir. Mais je ne comprends pas d'où vient le problème, puisque dans mon fichier zip il y a bien les 3 fichiers (.htm, et mon image mini et mon image).
J'ai suivi le conseil précédent et passé mon code au validateur, et rien ne ressort par rapport aux images...
D'avance, un grand merci!
Camille
ps: et je seconde Cécile sur le "sans jugement" et "sans critique"... certains commentaires ne sont pas très agréables à lire dans les corrections.
Bonjour,
Je me permets de reposer ma question concernant les images : j'ai zippé le .html, le fichier image initial et le fichier image mini ensemble, or les correcteurs ne voient pas mon image en cliquant dessus, et je ne comprends pas pourquoi. Quelqu'un saurait-il m'expliquer? Un grand merci.
Camille
<p><a href="logo.png"><img src="logo_mini.png" alt="Logo mobilité" title="Logo de Camille"/></a></p>
Bonjour, bonne nouvelle, j'ai rien vu de spéciale, du coup j'ai fait un copier/coller (des fois que je sois un nivoirien) et : bingo: tout fonctionne, l'exercice est validé.
Non, bah en fait, en ciblant mieux c'est ton header qui fiche le basard. Enlève le et ça passe.
Bonjour,
Merci pour votre relecture. Ce que je ne comprends pas, c'est que ce header est celui de l'exercice, je ne l'ai absolument pas codé... Je ne peux malheureusement pas le supprimé puisque la tâche suivante (qui ne fonctionne pas non plus) consiste à mettre côte à côte le header et le menu
- Edité par NadouDilemma 16 octobre 2018 à 19:48:18
Bonjour, bonne nouvelle, j'ai rien vu de spéciale,[...] , en ciblant mieux c'est ton header qui fiche le basard. ...
Bonjour,
Merci pour votre relecture. Ce que je ne comprends pas, c'est que ce header est celui de l'exercice, je ne l'ai absolument pas codé... Je ne peux malheureusement pas le supprimé puisque la tâche suivante (qui ne fonctionne pas non plus) consiste à mettre côte à côte le header et le menu
- Edité par NadouDilemma il y a 4 minutes
Je veux dire dans le css, enlève le header (et tout ces attributs) du fichier css et ça fonctionne. Comme il est en justify mais pas dans le même bloc, du coup ça doit générer des erreurs dans la correction automatique (théorie théorique...). Au départ je pensais que c'était le background du h1.
@CamilleButzbach:
Post ton code en entier s'il te plaît. Et ne mets plus d'image dans des balises paragraphe, y a <figure> pour ça.
- Edité par ThierryGonthier 16 octobre 2018 à 20:39:40
Le code en lui même, il est bon (toujours pas de balise figure ;p ) je remplace avec des images à moi ça marche. Reste plus que le nom du fichier, change le, vire le underscore (surtout parce il ne reste que ça), met un nom ou y a pas d'embrouille, en un seul mot et re-test (en même temps chez toi ça fonctionne , donc on sera pas plus avancé). Ensuite mets tout dans un dossier avant de ziper, ça évitera des problèmes pour la suite. Avant CSS on m'était toute les indications de taille et de localisation sur la page en jouant sur les marges, directement dans la balise img, comme alt et title. C'était un foutoire incroyable, des bugs d'affichage à tour de bras en veux tu en voilà. Mais là... Y a vraiment pas de raison d'être embêter comme ça sur une image.
Les listes par les temps qui cours c'est souvent des menus de navigation, donc : nav. Mais si c'est une liste d’énumération dans un paragraphe qui énumère quelque chose, il sera dans le paragraphe au même titre que n'importe quelle phrase de celui-ci.
Tu peux avoir une image dans un paragraphe, pour illustrer le propos. Mais ne mets pas une image toute seule dans des balises paragraphe, y a <figure> pour ça.
à 3 minutes 06 seconde, Mathieu dit : « l’image doit être contenu dans qualque chose, le plus souvent se sera dans un paragraphe »
à 3 minutes 56 de la même vidéo, Mathieu dit : « il faut notamment connaître quelques balises qui sont apparu avec HTML5 qui sont : fugure et figurecaption pour dire que l’image à un sens dans la page que vous voulez la mettre en valeur et un libellé ».
Et tu verras bien ce qui se passe quand dans ton fichier CSS tu mettras un traitement à p et que l’image subira le même sort. Il me semble que ça tombe donc sous le sens qu’il faut distinguer l’image illustrative (dans le paragraphe) de l’image « séparer » du paragraphe.
Mais je comprends ton insistance quant dans le cours il est écrit :
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>). Voici un exemple d'insertion d'image :
Mais comme le HTML est plein de subtilité, dans le même cours on trouve aussi ceci :
Un peu plus tôt dans ce chapitre, je vous ai dit que les images devaient être situées dans des paragraphes (placées à l'intérieur d'une balise <p></p>). Ce n'est pas tout à fait vrai.
Si vous faites de votre image une figure, l'image peut être située en-dehors d'un paragraphe.
C’est pourquoi je te renverrai à ces discussions sur le sujet :
P.S : lorsque tu dis : , « l'erreur à déjà été signalée, reste au rédacteur de rectifier son propos », peux tu y joindre un lien que l’on puisse se documenter ?
Compos sui.
Compos sui.
Compos sui.
Pas d'aide concernant le code par MP, le forum est là pour ça :)