Exercice 5/25

  • Dans le fichier stylesheet.css, changez la valeur de la propriété display à none pour tous les éléments div;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Note:
Vous constaterez que avec la valeur none les éléments div ainsi que leur éventuel contenu disparaissent complètement de la page web. La place qu'ils occupent n'est pas conservée, si bien que si il y avait d'autres éléments html en-dessous, ils viendraient se repositionner à la place des div.

Leçon 5/25

La propriété "display" peut aussi prendre comme valeur "none" qui permet de ne pas afficher un élément sur la page web. Un élément HTML qui a cette valeur ne sera pas affiché sur la page et la place qu'il occupait sera libérée afin que les éléments HTML voisins puissent se postionner par rapport à l'emplacement libéré.

Il ne faut pas confondre "display: none" avec "visibility: hidden", les deux servent à masquer un élément HTML, mais avec la seconde solution, la place occupée par l'élément HTML reste vide et n'est pas disponible pour les éléments voisins.

Commentaires les mieux notés

  • jmulon.pro

    Erreur ?

  • marine.haller-32

    Bonjour, à quoi sert cette fonction ? "display: none" j'ai bien compris qu'elle sert à faire disparaitre l'élément mais dans ce cas pourquoi ne pas simplement le modifier. P.S: est il possible de savoir quelque part si vous nous répondez ou faut il retrouver la page du commentaire que l'on vous a laissé? N'est il pas possible de créer un module du votre site pour que l'on puisse retrouver nos conversation, un genre de chat individuel ? Je sais que vous refaite le site en ce moment alors si vous n'y aviez pas penser, sachez que lorsque l'on laisse un commentaire il est impossible ou difficile de le retrouver pour suivre l'échange. Merci et bon courage.

  • armand1807

    bug d'affichage dans la partis leçon: il n'y a rien...

3 Commentaires

  • jmulon.pro

    jmulon.pro

    Erreur ?

    le 07/12/2017 à 16h35

  • mram

    mram Administrateur

    Bonjour, oui erreur devant le premier sélecteur CSS. Pas besoin de mettre *

    le 10/12/2017 à 14h33

  • armand1807

    armand1807

    bug d'affichage dans la partis leçon: il n'y a rien...

    le 28/07/2017 à 15h22

  • mram

    mram Administrateur

    Bonjour, c'est noté. J'ai fait remonté l'information.

    le 05/08/2017 à 09h50

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>None</title> </head> <body> <div id="un"></div> <div id="deux"></div> <div id="trois"></div> <div id="quatre"></div> </body> </html>
div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; display: inline; } #un { background-color: #4D94FF; } #deux { background-color: #3385FF; } #trois { background-color: #1975FF; } #quatre { background-color: #0066FF; }