CATALOGUE Code & Data Formation Dreamweaver Apprendre Dreamweaver CS5 Types de Positionnement CSS : Flottant, Absolu et Relatif

Types de Positionnement CSS : Flottant, Absolu et Relatif

Le positionnement des blocs avec Tuto Dreamweaver CS5
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Dreamweaver CS5
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

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

DescriptionProgrammeAvis

59,90€ Je commande

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

Les objectifs de cette vidéo sont de :

1. Comprendre les différentes méthodes de positionnement CSS.
2. Savoir appliquer les propriétés de float, position absolue et position relative.
3. Apprendre à manipuler les éléments pour obtenir le layout désiré.

Cette leçon explore les différentes méthodes de positionnement CSS : flottant à gauche, positionnement absolu et positionnement relatif, à travers des exemples pratiques et explicatifs.

Dans cette leçon, nous verrons comment positionner des éléments HTML à l'aide des techniques de float left, de positionnement absolu et de positionnement relatif. Nous commencerons par la création de trois éléments de type div avec des styles de fond et de taille distincts pour illustrer chaque méthode de positionnement. Nous discuterons de la manière dont ces éléments se comportent dans le flux et comment changer leur disposition en utilisant les différentes propriétés de positionnement CSS.

En appliquant des propriétés comme float: left aux éléments, vous verrez comment ils se comportement à gauche de leur conteneur parent et comment aligner plusieurs éléments sur une même ligne. Ensuite, nous aborderons le positionnement absolu qui permet de placer un élément par rapport à son parent positionné (ici body ou un élément div nommé contenu). Enfin, nous couvrirons le positionnement relatif où un élément est positionné par rapport à son emplacement normal dans le flux du document sans affecter la position des autres éléments.

Cette démonstration met en évidence la flexibilité du positionnement CSS et permet de mieux comprendre comment ajuster l'agencement des éléments sur une page web en fonction des besoins de conception.

Voir plus
Questions réponses
Quel est l'effet de la propriété CSS 'float: left' sur un élément div ?
La propriété 'float: left' place l'élément div à gauche de son conteneur parent, permettant aux éléments suivants de se placer à côté de lui s'il y a suffisamment de place.
Comment un élément en 'position: absolute' se positionne-t-il?
Un élément en 'position: absolute' se place par rapport à son parent contenant le plus proche qui est lui-même positionné. En l'absence de parent positionné, il se place par rapport à l'élément .
Quelle est la différence entre 'position: relative' et 'position: absolute'?
'Position: relative' place un élément par rapport à sa position dans le flux normal du document tandis que 'position: absolute' le place par rapport à son parent positionné, en le retirant du flux normal.

Programme détaillé