CSS : Positionnement et mise en page

Travailler la mise en page à gauche et à droite

Testez gratuitement nos 1255 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La flottaison pouvait être problématique lorsqu'elle était utilisée pour la mise en page des blocs principaux. Cela n'est plus le cas, cependant, observez quelques exemples d'approche.
06:13

Transcription

La flotaison peut être très utile pour des mises en page de nos contenus principaux, de gros blocs principaux, comme le main et le aside par exemple. Donc ça a souvent été employé de cette manière causant un grand nombre de soucis pour la portabilité d'un navigateur mais aujourd'hui les 3/4 de ces navigateurs qui causaient souci, ne sont plus d'actualité donc on va pouvoir continuer à utiliser cette technique si besoin. Ici on a placé le header, le main, qui est un élément HTML qui contient 2 articles. Un aside à côté qui n'a pas de contenu, un footer qui contient juste un copyright. Donc ce aside, c'est ce carré, ici en fait qui correspond à une hauteur et à une largeur définie de 30% pour la largeur, 100 pixels pour la hauteur et le main lui fait 70%. Donc, comment faire pour positionner ces 2 éléments côte à côte ? Avec la flotaison, c'est très simple, il suffit de venir sur le aside, lui expliquer qu'il va flotter ...à droite... Et puis, on va demander au main lui de flotter... ...à gauche... Si on enregistre et qu'on actualise la page, ça fonctionne très bien. On voit bien qu'ici on a le main, le aside qui s'est engouffré dans la place libre puisqu'il a juste la place. Si ici je donne un aside de 31%, bien sûr qu'il ne va pas passer. Si j'actualise, le aside reste dehors, parce qu'il est trop large. Il ne peut pas s'emboiter là-dedans par contre il flotte bien à droite. Et le copywright lui qui flotte pas, c'est le seul qui reste dans le flux va trouver la place disponible et va passer. Donc, il faut faire bien attention à cette particularité-là. Donc là ce qu'il va falloir, c'est venir au footer, lui proposer d'avoir un clear. On pourrait arrêter la flotaison à droite. Si on arrête la flotaison à droite, il va flotter à gauche. Et si on arrête vice et versa. Donc on va lui dire, tu arrêtes des 2 côtés, pour être sûr qu'il ne remonte ni à gauche ni à droite et là si on actualise, il reste bien sur toute sa largeur. Ici du coup, comme j'ai remis 30%, le aside passe sur le côté donc pas de souci jusque là. Mais, que se passe t-il si au niveau du main maintenant... je vais lui dire je voudrais une marge à droite pour être sûr que tu ne te colle pas à ce aside. et que cette marge soit, allons-y gaiement, de type 1em voilà donc ça va être proportionnel à la typo ce qui peut changer en fonction de l'utilisateur ou des préférences du navigateur. Et puis rajoutons une bordure aussi à droite, border-right pour mettre une sorte de gros pavé sur le côté droit qui serait de 10 pixels par exemple... solide et je vais le mettre en gris soutenu, un 3b par exemple Si j'actualise ma page, on a bien notre marge qui s'est mise ici. On ne l'a voit pas, mais elle serait jusqu'ici. Et puis en fin de compte, cette bordure... donc en fait on a le bloc qui vient là, ça rappelle un peu les 31% tout à l'heure du aside, c'est-à-dire qu'il n'y a plus de place pour le aside et ça le chasse. Donc, il faut pouvoir recalculer le width, tout simplement. Mais avant de recalculer le width, attention, on veut parler quand même de la même chose au niveau du modèle de boîte. Rappelez-vous, et donc ce qu'on va faire c'est directement mettre tous les éléments, là on va le faire sur tous ces éléments ici. On va dire que leur box-sizing, c'est le border-box comme ça on passe bien sur l'intégralité de la bordure pour les dimensions qui sont définies. Alors ça change strictement rien à notre histoire mais on s'assure que les blocs vont vraiment calculer par rapport à cette dimension. Ce qu'on va faire c'est demander au main de recalculer à la volée c'est-à-dire de ne pas appliquer 70% mais de faire un calcul et à ce 70%, je lui retire combien ? Est-ce qu'on retire la bordure ou est-ce qu'on retire la marge ? En fait, on va retirer que la marge, puisqu'on vient de définir ici border-box On sait qu'on inclut la bordure dans notre dimension Peu importe la bordure qu'on va utiliser, elle sera prise en compte dans le calcul. Donc ce qu'on va faire maintenant, c'est de dire 70% - 1em qui est la dimension de cette marge à droite. Et si j'actualise, on va bien que toutes récupèrent notre élément. Ce qui fait que même si on augmente ici, CTRL+ notre dimension, vous voyez, on va zoomer à l'intérieur mais ça va réduire les espaces tout autant Mais ça va garder quand même cette possibilité d'avoir ici cette marge flottante et cette bordure pour cohabiter avec les éléments. Alors, une autre particularité ici de la flotaison, c'est que cette fois-ci dans cet exercice numéro 2 ici on n'a plus de main, on a 2 articles qui flottent au même niveau qui sont un peu des siblings, qui sont des frères de cohabitation avec ce aside qui est sur le côté. Et donc on se retrouve ici avec un aside, balise aside flottante, mais qui s'arrête à la hauteur du premier. Donc on a bien un float: right ici, un float: left, tout est bien calculé Mais ça ne va pas jusqu'en haut. La possibilité va être de se dire, ici on va commenter cette partie-là On va empêcher la flotaison de cet élément et on va lui dire je veux plus que tu flottes, ce que je veux c'est que tu ais un display, que tu ais un mode d'affichage qui change et qui passe en display-inline. Je veux que tu te mettes en élément de type inline mais préserve tes propriétés de type bloc. J'enregistre ça. Rappelez-vous le copywright, tout à l'heure qui était un simple paragraphe lui s'engouffrait dans le vide. Lui maintenant, il va être considéré comme un élément de type inline, donc il va s'engouffrer dans le vide, mais il va garder ses propriétés de bloc. Donc dimension, marge, padding etc, tout ce qui est propre aux blocs Et si j'actualise ma page on voit bien que le aside, va maintenant pouvoir monter toute la partie de la colonne qui lui est distribuée. Voilà, donc des éléments qui peuvent être utiles pour pouvoir faire de la mise en page un peu à la traditionnelle, surtout que maintenant, tous les navigateurs comprennent fortement ce genre de propriétés.

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 !