Positioning Elements in Design View

Publication: mars 2016

Lorsque vous créez des pages HTML ou des pages Web ASP.NET dans le Concepteur HTML, les éléments sont disposés physiquement du haut vers le bas.  Par défaut, lorsque la page s'affiche dans le navigateur, les éléments sont rendus dans ce même ordre.  C'est ce qu'on appelle parfois la mise en page fluide.  

Vous pouvez également disposer les éléments en deux dimensions, en les positionnant avec des coordonnées horizontales et verticales n'importe où sur la page.  Cette option de disposition tire parti des options de positionnement disponibles d'un style à l'autre.  

En mode Design, vous pouvez faire glisser des éléments pour les positionner sur la page et sélectionner des éléments pour leur appliquer des options de positionnement.  En mode Design, la page affiche les éléments à l'endroit où vous les positionnez.  Vous pouvez faire glisser les éléments par leur handle d'onglet pour les repositionner.  En mode Source, vous pouvez définir des options de positionnement dans le balisage de chaque élément.  

Lorsque la page est rendue, le navigateur affiche les éléments à l'aide des informations de positionnement spécifiées.

Mise en page fluide

Si les éléments n'ont pas de propriétés de style de positionnement, ils sont disposés du haut vers le bas sur la page et de gauche à droite ou de droite à gauche, selon le paramètre de l'attribut dir de la page, de l'élément de conteneur ou du paramètre de langue du navigateur.  N'importe quel navigateur Web peut afficher des documents HTML utilisant cette mise en page.  Les éléments sont parfois repositionnés lorsque la page est redimensionnée.  

Si vous utilisez la mise en page fluide pour votre page, vous pouvez aligner des éléments à l'intérieur d'un élément table ou utiliser un élément div avec le style de positionnement ou les propriétés d'alignement du texte.  Toutefois, les éléments ne peuvent pas se chevaucher.  Les éléments peuvent se déplacer lorsque la page est redimensionnée, selon que vous utilisez des unités absolues ou des pourcentages pour les largeurs de la table et des cellules.  

Positionnement en deux dimensions

Vous pouvez appliquer des options de positionnement aux éléments, ce qui vous permet de placer ces éléments à des emplacements précis sur la page.

Vous pouvez également spécifier des options de positionnement pour tous les nouveaux éléments ajoutés à la page.

L'outil de développement de Microsoft Visual Web Developer Web vous permet de spécifier des options de positionnement qui correspondent à celles que la spécification W3C définit pour les feuilles de style en cascade.  Les options de positionnement sont valides dans tous les navigateurs qui implémentent la norme HTML 4.0 du W3C, y compris ceux qui prennent en charge XHTML 1.1.  

Les options sont les suivantes :

• absolute

  L'élément est rendu à un emplacement sur la page défini par toute combinaison des propriétés de style left, right, top et bottom.  La position 0,0 est définie en fonction du parent de l'élément actuel.  Le parent est le premier élément de conteneur qui a des informations de positionnement.  Par exemple, si l'élément actuel est à l'intérieur d'un élément div avec des informations de positionnement, le positionnement absolu est calculé selon la position de l'élément div.  Si l'élément actuel n'a aucun élément de conteneur avec positionnement, les informations de positionnement sont calculées en fonction de l'élément body.  

• relative

  L'élément est rendu à un emplacement sur la page défini par les propriétés de style left et top.  Cette option est différente de l'option absolute dans la mesure où la position 0,0 est définie par rapport à l'emplacement de l'élément dans l'enchaînement de la page.  Un élément avec un positionnement relatif et dont les propriétés top et left ont la valeur 0 apparaît normalement dans l'enchaînement.  

  Notes

  Les éléments qui utilisent le positionnement absolu ou relatif peuvent apparaître de façon désordonnée sur la page par rapport à leur déclaration dans le balisage de la page, ce qui peut provoquer des confusions.  Par exemple, en mode Source, vous pouvez définir un bouton en tant que premier élément du balisage, mais après avoir défini son positionnement, le bouton peut apparaître en tant que dernier élément sur la page rendue ou en mode Design.  

• static

  L'élément est rendu à l'aide de la mise en page fluide, c'est-à-dire qu'il n'utilise pas le positionnement en deux dimensions.  Vous pouvez sélectionner cette option si vous souhaitez définir une option de positionnement pour un contrôle qui substitue un paramètre hérité d'un thème ou d'une feuille de style.  

Visual Web Developer offre également l'option de positionnement Not Set, qui vous permet de supprimer les informations de positionnement existantes d'un contrôle ou de contrôles pouvant être ajoutés ultérieurement.

Positionnement de texte statique ou de groupes d'éléments

Pour vous permettre de créer du texte statique flottant ou des groupes d'éléments en tant qu'unité, vous pouvez ajouter une couche à la page.  Une couche est un élément div avec des informations de positionnement incluses, ce qui vous permet de le déplacer sur la page.  Vous pouvez ensuite taper du texte ou faire glisser des éléments dans l'élément div.  Visual Web Developer inclut une commande dans le menu Format pour ajouter une couche, ou vous pouvez créer l'élément div vous-même et lui ajouter manuellement des informations de positionnement.  

Positions contraintes sur la grille

Si vous utilisez le positionnement absolu ou relatif et si vous utilisez des pixels comme base de positionnement (autrement dit, les unités des propriétés left et top sont des pixels), vous pouvez définir une option pour aligner les éléments sur une grille invisible.  Cela facilite l'alignement des éléments sur la page.  Pour plus d'informations, consultez Règle et grille, Concepteur HTML, boîte de dialogue Options.  

Superposition d'éléments

Si vous utilisez le positionnement absolu ou relatif, vous pouvez superposer des éléments ; ainsi, ils apparaîtront de cette façon dans le navigateur.  Si vous positionnez les éléments à l'aide d'une table, vous ne pouvez pas superposer des objets.  

Les éléments utilisant le positionnement absolu ou relatif peuvent inclure une propriété z-index qui spécifie l'ordre, de l'arrière vers l'avant, de l'élément dans une troisième dimension.  Si deux éléments partagent le même espace, l'élément avec la valeur de l'attribut index-Z la plus haute est affiché devant.  Si vous utilisez des commandes en mode Design pour définir le positionnement, la propriété z-index est définie automatiquement, en démarrant avec 100 pour l'élément le plus en arrière.  Si vous ajoutez des propriétés de positionnement en mode Source, vous devez ajouter la propriété z-index manuellement.  

Voir aussi

NIB: How to: Position Elements in Design View
Règle et grille, Concepteur HTML, boîte de dialogue Options
Validation, HTML, Éditeur de texte, boîte de dialogue Options