TP 4 - Jacksay.com
Transcription
TP 4 - Jacksay.com
TP4 : Mise en page Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Diapos sur Float : http://goo.gl/aVaQiU 3. Comprendre float 3.1. Préparation Ce petit exercice vise à mettre en lumière le fonctionnement de la propriété float. Commencez par créer 2 fichiers : float.html float.css Modifier le fichier HTML de cette façon : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Float</title> <link href="float.css" rel="stylesheet" /> </head> <body> <aside> ASIDE </aside> <section> SECTION </section> </body> </html> Puis modifiez le fichier CSS de cette façon : body { padding: 10px; background-color: #CCC; } aside { background-color: tomato; } section { background-color: olive; } 3.2. Float Pour le moment, rien de très transcendant. Faites maintenant flotter à gauche le aside en utilisant la propriété float : aside { background-color: tomato; float: left; } Première chose à savoir sur float, l'élément flottant prend la largeur de son contenu si cette largeur n'est pas fixée avec la propriété width. Ajouter quelques caractère en plus dans l' aside, vous verrez sa largeur augmenter en conséquence. A l'origine, cette propriété CSS était destinée à faire "couler" du texte autour des images. Si vous ajouter beaucoup de texte dans la div section, vous verrez le texte "couler" autour de l'aside. <section> SECTION Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eius i psum officiis animi eaque. Rerum tempora, voluptas nihil quasi veritatis ad corpo ris. Sequi ab quis laudantium, animi, numquam magni nulla! </section> L'ajout du texte permet également de constater un autre effet de la propriété float : L'élément flottant sort du flux. En effet, on voit que l' aside semble être passé au dessus de la section. C'est le cas. La section est remontée comme si l' aside n'était pas là. L'élément section est remonté, et c'est son contenu qui s'écoule. 3.3. Mise en page avec float Essayons maintenant d'obtenir un rendu type colonne avec l' aside et la section. Pour cela, commençons par fixer les largeurs de la section et de l' aside : aside { background-color: tomato; float: left; width: 30%; } section { background-color: olive; width: 70%; } La logique voudrait que la section et l' aside se place côte à côte. Ce n'est pas le cas. Souvenez vous bien. L' aside est sorti du flux, la section continue donc de se positionner comme si l' aside n'était pas là. Lorsqu'un élément flotte à gauche, le contenu des éléments qui suivent s'écoule à droite, et les éléments remontent... ...Sauf si les éléments qui suivent flottent dans la même direction. Essayez : section { background-color: olive; width: 50%; float: left; } Vous devriez voir l'aside et la section se placer l'un à côté de l'autre. Notre effet colonne semble au point. 3.4. Clear Malheureusement, nous n'avons pas terminé. Souvenez vous. Le contenu des éléments non-flottant qui suivent va s'écouler à droite. Ajouter dans le HTML une div avec du texte dedans : <aside> ASIDE </aside> <section> SECTION Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eius i psum officiis animi eaque. Rerum tempora, voluptas nihil quasi veritatis ad corpo ris. Sequi ab quis laudantium, animi, numquam magni nulla! </section> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore totam aut al iquam eaque, sint dignissimos! Esse expedita adipisci quaerat maxime illum dolore s officia perferendis nesciunt, neque, autem, facilis illo inventore. </div> Vous devriez voir le texte de la div s'écouler à droite de la section. Souvenez vous également que la div est remontée. Dans notre cas, elle n'a pas de fond donc nous ne voyons pas encore ce phénomène, ajoutons lui un arrière plan : div { background: purple; } Pour régler le problème, on pourrait ajuster la largeur de l' aside et de la section : section { background-color: olive; width: 70%; /* aside de 30 + 70 = 100% */ float: left; } Mais cette solution, même si elle est fonctionnelle n'est pas satisfaisante. En effet, la div continue de remonter. Il faudrait qu'à partir de la div, le flottement s’arrête. C'est là qu'intervient la propriété CSS clear. Cette propriété permet d'interrompre le flottement, une façon de dire "a partir de la, ça ne flotte plus". Ajouter un <hr /> entre la section et l' div, puis éditez le CSS en plaçant la propriété clear sur le hr : hr { clear: both; } Le problème est réglé. 3.5. Technique du clearer Depuis plus de 10 ans, les webmasters utilisent différentes techniques pour gérer le flottement et son interruption. La première est la technique du clearer. Il s'agit d'une simple classe CSS qui va gérer le clear: both et rendre invisible le hr. Pour cela on crée un classe CSS (on la nomme clearer par convention) : .clearer { border: none; clear: both; height: 0; margin: 0; padding: 0; } Supprimez la régle sur le hr puis ajouter à l'élément hr la classe clearer : <hr class="clearer" /> 3.6. Technique du clearfix Cette autre technique a été inventé par Tony Aslett. Elle est actuellement la plus utilisée dans les grilles de mise en page dans l'industrie des framework CSS. Par contre, elle nécessite d'enrober les éléments qui flottent dans une div qui gérera l'interruption du flottement. .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Puis côté HTML : <div class="clearfix"> <aside>ASIDE</aside> <section>SECTION</section> </div> 4. Entraînez-vous Essayez de reproduire les mise en page suivante en utilisant float : Mise en page 2 colonnes droite Mise en page 2 colonnes gauche Mise en page 3 colonnes Mise en page 3 articles