CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Mise en page web avec la méthode du float en CSS

Mise en page web avec la méthode du float en CSS

Positionnement des éléments en float
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 :
- Comprendre la méthode du float en CSS
- Apprendre à résoudre les problèmes de mise en page liés au float
- Savoir utiliser le clear et l'overflow pour gérer les éléments flottants

Découvrez l'ancienne méthode de mise en page des sites web utilisant le float en CSS, indispensable pour comprendre certains anciens sites web.

Dans cette leçon, nous explorerons la mise en page des sites web à l'aide de la méthode du float en CSS. Cette technique, bien que moins couramment utilisée aujourd'hui, reste essentielle pour maintenir et comprendre des sites plus anciens. Nous commencerons par préparer une section avec trois articles comprenant chacun un titre, une image et un lien. L'objectif est de positionner ces articles côte à côte en les faisant flotter à gauche. Nous verrons pourquoi le footer remonte lorsqu'on utilise le float, et comment le clear boss ou l'overflow hidden peuvent résoudre ce problème. Nous aborderons également l'importance de déterminer des tailles fixes pour les éléments flottants et la gestion des marges pour bien espacer les articles. Cette leçon détaillera également l'utilisation des sélecteurs pour éviter les marges superflues sur le dernier élément.

Voir plus
Questions réponses
Pourquoi le footer remonte-t-il lorsqu'on utilise des floats?
Le footer remonte parce que les éléments flottants sont sortis du flux normal du document, ce qui peut provoquer un débordement des flottes.
Quel est le rôle de la propriété 'clear' en CSS?
La propriété 'clear' en CSS est utilisée pour spécifier de quel côté un élément ne doit pas flotter par rapport à d'autres éléments flottants, permettant de réguler le positionnement des éléments flottants et éviter les chevauchements indésirables.
Comment peut-on annuler la marge à droite du dernier élément flottant?
On peut annuler la marge à droite du dernier élément flottant en utilisant une classe spécifique ou en appliquant un sélecteur CSS approprié comme 'last-of-type' pour cibler uniquement le dernier élément et définir une 'margin-right' à 0.

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 !