[PDF] Support de formation pour apprendre les premiers pas avec les CSS

Texte intégral

(1)COURS 06-07-08 : Techniques de mise en page. 57. Chapitre 03. [Web, principes de base] BAC INFORMATIQUE. CSS Techniques de mise en page Objectifs du chapitre : • • • • • • • •. Comprendre le modèle de boîte Les imbrications de boîtes Les zones structurelles de l’HTML 5 Le positionnement dans le flux courant (flux normal) Les autres méthodes de positionnement La profondeur : Z-Index Flottement et passages à la ligne Exercice de synthèse. Nathalie Vanassche www.nathalievanassche.be.

(2) COURS 06 - 07 : Techniques de mise en page. 58. [Web, principes de base] BAC INFORMATIQUE. Le placement des objets d’un document web est la base de toute mise en page. Afin de comprendre ces systèmes de placement, il est nécessaire de bien comprendre trois concepts CSS importants : Le modèle de boîte Le positionnement Le flottement Ils déterminent la disposition des éléments de la page et sont la base des mises en page CSS.. 1. COMPRENDRE LE MODELE DE BOITE Les sites actuels reposent sur une architecture de boîtes, de types blocs, des textes, des tableaux ou des éléments positionnés. La spécification CSS2.1 définit quatre modèles de positionnement : • Block layout utilisés pour les pages web classiques • Inline layout utilisés pour le texte • Table layout utilisés pour les données tabulaires • Positioned layout utilisé pour le positionnement d’éléments autonomes dans la page. 1.1. Le modèle de boîte Chaque balise HTML suit un modèle de positionnement par défaut. Chaque mode de positionnement induit des normes, c’est le modèle de boîte.. A. Boîte de type bloc Les éléments de type bloc se succèdent verticalement, chaque nouveau bloc se plaçant sous le bloc frère précédent. Les blocs occupent toute la largeur disponible dans leur conteneur. Prenons par exemple deux blocs différenciés par leur couleur, en HTML : <p class="jaune">Une boîte jaune</p> <p class="verte">Une boîte verte</p> En CSS : .jaune { background-color: #ffff00; } .verte { background-color: #00ff00; } Le résultat:. Elles peuvent être dimensionnées (width et height) et sont pourvues de marges externes (margin) et internes (padding) qui nous permettent d’espacer les boîtes les unes des autres. Elles ne permettent pas l’alignement vertical du contenu au sein de la boîte et il n’y a pas de lien avec le contexte (les boîtes sont autonomes les unes des autres).. Les principaux éléments créant des boîtes bloc sont : l'élément div ; Les titres h1, h2, h3, h4, h5, h6 ; Le paragraphe p ; Les listes et éléments de liste ul, ol, li, dl, dd ; Le bloc de citation blockquote ; …. B. Boîte de type en-ligne Les éléments « en-ligne » ne définissant pas de boîte autonome se suivent sur la même ligne. Chaque nouvel élément se plaçant directement à la suite du précédent, ils s’affichent côte à côte avec retour à la ligne quand il n’y a plus de place dans le conteneur..

(3) COURS 06-07-08 : Techniques de mise en page. 59. [Web, principes de base] BAC INFORMATIQUE. Prenons par exemple deux portions de texte différenciées par leur couleur, en Html : <span class="jaune">Une boîte jaune</span> <span class="verte">Une boîte verte</span> En CSS : .jaune { background-color: #ffff00; } .verte { background-color: #00ff00; } Le résultat: Une boîte de type en ligne ne peut pas être dimensionnée. Les marges internes ne fonctionnent que sur la droite et la gauche de l’élément et les marges externes ne décalent pas réellement les éléments environnants. Un alignement vertical des éléments inline contenus dans un élément de type block est possible grâce à la propriété vertical-align. Les principaux éléments créant des boîtes en ligne sont : L'élément span ; Le lien a ; L'image img ; Les emphases em et strong ; …. Exemple de boîte de type bloc et en-ligne :. C. Boîte de type tabulaire Le positionnement de ces boîtes dépend du contexte, sans création de boîte autonome. Ainsi, deux boîtes peuvent se positionner côte à côte, leur taille peut être modifiée et un alignement vertical est possible. Les largeur et hauteur sont fluides et s’adaptent aux boîtes environnantes, deux boîtes côtes à côtes dans un même conteneur auront donc une largeur identique.. D. Eléments hors du flux Le dernier modèle de boîte concerne les éléments positionnés hors du flux. Les éléments HTML basculent dans ce modèle lorsque les propriétés CSS position ou float sont utilisées.. 1.2. Découpage d'une boîte Chaque élément que vous créez dans votre marquage produisant une zone sur votre page html est en fait un agencement de boîtes. Rappelons tout d'abord qu'une boîte CSS est constituée : • d'un contenu : le texte d'un paragraphe par exemple • d'un remplissage (padding) : l'espace entourant le paragraphe • d'une bordure (border) : encadrement du paragraphe • d'une marge (margin) : espace entourant le tout. Nathalie Vanassche www.nathalievanassche.be.

(4) COURS 06-07-08 : Techniques de mise en page. 60. [Web, principes de base] BAC INFORMATIQUE. Les propriétés CSS permettent de déterminer : • les dimensions de la zone de contenu, son arrière-plan (image, couleur) et sa couleur d'avant-plan ; • les dimensions, la couleur et le style des bordures ; • les dimensions du remplissage ; • les dimensions de la marge.. Dans chaque cas, il est possible de spécifier des dimensions gauche, droite, haut et bas différentes les unes des autres. Notez ces raccourcis intéressant pour les marges, remplissages ou bordures …. 1.3. La taille d'une boîte Le calcul de la taille d’une boîte selon les spécifications CSS2 se fait en ajoutant les valeurs de largeur (width), de marges internes (padding) et des bordures (border). Ainsi, si vous souhaitez une boîte avec un remplissage de 10 pixels et une bordure de 5 pixels de chaque côté mais de 100 pixels de large au total, vous devez fixer la largeur du contenu à 70 pixels. Voyons le modèle d'une boîte plus en détail : (Nous l'appliquerons ici à la largeur mais la logique est identique en ce qui concerne la hauteur) #bloc { background-color: Silver; width: 400px; padding: 0 20px; border: solid black; border-width: 0 6px 0 6px; margin: 0 30px; } En remplissant de 40px une boîte large de 400px, le contenu n'est en rien resserré à 360px mais la boîte est agrandie à 440px. La boîte s'agrandit encore de 12 pixels de par la valeur des 2 bordures gauche et droite. Nathalie Vanassche www.nathalievanassche.be.

(5) COURS 06-07-08 : Techniques de mise en page. 61. [Web, principes de base] BAC INFORMATIQUE. L'ajout de marge de 30 pixels de chaque côté de la boîte augmente l'espace global occupé par l'élément sans modifier la taille de l'élément lui-même. Eviter le mode Quirks d’Internet Explorer en ajoutant les bons doctypes. Dans le cas contraire, IExplorer calcule mal la taille des boîtes.. 1.4. Minima et Maxima Une bonne pratique de la conception web accessible à tous est de favoriser autant que possible la fluidité des éléments, or, nous ne pouvons pas dompter la taille des textes que le visiteur va définir selon ses besoins et envies. Évitez par conséquent de fixer une hauteur à vos boîtes, sauf s’il s’agit d’un élément dont vous maîtrisez parfaitement les dimensions et le contenu (les images par exemples). Ces quelques propriétés CSS 2 sont intéressantes à utiliser : min-width : largeur ; /*(en pixels, pourcentage, em...)*/ ; max-width : largeur maximale; min-height : hauteur minimale; max-height : hauteur maximale ; Reconnues depuis Internet Explorer 7, elles ne figent pas les dimensions de l’élément (comme height et width), mais définissent une valeur minimale ou maximale, quel que soit le contenu présent. Exemple : body { width: 80%; min-width: 800px; max-width: 1200px; } Sa largeur est fluide et occupe toujours 80 % de la taille de l’écran, tout en fixant un minimum de 800 pixels et un maximum de 1 200 pixels. Ces jalons évitent que l’affichage soit dégradé sur les petits écrans ou que le contenu, trop large, soit pénible à lire sur les très grandes surfaces.. 2. LES ZONES STRUCTURELLES HTML 5 2.1. Les balises HTML5 principales HTML 5 introduit de nouvelles balises permettant de structurer la page en définissant les différentes sections qui la constitue de manière plus fine qu’en utilisant la balise <div>. Le but est d’apporter de nouveaux éléments sémantiques dotés de sens1 apportant une alternative aux blocs génériques <div> et <span> :. <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, et <figcaption>. <section>. <header>. Une section permet un regroupement thématique de contenus, généralement avec un titre. Elles peuvent elles-mêmes contenir des sections. Elles rappellent l’utilisation d’un DIV utilisé auparavant pour englober du contenu sémantique (chapitres, en-têtes et pieds de page). Pour savoir comment utiliser cette balise, posez-vous la question « est-ce que les contenus sont apparentés ? » Représente le bloc d’en-tête d’une section ou d’une page. Destiné à contenir des éléments d’introduction (les habituels en-têtes de page – logo, slogan, titre, navigation) ou l’entrée d’une section, d’un article ou une table des matières.. 1. Les noms de ces balises résultent d’une étude Google de 2005 reprenant les noms les plus couramment utilisés pour définir les différentes sections des pages web.. Nathalie Vanassche www.nathalievanassche.be.

(6) COURS 06-07-08 : Techniques de mise en page. 62. [Web, principes de base] BAC INFORMATIQUE. <nav>. <article>. <aside>. <footer>. <figure>. Regroupe les liens de navigation considérés comme majeurs ou jugés suffisamment pertinents (souvent la navigation principale). Dans la plupart des cas, elle se situera dans le <header>. Toutes les listes de liens ne doit pas être contenues dans une balise <nav>, réservez-le à la navigation à l’intérieur du site. Désigne une portion du document potentiellement autonome (pouvant être traitée indépendamment du site) dans le sens où elle pourrait être reprise ou réutilisée – comprise hors contexte (comme un article de journal, de blog ou de forum). Pour savoir comment utiliser cette balise, posez-vous la question « ce contenu pourrait-il être diffusé seul ou être syndiqué (flux rss) ? » Représente une portion de contenu de type secondaire, contextuelle, directement ou indirectement liée aux éléments qui l’entourent (relatif à une section du document ou au document lui-même). Exemples : barre latérale contenant des billets similaires, un nuage de tags, une citation en exergue … Pour savoir comment utiliser cette balise, posez-vous la question « ce contenu pourrait-il être soustrait sans affecter le sens du contenu auquel il se rapporte ? » Regroupe les contenus du pied d’une section ou d’un document (pied de page) et est destiné à recueillir les informations concernant l’auteur, les mentions légales, les sources, etc. Représente une unité de contenu autonome, généralement référencé comme étant une unité indépendante du contenu du document. S’emploie combiné à <figcaption> pour structurer des illustrations, photos, vidéos, diagrammes et portions de codes. <figcaption> désignera la légende de la figure, elle est optionnelle.. Exemple de structure 1 :. 1. Source : CSS avancées, Vers HTML 5 et CSS 3 - Raphaël Goetter, Eyrolles. Nathalie Vanassche www.nathalievanassche.be.

(7) COURS 06-07-08 : Techniques de mise en page. 63. [Web, principes de base] BAC INFORMATIQUE. Exemple de structure1 :. Ces nouvelles balises HTML5 offrent aux navigateurs web une toute nouvelle façon d’appréhender votre contenu. Dans le futur, le rôle confié à ces éléments pourra donc s’avérer important.. 2.2. Compatibilité de l’HTML 5 a) Utiliser les nouveaux éléments structurels de l’HTML5 Si vous souhaitez utiliser les nouveaux éléments structurels de l’HTML5 dès aujourd’hui, rien ne vous en empêche car même si la plupart des navigateurs ne supportent pas activement ces éléments, ils vous permettent de les utiliser et de les styler (ils les interprètent comme des éléments génériques tels <div> et <span>). Appliquer des styles aux éléments structurels de l’HTML5 Les navigateurs n’appliqueront pas de style par défaut aux nouveaux éléments structurels, il faudra donc, au minimum, déclarer que les nouveaux éléments structurels doivent imposer un saut de ligne :. section, article, header, footer, nav, aside { display: block; } .. Internet Explorer, jusqu’à la version 9, refuse catégoriquement de reconnaître les nouveaux éléments, à moins qu’un exemplaire de chaque élément n’ait été créé au préalable à l’aide de JavaScript, comme ceci :. document.createElement('section'); Remy Sharp, programmeur JavaScript, a écrit un petit script très pratique qui génère tous les nouveaux éléments HTML5. 1. http://www.blog-nouvelles-technologies.fr/archives/5166/la-structure-dune-page-html5/. Nathalie Vanassche www.nathalievanassche.be.

