@LongTran2 Bonjour, car vous et vos correcteurs devriez dézipper tous les fichiers pour voir le travail. Il est normal que le fichier HTML ne soit plus lier aux images si uniquement celui-ci est sorti de l'archive .zip.
Le format d'archive .zip est fait pour transporter des fichiers, un peu comme un camion de déménagement pour votre maison/appartement....
Bonjour, je viens de terminer ce mooc html/css dans le but de faire une landing page.
Je suis bloqué car je n'arrive pas a faire en sorte que l'image de fond fasse la hauteur de l'écran la largeur et s'adapte proportionnellement selon le support.
Je voudrais que cela s'ajuste selon mon schéma ci-dessous en gros.
Sans slide possible en version desktop.
J'utilise une image recadrée pour la version mobile et même avec ça, ça beug selon les différents types de mobiles...
Pour commencer l’utilisation de fontsquirrel n’as pas sa place ici, et en plus sujet dédier à la situation de CamileKapgangHonang dans le forum html/css sera bien plus efficace pour résoudre son problème. La résolution de son problème va demander plusieurs post. Et je rajoute que poser cette question démontre quand même un sérieux manque de recherche de sa part, vu le nombre de fois ou cette question a été posé sur le forum.
En ce qui concerne ton dernier post, pourquoi parler des préfixes ? Au passage je me permets de te signaler que leurs utilisations sont fortement déconseillées.
Bonjour, merci pour ta réponse. J'ai déjà essayé ces fonctions css mais ça ne fonctionne pas. Quand j'inspecte les éléments sur toute la liste de smartphone, il y a toujours 2 ou 3 cas ou cela ne fonctionne pas.
L'image se centre mal, le H1 se retrouve a gauche et sur les iphones les proportions sont différentes donc c'est compliqués.
En ce qui concerne ton dernier post, pourquoi parler des préfixes ? Au passage je me permets de te signaler que leurs utilisations sont fortement déconseillées.
Ah? Je te crois sur parole, mais alors comment est assuré la compatibilité de certaines règles css qui , d'après le cours , ne sont reconnu par les différents navigateurs que par leur préfixes?
Mais en plus dans le cas présent, sans même voir le code, proposer l'utilisation de préfixes, relève des arts-divinatoires.
Ou alors d'une expérience, avec l'exact même problème d'affichage sur mobile, qui à été réglé (pourquoi/comment?) en intégrant prefix-free. Ce qui ne fait pas de ce cas d'espèce la solution à tout, mais on peut toujours proposer pour voir. Je m'étais dis qu'il n'était pas nécessaire de raconter ma journée avant de proposer ma "solution" aussi magique soit elle. Merci pour tes réponses.
Donc dans ta boite on conseil l'utilisation d'un script JS pour inclure un préfixe quand un background ne se cale pas bien sur mobile ?
De même, que dans votre groupe de dev-Front, vous utilisez des pratiques de plus en plus déconseillées dans certains milieux.
Et toujours dans votre groupe de dev-Front, quand un problème arrive, sans même savoir sur quel navigateur, ou sans même savoir la teneur exacte du code, vous dites "prefixes" ?
Alors que ça peut être une mauvaise écriture du code, la meta viewport inexistante, et j'en passe.
Au passage une solution, ça solutionne. Si jamais je dit: "Tiens voici une solution" c'est que je sais à 99,9% que ce que je dit va résoudre le problème.
Et je ne vois absolument pas le rapport avec ta journée.
Moi aussi je ne sais pas si je post au bon endroit. Je suis actuellement la formation "Apprenez à créer votre site web avec HTML5 et CSS3". Je me trouve dans la partie 3 : mettez en page votre site, au chapitre 4 : pratiquez !
Je bloque sur les 2 dernières questions de la sandbox que voici :
Je vous montre mon résultat :
Pouvez m'indiquer ce qu'il manque svp ? J'ai l'impression de répondre à ce qu'il est demandé mais apparemment je me trompe encore.
Merci d'avance pour vos réponses.
- Edité par ChristopheBerthanier 5 octobre 2019 à 20:55:08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Le blog trotter</title>
</head>
<body>
<div id="conteneur">
<header>
<div id="topsection">
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</div>
</header>
<nav>
<div id="navigation">
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</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>
/* Feuille de style */
ul
{
list-style: none;
}
#conteneur
{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
#topsection
{
/*border: 4px black solid;*/
margin-left: 50px;
}
#navigation
{
/*border: 4px black solid;*/
}
p
{
width: 80%;
margin: auto;
text-align: justify;
}
Sûrement que les blocs sont pas dans le sens attendu par le correcteur auto, du coup il te casse les pieds.
Pour les paragraphes, mets les dans une div et align-items en center par flex box. Je pense que c'est ce qu'il attend. L’énoncé parle de "centrer les blocs". Le résultat visuel que tu obtiens est juste, mais c'est pas la bonne technique (sans parler de l'ordre des blocs). Amuse toi bien.
Effectivement tu avais raison, c'est bien l'ordre entre le header et le nav qui n'était pas bon. Là, c'est validé.
Par contre pour les paragraphes, j'ai suivi tes conseils. Visuellement, j'arrive au même résultat à un détail prêt mes h1 sont centrés aussi mais là c'est toujours un échec. C'est à désespérer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Le blog trotter</title>
</head>
<body>
<div id="conteneur">
<header>
<div id="topsection">
<h1>Le blog trotter</h1>
<p>Je parcours la planète... et vous la fais découvrir !</p>
</div>
</header>
<nav>
<div id="navigation">
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div id="conteneur2">
<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>
</div>
<footer>
<p>Copyright Le Blog Trotter</p>
</footer>
</body>
</html>
Compos sui.
Compos sui.
Compos sui.
Compos sui.
Compos sui.