| |||||||||||||||||||||
|
Positionnement des éléments dans une page webIl est possible de contrôler avec précision la position de tout les éléments d'interface à l'aide des feuilles de style en cascade et des propriétés de positionnement. Le code VBScript et JavaScript font appel à ces propriétés. Le positionnement des éléments à l'aide de la feuille de style en cascade offre la meuilleure garantie que les deux principaux navigateurs puissent aficher correctement le contenu de la page Web. Propriétés de positionnementLa norme CSS1 et la famille de navigateurs Internet Explorer version 4 et suivantes, établissent un certain nombre de propriétés permettant de positionner un élément n'importe où dans la page web. Vous n'avez qu'à fournir les coordonnées x et y du coin supérieur gauche de l'élément. De plus, vous pouvez rendre un élément visible ou invisible et même faire basculer l'état de visibilité de l'élément en fonction des actions de l'utilisateur ( voir balise DIV et SPAN ). Pour ce faire vous devez faire appel à quelques propriétés conçues de manière à contrôler avec précision la position de l'élément affiché.Propriétés de positionnement prises en charge par IE version 4 et suivant :
Les propriétés TOP, Left, Width, HeightCes quatre propriétés contrôlent la position de l'élément en précisant les coordonnées de son coin supérieur gauche ainsi que de sa hauteur.Les propriétés Visibility et DisplayLa propriété Visibility permet de rendre un élément visible ou invisible. Elle accept les valeurs suivantes :
La valeur utilisé par défaut est inherit par laquelle l'élément hérite de la propriété Visibility du document parent. Il est parfois nécessaire de masquer un élément jusqu'à l'exécution d'une action précise. Différence : Les propriétés Visibility et Display diffèrent sur un point. Bien que l'élément ait été rendu invisible par la propriété Visibility, l'espace qu'il doit occuper apparaît vide à l'écran. . Si la valeur 'none' est affecté à la propriété Display, cette espace est toujours réservé à l'élément, mais est occupé par le reste du contenu de la page jusqu'à ce que l'élément masqué le récupère. Cliquez ici pour voir un exemple de la propriété Display L'AXE Z et Z-indexZ-index permets au développeur de dire dans quel ordre le flow de code sera exécuté pour permettre la superposition des objets.Il est maintenant possible d'afficher les éléments d'une page Web autrement que sur un seul plan. Les version 4 et suivantes d'Internet Explorer autorise la superposition des éléments selon l'AXE Z pour créer un effet d'empilage artificiel. Une telle superposition à deux effets sur la visibilité. D'une part, si l'arrière-plan d'un élément est uniforme et tranparent, les éléments qui se trouvent derrière ne sont pas visibles tant que l'élément du dessus n'est pas supprimé ou masqué. Si l'élément en avant plan est une image dont l'arrière-plan est transparent, l'utilisateur risque voir ce qui ce trouve derrière. Le positionnement des éléments sur l'AXE Z se contrôle mieux avec les propriétés Position (valeur absolue) et Visibility. Si vous placez un nombre quelconque d'images dans une page et donnez à chacune des coordonnées Absolues identiques, vous pouvez les rendre visibles par l'intermédiaire d'un action de l'utilisateur. Il vous suffit de définir la propriété Visibility de chaque image en conséquence. Vous pouvez aussi faire une superposition de texte sur une image. C'est l'attribut Z-INDEX qui établit l'ordre de superposition des différents élément. De nombreuse pages Web font appel à de petites images pour créer un menu. Une ligne de texte est affichée sur chaque image pour en identifier le contenu. Il est très dificile de positionner du texte sur une image sans utiliser l'AXE Z. Il est par contre très facile de positionner le texte et les images à l'aide de leurs coordonnées absolues. Voici une petit exemple dans la section Style: Voici un Exemple de positionnement relatif d'éléments sur l'AXE Z [ TOP ] Positionnement d'un objet dans un documentLa propriété de Position permet de préciser le type de position utilisé. Elle accepte les valeurs absolute ou relative. Dans le premier cas, les propriétés Left et TOP reçoivent chacune une valeur entière. Ces deux valeurs correspondent aux coordonnées du coin supérieur gauche de l'élément positionné. Dans le second cas, la position de l'élément est fonction des propriété de positionnement de son élément parent. Un tel élément peut donc chevaucher un autre élément positionné de manière absolue. Le positionnement relatif tien également compte du flot normal de code HTML ( l'ordre dans lequel il est écris ) Cela signifie donc que la position relative d'un élément est toujours fonction de celle de l'élément ajouté avant lui dans le code HTML.L'exemple ci-dessous contient les instruction permettant de positionner précisément un bloc de texte aux aux coordonnées 50 px et 150 px. Ce code insère également une image à 15 pixels à droite de la position du bloc de texte. Les propriétés et les valeurs de positionnement peuvent être définies ailleurs que dans chaque balise <DIV> ou élément HTML individuel. Vous pouvez en effet les inclure dans la feuille de style. Pour ce faire, vous devez donner à l'élément un group d'élément une valeur ID qui sert à identifier dan sla feuille de style. Le segment de code précédent peut alors être réécrit comme suit: Le symbole dièse ( # ) identifie un élément référencé par sa valeur ID et non une balise. Cette forme de syntaxe s'avère particulièrement utile pour appliquer une mise en forme distincte à certains éléments d'une même classe ou blocs de texte d'une seul balise <DIV> [ TOP ] |
||||||||||||||||||||
