Médiaforma

All posts tagged position

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à afficher une bordure autour d’une image lorsque le pointeur de la souris la survole. Malheureusement, l’image est décalée vers la droite et vers le bas à l’affichage des bordures. Elle est décalée en sens inverse, c’est-à-dire vers la gauche et vers le haut lors de la disparition des bordures.

Pour mieux comprendre ce qu’il se passe, nous allons augmenter l’épaisseur de la bordure. Pour cela, il faut modifier la première valeur de la propriété border. Nous allons par exemple choisir une bordure de 20 pixels. Comme vous le voyez, l’ampleur du décalage est liée à l’épaisseur de la bordure :

Pour éliminer ce problème, il faudrait que l’image occupe une position fixe, qu’elle comporte une bordure ou non. Pour cela, nous allons utiliser les propriétés CSS position, top et left. Tout va se passer dans le code CSS.

L’image a pour identifiant montagne. Nous commençons par définir un style #montagne pour positionner l’image dans la fenêtre du navigateur. Le coin supérieur gauche de la zone d’affichage a pour coordonnées 0,0. La première coordonnée représente l’abscisse, c’est-à-dire le décalage horizontal et la deuxième l’ordonnée, c’est-à-dire le décalage vertical.

Pour indiquer que l’image doit se trouver à une position bien précise, commencez par affecter la valeur absolute à la propriété position. Définissez ensuite les coordonnées du coin supérieur gauche de l’image dans les propriétés top et left. Ici, l’image sera située à 30 pixels du bord supérieur et à 30 pixels du bord gauche.

Affichons le résultat dans un navigateur. Malheureusement, rien n’a changé, si ce n’est que l’image se trouve désormais à 30 pixels des bords supérieur et gauche de la zone d’affichage.

Pour que l’image ne soit plus décalée, nous allons agir sur le style #montagne:hover. Dans cet exemple, la bordure a une épaisseur de 20 pixels. Cette épaisseur étant prise en compte dans la position de l’image, nous allons la soustraire des propriétés top et left. L’image se trouve toujours à une position absolue, mais cette fois-ci à 10 pixels des bords supérieur et gauche.

Affichons le résultat dans Internet Explorer. L’image ne se décale plus lors de l’affichage et de la disparition des pointillés.


Vous utiliserez les méthodes offset().left et offset().top pour connaître/modifier la position d’un élément sur l’écran et les méthodes width() et height() pour connaître/modifier la largeur et la hauteur d’un élément par rapport au coin supérieur gauche de l’écran.

Exercice 1

Entrez le code suivant dans NotePad++ et sauvegardez-le sous le nom taille-et-position.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille et position des éléments sur la page</title>
    <style>
      #boite {
        position: absolute;
        top: 40px;
        left: 50px;
        width:300px;
        height: 200px;
        background-color: yellow;
        border: solid;
        border-width: 2px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="boite"></div>
    <p id="status"></p>
    <script>
      $(function() {
        //Insérer le code jQuery ici
      });
    </script>
  </body>
</html>

Ajoutez les instructions jQuery nécessaires pour afficher les dimensions et la position de l’élément #boite dans l’élément #status.

 

Solution

var x = $('#boite').offset().left;
var y = $('#boite').offset().top;
var l = $('#boite').width();
var h = $('#boite').height();
$('#status').text('Dimensions : '+l+'x'+h+' px. Position : à '+y+'px du haut et à '+x+' px de la gauche.');

 

Exercice 2

Ajouter deux éléments button au DOM et définir le code jQuery pour que :

  1. Le premier bouton positionne l’élément #boite à 200 pixels du bord gauche et 120 pixels du bord supérieur
  2. Le deuxième bouton redimensionne l’élément #boite à 150×30 pixels

 

Solution

$('#position').on('click',function(){
  $('#boite').offset({top:120,left:200});
});
$('#taille').on('click',function(){
  $('#boite').width('150px').height('30px');
});

Pour définir la taille et/ou la position du Dock, aussi appelée interface graphique, cliquez sur l’icône Préférences Système dans le Dock, puis sur l’icône Dock dans la fenêtre Préférences Système.

Définissez la taille du Dock avec le curseur Taille. Lorsque la case Agrandissement est cochée, vous pouvez définir l’amplitude de l’agrandissement lorsque le pointeur de la souris survole les icônes du Dock. Pour choisir la position du Dock, cochez une des trois cases à la suite du libellé Position. La liste Type de réduction définit l’effet utilisé pour réduire les fenêtres dans le Dock. Deux choix vous sont proposés : l’effet génie et l’effet d’échelle. Le deuxième est légèrement plus rapide que le premier. À vous de trouver celui qui convient le mieux à votre utilisation de l’ordinateur.

Les cases à cocher qui se trouvent dans la partie inférieure de la boîte de dialogue se comprennent d’elles-mêmes. À titre d’exemple, vous vous cocherez la case Animer les applications lors de leur ouverture pour faire sursauter l’icône des applications lors de leur ouverture. Ou encore, vous cocherez la case Masquer/afficher automatiquement le Dock pour gagner un peu de place en dissimulant le Dock lorsqu’il n’est pas utilisé.