SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
 |
Positionnement et 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 
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 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...
 |
position (Mode de positionnement)Vous pouvez spécifier pour un passage, s'il doit être positionné de façon relative ou absolue.
<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>
|
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 position à partir du haut ou bien sur la 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.
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 width (Largeur) du passage positionné.
|
|
top (Position à partir du haut)Cette mention est appropriée en relation avec une mention sur le mode de positionnement. Vous pouvez spécifier où doit commencer à partir du haut un élément positionné de façon relative ou absolue.
<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é de façon absolue sur un graphique positionné de façon absolue.</div> </body></html> |
Avec top: vous pouvez spécifier la position à partir du haut. Une 
mention numérique est permise ou la valeur auto pour un positionnement automatique.
|
|
left (Position à partir de la gauche)Cette mention est appropriée en relation avec une mention sur le Mode de positionnement. Vous pouvez spécifier où doit commencer à partir de la gauche un élément positionné de façon relative ou absolue.
<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é de façon absolue à côté d'un graphique positionné de façon absolue.</div> </body></html> |
Avec left: vous pouvez spécifier la position à partir de la gauche. Une mention numérique est permise ou la valeur auto pour un positionnement automatique.
|
|
bottom (Position à partir du bas)Cette mention est appropriée en relation avec une mention sur le mode de positionnement. Vous pouvez spécifier où doit commencer à partir du bas un élément positionné de façon relative ou
absolue.
<html><head><title>bottom</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; bottom:0px; left:100px;">Ceci est un chien aligné en bas:<br> <img src="chien.gif" width="208" height="181" alt="chien" border="0"></div> </body></html> |
Avec bottom: vous pouvez spécifier la position à partir du bas. Une mention numérique est permise ou la valeur auto pour un positionnement automatique.
Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.
|
|
right (Position à partir de la droite)Cette mention est appropriée en relation avec une mention sur le mode de positionnement. Vous pouvez spécifier où doit commencer à partir de la droite un élément positionné de façon relative ou
absolue.
<html><head><title>right</title> </head><body bgcolor="FFFFFF" text="#000000"> <div style="position:absolute; top:100px; right:0px;">Chien aligné à droite:<br> <img src="chien.gif" width="208" height="181" alt="chien" border="0"></div> </body></html> |
Avec right: vous pouvez spécifier la position à partir de la droite. Une mention numérique est permise ou la valeur auto pour un positionnement automatique.
Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.
|
|
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é overflow (passage d'élément au contenu trop important).
<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> |
Avec width: vous pouvez spécifier la largeur d'un passage. Une mention numérique est permise ou la valeur auto pour la largeur automatique.
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é.
|
|
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.
<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> |
Avec min-width: vous pouvez spécifier la largeur minimale d'un passage. Une mention numérique est permise.
L'Explorer Internet 5.x n'interprète pas encore cette mention.
|
|
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é overflow (passage d'élément au contenu trop important).
<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> |
Avec max-width: vous pouvez imposer une largeur maximale pour le passage. Une mention numérique est permise.
L'Explorer Internet 5.x n'interprète pas encore cette mention.
|
|
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é overflow (Passage d'élément au contenu trop important).
<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> |
Avec height: vous pouvez spécifier la hauteur d'un passage. Une mention numérique est permise ou la valeur auto pour la hauteur automatique.
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é.
|
|
min-height (Hauteur minimale)Vous pouvez spécifier quelle hauteur un élément ou un passage doit avoir dans tous les cas.
<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> |
Avec min-height: vous pouvez spécifier la hauteur minimale d'un passage. Une mention numérique est permise.
L'Explorer Internet 5.x n'interprète pas encore cette mention.
|
|
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é overflow (Passage d'élément au contenu trop important).
<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> |
Avec max-height: vous pouvez spécifier la hauteur maximale d'un passage. Une mention numérique est permise.
L'Explorer Internet5.x n'interprète pas encore cette mention.
|
|
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.
<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> |
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.
Netscape 4.x ne connaît pas cette propriété. L' Explorer Internet ne soutient pas la mention overflow:visible.
|
|
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é 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.
<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ître bien différent de la normale ...</p> </body></html> |
Avec direction: vous pouvez fixer le sens d'écriture. Les mentions suivantes sont possibles:
ltr = de gauche à droite.
rtl = de droite à gauche.
Les navigateurs de la 4ème génération n'interprètent pas encore cette propriété.
|
|
float (Cours du texte)Vous pouvez spécifier pour un passage ou un élément que les éléments qui le suivent l'entourent.
<html><head><title>float</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="width:400px; float:left; color:red">Titre différent cette fois</h1> <p style="font-size:120%">Un titre ne doit pas toujours créer un bloc monotone qui s'étire sur toute la largeur de la fenêtre d'affichage. Il peut aussi aussi de temps en temps être placé sur le côté du texte, avec le texte qui entoure le titre. C'est une façon différente de mettre en forme des textes plus longs.</p> </body></html> |
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).
Quand vous définissez pour un élément une mention sur float (Cours du texte) vous devez définir aussi une mention sur width (Largeur).
|
|
clear (Suite pour le cours du texte)Si vous définissez le 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.
<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"> 1 </span></div> <p style="font-size:120%">Dans ce chapitre, Quelques notions sont exposées</p> <p style="clear:left">Ensuite, nous entrerons dans le vif du sujet: ...</p> </body></html> |
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.
|
|
z-index (Position de la couche en cas de superposition)Cette mention est appropriée en relation avec plusieurs mentions sur le 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é.
<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> |
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é.
|
|
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 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.
<html><head><title>display</title> </head><body bgcolor="FFFFFF" text="#000000"> <h1 style="display:inline">Je suis un élément incorporé</h1> <p style="display:inline">Ce texte le prouve!</p> <h1 id="cache" style="display:none">Je suis un élément de bloc mais ne suis pas affiché</h1> <p>Et ce texte fait comme si de rien n'était!</p> </body></html> |
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 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).
<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>
|
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.
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.
|
|
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 HTML dynamique vous pouvez ainsi afficher un élément ultérieurement ou le cacher à nouveau.
<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>
|
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.
|
|
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.
<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> |
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.
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.
|
| |
 |
Mises en page pour modes d'impression
|
 |
Pseudo-formats
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