(8) COURS 06-07-08 : Techniques de mise en page. 64. [Web, principes de base] BAC INFORMATIQUE. Chargez ce script avec un commentaire conditionnel afin qu’il ne soit utilisé que par Internet Explorer :.  Vous pouvez maintenant styler les nouveaux éléments à votre aise. Lecture Web : Tableau récapitulant la prise en charge des différentes propriétés CSS 3 et applications HTML 5 par les différents navigateurs actuels (ressource mise à disposition par Jim Morrison, de l’agence web Deep Blue Sky) : http://findmebyip.com/litmus HTML 5 par l’exemple : un tableau comparatif et interactif sur la prise en charge de HTML 5 par les navigateurs : http://w3c.html5.free.fr. 3. LE POSITIONNEMENT DANS LE FLUX COURANT (FLUX NORMAL) Par défaut, les navigateurs affichent tous les éléments d'une page (parents, enfants ou frères) dans l'ordre du flux courant, appelé également flux normal. Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la lecture d'un texte, il procède verticalement, commençant en « haut » de l'écran pour aller jusqu'en « bas », et horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.. 3.1. Exemples de positionnement dans le flux normal Etape 01 div { background: yellow; } p { background: green; } Le <div> conteneur jaune n’est pas visible ; seul le paragraphe vert apparaît. Il occupe toute la largeur disponible, c’est-àdire la largeur du document. En effet, l’élément bloc <div>, sans spécification de taille, occupe toute la largeur possible dans une hauteur par défaut nulle. L’élément bloc <p>, sans spécification de taille, occupe lui aussi toute la largeur de son conteneur, le bloc <div>. La hauteur de ce dernier est déterminée par celle de son contenu (le paragraphe) car l’élément <div> n’a pas de marges internes par défaut. Etape 02 div { width: 300px; background: yellow; } p { width: 100px; background: green; } À présent pourvus de dimensions explicites, ces deux blocs se distinguent nettement. Il reste à placer le paragraphe dans son conteneur, ce qu’on peut réaliser en le laissant dans le flux mais en précisant des marges en haut et à gauche. Etape 03 div { Nathalie Vanassche www.nathalievanassche.be.

