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

Article
08/21/2008

Mise à jour : novembre 2007

La page Disposition de la boîte de dialogue Générateur de styles vous permet de définir les attributs de mise en page d'une feuille de style en cascade (CSS). Ces attributs déterminent comment les éléments seront positionnés dans le flux HTML. Vous pouvez appliquer ces attributs directement aux éléments HTML ou les ajouter aux règles de style CSS.

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

Ouvrez votre document HTML en mode Design du Concepteur HTML et utilisez la fenêtre Structure du document pour sélectionner un é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 Disposition dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Disposition, 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 disposition à une règle de style CSS définie dans une feuille de styles externe

Ouvrez une feuille de style externe existante et placez le point d'insertion entre les accolades ({ }) qui suivent le sélecteur de la règle de style souhaitée.
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 Disposition dans le volet gauche de la boîte de dialogue Générateur de styles.

La boîte de dialogue Disposition, 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 compris dans l'élément <BODY> d'une page Web (ici, également dans l'élément <BODY> lui-même) en assignant le sélecteur de style CSS à l'élément en tant que propriété CLASS.

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

Tâches

Éléments d'interface

Contrôle de flux

Ce groupe d'attributs contrôle le flux des éléments dans le document HTML. Les zones d'aperçu adjacentes aux sélecteurs Contrôle de flux sont mises à jour au fur et à mesure que vous sélectionnez des options. Les attributs suivants peuvent influer sur l'apparence et les performances lorsque les pages s'affichent dans les navigateurs.

Visibilité
Définit la valeur de la propriété visibilité : masquée (non visible) ou visible. Sélectionnez <Non défini> (aucune option choisie), Masqué ou Visible. Par exemple, si vous choisissez Masqué, le balisage CSS suivant est inséré :

VISIBILITY:hidden

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Remarque :
Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Affichage
Définit les valeurs de l'attribut DISPLAY pour un élément. Vous pouvez spécifier si un élément est affiché et si un élément affiché apparaît comme un élément de bloc ou à l'intérieur du flux linéaire. Sélectionnez <Non défini> (aucune option choisie), Ne pas afficher, En tant qu'élément de bloc ou En tant qu'élément de flux entrant. Un élément en bloc commence normalement une nouvelle ligne et ne peut pas avoir une taille supérieure à celle de son conteneur parent. Par exemple, l'élément <H1> d'un élément <BODY> et auquel est appliqué un style ne peut pas être plus grand que l'élément <BODY> conteneur. Normalement, un élément en ligne ne commence pas une nouvelle ligne et il est dimensionné en fonction de la hauteur et de la largeur de son contenu. Par exemple, si vous choisissez En tant qu'élément de bloc, le balisage CSS suivant est inséré :

DISPLAY:block

Remarque :
Lorsque la valeur de l'attribut est <Non défini>, aucun code n'est ajouté au style.

Remarque :
Les propriétés Visibility et Display sont liées, mais non identiques. Le fait de masquer un élément ne réduit pas le temps nécessaire à un navigateur pour afficher une page. En revanche, un navigateur ignore un élément qui n'apparaît pas. Par conséquent, une page incluant des éléments qui n'apparaissent pas s'affichera plus rapidement dans un navigateur que si ces éléments étaient seulement masqués. En outre, lorsque vous habillez un élément masqué avec du texte, ce texte semble épouser les contours d'un espace vide. Tenez compte de ces facteurs lorsque vous sélectionnez les propriétés de présentation.

Les propriétés Visibility et Display sont liées, mais non identiques. Le fait de masquer un élément ne réduit pas le temps nécessaire à un navigateur pour afficher une page. En revanche, un navigateur ignore un élément qui n'apparaît pas. Par conséquent, une page incluant des éléments qui n'apparaissent pas s'affichera plus rapidement dans un navigateur que si ces éléments étaient seulement masqués. En outre, lorsque vous habillez un élément masqué avec du texte, ce texte semble épouser les contours d'un espace vide. Tenez compte de ces facteurs lorsque vous sélectionnez les propriétés de présentation.

Autoriser le flux de texte
Définit les attributs qui déterminent la manière dont le texte circule autour d'un élément. Sélectionnez <Non défini> (aucune option choisie), Pas de texte sur les côtés, À droite ou À gauche. Par exemple, si vous choisissez À droite, le balisage CSS suivant est inséré :

FLOAT:left

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.
Autoriser les objets flottants
Définit les attributs qui contrôlent la manière dont les objets peuvent flotter sur une page. Sélectionnez <Non défini> (aucune option choisie), Sur l'un ou l'autre côté (les objets peuvent flotter sur le côté gauche ou droit de la page), Uniquement à droite (les objets ne peuvent flotter que sur le côté droit de la page), Uniquement à gauche (les objets ne peuvent flotter que sur le côté gauche de la page) ou Ne pas autoriser (les objets ne peuvent pas flotter sur la page). Par exemple, si vous choisissez Uniquement à droite, le balisage CSS suivant est inséré :

CLEAR:left

Remarque :

Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Remarque :
Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Remarque :
Lorsque l'attribut est <Non défini>, aucun code n'est ajouté au style.

Sommaire

Dépassement de capacité
Définit les attributs qui contrôlent le comportement d'un élément lorsque la hauteur et la largeur qui ont été définies pour ce dernier ne permettent pas de loger l'intégralité de son contenu. Sélectionnez <Non défini> (aucune option choisie), Utiliser les barres de défilement si nécessaire (les barres de défilement apparaissent si le contenu déborde de la taille définie pour l'élément) Toujours utiliser les barres de défilement (les barres de défilement apparaissent toujours), Le contenu n'est pas tronqué (l'élément se développe pour accueillir le contenu) Le contenu est tronqué (le contenu qui déborde de la taille définie pour l'élément n'apparaît pas). Par exemple, si vous choisissez Le contenu n'est pas tronqué,, le balisage CSS suivant est inséré :

OVERFLOW:visible

Remarque :

Lorsque la valeur de l'attribut est <Non défini>, aucun code n'est ajouté au style.

Découpage

Définit les attributs qui déterminent la partie rectangulaire d'un élément à afficher. Par exemple, vous pouvez afficher uniquement l'angle supérieur droit d'un élément. Entrez des valeurs dans un ou plusieurs des champs (Haut, Bas, Gauche ou Droit) et sélectionnez une option d'unité : px (valeur par défaut), pt, pc, mm, cm, in, em, ex ou %.

Le découpage n'est possible que sur les éléments qui ont une position absolue. Les valeurs spécifiées se rapportent aux limites d'un élément. Par exemple, si vous définissez pour Top une valeur de découpage égale à 40px, la partie de l'élément comprise entre 0px (sommet de l'élément) et 40px ne sera pas visible. De même, si vous entrez 50 dans les champs Haut et Bas, puis acceptez l'option d'unité par défaut, le balisage CSS suivant est inséré :

CLIP: rect(50px auto 50px auto)

Remarque :
Si vous assignez des valeurs à moins de quatre champs de découpage, la valeur auto est assignée aux autres champs et les limites non assignées ne sont pas tronquées.

Impression des sauts de page

Les attributs suivants contrôlent l'occurrence des sauts de page à l'intérieur des éléments qui utilisent le style.

Avant
Sélectionnez <Non défini> (aucune option choisie), Auto ou Forcer un saut de page. Par exemple, si vous choisissez Forcer un saut de page, le balisage CSS suivant est inséré :

PAGE-BREAK-BEFORE:always
Après
Sélectionnez <Non défini> (aucune option choisie), Auto ou Forcer un saut de page. Par exemple, si vous choisissez Forcer un saut de page, le balisage CSS suivant est inséré :

PAGE-BREAK-AFTER:always