SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style SELFHTML/Quickbar
Feuilles de style CSS
Mentions de feuilles de style
À 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 
Layer.
À l'inverse des layer 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...
 
|
Mode de positionnement (position)Vous pouvez spécifier pour un passage, s'il doit être positionné de façon relative ou absolue.
<div style="position:absolute; top:100px; left:45px; width:300px">contenu</div> |
Avec position: vous pouvez déterminer le mode de positionnement. Les mentions suivantes sont permises:
absolute = Positionnement absolu, mesuré à partir du bord de la
fenêtre mais pouvant défiler.
fixed = Positionnement absolu, mesuré à partir du bord de la
fenêtre, reste fixe lors du défilement.
relative = Positionnement relatif mesuré à partir de l'élément
précédent.
static = Pas de positionnement spécial, flux normal de l'élément (réglage
par défaut).
Les mentions absolute, fixed et relative
interrompent le flux normal des éléments. (relative est quelque peu
différent de "normal", l'état normal étant static).
En particulier la conduite des mentions absolute et relative
est un peu déconcertante au début, mais c'est justement dans l'interruption du
flux normal de l'élément que réside son sens. Vous pouvez définir les
espaces relatifs au flux normal de l'élément à la place avec des mentions sur
les 
espaces,
marges et alignement.
La différence entre absolute et relative réside en ce
qu' une mention absolue se réfère au bord de la fenêtre et qu'une mention
relative par contre se réfère à l'élément placé avant. La différence
entre absolute et fixed réside en ce qu'un positionnement
absolu ne concerne que le placement de départ d'un élément et que le
positionnement fixe par contre concerne le placement durable de l'élément dans
la fenêtre d'affichage. Des éléments positionnés avec absolute se
déplacent lors d'un défilement de l'écran. Des éléments positionnés avec fixed restent à leur place lors d'un défilement de l'écran. Avec des éléments
positionnés avec fixed des effets semblables à ceux obtenus
avec les Frames
sont possibles.
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 (top) et/ou sur la position
à partir de la gauche (left).
La mention fixed n'est interprétée ni par Netscape ni par l' Explorer Internet MS.
Ni Netscape ni l' Explorer Internet MS n'interprètent les mentions pour le positionnement absolu dans tous les repères HTML. Pour être sur, il est provisoirement judicieux de n'employer ces mentions que sur les repères HTML <div>...</div> ou <span>...</span>. Incluez simplement les autres éléments comme les paragraphes de texte, les graphiques, les tableaux, les formulaires etc. dans ce genre de repères HTML. Les éléments intérieurs adopteront alors le positionnement du passage global.
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. Cet étirement a pour raison que des éléments
positionnés de façon relative ou absolue représentent d'une certaine façon
une fenêtre d'affichage distincte et indépendante de l'écran. Si le
navigateur ignore la taille de cette fenêtre il adopte simplement la taille de
la fenêtre parente. Pour un déplacement à gauche, cela conduit alors à
l'effet décrit. Pour éviter cet effet, vous pouvez par exemple faire des
mentions sur la largeur (width)
du passage positionné de façon relative ou absolue.
|
|
Position à partir du haut (top)Cette mention est appropriée en relation avec une mention sur le positionnement (position).
Vous pouvez spécifier où doit commencer à partir du haut un élément positionné de façon relative ou
absolue.
<div style="position:relative; top:100px;"> <img src="graphique.gif"> </div> |
Avec top: vous pouvez spécifier la position à partir du haut. Une donnée
numérique est permise ou la valeur auto pour un
positionnement automatique.
|
|
Position à partir de la gauche (left)Cette mention est appropriée en relation avec une mention sur le positionnement (position).
Vous pouvez spécifier où doit commencer à partir de la gauche un élément positionné de façon relative ou
absolue.
<div style="position:relative; left:20%; top:30%;">contenu</div> |
Avec left: vous pouvez spécifier la position à partir de la
gauche. Une donnée
numérique est permise ou la valeur auto pour un
positionnement automatique.
|
|
Position à partir du bas (bottom)Cette mention est appropriée en relation avec une mention sur le positionnement (position).
Vous pouvez spécifier où doit commencer à partir du bas un élément positionné de façon relative ou
absolue.
<span style="position:absolute; bottom:100px;quot;>contenu</span> |
Avec bottom: vous pouvez spécifier la position à partir du bas. Une donnée
numérique est permise ou la valeur auto pour un
positionnement automatique.
Netscape 4.0 et l' Explorer Internet MS 4.0 ignorent encore ces mentions.
|
|
Position à partir de la droite (right)Cette mention est appropriée en relation avec une mention sur le positionnement (position).
Vous pouvez spécifier où doit commencer à partir de la droite un élément positionné de façon relative ou
absolue.
<div style="position:absolute; bottom:1cm; right:2cm;quot;>contenu</div> |
Avec right: vous pouvez spécifier la position à partir de la
droite. Une donnée
numérique est permise ou la valeur auto pour un
positionnement automatique.
Netscape 4.0 et l' Explorer Internet MS 4.0 ignorent encore ces mentions.
|
|
Largeur (width)Cette mention est appropriée en relation avec une mention sur le positionnement (position).,
mais peut aussi être employée dans du texte courant normal. Vous pouvez
spécifier quelle largeur un élément ou un passage doit avoir.
<div style="position:absolute; top:10%; left:10%; width:80%;quot;>contenu</div> |
Mit width: vous pouvez spécifier la largeur d'un passage. Une donnée
numérique est permise ou la valeur auto pour une mesure
automatique de la largeur.
|
|
Largeur minimale (min-width)Cette mention est appropriée en relation avec une mention sur le positionnement (position),
mais peut aussi être employée dans du texte courant normal. 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. La mention est en principe
identique à la mention width.
<style type="text/css">
div.liens { min-width:6cm }
</style>
|
Avec min-width: vous pouvez spécifier la largeur minimale d'un passage. Une donnée
numérique est permise.
|
|
Largeur maximale (max-width)Vous pouvez spécifier que la largeur d'un élément ou d'un passage ne doit pas dépasser une certaine valeur même si son contenu nécessite une plus grande largeur. Les contenus dépassant la largeur sont coupés.
<style type="text/css">
div.boiteinfo { max-width:40% }
</style>
|
Avec max-width: vous pouvez imposer une largeur maximale pour le
passage. Une donnée
numérique est permise.
Ni Netscape 4.0 ni l' Explorer Internet MS 4.0 n'interprètent encore cette mention.
|
|
Hauteur (height)Cette mention est appropriée en relation avec une mention sur le positionnement (position),
mais peut aussi être employée dans du texte courant normal. Vous pouvez
spécifier quelle hauteur doit avoir un élément ou un passage.
<div style="height:200pxquot;>contenu</div> |
Avec height: vous pouvez spécifier la hauteur d'un passage. Une donnée
numérique est permise ou la valeur auto pour une mesure
automatique de la hauteur.
Netscape 4.x n'interprète pas encore cette mention.
|
|
Hauteur minimale (min-height)Cette mention est appropriée en relation avec une mention sur le positionnement (position),
mais peut aussi être employée dans du texte courant normal. Vous pouvez
spécifier quelle hauteur un élément ou un passage doit avoir dans tous les
cas, même si son contenu demande moins de place. La mention est en principe
identique à la mention height.
<style type="text/css">
div.citation { min-height:2cm; vertical-align:middle; }
</style>
|
Avec min-height: vous pouvez spécifier la hauteur minimale d'un passage. Une donnée
numérique est permise.
Ni Netscape 4.0 ni l' Explorer Internet MS 4.0 n'interprètent encore cette mention.
|
|
Hauteur maximale (max-height)Cette mention est appropriée en relation avec une mention sur le positionnement (position),
mais peut aussi être employée dans du texte courant normal. Vous pouvez
spécifier pour un élément ou un passage que sa hauteur ne doit pas dépasser
une certaine valeur si possible même si son contenu demande une plus grande
hauteur.
<style type="text/css">
div.boiteinfo { max-height:3.5cm; }
</style>
|
Avec max-height: vous pouvez spécifier la hauteur maximale d'un passage. Une donnée
numérique est permise.
Ni Netscape 4.0 ni l' Explorer Internet MS 4.0 n'interprètent encore cette mention.
|
|
Passage d'élément au contenu trop important (overflow)Cette mention peut être significative si vous définissez un élément ou un passage à l'intérieur d'un autre passage. Si l'élément ou le passage intérieur est plus grand que les limites imposées à l'élément parent, vous pouvez déterminer comment ce genre de conflit doit être résolu. 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 300 pixels. Si vous notez dans ce passage une référence de graphique (<img>) pour lequel l'image a une largeur de plus de 300 pixels, vous pouvez avec la mention décrite ici régler comment le navigateur doit régler le conflit.
<div style="position:absolute; top:100px; left:50px; width:300px; max-width:300px;"> <img src="graphique.gif" width=450 height=250 style="overflow:visible"> </div> |
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 = Le passage parent sera agrandi de manière à ce que
l'élément intérieur soit visible.
hidden = L'élément sera coupé. la taille de l'élément parent
demeure inchangée.
scroll = Le navigateur WWW doit proposer des barres de défilement sans
changer la taille de l'élément parent.
auto = Le navigateur WWW doit proposer des barres de défilement
si nécessaire; la taille de l'élément parent demeure inchangée.
Si vous utilisez la mention overflow:visible, vous pouvez en outre
spécifier dans quelle direction
l'élément intérieur au contenu trop important doit dépasser dans l'élément
parent. En outre, vous pouvez limiter
un élément intérieur trop grand lui même
Ni Netscape 4.0 ni l' Explorer Internet MS 4.0 n'interprètent encore cette mention.
|
|
Direction (direction)Avec cette mention vous pouvez déterminer l'ordre des éléments à l'intérieur d'un passage. Si un élément au contenu trop important doit dépasser dans l'élément parent, vous pouvez spécifier dans quelle direction.
<style type="text/css">
div.special { direction:rtl }
</style>
|
Avec direction: vous pouvez déterminer l'ordre des éléments à l'intérieur d'un passage. Les données suivantes sont possibles:
ltr = left to right (de gauche à droite) - réglage normal.
rtl = right to left (de droite à gauche).
ltr-override = encore peu clair dans la spécification CSS 2.0.
rtl-override = encore peu clair dans la spécification CSS 2.0.
|
|
Cours du texte (float)Vous pouvez spécifier pour un passage ou un élément que le texte qui le suit l'entoure.
<div style="float:left; width:100px;">petit texte</div> <p>long texte qui passe à droite du petit texte</p> <div style="float:right; width:2cm;">petit texte</div> <p>long texte qui passe à gauche du petit texte </p> |
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).
Afin que la mention fonctionne avec Netscape et avec l' Explorer Internet, vous devez au moins encore noter une mention pour width: comme dans l'exemple ci-dessus.
|
|
Suite pour le cours du texte (clear)Si vous définissez le 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.
<div style="float:left; width:300px;"> <img src="graphique.gif"> </div> <p>texte qui passe à droite du graphique</p> <p style="clear:left">nouveau texte sous le graphique</p> |
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 a poursuite dessous.
both = impose dans chaque cas la poursuite dessous.
none = n'impose pas de poursuite dessous. (réglage normal).
|
|
Position de la couche en cas de superposition (z-index)Cette mention est appropriée en relation avec plusieurs mentions sur le positionnement (position),
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é.
<div style="position:absolute; top:10mm; left:10mm; z-index:1"> Ce texte vient en troisième </div> <div style="position:absolute; top:12mm; left:20mm; z-index:3"> Ce texte vient en premier </div> <div style="position:absolute; top:14mm; left:30mm; z-index:2"> Ce texte vient en premier </div> |
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.
|
|
Mode d'affichage ou plutôt non-affichage sans prendre de place (display)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.
<p id="paragraphedynamique" style="display:none">contenu</p> texte<h1 style="display:inline">titre N°1</h1> texte |
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 son propre paragraphe.
inline = impose l'affichage en texte - l'élément ne crée pas de
paragraphe distinct.
list-item = comme block, mais précédé d'une puce comme dans
une liste énumérative.
run-in = encore peu clair dans la spécification CSS 2.0.
compact = encore peu clair dans la spécification CSS 2.0.
none = L'élément n'est pas affiché et aucune place ne lui sera
réservée.
Netscape 4.0 et l' Explorer Internet MS 4.0 n'interprètent pas correctement la mention display:none. Les autres mentions ne sont interprétées qu'incomplètement ou pas du tout par les deux navigateurs dans leur version 4.x.
|
|
Affichage ou non affichage avec réservation de place (visibility)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.
<style type="text/css">
#Texte1 { position:absolute; top:100px; left:50px; width:200px; visibility:visible; }
#Texte2 { position:absolute; top:100px; left:50px; width:200px; visibility:hidden; }
#Texte3 { position:absolute; top:100px; left:50px; width:200px; visibility:hidden; }
</style>
<!-- et dans les repères <body>...</body>: -->
<div id="Texte1">C'est le Texte 1</div>
<div id="Texte2">C'est le Texte 2</div>
<div id="Texte3">C'est le Texte 3</div>
|
Avec visibility: vous pouvez spécifier si un élément est
affiché au début ou non. Dans l'exemple ci-dessus le texte 1 sera affiché
dans un premier temps. À l'aide de HTML
dynamique vous pouvez ensuite remplacer ce texte par le texte 2
de façon dynamique en cliquant par exemple puis par le texte 3. 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).
|
|
Limiter le domaine d'affichage (clip)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.
<div style="clip:rect(50px 120px 150px auto)">contenu</div> |
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.
|
| |
après: |
Mentions de feuilles de style: texte sur plusieurs colonnes
|
avant: |
Mentions de feuilles de style: pseudo-formats
|
SELFHTML/Quickbar
Serge François, 13405@free.fr