(9) COURS 06-07-08 : Techniques de mise en page. 65. [Web, principes de base] BAC INFORMATIQUE. width: 300px; padding-top: 2em; background: yellow; } p { margin-left: 3em; width: 100px; background: green; } Voilà qui suffit à positionner le bloc paragraphe dans son conteneur. Toute autre méthode de spécification de longueur que les unités em conviendrait parfaitement : pixel, pourcentage, etc. Etape 04 <div> <p id='premier'>premier paragraphe de texte</p> <p id='second'>deuxième paragraphe de texte</p> </div> Ces deux frères prennent par défaut place l’un sous l’autre, en respectant tous deux les styles CSS associés au sélecteur de paragraphe (<p>) : chacun adopte une marge à gauche de trois caractères.. 3.2. Focus sur la propriété display La propriété CSS display définit le type de rendu de boîte à utiliser pour un élément donné. Il existe plusieurs valeurs pour cette propriété, les éléments le plus souvent utilisés ont une valeur par défaut de block ou inline (la plupart des autres valeurs display font référence aux tableaux). La propriété Display admet 18 valeurs : inline, block, list-item, run-in, compact, marker, table, inline-table, table-rowgroup, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none et inherit. La propriété inline-block, à l’état de draft en CSS2.1 est également à citer.. Passer du block à inline et vice versa : Les éléments en bloc comme les paragraphes, les titres et les listes se placent l'un au-dessus de l'autre lorsqu'ils s'affichent dans navigateur. Les éléments incorporés (in-line) comme a, span et img se placent côte à côte lorsqu'ils s'affichent dans le navigateur et n'apparaissent sur une nouvelle ligne que s'il n'y a pas assez d'espace sur la précédente. La possibilité de transformer les éléments block en éléments inline Ex: display:inline; et vice versa Ex: display:block; est une fonction performante qui vous permet, par exemple, de changer une ligne de liens se plaçant horizontalement en une navigation latérale (sans br). display:inline-block;1 (CSS2.1) intègre l’élément dans la ligne comme un élément incorporé, mais le contenu de la boîte se comporte comme un élément bloc, ce qui permet de définir les largeurs, les hauteurs, les marges verticales et le remplissage.. Pour résumer le positionnement dans le flux : C'est un traitement linéaire du contenu de la page. L'alignement des boîtes bloc est vertical ; l'alignement des éléments en ligne dans les boîtes bloc est horizontal. Par défaut, chaque élément est donc dépendant de ses frères immédiats et deux <p> successifs apparaissent l'un sous l'autre. Cette méthode convient à la majorité des cas, il suffit de définir les marges de chaque élément pour le placer dans son conteneur.. 1. Prise en charge par Firefox 3.0 et ses versions ultérieures, Internet Explorer 8 et les dernières versions de Safari et Opera.. Nathalie Vanassche www.nathalievanassche.be.

