Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

CSS : Positionnement et mise en page

Revenir sur la flottaison

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Passez en revue le principe de flottaison afin d'appréhender les comportements de base. Ce principe est souvent employé, parfois mal comprise, et peut causer quelques contraintes.
03:15

Transcription

Revenons sur le principe de flotaison et explorons les diverses propriétés et comportements de manière native que cette propriété va apporter. Alors ici on a une page HTML classique, avec simplement une feuille de réinitialisation histoire de s'assurer qu'il n'y ait aucune propriété par défaut du navigateur qui soit appliquée, et puis on a une section qui contient une image et un texte. Alors dès l'instant où on va placer la classe gauche ici à cet élément. L'élément va floter à gauche, et automatiquement son bord gauche va venir se plaquer sur le dernier point de positionnement du flux en cours. Donc, cet élément qui flote est automatiquement transformé en élément de type block, bien qu'il s'agisse à l'origine d'un élément de type inline, pas besoin de le transformer. On s'aperçoit ici que les marges droites et basses sont appliquées puisqu'on est sur un élément de type block et le texte vient épouser, vient habiller, ici, le tour de cet élément. Bien sûr, que si on place la classe droite maintenant, avec des propriétés différentes, eh bien cette fois-ci c'est le bord droit qui va venir se mettre dans le flux et le texte qui le suit va venir habiller toute cette image. Alors il est vrai que maintenant, avec un texte qui est aligné ici à gauche, ça donne quelque chose qui n'est pas forcement chouette de ce côté-là, il faudrait penser à venir au niveau du paragraphe ici, faire un texte-align right ici, pour avoir une meilleure découpe de ce côté-là qui serait plus cohérente. Alors ici je vais le commenter maintenant et réappliquer la classe de gauche. Une autre propriété qui est importante, enfin propriété surtout comportement, qui est important de prendre en compte c'est que si à ce p maintenant, ce paragraphe, ou à cette section, eh bien on va le faire sur le paragraphe ici je rajoute un overflow:hidden, je vais forcer le paragraphe à recalculer tout ce qui va dépasser de son bloc et donc de le réajuster et ce qui fait que maintenant, j'ai pas besoin de placer une marge gauche à cet élément de paragraphe, il va automatiquement s'aligner sur la bordure de l'élément. C'est-à-dire que si maintenant je viens rajouter une marge de 2em ici sur le côté droit et non pas un em, on voit bien que le texte est intégralement poussé, donc c'est un comportement qu'il ne faut pas oublier qui nous permet des fois de pouvoir justement apporter ce genre de mise en page lorsqu'on en a besoin. Une autre particularité qu'il faut bien prendre en considération au niveau de la flotaison, c'est qu'ici, si j'ai un élément de liste, réinitialiser, donc des bullets ont disparu, les petites puces ont disparues, notre texte est positionné, tout est parfait, mais si on fait maintenant une flotaison right au lieu de faire une flotaison gauche vous voyez que maintenant, les menus s'inversent, c'est-à-dire qu'on part du catalogue, votre interlocuteur, nos partenaires part de droite à gauche c'est bien le premier élément qui va se positionner à droite, le second va se positionner à droite et donc [ 'inaudible'] on inverse le sens de notre menu donc c'est quelque chose qu'il faut prendre en considération parce que ça peut nous surprendre et ça peut être quelque chose de pénalisant suivant les mises en page que l'on veut 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 !