Positionner des blocs HTML à l'écran
Type de positionnement : position
On distingue 4 types de positionnements :
-
absolu (absolute) : la position du bloc est définie par rapport au coin supérieur gauche de la page
-
fixe (fixed) : tout comme avec “ absolu ”, on définit la position initiale du bloc par rapport au coin supérieur gauche de la page, à la différence que le bloc restera fixe à l’écran lorsque les internautes utiliseront l'ascenseur pour parcourir la page
-
relatif (relative) : ce positionnement permet de “ décaler ” le bloc par rapport à sa position normale dans la page
-
statique (static) : c’est le positionnement normal, par défaut, qui respecte l’ordre d’apparition des blocs dans le code source
Directement dans le CSS, vous pouvez indiquez vos préférences de positionnement d’un bloc :
position: absolute;
Emplacement par rapport aux bords de l'écran : top, bottom, left et right
Si vous avez choisi de positionner un bloc en absolu, fixe ou relatif, vous pouvez indiquer sa position par rapport au bords de l'écran avec 4 paramètres CSS : top, bottom, left et right. Spécifiez une valeur en px, mm, em, %...
Par exemple, en CSS, pour positionner un bloc à 30px du haut de la page, vous utiliserez le code :
position:absolute;
top: 30px;
Visibilité d'une balise : visibility
Nous avons vu que la propriété display permettait de transformer une balise inline en block - et inversement - ou de masquer un bloc (none). Cependant, avec cette propriété, un bloc “ masqué ” disparaît complètement de l’écran.
La propriété visibility permet au contraire de masquer le contenu d'un bloc, tout en laissant à la place un espace vide, de la taille qu'aurait occupé le bloc s'il avait été visible. Pour cela, on utilise l'attribut hidden.
Pour qu’un bloc soit normalement visible à l’écran, on utilise visible. C’est la valeur par défaut.
Enfin, le troisième attribut, inherit, permet à un bloc d’adopter le même comportement que le bloc qui le contient (le bloc “ parent ”).
En CSS, vous saisirez par exemple le code :
visibility: hidden;
« Altitude » d'un calque : z-index
Lorsque vous définissez un positionnement absolu pour plusieurs blocs, il se peut que certains blocs se chevauchent. Pour définir quel élément sera au-dessus des autres, utilisez la propriété z-index.
L’élément visible sera celui dont le z-index est le plus élevé. Par exemple, un bloc de z-index égal à 30 sera au dessus d’un bloc de z-index égal à 10.
En CSS, vous noterez :
z-index: 50;
Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