(10) COURS 06-07-08 : Techniques de mise en page. 66. [Web, principes de base] BAC INFORMATIQUE. 4. LES AUTRES METHODES DE POSITIONNEMENT La propriété position se trouve au cœur des mises en page fondé sur les CSS. Elle détermine le point de référence pour le positionnement de chaque boîte d'élément. La propriété position prend quatre valeurs : static, relative, absolute et fixed - static étant la valeur par défaut. Toutes ces techniques de mise en page CSS s’appuient sur trois concepts élémentaires : le positionnement, le flottement et la manipulation des marges.. 4.1. Le positionnement relatif Le positionnement relatif est une variante du positionnement en flux normal (on l'active par la déclaration position:relative;), il reste positionné par défaut dans le flux normal, mais il est alors décalé horizontalement et/ou verticalement par rapport à son point d’origine à l’aide des propriétés top, right, bottom ou left. Le contenu suivant n'est pas affecté par ce déplacement, ce qui peut donc entraîner des chevauchements. Exemple: <p> Lorem <span class="jaune"> boîte en position relative </span> ipsum dolor. </p> En CSS : jaune { position: relative; bottom: 5px; background-color: #ffff00; } Le résultat :. Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite : jaune { position: relative; bottom: 5px; left: 3em; background-color: #ffff00; } Le résultat :. Pour résumer le positionnement relatif : L'espace occupé par l'élément statique initial est conservé – tout comme le positionnement des autres éléments. Cette technique est à manier avec précaution car on n’y manipule que des décalages, chaque élément restant dépendant de ses frères.. Nathalie Vanassche www.nathalievanassche.be.

