Les langages HTML-CSS permettent d’écrire des pages Web et de les mettre en forme.
L’ensemble, pour fonctionner, est bien codifié. Se former au HTML-CSS permet d’apprivoiser les bases essentielles : découvrir et apprendre à utiliser les balises en HTML et les class et id en CSS, structurer des pages, organiser ses dossiers, ajouter des visuels, créer des menus, etc.
Après quoi, il est essentiel de mettre la main à la pâte et de s’entraîner régulièrement : c’est en déployant du code que vous rencontrerez des petits imprévus et que vous apprendrez les petits trucs et astuces qui vous permettront d’adapter votre code en fonction de vos besoins et d’apporter à vos pages un design agréable et fluide.
D’ailleurs, nous vous proposons aujourd’hui une petite astuce HTML-CSS :
Dans les navigateurs, par défaut, des éléments positionnés en float dans le CSS sortent du flux HTML ; leur élément parent – leur conteneur – est donc considéré comme vide et a, de fait, une hauteur de 0 pixel (en admettant qu’aucune hauteur –height– n’a été spécifiée dans le CSS).
Ainsi, prenons l’exemple suivant :
Fichier HTML :
Fichier CSS :
section div {float:left;}Ici, le footer remontera au niveau de la section. Résultat auquel nous ne souhaitons pas parvenir…
Pour éviter cela, une pratique consiste à ajouter une div vide, après les éléments flottants, qui sera définie en CSS par une class clear.
Résultat
Fichier HTML
Fichier CSS
section div {float:left;} .clear{clear:both; float:none;}Cette nouvelle div viendra alors se placer dans le flux, mais après les éléments flottants. Puisqu’elle est vide, la section prendra la hauteur totale des éléments précédents.
Et voilà !