Comprendre les Propriétés Position et Float
Objectifs
Les objectifs de cette vidéo sont les suivants :
- Maîtriser les propriétés CSS position et float.
- Savoir réaliser une mise en page en deux colonnes.
- Éviter les erreurs courantes liées au positionnement relatif.
Résumé
Découvrez comment utiliser les propriétés position et float en CSS pour créer des mises en page sophistiquées.
Description
Dans ce cours, nous allons explorer plusieurs propriétés CSS essentielles pour positionner des éléments sur une page. Nous allons nous concentrer sur les propriétés position et float, et démontrer leur application pratique en réalisant une mise en page simple de deux colonnes. Ce type de mise en page est couramment utilisé dans la création de sites web, que ce soit pour les colonnes principales d'un site ou pour juxtaposer différents contenus.
Nous commencerons par examiner la propriété position, notamment l'utilisation du positionnement relatif. Nous verrons comment appliquer cette propriété à la deuxième colonne de notre mise en page et comment utiliser les propriétés top et right avec des valeurs négatives pour ajuster son positionnement. Cependant, nous identifierons aussi les limitations de cette approche.
Ensuite, nous aborderons l'utilisation plus appropriée de la propriété float pour aligner nos colonnes de manière fiable. Nous illustrerons comment grouper les éléments avec des div
et pourquoi le bon regroupement est crucial pour une mise en page CSS cohérente.
Je me perds toujours dans les marges, les paddings et les positionnements!
Beaucoup de petites astuces, bienvenues.
Gros défaut: tous les écrans sont flous, et le son est exécrable.