SELFHTML

Positionnement et affichage d'éléments

Page d'information: vue d'ensemble

vers le bas Généralités sur le positionnement et l'affichage d'éléments
vers le bas position (Mode de positionnement)
vers le bas top (Position à partir du haut)
vers le bas left (Position à partir de la gauche)
vers le bas bottom (Position à partir du bas)
vers le bas right (Position à partir de la droite)
vers le bas width (Largeur)
vers le bas min-width (Largeur minimale)
vers le bas max-width (Largeur maximale)
vers le bas height (Hauteur)
vers le bas min-height (Hauteur minimale)
vers le bas max-height (Hauteur maximale)
vers le bas overflow (Passage d'élément au contenu trop important)
vers le bas direction (Direction)
vers le bas float (Cours du texte)
vers le bas clear (Suite pour le cours du texte)
vers le bas z-index (Position de la couche en cas de superposition)
vers le bas display (Mode d'affichage ou plutôt non affichage sans prendre de place)
vers le bas visibility (Affichage ou non affichage avec réservation de place)
vers le bas clip (Limiter le domaine d'affichage)

 vers le bas 

Généralités sur le positionnement et l'affichage d'éléments

À partir de la version CSS 2.0 il existe différentes mentions de feuilles de style pour positionner exactement des éléments d'une page WWW dans la fenêtre d'affichage du navigateur WWW et pour contrôler exactement la position des éléments les uns par rapport aux autres. En font partie les mentions pour positionner les éléments de façon relative ou absolue, les mentions pour élargir des éléments, les mentions pour le flux des éléments et enfin les mentions pour superposer et afficher les éléments.

Le positionnement absolu et relatif de documents vous donne la possibilité de mieux gérer en fonction de l'écran l'apparence de vos pages WWW. Ainsi vous pouvez fixer pour des passages distincts, où ces passages doivent commencer exactement. Des passages peuvent se superposer etc. Pour l'essentiel, ces mentions de feuilles de style couvrent les possibilités des anciens Chapitre: vue d'ensemble calques de Netscape. À l'inverse des calques ils sont pourtant une proposition officielle du consortium W3. Netscape et l' Explorer Internet Microsoft interprètent ces mentions depuis leur version 4x - toutefois avec quelques réserves ou particularités.

Le positionnement d'éléments est une condition préalable importante pour beaucoup de cas d'application de Chapitre: vue d'ensemble HTML dynamique. Grâce au soutien d'un script correspondant, vous pouvez bouger, allumer ou éteindre des éléments positionnés, les superposer différemment etc...

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 position (Mode de positionnement)

Vous pouvez spécifier pour un passage, s'il doit être positionné de façon relative ou absolue.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>position</title>
<style type="text/css">
<!--
body { }
#boite1 { position:absolute; top:10px; left:10px; width:150px; height:150px; z-index:1; }
#boite2 { position:absolute; top:40px; left:40px; width:100px; height:100px; z-index:2; }
#boite3 { position:absolute; top:80px; left:50px; width:150px; height:150px; z-index:3; }
#boite4 { position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1;  }
#boite5 { position:absolute; top:60px; left:10px; width:80px; height:80px; z-index:2; }
#boite6 { position:absolute; top:20px; left:50px; width:90px; height:90px; z-index:-1; }
-->
</style>
</head><body bgcolor="FFFFFF" text="#000000">

<div id="boite1" style="background:red; border:solid 2px blue;">boite 1</div>
<div id="boite2" style="background:blue; border:solid 2px white;">boite 2</div>
<div id="boite3" style="background:yellow; border:solid 2px red;">boite 3
        <div id="boite4" style="background:gold; border:solid 2px green;">boite 4</div>
        <div id="boite5" style="background:lime; border:solid 2px navy;">boite 5</div>
        <div id="boite6" style="background:red; border:solid 2px blue;">boite 6</div>
</div>

</body></html>

Explication:

Avec position: vous pouvez déterminer le mode de positionnement. Les mentions suivantes sont permises:

absolute = Positionnement absolu, mesuré à partir du bord de l'élément parent; peut défiler.
fixed = Positionnement absolu, mesuré à partir du bord de l'élément parent; reste fixe lors du défilement. .
relative = Positionnement relatif mesuré à partir de la position de départ de l'élément proprement dit.
static = Pas de positionnement spécial, flux normal de l'élément (réglage par défaut).

En particulier la conduite des mentions absolute et relative déconcerte un peu au début. Car absolute se comporte après tout de façon relative, comme le montrent les éléments div intérieurs de l'exemple ci-dessus: relativement en effet par rapport au bord de l'élément parent. Quand autrement, il n'y a pas d'élément parent, c'est l'élément body qui est l'élément parent. La mention relative se réfère par contre à la position normale de l'élément lui même.

La mention position: n'établit pas encore fermement où exactement un élément doit commencer. La mention n'a de sens que si vous mentionnez en même temps la position de départ désirée. C'est ce que vous pouvez faire par exemple avec des mentions sur la vers le bas position à partir du haut ou bien sur la vers le bas Position à partir de la gauche.
Si vous mentionnez par exemple position:absolute; top:30px, alors vous fixez pour l'élément concerné qu'il doit commencer 30 pixels sous le bord inférieur de l'élément parent.
Si vous mentionnez par exemple position:relative; top:5px alors vous fixez que le bord supérieur de l'élément se trouve 5 pixels plus bas qu'il ne serait normalement.

Attention:

La mention fixed n'est encore interprétée ni par Netscape ni par l'Explorer Internet MS .

Ni Netscape ni l'Explorer Internet MS n'interprètent les mentions de positionnement absolu dans tous les éléments HTML. Pour avoir une compatibilité maximale vers l'aval, il est provisoirement préférable de n'employer ces mentions que sur le repère HTML div. Incluez simplement les autres éléments comme les paragraphes de texte, les graphiques, les tableaux, les formulaires etc. dans des éléments div correspondants.

Netscape et l' Explorer Internet MS réagissent différemment pour le positionnement absolu en ce qui concerne la largeur automatique d'éléments. Vous pouvez rencontrer ce cas si vous notez une mention pour left: et que vous ne notez pas quelle largeur doit avoir le passage ainsi défini. Netscape étire l'élément au maximum jusqu'au bord droit de la fenêtre ou de la page, tandis que l' Explorer Internet MS l'étire au delà du bord droit (l'utilisateur est obligé de faire défiler horizontalement). Pour un positionnement relatif les deux navigateurs réagissent comme l' Explorer Internet MS pour le positionnement absolu. Pour éviter cet effet, vous pouvez par exemple faire des mentions sur la vers le bas width (Largeur) du passage positionné.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 top (Position à partir du haut)

Cette mention est appropriée en relation avec une mention sur le vers le haut mode de positionnement. Vous pouvez spécifier où doit commencer à partir du haut un élément positionné de façon relative ou absolue.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>top</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:4.8cm">
<img src="chien.gif" width="208" height="181" alt="Chien" border="0">
</div>

<div style="position:absolute; top:3.6cm; width:208px; background-color:#FFFFE0;
border:1px solid #804000; padding:10px">Ceci est un texte positionn&eacute; de fa&ccedil;on absolue sur un graphique positionn&eacute; de fa&ccedil;on absolue.</div>

</body></html>

Explication:

Avec top: vous pouvez spécifier la position à partir du haut. Une Autre page d'information mention numérique est permise ou la valeur auto pour un positionnement automatique.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 left (Position à partir de la gauche)

Cette mention est appropriée en relation avec une mention sur le vers le haut Mode de positionnement. Vous pouvez spécifier où doit commencer à partir de la gauche un élément positionné de façon relative ou absolue.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>left</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:100px; left:100px;">
<img src="chien.gif" width="208" height="181" alt="Chien" border="0"></div>

<div style="position:absolute; top:140px; left:350px; width:200px;
background-color:#FFFFE0; border:1px solid #804000; padding:10px">
Ceci est un texte positionn&eacute; de fa&ccedil;on absolue &agrave; c&ocirc;t&eacute; d'un graphique positionn&eacute; de fa&ccedil;on absolue.</div>

</body></html>

Explication:

Avec left: vous pouvez spécifier la position à partir de la gauche. Une Autre page d'information mention numérique est permise ou la valeur auto pour un positionnement automatique.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0MS IE 5.x bottom (Position à partir du bas)

Cette mention est appropriée en relation avec une mention sur le vers le haut mode de positionnement. Vous pouvez spécifier où doit commencer à partir du bas un élément positionné de façon relative ou absolue.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>bottom</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; bottom:0px; left:100px;">Ceci est un chien align&eacute; en bas:<br>
<img src="chien.gif" width="208" height="181" alt="chien" border="0"></div>

</body></html>

Explication:

Avec bottom: vous pouvez spécifier la position à partir du bas. Une Autre page d'information mention numérique est permise ou la valeur auto pour un positionnement automatique.

Attention:

Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0MS IE 5.x right (Position à partir de la droite)

Cette mention est appropriée en relation avec une mention sur le vers le haut mode de positionnement. Vous pouvez spécifier où doit commencer à partir de la droite un élément positionné de façon relative ou absolue.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>right</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:100px; right:0px;">Chien align&eacute; &agrave; droite:<br>
<img src="chien.gif" width="208" height="181" alt="chien" border="0"></div>

</body></html>

Explication:

Avec right: vous pouvez spécifier la position à partir de la droite. Une Autre page d'information mention numérique est permise ou la valeur auto pour un positionnement automatique.

Attention:

Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 width (Largeur)

Vous pouvez spécifier quelle largeur un élément ou un passage doit avoir. Pour spécifier ce qu'il doit advenir du contenu quand il prend plus de place que la largeur mentionnée ici, vous pouvez en plus utiliser la propriété vers le bas overflow (passage d'élément au contenu trop important).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>width</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 style="width:200px; overflow:hidden; border:1px solid red; padding:10px; font-size:36pt">
Un titre qui est, c'est possible, plus large qu'il n'est permis</h1>

</body></html>

Explication:

Avec width: vous pouvez spécifier la largeur d'un passage. Une Autre page d'information mention numérique est permise ou la valeur auto pour la largeur automatique.

Remarques:

Dans l'exemple ci-dessus, si le texte est coupé dans la largeur où c'est nécessaire, ce n'est pas dû à la propriété width, mais à la mention overflow:hidden.
Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0 min-width (Largeur minimale)

Vous pouvez spécifier quelle largeur un élément ou un passage doit avoir dans tous les cas, même si son contenu demanderait moins de place.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>min-width</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid 1px blue; padding:10px">
Sois bref!</div>

</body></html>

Explication:

Avec min-width: vous pouvez spécifier la largeur minimale d'un passage. Une Autre page d'information mention numérique est permise.

Attention:

L'Explorer Internet 5.x n'interprète pas encore cette mention.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0 max-width (Largeur maximale)

Vous pouvez spécifier la largeur qu'un élément ou un passage ne doit pas dépasser. Pour spécifier ce qu'il doit advenir du contenu si sa largeur dépasse la largeur mentionnée ici, vous pouvez utiliser en plus la propriété vers le bas overflow (passage d'élément au contenu trop important).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>max-width</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 style="max-width:250px; overflow:hidden; border:solid 1px green; font-size:36pt; padding:10px">
Une titre pour le mot 'probablement' mais probablement trop large pour 250px.ist</h1>

</body></html>

Explication:

Avec max-width: vous pouvez imposer une largeur maximale pour le passage. Une Autre page d'information mention numérique est permise.

Attention:

L'Explorer Internet 5.x n'interprète pas encore cette mention.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 height (Hauteur)

Vous pouvez spécifier quelle hauteur doit avoir un élément ou un passage. Pour spécifier ce qu'il doit advenir du contenu si sa hauteur dépasse la hauteur mentionnée ici, vous pouvez utiliser en plus la propriété vers le bas overflow (Passage d'élément au contenu trop important).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>height</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 style="height:100px; width:300px; overflow:hidden; border:1px solid red; padding:10px; font-size:36pt">
Un titre qui est, c'est possible, plus haut qu'il n'est permis</h1>

</body></html>

Explication:

Avec height: vous pouvez spécifier la hauteur d'un passage. Une Autre page d'information mention numérique est permise ou la valeur auto pour la hauteur automatique.

Remarques:

Dans l'exemple ci-dessus, si le texte est coupé dans la hauteur où c'est nécessaire, ce n'est pas dû à la propriété height mais à la mention overflow:hidden.
Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0 min-height (Hauteur minimale)

Vous pouvez spécifier quelle hauteur un élément ou un passage doit avoir dans tous les cas.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>min-height</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:100px; left:100px; min-height:200px; border:solid 1px blue; padding:10px">
Sois bref!</div>

</body></html>

Explication:

Avec min-height: vous pouvez spécifier la hauteur minimale d'un passage. Une Autre page d'information mention numérique est permise.

Attention:

L'Explorer Internet 5.x n'interprète pas encore cette mention.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0 max-height (Hauteur maximale)

Vous pouvez spécifier pour un élément ou un passage que sa hauteur ne doit pas dépasser une certaine valeur. Pour spécifier ce qu'il doit advenir du contenu si sa hauteur dépasse la hauteur mentionnée ici, vous pouvez utiliser en plus la propriété vers le bas overflow (Passage d'élément au contenu trop important).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>max-height</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px green; font-size:36pt; padding:10px">
Un titre qui est, c'est possible, trop large pour une boite de  300 sur 300 Pixels</h1>

</body></html>

Explication:

Avec max-height: vous pouvez spécifier la hauteur maximale d'un passage. Une Autre page d'information mention numérique est permise.

Attention:

L'Explorer Internet5.x n'interprète pas encore cette mention.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0MS IE 5x.0 overflow (Passage d'élément au contenu trop important)

Cette mention peut être significative si vous définissez pour un élément ou un passage une largeur ou une hauteur maximale désirée. Supposons que vous définissiez un passage avec <div>...</div>, pour lequel vous imposez à l'aide de la mention de feuille de style width une largeur minimale de 200 pixels . Si vous notez dans ce passage une référence de graphique (<img>), pour lequel l'image a une largeur de plus de 200 Pixels vous pouvez avec la mention décrite ici, préciser comment le navigateur doit régler le conflit.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>overflow</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:100px; left:100px; width:200px;
height:150px; overflow:hidden; border:thin solid #804000">
chien coupé:<br>
<img src="chien.gif" width="208" height="181" alt="chien" border="0"></div>

</body></html>

Explication:

Avec overflow: vous pouvez définir comment des éléments intérieurs, au contenu trop important, doivent être traités. Les données suivantes sont possibles:

visible = L'élément sera agrandi de manière à ce que son contenu soit complètement visible dans tous les cas.
hidden = L'élément sera coupé s'il dépasse les limites.
scroll = L'élément sera coupé s'il dépasse les limites. Le navigateur WWW doit pourtant proposer des barres de défilement, un peu comme dans une fenêtre cadre incorporée.
auto = Le navigateur Web doit décider en cas de conflit, comment l'élément sera affiché. Proposer des barres de défilement est également permis.

Attention:

Netscape 4.x ne connaît pas cette propriété. L' Explorer Internet ne soutient pas la mention overflow:visible.

 vers le hautvers le bas 

CSS 2.0Netscape 6.0MS IE 5.x direction (Direction)

Avec cette mention, vous pouvez imposer le sens de lecture pour les éléments et en fonction de cela dans quelle direction par exemple les mentions de largeur sont calculées ou par exemple de quel côté les contenus trop larges seront coupés avec la propriété vers le haut overflow (Passage d'élément au contenu trop important) . Le sens de lecture est avant tout conçu pour la représentation de cultures d'écriture différentes comme la culture arabe où il est écrit de droite à gauche.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>direction</title>
</head><body bgcolor="FFFFFF" text="#000000" style="direction:rtl">

<h1>Salut mon gars!</h1>
<p>Ici  il est possible que tout puisse para&icirc;tre bien diff&eacute;rent de la normale ...</p>

</body></html>

Explication:

Avec direction: vous pouvez fixer le sens d'écriture. Les mentions suivantes sont possibles:

ltr = de gauche à droite.
rtl = de droite à gauche.

Attention:

Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 float (Cours du texte)

Vous pouvez spécifier pour un passage ou un élément que les éléments qui le suivent l'entourent.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>float</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 style="width:400px; float:left; color:red">Titre diff&eacute;rent cette fois</h1>
<p style="font-size:120%">Un titre ne doit pas toujours cr&eacute;er un bloc monotone qui s'&eacute;tire sur toute la largeur de la fen&ecirc;tre d'affichage. Il peut aussi aussi de temps en temps &ecirc;tre plac&eacute; sur le c&ocirc;t&eacute; du texte, avec le texte qui entoure le titre. C'est une fa&ccedil;on diff&eacute;rente de mettre en forme des textes plus longs.</p>

</body></html>

Explication:

Avec float: vous pouvez spécifier que les éléments suivants passent sur les côtés de l'élément/du passage actuel. Les données suivantes sont possibles:

left = L'élément se trouve à gauche et sera entouré par la droite des éléments qui le suivent.
right = L'élément se trouve à droite et sera entouré par la gauche des éléments qui le suivent.
none = L'élément ne sera pas entouré (réglage normal).

Attention:

Quand vous définissez pour un élément une mention sur float (Cours du texte) vous devez définir aussi une mention sur vers le haut width (Largeur).

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 clear (Suite pour le cours du texte)

Si vous définissez le vers le haut float (Cours du texte), vous désirez peut-être avoir deux ou trois lignes de commentaires à côté de l'élément entouré et poursuivre le texte sous l'élément entouré. C'est le but de la mention décrite ici.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>clear</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center">
Chapitre<br>
<span style="font-family:Algerian,serif; font-size:72pt; color:red">
&nbsp;1&nbsp;</span></div>
<p style="font-size:120%">Dans ce chapitre, Quelques notions sont expos&eacute;es</p>
<p style="clear:left">Ensuite, nous entrerons dans le vif du sujet: ...</p>

</body></html>

Explication:

Avec clear: vous pouvez interrompre le cours du texte pour en forcer la poursuite sous l'élément/le passage entouré. Les données suivantes sont possibles:

left = impose pour float:left la poursuite dessous.
right = impose pour float:right la poursuite dessous.
both = impose dans chaque cas la poursuite dessous.
none = n'impose pas de poursuite dessous. (réglage normal).

Dans l'exemple ci-dessus les propriétés float et clear sont utilisées pour noter un grand numéro de chapitre placé sur le côté et à côté du numéro de chapitre, un petit texte qui explique de quoi il retourne et sous ces deux éléments le texte normal du chapitre.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 z-index (Position de la couche en cas de superposition)

Cette mention est appropriée en relation avec plusieurs mentions sur le vers le haut Mode de positionnement. Quand vous positionnez de façon absolue plusieurs éléments dont les domaines d'affichage se superposent, les éléments sont en principe affichés l'un sur l'autre dans l'ordre dans lequel ils ont été définis. Vous pouvez modifier cet ordre en affectant aux différents éléments des numéros. Les éléments dont le numéro est le plus élevé couvrent les éléments avec le numéro le moins élevé.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>z-index</title>
</head><body bgcolor="FFFFFF" text="#000000">

<div style="position:absolute; top:100px; left:100px; z-index:1; border:thin solid #804000;">
<b>1.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
<div style="position:absolute; top:130px; left:150px; z-index:4; border:thin solid #804000;">
<b>2.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
<div style="position:absolute; top:160px; left:200px; z-index:2; border:thin solid #804000;">
<b>3.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
<div style="position:absolute; top:190px; left:250px; z-index:3; border:thin solid #804000;">
<b>4.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>

</body></html>

Explication:

Avec z-index: vous pouvez spécifier l'ordre dans lequel des éléments se superposent. Notez un nombre pour chaque élément pour lequel vous voulez fixer clairement la position de la couche. Plus le chiffre est élevé plus l'élément sera placé vers l'avant, plus il est bas plus l'élément sera placé derrière en arrière plan.

Dans l'exemple ci-dessus, le même passage a été créé quatre fois - avec pour contenu une image GIF transparente. Les passages se chevauchent en raison des mentions sur leur positionnement et des dimensions extérieures de l'image. Normalement, le dernier passage noté recouvre tous les autres étant donné qu'il est noté en dernier. Dans l'exemple pourtant, c'est le deuxième passage qui recouvre tous les autres, car il reçoit le numéro z-index le plus élevé.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 display (Mode d'affichage ou plutôt non affichage sans prendre de place)

Vous pouvez spécifier si un élément doit d'abord être affiché ou non. "sans prendre de place" signifie qu'en cas de non-affichage de l'élément aucun espace ne sera réservé à cet élément. Dans ce cas rien n'indique lors de l'affichage que l'élément existe seulement. À l'aide de Chapitre: vue d'ensemble HTML dynamique vous pouvez ainsi afficher un élément ultérieurement ou le cacher à nouveau.

De plus, vous pouvez spécifier avec la mention décrite ici comment un élément doit être affiché. Vous pouvez déterminer qu'il forme un bloc distinct (formant un paragraphe) ou qu'il soit affiché au milieu du texte. Ainsi vous pouvez redéfinir des éléments créant leur propre paragraphe, comme les titres, en éléments ne créant pas leur propre paragraphe.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>display</title>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 style="display:inline">Je suis un &eacute;l&eacute;ment incorpor&eacute;</h1>
&nbsp;<p style="display:inline">Ce texte le prouve!</p>
<h1 id="cache" style="display:none">Je suis un &eacute;l&eacute;ment de bloc mais ne suis pas affich&eacute;</h1>
<p>Et ce texte fait comme si de rien n'&eacute;tait!</p>

</body></html>

Explication:

Avec display: vous pouvez empêcher l'affichage d'éléments ou fixer le mode d'affichage. Les mentions suivantes sont possibles:

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 = comme block, mais précédé d'une puce comme dans une liste énumérative.
marker = déclare du Autre page d'information  texte généré automatiquement pour l'élément.
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é.
none = L'élément n'est pas affiché et aucune place ne lui sera réservée.

D'autres mentions pour display sont disponibles, spécialement pour la création de tableaux avec d'autres éléments que des éléments de tableau. Les mentions correspondantes peuvent être toutefois également employées sur les éléments de tableau correspondants. Ils sont pourtant davantage conçus pour la représentation en tableau de données XML. Car XML ne connaît pas de procédé pour marquer les données sous forme de tableau. C'est ce que doit prendre en charge le langage de style à l'aide duquel les données XML sont affichées. Dans les CSS on a choisi la propriété display dans ce but. Les mentions suivantes sont possibles dans ce contexte:

table = L'élément contient des éléments-enfant rangés sous forme de tableau et crée une nouvelle ligne. A le même effet que l'élément table en HTML.
inline-table = L'élément contient des éléments-enfant rangés sous forme de tableau et est affiché dans le cours du texte. A le même effet que l'élément table en HTML, mais incorporé.
table-row = L'élément contient des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément tr en HTML.
table-row-group = L'élément contient un groupe d'éléments avec des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément tbody en HTML.
table-header-group = L'élément contient un groupe d'éléments avec des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément thead en HTML.
table-footer-group = L'élément contient un groupe d'éléments avec des éléments-enfant rangés l'un à côté de l'autre. A le même effet que l'élément tfoot en HTML.
table-column = L'élément représente un groupe d'éléments qui forment une colonne. A le même effet que l'élément col en HTML.
table-column-group = L'élément représente un groupe d'éléments avec la propriété table-cell. L'élément représente une cellule de tableau. A le même effet que l'élément td en HTML (également pour les éléments th).
table-caption. L'élément représente un titre de tableau. A le même effet que l'élément caption en HTML (également pour les éléments th).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>display</title>
<style type="text/css">
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
</style>
</head><body bgcolor="FFFFFF" text="#000000">

<div class="table">
 <div class="tr">
  <div class="td">je</div>
  <div class="td">suis</div>
  <div class="td">un</div>
  <div class="td">tableau</div>
 </div>
</div>

</body></html>

Explication:

L'exemple définit des classes pour des éléments div. Les noms de classes sont identiques à des noms d'éléments de tableau connus en HTML. Ce n'est pas obligatoire et ne figure ici que pour la démonstration. Les classes respectives reçoivent à l'aide de propriétés display, qui détermineront la conduite des éléments HTML correspondants pour tableau auxquels elles sont affectées. Dans le corps du fichier de l'exemple est ensuite construit un véritable tableau à l'aide d'élements div avec des attributs class.

Attention:

Netscape 4.0 et l'Explorer Internet MS 4.0 interprètent la mention display:none correctement. Les autres mentions pourtant ne sont interprétées qu'incomplètement ou pas du tout par les deux navigateurs dans leur version 4.x. Les mentions sur les propriétés de tableau sont interprétées par Netscape 6.0 mais toujours pas par l'Explorer Internet 5.x.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 visibility (Affichage ou non affichage avec réservation de place)

Vous pouvez spécifier si un élément doit d'abord être affiché ou non. "Avec réservation de place" signifie qu'en cas de non-affichage de l'élément un espace sera malgré tout réservé à cet élément. À l'aide de Chapitre: vue d'ensemble HTML dynamique vous pouvez ainsi afficher un élément ultérieurement ou le cacher à nouveau.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>visibility</title>
<script language="JavaScript" type="text/javascript">
<!--
function show() {
 if(document.getElementById)
   document.getElementById("Titre").style.visibility = "visible";
}
//-->
</script>
</head><body bgcolor="FFFFFF" text="#000000">

<h1 id="Titre" style="visibility:hidden">Le titre du texte</h1>
<p>Ici le texte. Mais, est-ce qu'il ne manque rien?</p>
<p><a href="javascript:show()">Afficher!</a></p>

</body></html>

Explication:

Avec visibility: vous pouvez spécifier si un élément est affiché au début ou non. Les mentions suivantes sont possibles:

hidden = Le contenu de l'élément est d'abord caché (non affiché).
visible = Le contenu de l'élément est d'abord affiché (réglage normal).

Dans l'exemple ci-dessus, le titre est d'abord caché (non affiché). En cliquant sur le lien il y est pourtant remédié de façon dynamique. On n'entrera pas ici dans le détail des commandes JavaScript nécessaires pour le faire.

 vers le hautvers le bas 

CSS 2.0Netscape 4.0MS IE 4.0 clip (Limiter le domaine d'affichage)

Vous pouvez déterminer que seul un extrait d'un élément positionné de façon absolue soit affiché visiblement, indépendamment des mentions ayant pu être faites sur la taille de l'élément, ou sur la taille automatique de l'élément. Si l'élément est plus grand que le domaine d'affichage ainsi défini il sera coupé en conséquence sur les côtés. Pour l'instant, seul un rectangle peut être défini pour l'extrait. À l'avenir il sera aussi possible de définir des polygones des cercles ou des ellipses.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>clip</title>
</head><body>

<div style="position:absolute; top:100px; left:100px; clip:rect(0px 130px 130px 0px);">
Vous avez du chien:<br>
<img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>

</body></html>

Explication:

Avec clip: vous pouvez définir un extrait pour l'affichage visible. Suit l'identificateur rect (pour rectangle, = rectangle), et ensuite entre parenthèses quatre valeurs numériques ou le mot clé auto pour déterminer l'extrait.
La première des quatre valeurs désigne la valeur pour "le haut", mesurée à partir de la limite supérieure de l'élément
La deuxième des quatre valeurs désigne la valeur pour "la droite", mesurée à partir de la limite gauche de l'élément
La troisième des quatre valeurs désigne la valeur pour "le bas", mesurée à partir de la limite supérieure de l'élément
La quatrième des quatre valeurs désigne la valeur pour "la gauche", mesurée à partir de la limite gauche de l'élément

Pour qu'un extrait soit visible, la valeur pour "le bas" doit être plus grande que la valeur pour "le haut" et la valeur pour "la droite" plus grande que celle pour "la gauche". Le mot clé auto signifie: pas de mention pour la valeur concernée, l'élément doit pour le côté concerné être affiché jusqu'à la limite de l'élément.

Attention:

Tant pour Netscape que pour l'Explorer Internet, la propriété clip n'est compréhensible que lorsqu'elle est appliquée à des éléments positionnés de façon absolue.

 vers le haut
page suivante Autre page d'information Mises en page pour modes d'impression
page précédente Autre page d'information Pseudo-formats
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org