Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Visibilité des élémements HTML

Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

Avant propos

Cette fiche précise les différentes  façons d'afficher un élément, le masquer, afficher certaines parties (consultations des parties non visibles à partir des ascenseurs) , changer son type (block/en ligne) etc

Propriété visibility

Cette propriété est utilisée conjointement avec des scripts pour créer des effets dynamiques visuels. En effet on voit mal l'intérêt de déclarer un élément non visible sans utiliser de script pouvant le faire apparaître lors  d'une action déclenchée par l'internaute.

Syntaxe générale

{visibility:valeur}

Attributs

La propriété visibility et ses attributs
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

La propriété display et ses attributs
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).

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

lien 1 lien 2 lien 3

Display inline

L'exemple ci-dessous utilise display:inline  pour afficher à la suite les uns des autres des éléments de type block.

Exemple
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?
  • article 1
  • article 2
  • article 3
<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.

Exemple
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

lien 1 lien 2 lien 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.

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

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

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

Propriétés display XML
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 overflow et clip et ses 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:scrolloverflow-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.


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

Propriétés text-overflow
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 :

Construction du message d'information

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.

Retrouvez la solution


Respectons la propriété intellectuelle