(11) COURS 06-07-08 : Techniques de mise en page. 67. [Web, principes de base] BAC INFORMATIQUE. 4.2. La position absolue S'applique à tout élément doté de la déclaration position:absolute ou position:fixed. Le positionnement absolu extrait totalement un élément du flux normal du document pour le positionner. Les boîtes ainsi retirées du flux normal n’ont plus aucun effet sur le calcul des placements des autres éléments de la même fratrie et on détermine leur position par les propriétés top, right, bottom et left. Un élément positionné de manière absolue est positionné par rapport l’emplacement de son ancêtre le plus proche S’il n’en possède pas, il est positionné par rapport au bloc conteneur initial. Selon l’agent utilisateur, il peut s’agit du support du document ou de l’élément HTML. La boîte conteneur de référence est celle du premier élément ancêtre positionné (en relatif, fixe ou absolu). Notez également que tout élément positionné en absolu est considéré de type bloc. Les éléments en ligne peuvent ainsi recevoir des dimensions et des bordures. Exemple : p { margin:0; } div { width:300px; height:200px; background:yellow; } p#premier { width:100px; background:orange; } p#second { position:absolute; top:0; left:0; width:150px; background:green; } Le second paragraphe prend place en haut, à gauche du document, sortant même de la boîte de son parent, le bloc <div>. En remplaçant la règle left:0 par right:0, le paragraphe se place à droite de l'écran. Pour placer le second paragraphe par rapport au bloc <div>, il suffit de positionner ce dernier avec une propriété de position (absolu, relatif ou fixe). Exemple div { position:relative; width:300px; height:200px; background:yellow; } Pour résumer le positionnement absolu : Le positionnement relatif est "relatif" à la position initiale de l’élément dans le flot du document, alors que le positionnement absolu est "relatif" au plus proche ancêtre positionné (bloc conteneur ou premier élément ancêtre positionné) ou, s’il n’existe pas, au bloc conteneur initial (le body, toujours considéré comme positionné). L'élément se déplace donc lorsque l'utilisateur fait défiler la page pour conserver sa position par rapport à lui, il sort du flux continu du navigateur. Nathalie Vanassche www.nathalievanassche.be.

