Position, boîte de dialogue Générateur de styles

Article
08/21/2008

Mise à jour : novembre 2007

La page Position de la boîte de dialogue Générateur de styles vous permet de définir les attributs de positionnement d'une feuille de style en cascade (CSS). Vous pouvez appliquer ces attributs directement aux éléments HTML ou les ajouter aux règles de style CSS.

Pour appliquer des attributs de positionnement directement aux éléments HTML de votre page

Ouvrez votre document HTML en mode Design dans le Concepteur HTML et sélectionnez l'élément à mettre en forme.
Cliquez sur Style dans le menu Format pour ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez Position dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Position, Générateur de styles apparaît dans le volet droit.

Si vous appliquez des styles aux éléments sélectionnés en mode Design, les attributs de style CSS sont insérés en ligne dans le code HTML de ces éléments. Passez en mode HTML afin de vérifier les nouveaux attributs de style qui ont été insérés.

Pour ajouter des attributs de positionnement à une règle de style CSS définie dans une feuille de style externe

Ouvrez une feuille de style externe existante et placez le point d'insertion entre les accolades ({ }) qui suivent le sélecteur du style souhaité.
Cliquez sur Générer un style dans le menu Styles pour ouvrir la boîte de dialogue Générateur de styles.
Sélectionnez Position dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Position, Générateur de styles apparaît dans le volet droit.

Remarque :
Le menu Styles apparaît lorsque vous ouvrez une feuille de style CSS externe pour la modifier. Dans le menu Styles, l'option Générer un style devient disponible lorsque vous placez le point d'insertion entre les accolades qui suivent le sélecteur d'une règle de style.

Une classe de style CSS définie dans une feuille de style externe peut être appliquée à un élément au sein de l'élément <BODY> d'une page Web en affectant le sélecteur de style CSS comme propriété CLASS de l'élément.

Les options disponibles dans la page Position de la boîte de dialogue Générateur de styles sont les suivantes.

Tâches

Éléments d'interface

Mode de positionnement

Définit le mode qui détermine quels champs de positionnement deviennent disponibles. Sélectionnez l'une des options suivantes de la liste déroulante.

<Non défini>
Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.
Position dans le flux normal
Ne modifie pas la position de l'élément ; il est possible de spécifier la hauteur et la largeur. Si vous choisissez Position dans le flux normal, le balisage CSS suivant est inséré :

POSITION:static

Remarque :

La zone d'aperçu adjacente au sélecteur Mode de positionnement est mise à jour en fonction du mode sélectionné.
Offset à partir du flux normal
Vous permet de spécifier les positions supérieure et gauche d'un élément par rapport à sa position dans le flux normal ; il est possible de spécifier la hauteur et la largeur. Le flux normal d'un élément désigne sa position avant l'application du style. Si vous choisissez Offset à partir du flux normal, le balisage CSS suivant est inséré :

POSITION:relative
Positionner de façon absolue
Vous permet de spécifier la position supérieure absolue, la position gauche absolue, Z-index, la hauteur et la largeur d'un élément. En général, vous attribuerez une position absolue aux éléments que vous souhaitez fixer sur une position spécifique. Par exemple, vous pouvez positionner absolument un logo pour éviter qu'il ne se déplace lorsque vous ajoutez ou modifiez d'autres éléments. Si vous choisissez Positionner de façon absolue, le balisage CSS suivant est inséré :

POSITION:absolute

Remarque :
La zone d'aperçu adjacente au sélecteur Mode de positionnement est mise à jour en fonction du mode sélectionné.

Si vous sélectionnez un mode de positionnement, les options suivantes sont disponibles :

Haut
Définit la position supérieure d'un élément, soit en tant que valeur absolue soit en tant que valeur relative définie par rapport à sa position dans le flux normal. Entrez une valeur et choisissez une option d'unité (px, pt, pc, mm, cm, in, em, ex, ou %). L'option d'unité par défaut est px. Par exemple, si vous tapez 5, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

TOP:5px

Remarque :

Cette option est disponible lorsque vous sélectionnez Offset par rapport au flux normal dans la liste Mode de positionnement.
Gauche
Définit la position gauche d'un élément, soit en tant que valeur absolue soit en tant que valeur relative définie par rapport à sa position dans le flux normal. Entrez une valeur et choisissez une option d'unité (px, pt, pc, mm, cm, in, em, ex, ou %). L'option d'unité par défaut est px. Par exemple, si vous tapez 5, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

LEFT:5px

Remarque :

Cette option est disponible lorsque vous sélectionnez Offset par rapport au flux normal dans la liste Mode de positionnement.
Hauteur
Définit la hauteur d'un élément. Entrez une valeur et choisissez une option d'unité (px, pt, pc, mm, cm, in, em, ex, ou %). L'option d'unité par défaut est px. Par exemple, si vous tapez 5, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

HEIGHT:5px
Largeur
Définit la largeur d'un élément. Entrez une valeur et choisissez une option d'unité (px, pt, pc, mm, cm, in, em, ex, ou %). L'option d'unité par défaut est px. Par exemple, si vous tapez 5, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

WIDTH:5px

Remarque :
Cette option est disponible lorsque vous sélectionnez Offset par rapport au flux normal dans la liste Mode de positionnement.

Remarque :
Cette option est disponible lorsque vous sélectionnez Offset par rapport au flux normal dans la liste Mode de positionnement.

Z-Index
Définit l'ordre de plan d'un élément. L'ordre de plan contrôle l'affichage des éléments superposés ; les éléments auxquels correspondent les valeurs les plus grandes selon cet ordre sont affichés devant les autres. Pour déplacer l'élément vers le haut dans l'ordre de plan, entrez un nombre positif pour produire un résultat semblable à ce qui suit :

Z-INDEX:99

Remarque :
Pour déplacer l'élément vers le bas dans l'ordre de plan, entrez un nombre plus petit ou négatif.

Remarque :
Z-Index et la position sont liés. Si vous avez entré des valeurs de position qui provoquent la superposition d'éléments, vous pouvez contrôler l'ordre de superposition en assignant des valeurs Z-Index appropriées. Vous assignerez la valeur Z-Index la plus grande à l'élément que vous voulez faire apparaître par-dessus l'autre.