Médiaforma

All posts tagged top

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.


L’attribut HTML align permet d’aligner horizontalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :

  • left : alignement à gauche ;
  • center : alignement centré ;
  • right : alignement à droite.

L’attribut HTML valign permet d’aligner verticalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :

  • top : alignement dans la partie supérieure de la cellule ;
  • middle : alignement dans la partie centrale de la cellule ;
  • bottom : alignement dans la partie inférieure de la cellule.

Nous allons utiliser ces six valeurs sur les six cellules d’un tableau dont les cellules ont une largeur fixée à 200 pixels.

La première cellule est alignée à gauche, la deuxième est centrée et la troisième alignée à droite.

En insérant une balise <p> dans la quatrième cellule, elle contient deux lignes. L’attribut valign aligne la quatrième cellule dans la partie supérieure, la cinquième dans la partie centrale et la sixième dans la partie inférieure.


L’attribut align d’une balise <img> permet de l’aligner par rapport au texte qui l’entoure.

L’image peut être alignée :

  • à gauche avec un attribut align initialisé à left ;
  • à droite avec un attribut align initialisé à right.

En utilisant d’autres valeurs pour l’attribut align, le texte peut s’aligner verticalement sur l’image. Lorsqu’align vaut :

  • top, la partie supérieure du texte s’aligne avec la partie supérieure de l’image :
  • middle, la partie inférieure de l’image s’aligne avec le milieu de l’image ;
  • bottom, la partie inférieure du texte s’aligne avec la partie inférieure de l’image.

Voici le résultat de ce code dans Internet Explorer :