(12) COURS 06-07-08 : Techniques de mise en page. 68. [Web, principes de base] BAC INFORMATIQUE. 4.3. Le positionnement fixe Le positionnement fixe est semblable au positionnement absolu mais le contexte de positionnement de l'élément est l'outil d'affichage (la fenêtre du navigateur par exemple) de sorte que l'élément reste fixé à l'écran lorsque la page défile. Exemple vert { position: fixed; top: 230px; left: 20px; background-color: green; Cet effet "collé" permet de simuler les effets de cadres (frames), et créer, par exemple, un élément de navigation qui restera en place lorsque la page défile. Toutefois, cette propriété ne fonctionne pas en IE 6.0 (la version 7 la reconnaît partiellement). Lecture Web : Les liens suivants proposent des solutions de remplacement émulant cette fonctionnalité sur Internet Explorer 6 : http://www.ibilab.net/webdev/articles/CSS/position-fixed-pour-tous-navigateurs-2.htm http://www.nanoum.net/blog/6_absolue_et_fixe.html http://devnull.tagsoup.com/fixed/ http://limpid.nl/lab/css/fixed/. 5. LA PROFONDEUR : Z-INDEX Par défaut, le dernier élément positionné déclaré dans le code HTML s'affichera par-dessus tous les autres éléments du même conteneur. La propriété Z-index permet de modifier ce comportement, elle précise le chevauchement des éléments les uns par rapport aux autres. Un élément sera affiché au-dessus d'un autre s'il possède un ordre d'affichage supérieur, par exemple un élément ayant la valeur {z-index:2} va recouvrir l'élément ayant comme valeur {z-index:1}. Exemple div { position: relative; width: 300px; height: 200px; background: yellow; } p#premier { position: absolute; top: 0; left: 0; width: 100px; background: #ccc; } p#second { position: absolute; top: 40px; left: 50px; width: 150px; background: green; } Nathalie Vanassche www.nathalievanassche.be.

