Médiaforma

Positionner un objet avec des coordonnées absolues

Print Friendly

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 avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Thanks a lot for sharing this with all of us you really
know what you are talking about! Bookmarked.
Please also talk over with my site =). We can have a hyperlink alternate agreement between us

Leave a Reply