Salut je suis sur la pratique de la mise dans le cours et on me demande de retirer les puces de la liste a puce et a vrai dire je ne sais pas comment m y prendre .
Vous êtes plusieurs à avoir buté sur cette question ces derniers temps et il est vrai que ce n'est pas précisé dans le cours. Cela l'était pourtant dans l'ancien cours xhtml. Le mieux est de croiser les informations avec d'autres cours/articles disponibles sur la toile.
En réalité je pense que, si la propriété n'est pas indiquée dans le cours, c'est justement pour encourager les étudiants à aller chercher les propriétés CSS ailleurs. C'est de toute façon comme ça qu'il faut faire en général. La documentation est la source d'information la plus fiable.
Je suis entièrement d'accord mais le forum n'est pas une documentation, d'ou le besoin de chercher en effet. De toute façon on passent tous du temps à chercher, consulter des articles/docs ici et la, sans cela pas la peine de continuer
Dans le cours: "Apprenez à créer votre site web avec HTML5 et CSS3" dans la 3eme partie, je n'arrive pas à faire "disparaitre" les puces dans la liste à puce ou plutot...si j'arrive à les faire disparaitre mais le message d'erreur me dit qu'elles sont toujours là.
Comme ce n'est pas abordé dans le cours je ne sais pas comment faire...
<!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>
<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<br />
</footer>
</body>
</html>
et voici le code CSS:
ul {
list-style-type: none;
}
#topsection
{
display: flex;
}
p
{
width: 80%;
text-align: justify;
margin: auto;
}
Et voici le(s) messages d'erreur:
merci Lucky !
Lucky13 a écrit:
Hello,
Ok, alors poste ton code html ainsi que ce message d'erreur (...)
le code est valide, juste un warning ligne 2 qui propose de déclarer une langue, exemple :
<!DOCTYPE html>
<html lang="fr">
<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>
<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<br />
</footer>
</body>
</html>
En même temps c'est juste un warning et non une erreur... Passe ton code html régulièrement au validateur pendant ta phase de développement afin de corriger et optimiser ton code.
Bonjour, je remonte le sujet car je crois que le validateur a un soucis...
En effet j'ai moi aussi supprimé les puces avec le code css "list-style-type: none;" mais le robot m'indique constamment qu'elles sont toujours là (alors que clairement, elles ne le sont pas). Que faire ?
Après avoir cherché pendant longtemps, testé les solutions sur ce sujet, je ne peux que constater que le soucis ne vient pas de mon côté (enfin j'espère, car là je suis à court d'idées). Cordialement.
Essaie en mettant list-style-type sur li (uniquement, sans id) ? C'est idiot, hein, mais comme c'est une propriété qu'on peut mettre sur les ul/ol et sur les li ça pourrait être ça que le robot attend.
(edit : j'avais fait une typo sur list-style-type, la honte)
- Edité par Lamecarlate 10 juillet 2017 à 12:08:29
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Je viens de buter sur le sujet et finalement le robot nous donne la réponse :
from selenium import webdriver driver = webdriver.PhantomJS() driver.get('{{localhost}}/index.html') driver.implicitly_wait(1) title = driver.find_element_by_css_selector('#menu')//ici on trouve l'élément sélectionné par le robot, il n'y a ni <li> ni <ul> print(title.value_of_css_property("list-style-type")) //écrit la valeur des la propriété css list-style-type assert(title.value_of_css_property("list-style-type") == "none") //vérifie qu'elle soit égale à rien driver.close()
Il y a d'autres façons de faire disparaître les balises, mais le robot n'acceptera qu'un seul type de réponse. Finalement, l'enjeu est plutôt de déboguer le code que de chercher la réponse sur la documentation. ;)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)