CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Techniques de Positionnement CSS Avancées

Techniques de Positionnement CSS Avancées

Le margin négatif
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription

89,00€ Je commande

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

DescriptionProgrammeAvis
4,5
89,00€ Je commande

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

Les objectifs de cette vidéo sont d'enseigner l'utilisation des margins négatifs pour le positionnement des éléments et de démontrer comment cette technique peut être plus avantageuse que la position relative ou absolue dans certains cas.

Cette leçon explique comment utiliser les margins négatifs pour positionner des éléments en CSS.

Cette leçon présente une méthode alternative de positionnement d'éléments en CSS en utilisant des margins négatifs, sans recourir à la position absolue ou relative. Nous allons pas à pas construire un exemple concret en modifiant notre fichier index.html et en appliquant des styles spécifiques via CSS. Principalement, nous aborderons comment centrer un texte à l'intérieur d'une div, styliser un h2 avec des couleurs de fond, du padding et du texte en blanc, tout en faisant en sorte que cet élément prenne la taille de son contenu textuel grâce à la propriété inline-block. Enfin, nous appliquerons un margin-top négatif pour ajuster la position de l'élément sans créer de décalage dans le flux du document.

Voir plus
Questions réponses
Quels sont les avantages d'utiliser un margin négatif par rapport à une position relative?
Utiliser un margin négatif permet de déplacer des éléments sans créer de décalage dans le flux de la page, contrairement à la position relative qui laisse un espace vide à l'emplacement d'origine de l'élément.
Comment centrer un texte à l'intérieur d'une <code>div</code> utilisant du CSS?
Pour centrer un texte à l'intérieur d'une div, vous pouvez utiliser la propriété CSS text-align: center au niveau du parent de l'élément que vous souhaitez centrer.
Pourquoi utiliser la propriété <code>inline-block</code> pour un <code>h2</code>?
Utiliser la propriété inline-block pour un h2 permet à l'élément de s'adapter à la taille de son contenu tout en acceptant les propriétés de padding et margin.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !