CATALOGUE Code & Data Formation Dreamweaver Apprendre Dreamweaver CS5 Tutoriel sur les Éléments Flottants en HTML et CSS

Tutoriel sur les Éléments Flottants en HTML et CSS

Mise en page avec des éléments flottants 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

Réaliser une mise en page avec des éléments flottants

Objectifs

Les objectifs de cette vidéo sont de :

  • Comprendre le concept des éléments flottants en HTML et CSS.
  • Apprendre à positionner du contenu de manière flexible.
  • Adapter la mise en page à différentes tailles de fenêtre.
  • Utiliser les balises HR et BR pour gérer les flottements.

Résumé

Apprenez à positionner des éléments flottants dans une page web et à adapter la mise en page selon la taille de la fenêtre du navigateur.

Description

Dans cette leçon, nous allons apprendre à réaliser une mise en page utilisant des éléments flottants en HTML et CSS. Les éléments flottants permettent de positionner des contenus comme des images ou des paragraphes de manière flexible, s'adaptant automatiquement à la taille de la fenêtre du navigateur.

Nous commencerons par intégrer une image et placer du texte à côté en la définissant comme flottante à gauche. Nous verrons comment les éléments suivants se positionnent autour d'un élément flottant. Nous ajusterons la taille des paragraphes et ajouterons du padding pour améliorer la lisibilité.

Ensuite, nous apprendrons à utiliser la balise HR pour réinitialiser les flottements et assurer que les éléments suivants ne soient pas affectés par ceux qui flottent. Cette technique est cruciale pour obtenir des mises en page complexes et cohérentes.

Enfin, nous verrons comment exploiter les différentes techniques pour une mise en page responsive, qui peut passer d'une seule colonne à plusieurs colonnes suivant la taille de la fenêtre.

Voir plus

Questions - réponses

Pourquoi utilise-t-on des éléments flottants en CSS ?
Les éléments flottants en CSS permettent de positionner des contenus comme des images et des paragraphes de manière flexible, les adaptant à la taille de la fenêtre du navigateur.
Comment peut-on réinitialiser le flottement des éléments ?
On peut utiliser la balise HR avec la propriété clear: both pour réinitialiser le flottement des éléments et garantir que les prochains éléments ne soient pas affectés par les flottements précédents.
Quels sont les autres moyens d'obtenir une mise en page similaire sans utiliser d'éléments flottants ?
On peut utiliser des techniques modernes comme Flexbox et CSS Grid Layout, qui offrent plus de contrôle et flexibilité pour la mise en page.

Programme détaillé