CSS : Positionnement et mise en page

Donner la hauteur au parent

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Lorsque des éléments flottent au sein d'un conteneur, ceux-là sortent du flux. Découvrez comment recalculer l'espace pour prendre en compte les éléments flottants.
01:28

Transcription

Lorsqu'on fait flotter des éléments, tout se passe pour le mieux avec simplement la propriété float:left. Parfait ! Par contre, justement, lors de la création d'un menu, par exemple comme ça, où des éléments "li" vont flotter à l'intérieur d'une balise "ul" ici, d'une balise parent, on va s'apercevoir que lorsque l'on va vouloir donner une couleur d'arrière-plan à l'élément parent ici, lightgrey par exemple. Eh bien la couleur n'englobe pas tous les enfants. En fait, la couleur apparait ici, mais s'arrête après la première apparition du premier enfant. En fait, il s'agit tout simplement du fait que les éléments sont sortis du flux, donc il n'y a plus de flux qui est contenu dans le parent et le parent lui va afficher une simple hauteur de base correspondant à ce premier caractère, à ce premier espace, à ce premier retour chariot en fait qui l'intercepte et qui va colorer. Mais maintenant, les autres éléments ne sont pas englobés donc il va falloir forcer en gros le parent à recalculer tout son contenu et pour ça on va lui dire tout ce qui dépasse, tu le coupes donc ici on va dire overflow:hidden et là, à cet instant-là, le navigateur va demander au conteneur de recalculer la hauteur globale de tous les éléments contenus et cette fois-ci sorti ou pas du flux ils vont être pris en compte et donc la coloration va pouvoir se faire globalement autour des enfants donc on va pouvoir redonner comme ça la réelle hauteur que le parent devait utiliser.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !