CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 3 Tutoriel sur le Positionnement Absolu des Images en CSS

Tutoriel sur le Positionnement Absolu des Images en CSS

Mise en page avec positionnement absolute
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 3
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :
1. Comprendre le concept de positionnement absolu en CSS.
2. Apprendre à structurer le code HTML et CSS pour positionner des images.
3. Maîtriser l'utilisation des classes et des pseudo-éléments CSS pour le style.

Découvrez comment positionner des images en absolu en utilisant le CSS à travers ce guide étape par étape.

Dans cette leçon, nous allons explorer la création d'une composition avec des images en positionnement absolu. Nous commencerons par la structure HTML de base, où nous ajouterons un lien vers un fichier CSS. Ensuite, nous placerons quatre images à l'intérieur d'une section, en utilisant des classes pour faciliter le style.

Nous apprendrons à ajouter une classe qui signifiera que le parent est en positionnement relatif. Ceci est crucial parce que les éléments en positionnement absolu se positionnent par rapport à leur parent. Ensuite, en utilisant le sélecteur nthChild, nous positionnerons chaque image différemment en utilisant les propriétés CSS top et left.

Enfin, nous verrons comment ajuster la hauteur de l'élément parent pour assurer que le contenu s'affiche correctement dans le navigateur. Cette leçon vous aidera à mieux comprendre le flux de positionnement en CSS et améliorer vos compétences en web design.

Voir plus
Questions réponses
Quel est le rôle du positionnement relatif dans ce tutoriel?
Le positionnement relatif sert de référence pour les éléments enfants positionnés en absolu. Sans cela, les enfants se positionneraient par rapport au document entier.
Pourquoi est-il important de régler la hauteur de l'élément parent?
Les éléments en positionnement absolu sont sortis du flux de la page, ce qui signifie qu'ils n'affectent pas la hauteur de leur élément parent. Régler la hauteur du parent empêche des problèmes d'affichage.
Quel sélecteur est utilisé pour cibler chaque image spécifique dans ce tutoriel?
Le sélecteur nthChild est utilisé pour cibler chaque image spécifique, permettant l'application de styles individuels à chacune d'elles.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
Cicine
Il y a 1 an
Dans la séquence slide auto, pas d'explication sur le 12% du slider auto; quelle est l'origine de ce chiffre? pas d'explication me bloque. Je suis obligée d'aller voir une autre plateforme qui présente le slide auto.
Dommage.