(13) COURS 06-07-08 : Techniques de mise en page. 69. [Web, principes de base] BAC INFORMATIQUE. Le second paragraphe surplombe en partie le premier (ceci indépendamment de l’ordre de leur déclaration dans le code HTML). Pour le faire passer dessous, il suffit de définir pour chaque boîte un niveau de z-index différent, en attribuant au premier paragraphe une valeur plus élevée : p#premier { position: absolute; top: 0; left: 0; z-index: 10; width: 100px; background: #ccc; } p#second { position: absolute; top: 40px; left: 50px; z-index: 0; width: 150px; background: green; } Notez que seuls les éléments « positionnés » peuvent être affectés par cette propriété d’empilement z-index. N’abusez pas de ces changements de profondeur : elles sont rarement nécessaires dans un document bien construit et doté d’une structure HTML cohérente.. 6. FLOTTEMENT ET PASSAGES A LA LIGNE Une autre technique performante qui permet d'organiser les mises en page consiste à associer le flottement et le passage à la ligne à l'aide des propriétés float et clear.. 6.1. Le positionnement des flottants Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float:left) possible dans son conteneur, il devient un « flottant ». Le contenu qui suit cette boîte flottante dans le code html s'écoule le long de celle-ci, dans l'espace laissé libre, en épousant sa forme, car les boîtes flottante ne s’insérant pas dans le flux continu, elles les considèrent comme inexistantes. Notons toutefois que le contenu textuel de la boîte conserve néanmoins en mémoire la présence de l’élément flottant et se décale afin de lui laisser de la place. La propriété float est principalement utilisée pour répartir du texte autour des images, et c'est aussi une méthode pour créer des mises en page sur plusieurs colonnes.. Le fonctionnement des flottants Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative, mais utile pour certains navigateurs) : En HTML: <p class="jaune">Une boîte jaune flottant</p> <p class="verte">Une boîte verte doté d'un contenu plus long…</p> En CSS: jaune { background-color: #ffff00; float: right; width: 100px; margin: 0; } Nathalie Vanassche www.nathalievanassche.be.

