Partage

retirer les puces d une liste a puce

Sujet résolu
8 janvier 2017 à 22:45:07

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 .

9 janvier 2017 à 0:11:25

Bonsoir.

Regarde du coté de la propriété CSS list-style : https://developer.mozilla.org/fr/docs/Web/CSS/list-style

En l'occurence, je pense que vous souhaitez simplement ajouter à ta feuille de style la ligne suivante :

list-style: none;



Maxime EYCHENNE
23 février 2017 à 9:45:00

Merci Disturb4d pour l'astuce car cette propriété list-style n'est pas du tout abordée dans le cours
NormanKidPaddle
23 février 2017 à 11:31:20

Hello,

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.

-
Edité par Lucky13 23 février 2017 à 11:32:00

23 février 2017 à 19:22:37

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.
Maxime EYCHENNE
23 février 2017 à 21:09:39

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 ;)
Staff 23 février 2017 à 22:49:34

Bonsoir,

pour info, il y a sur OC un memento (non exhaustif bien sûr) des propriétés CSS : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css.

-
Edité par Lamecarlate 23 février 2017 à 22:49:47

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
25 avril 2017 à 12:44:27

Bonjour,

Je relance ce sujet.

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...

Merci par avance !

-
Edité par abou_i 25 avril 2017 à 12:47:31

25 avril 2017 à 13:41:00

Hello,

Ok, alors poste ton code html ainsi que ce message d'erreur (...)

25 avril 2017 à 13:51:28

<!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 (...)



-
Edité par abou_i 25 avril 2017 à 13:58:28

25 avril 2017 à 15:47:38

Oui ok pour les puces -> https://jsfiddle.net/733cka2q/ 

Après pour les messages on parle de HTML, c'est le validateur officiel en ligne qu'il faut utiliser

-> https://validator.w3.org/ 

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>

-
Edité par Lucky13 25 avril 2017 à 15:53:24

25 avril 2017 à 16:02:23

Lucky13 a écrit:

Oui ok pour les puces -> https://jsfiddle.net/733cka2q/ 

Après pour les messages il faut rester côté HTML, c'est le validateur officiel en ligne qu'il faut utiliser -> https://validator.w3.org/ 

le code est valide, juste un warning : ligne 2 supprime le <html> qui est déjà déclarée dans le doctype.

-
Edité par Lucky13 il y a moins de 30s


OK merci beaucoup.

D'accord autant pour moi c'est noté

c'est bon j'ai supprimé, je pensais qu'il fallait toujours le laissé meme en ayant déclaré dans le doctype !

merci encore Lucky :)

25 avril 2017 à 16:44:08

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.

Bonne continuation ;)

10 juillet 2017 à 1:44:14

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.

-
Edité par LastDreamy 10 juillet 2017 à 1:48:09

10 juillet 2017 à 2:25:28

Hello,

En effet, même en précisant l'iD menu rien n'y fait.

Pourtant la dernière fois la vérification était opérationnelle...

Staff 10 juillet 2017 à 7:15:35

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
10 juillet 2017 à 11:22:12

Lamecarlate > j'ai moi-même testé juste avec li , puis ul li , puis #menu li

J'ai même essayer sans la balise <nav>.

C'était hier soir, à refaire  aujourd'hui.

Staff 10 juillet 2017 à 12:07:43

Bon beh je viens de retester ce matin avec ul { list-style-type: none; }, ça passe. Les voies du robot sont impénétrables (et/ou buggées…).

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
10 juillet 2017 à 18:50:48

Et bien si les voies impénétrables s'appliquent également aux  robots on est pas au bout de nos peines ^^


26 juillet 2017 à 1:35:33

Hello :)

De mon côté, j'ai eu le même souci, qui est finalement passé avec :

/* Feuille de style */


#menu
{
list-style:none;
}

Si ça peut aider ^^

27 juillet 2017 à 12:05:54

Apres avoir galéré un maximum j'ai enfin trouvé cette solution 

Rajouter un id menu à la balise ul dans le fichier html

CSS = #menu {list-style: none;}

Voilà si ça peux aider.

10 août 2017 à 11:47:10

#menu
{
  list-style: none;
}
j'ai tout simplement marqué sa, et sa marche :) sa valide la case :)

retirer les puces d une liste a puce

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown