Fiche CSS : Visibilité des élémements HTMLObjet de la ficheÉtat de la fiche
|
| Valeurs | Commentaires | Tests |
|---|---|---|
| visible | La boîte générée est visible |
 Survolez ce texte : l'image disparaît mais la zone qu'elle occupait sur l'écran est conservée. |
| hidden | La boîte générée est invisible (entièrement transparente), mais celle-ci influençant toujours la mise en forme. | |
| collapse | Masque des lignes, des colonnes, des
groupes de lignes ou des groupes de colonnes d'un tableau, et l'espace qu'ils devraient
occuper se comporte comme si la propriété display: none était
appliquée aux lignes/colonnes du tableau. La taille
et l'aspect des autres lignes et colonnes est conservé. Cette propriété a été définie afin de supprimer
rapidement un rang/une colonne d'un tableau sans en modifier l'aspect général.
Si cette valeur est utilisée avec des éléments autres que des
lignes ou des colonnes, les effets sont les mêmes que pour la
valeur hidden.
Cette possibilité n'est pas reconnue par
tous les navigateurs (par exemple IE et Firefox ne la
reconnaisse pas, Opéra la reconnaît). |
 Voici le résultat après avoir appliqué visibility:collapse sur la première ligne.  |
Propriété display
L'utilisation de la propriété CSS display permet de modifier le comportement des boîtes de type bloc et en ligne, et de gérer la mise en page d'éléments tels les listes et les liens. Rappelons que par défaut, une boîte de type bloc ne peut avoir une autre boîte à sa droite ou à sa gauche ( elle est précédée et suivie d'un saut de ligne), et que par défaut, une boîte en ligne n'est ni précédée, ni suivie d'un saut de ligne.
Syntaxe
{display:attribut}
Propriétés standards
| Attributs | Commentaires |
|---|---|
| block | Impose un bloc - l'élément crée un nouvelle ligne. |
| inline | Impose l'affichage en texte - l'élément est affiché dans le cours du texte. |
| list-item | Impose une présentation de type liste à l'élément sur lequel cette propriété est appliquée. |
| marker | Déclare du texte généré automatiquement pour l'élément. Ce texte est normalement généré avec la propriété "content" détaillée dans la fiche "Structuration automatique des pages". marker n'a actuellement aucune influence. |
| run-in et compact | Font en sorte que l'élément est représenté, suivant le contexte comme élément de bloc ou comme élément incorporé. La valeur run-in possède la particularité d'attribuer à une boîte un comportement différent selon le type d'objet qui lui succède: Si l'élément suivant une boîte en enfilade est de type inline, la boîte en enfilade est rendue sous forme de bloc si l'élément suivant une boîte en enfilade est de type block, la boîte en enfilade est rendue sous forme d'élément en ligne et insérée au début de la boîte block immédiatement adjacente. |
| inline-block | Permet d’appliquer des styles de type “block” à un élément ayant un comportement de type “inline”. |
| none | L'élément n'est pas affiché et aucune place ne lui sera réservée. |
display block
L'exemple ci-dessous utilise display:block pour afficher une succession de liens hypertextes (à la suite les uns des autres) sous forme de colonne (block introduisant un saut).
| Code standard | Résultat standard | Application css | Résultat |
|---|---|---|---|
| <p > <a href="#">lien 1</a> <a href="#">lien 2</a> <a href="#">lien 3</a> </p> |
lien 1 lien 2 lien 3 | <style type="text/css"> p a {display:block} </style> |
Display inline
L'exemple ci-dessous utilise display:inline pour afficher à la suite les uns des autres des éléments de type block.
| Code standard | Résultat standard | Application css | Résultat |
|---|---|---|---|
| <div> <p>Hello</p> <p>Welcome!</p> </div> <div> <div> Bonjour </div> <div> comment </div> <div> allez vous? </div> </div> <ul> <li>article 1</li> <li>article 2</li> <li>article 3</li> </ul> |
Hello Welcome! Bonjour comment allez vous?
|
<style type="text/css"> div p{ display: inline; } div div { display: inline; } ul li { display: inline; } </style> |
Hello Welcome! Bonjour comment allez vous? article 1 article 2 article 3 |
Display list-item
En passant un élément en display: list-item, il se comporte comme une élément d'une liste et supporte les propriétés typiques des listes : 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'.
L'exemple suivant utilise display:list-item pour donner un aspect de liste à des paragraphes et à une suite de liens hypertexte.
| Code standard | Résultat standard | Application css | Résultat |
|---|---|---|---|
| <p>article 1</p> <p>article 2</p> <p>article 3</p> <a href="#">lien 1</a> <a href="#">lien 2</a> <a href="#">lien 3</a> |
article 1 article 2 article 3 |
<style type="text/css"> p { display: list-item; list-style-type: square; margin-left: 20px; } </style> |
 |
N'oubliez pas margin-left: 20px (ou 2em) sinon les puces n'apparaissent pas !
display run-in
Si un élément de type block (non flottant et non positionné de manière absolue ou fixe) suit un élément de type block avec la propriété run-in, ce dernier devient un élément inline contenu dans l'élément initialement adjacent. Dans tous les autres cas l'élément avec la propriété run-in sera vu comme un élément de type block. A quoi ça sert ? mystère! d'autant que seul le navigateur Opéra le gère correctement.
| Mode standard | Résultat standard | Application css et Résultat |
|---|---|---|
| <div="a"> Première boite </div> <div id="b"> Deuxième boite </div> |
 |
<style type="text/css"> #a {border:solid thin gray;width:6em;display:run-in} b {border:solid thin gray;width:10em;height:3em} </style>  |
display compact
Si un élément de type block (non flottant et non positionné de manière absolue ou fixe) suit un élément de type block avec la propriété compact , ce dernier sera formatée comme un élément de type block inline. Dans tous les autres cas l'élément avec la propriété compact sera vu comme un élément de type block.
L'élément avec la propriété compact est placé à gauche du block suivant s'il y a assez de place pour cela.
| Code standard | Résultat standard | Application css et Résultat |
|---|---|---|
| <div id="a"> Première boite </div> <div id="b"> Deuxième boite </div> <dl> <dt>AA</dt> <dd>Article de AA</dd> <dt>BB</dt> <dd>Article de BB</dd> </dl> <p id="p1">Hello</p> <p id="p2">Bonjour</p> |
 |
<style type="text/css"> div#a {border:solid thin gray; width:6em;height:1.5em; display:compact;} div#b {margin-left:7em; border:solid thin gray; width:7em;height:1.5em;} dt{display : compact } p#p1 {display: compact} p#p2 {margin-left: 3em} </style>  |
Pour que tout cela se positionne correctement attention aux chevauchements : utilisez margin-left pour décaler l'élément après l'élément possédant la propriété compact.
display:inline-block
Cette propriété est très peu utilisée. Elle permet d’appliquer des styles de type “block” à un élément ayant un comportement de type “inline”, comme par exemple, une largeur, une hauteur, des marges, etc.
Le premier exemple ci-dessous utilise display:inline-block pour aligner les champs d'un formulaire. Le second exemple affecte une dimension et une bordure à des mots encadrés par des balises <span>.
| Code standard | Résultat standard | Application css et Résultat |
|---|---|---|
| <form action="" method="post" id="inscription"> <fieldset> <label for="nom">Nom</label> <input type="text" id="nom" size="10" /><br /> <label for="email">E</label> <input type="text" id="email" size="10" /><br /> <label for="password">MDP</label> <input type="password" id="password" size="10" /><br /> <input type="submit" value="valider" class="input-submit" /> </fieldset> </form> <span>Hello</span><span>Bonjour</span> |
 HelloBonjour |
<style type="text/css"> #inscription {width:10em} #inscription label{display:inline-block; width:4em;font-weight:bold} span {display:inline-block; width:4em; border:solid thin gray; padding:0.1em;margin:0.2em; text-align:center} </style>  
|
Propriétés display XML applicables en HTML
Des attributs supplémentaires conçus pour la représentation en tableau de données XML peuvent être utilisés en HTML.
| Attributs | Commentaires | Equivalent HTML |
|---|---|---|
| table | Contient les éléments du tableau et crée une nouvelle ligne. | <table> |
| inline-table | Contient les du tableau affichés dans le cours du texte | <table> en HTML, mais incorporé. |
| table-row | Crée une ligne | <tr> |
| table-row-group | Délimitation d'un groupe de lignes | <tbody> |
| table-header-group | Groupe de lignes et cellules constituant le titre des colonnes. | <thead> |
| table-footer-group | Groupe d'éléments constituant le pied du tableau | <tfoot> |
| table-column | Groupe d'éléments constituant une colonne. | <col > |
| table-column-group | Crée un cellule | <td> |
| table-caption | Titre de tableau | <caption> |
Exemple d'un tableau réalisé avec les propriétés display
 |
Propriétés overflow
La propriété overflow permet d'attribuer un comportement spécifique sur le rendu vertical ou horizontal d'un élément html pour gérer le cas où son contenu dépasse sa hauteur et/ou sa largeur(le conteneur doit être dimensionné avec la propriété height et/ou width).
Syntaxe
{overflow:attribut}
Attributs
| Propriétés | Attributs | Commentaires | Notes et tests |
|---|---|---|---|
| overflow | visible | Affiche le contenu même s'il est trop grand(3) | Note(3) L'aire d'affichage du contenu est
définie par les valeurs données aux attributs height et width.
overflow:hidden
Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde. Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme. Considérant qu'il est essentiel que les droits de l'homme soient protégés par un régime de droit pour que l'homme ne soit pas contraint, en suprême recours, à la révolte contre la tyrannie et l'oppression. overflow:scroll Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde. Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme. Considérant qu'il est essentiel que les droits de l'homme soient protégés par un régime de droit pour que l'homme ne soit pas contraint, en suprême recours, à la révolte contre la tyrannie et l'oppression. |
| hidden | Cache le contenu superflu(3) | ||
| auto | Automatique. S'adapte à la taille de son parent | ||
| scroll | Affiche des barres de défilement |
Remarques
overflow-x et overflow-y permettent de spécifier le comportement de l'élément en largeur ou en hauteur
| overflow-y:scroll | overflow-x:scroll |
|
Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde. Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme. Considérant qu'il est essentiel que les droits de l'homme soient protégés par un régime de droit pour que l'homme ne soit pas contraint, en suprême recours, à la révolte contre la tyrannie et l'oppression. |
Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde.
Considérant que la méconnaissance et le mépris des droits de l'homme ont conduit à des actes de barbarie qui révoltent la conscience de l'humanité et que l'avènement d'un monde où les êtres humains seront libres de parler et de croire, libérés de la terreur et de la misère, a été proclamé comme la plus haute aspiration de l'homme. Considérant qu'il est essentiel que les droits de l'homme soient protégés par un régime de droit pour que l'homme ne soit pas contraint, en suprême recours, à la révolte contre la tyrannie et l'oppression. |
Nota
Pour tout ce qui est overflow concernant l'ascenseur horizontal, utilisez en plus la propriété de style white-space:nowrap;
Propriété text-overflow
Détermine s'il faut afficher le contenu débordant d'un cadre plein sous forme de points de suspension (...) à la fin de la ligne (text-overflow:ellipsis), afin d'indiquer que du texte supplémentaire est disponible, ou bien par un arrêt net (text-overflow:clip). Il est fortement conseillé de déclarer l'attribut title dans l'élément de façon à lire dans un tiptool (information apparaissant lors du survol de l'élément par le curseur) le contenu complet du texte.
Attention : la propriété de style overflow de l'élément doit être réglé sur hidden. Cette propriété est disponible uniquement à partir de CSS3.
Syntaxe
{text-overflow:attribut}
Attributs
| Attributs | Commentaires | Tests |
|---|---|---|
| clip | Coupe le texte brusquement au dépassement de la taille du conteneur. |  |
| ellipsis | Coupe le texte au dépassement de la taille du conteneur en incluant 3 points de suspensions. |  |
| Mode standard | Résultat standard | Application css et Résultat |
|---|---|---|
| <table> <tr> <td>Article 1</td> <td> <div class="ellipsis"> Ceci est le début du test d'une ligne plus grande que la dimension de la colonne.</div> </td> </tr> <tr> <td>Article 2</td> <td> <div class="clip"> Ceci est la fin du test d'une ligne plus grande que la dimension de la col.</div> </td> </tr> </table> <div title="Ceci est le début du test d'une ligne plus grande que la dimension de la colonne."> Ceci est le début du test d'une ligne plus grande que la dimension de la colonne. </div> |
 Ceci est le début du test d'une ligne plus grande que la dimension de la colonne. |
<style type="text/css"> td { width:6em; border: solid 1px black; margin: 1em; padding: 0.2em; white-space:nowrap; overflow: hidden; } .clip { text-overflow: clip;} .ellipsis {text-overflow: ellipsis;} div {width:7em;height:1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } <style>  |
Application au projet de site web
Application 1
Le but de l'exercice est d'afficher une fenêtre d'information lors du survol du titre ("Bienvenue sur ...)
Pour cela vous utiliserez la construction des boites (classe et identificateurs) de la façon suivante :
Les directives de style seront placées dans le fichier de style externe.
Application 2
Dans les pages du répertoire Site : Bouquets.htm, Compositions.htm, Fleurs.htm, Plantes.htm on va afficher l'image aux dimensions normales lorsque l'on survole les images réduites.. Cette image se situera à droite du tableau et ses caractéristiques seront les suivantes :
{position:absolute;top:12em;left:35em;width:10em;height:11em;border:dotted thin green;
background-repeat:no-repeat}
Pour cela on inclura une feuille de style commune à toute les pages et une feuille de style spécifique à chaque page.