(14) COURS 06-07-08 : Techniques de mise en page. 70. [Web, principes de base] BAC INFORMATIQUE. verte { background-color: #00ff00; } Le résultat :. Le navigateur place tout d'abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte. Le flux occupe tout l'espace disponible: la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de la boîte flottante jaune. Dans les navigateurs n'appliquant pas la feuille de style (navigateurs texte ou non conformes aux standards…), la boîte flottante sera simplement inscrite en flux normal avant la boîte qui la suit.. Placer des boîtes côte à côte Un des nombreux avantages du positionnement flottant est la possibilité de placer des blocs côte à côte. Exemple p#premier { float: left; width: 100px; background: #ccc; } p#second { float: left; width: 150px; background: green; }. La propriété float pour que le texte enroule une image Exemple: img { float: left; margin: 0 10px 0 10px; } En HTML, le marquage doit contenir l'image en 1er : <img src="logo.jpg"> <p> Lorem … </p>. La propriété float pour disposer du texte à côté d’une image Exemple: p {float:left; width:200px; margin:0;} img {float:left; margin:0 4px 0 4px;} Lorsque les 2 éléments sont flottants, le texte se transforme en colonne au lieu de s'enrouler autour de l'image. C'est le principe de mise en page en multi-colonnes à l'aide de float.. Nathalie Vanassche www.nathalievanassche.be.

(15) COURS 06-07-08 : Techniques de mise en page. 71. [Web, principes de base] BAC INFORMATIQUE. 6.2. La propriété clear Cette propriété souvent utilisée avec float, fonctionne comme la balise <br clear /> en HTML. La propriété clear interdit le voisinage d’un flottant, il s'agit de forcer le passage à la ligne et la reprise d'un positionnement normal alors qu'il ne le ferait pas normalement. Ses trois valeurs possibles (left, right et both) portent respectivement sur les côtés gauche, droit, gauche et droit. L'instruction clear:left interdit tout flottement à gauche; clear:both interdit tout flottement au même niveau. Lorsque vous dégagez un élément avec la propriété clear, le navigateur ajoute suffisamment de marge au-dessus pour décaler sa bordure supérieure vers le bas, au-delà de l’élément flottant. En CSS : p { … } img { float:left } .clear {clear:both;} En HTML : <img src="…"> <p> Lorem ipsum … </p> <div class="clear">   </div> <img src="…"> <p> Lorem ipsum … </p> A l'aide de la propriété « clear », l'élément est obligé de se placer sous l'élément flottant.. La valeur de both sur la propriété clear implique que le div passe à la ligne, et passe donc sous les éléments flottant à gauche et à droite … la valeur left aurait pu être utilisée ici mais si on bascule l'élément flottant sur right, cela ne fonctionne plus.. 6.3. Englober un flottant Comme les éléments flottants sont sortis du flot du document, ils ne prennent pas d’espace et ne sont donc pas englobés par la div qui les enveloppe (un parent ne contenant que des flottants n’occupera physiquement aucune surface à l’écran). La solution est d’ajouter un élément vide sous le dernier paragraphe et le dégager. L’ajout d’un élément vide permet d’appliquer le dégagement et force l’élément conteneur à englober les éléments flottants.. Nathalie Vanassche www.nathalievanassche.be.

(16) COURS 06-07-08 : Techniques de mise en page. 72. [Web, principes de base] BAC INFORMATIQUE. 6.4. La propriété overflow La propriété overflow définit la manière dont un élément est censé se comporter si le contenu englobé est trop grand pour les dimensions spécifiées. Elle permet, comme son nom l’indique, de définir la méthode de dépassement des textes de leur conteneur. a) visible : réglage par défaut, le contenu qui sort de son conteneur est visible (et donc susceptible de porter atteinte à votre design, surtout si le bloc contient des bordures et/ou une couleur de fond). b) hidden (caché) : la partie qui dépasse la zone permise sera camouflée, aucune barre de défilement ne sera ajoutée. c) scroll (défilement) : L'élément sera coupé s'il dépasse les limites, mais le navigateur va activer les barres de défilement. Si le contenu dépasse les deux limites, les deux barres de défilement seront activées et s'il n'y a pas de dépassement, les deux barres seront quand même affichées mais en grisé. d) auto : dans ce mode, le navigateur décide l'ajout ou non des barres de défilement, autrement dit le navigateur n'activera les barres de défilement qu'à la rigueur. Contrairement au mode "scroll", il affiche seulement les barres opérationnelles, pas de barres en affichées en grisé. Les propriétés overflow:auto, overflow:hidden et overflow:scroll permettent également d'étendre le calcul de hauteur du conteneur à ses enfants flottants (qui, de par leur statut de flottants, sortaient du flux et ne possédaient plus de dimensions reconnues par le navigateur) et donc de faciliter les mises en page complexes1.. 6.5. Mettre en place une mise en page « flottante » Etape01 : fixez la largeur désirée et faire flotter chaque colonne Etape02 : Ajoutez un léger remplissage au contenu principal Etape03 : Ajoutez display :inline ; à tous les éléments flottants pour lutter contre la double marge des éléments flottants d’Internet Explorer Etape04 : les éléments flottants ne prenant plus d’espace dans le flot du document, le pied de page remonte tout en haut. Dégagez donc les éléments flottants en appliquant la méthode overflow à leur élément parent (ex : la div content) :. #wrapper { overflow: hidden; } Si nous donnons à notre bloc parent la propriété overflow: auto ou overflow: hidden, il ne pourra plus se «glisser» sous les colonnes flottantes. Pour résumer le positionnement flottant L'élément doté de la propriété float est « poussé » à gauche ou à droite de son conteneur et sort du flot du document. Dans ce cas, les éléments qui le suivent, dans son conteneur, prennent place autour de lui. Les éléments flottants ne prennent pas d’espace, le parent est donc sans hauteur si tous ses fils sont flottants. De plus, certains décalages non souhaités peuvent survenir sur certains navigateurs.. 1. Pour plus d’information : http://www.blog-and-blues.org/articles/Float,_clear_et_contextes_de_formatage. Nathalie Vanassche www.nathalievanassche.be.

(17) COURS 06-07-08 : Techniques de mise en page. 73. [Web, principes de base] BAC INFORMATIQUE. EXERCICE DE REVISION : Réalisez le TP disponible ici : http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-siteweb-avec-html5-et-css3/tp-creation-d-un-site-pas-a-pas, ignorez l’étape « Assurer la compatibilité avec IE » Quelle technique de mise en page est utilisée ici ? Quelles sont les autres techniques de mise en page qui auraient pu être employées afin d’obtenir le même rendu visuel ? Tentez de les mettre en œuvre en créant les variantes de solutions de mise en page.. Nathalie Vanassche www.nathalievanassche.be.

(18)