XHTML. et CSS 2. Michel Martin

Transcription

1 XHTML et CSS 2 Michel Martin

2 4 Mise en page La mise en page détermine comment les différents éléments d une page sont agencés entre eux, mais aussi par rapport à la zone d affichage du navigateur. Dans ce chapitre, vous apprendrez à choisir une mise en page en fonction des objectifs que vous vous fixez pour chacune de vos pages web. Hiérarchie des éléments <div> <span> <img> style Les balises XHTML peuvent être de type bloc ou en ligne. Les balises en ligne sont utilisées pour mettre en forme des caractères, mots ou groupes de mots à l intérieur de blocs. Elles peuvent être imbriquées entre elles mais ne peuvent pas contenir de balises de type bloc.

3 122 CHAPITRE 4 Mise en page Par ordre alphabétique, il s agit des balises <a> (ancre), <b> (gras), <br> (passage à la ligne), <code> (code informatique), <em> (emphase), <font> (police), <i> (italique), <img> (image), <input> (saisie dans un formulaire), <s> (barré), <select> (liste déroulante/zone de liste), <small> (texte de petites dimensions), <span> (conteneur en ligne générique), <strike> (barré), <strong> (gras), <sub> (indice), <sup> (exposant), <textarea> (zone de saisie multiligne) et <u> (souligné). Les balises de type bloc sont utilisées pour effectuer des mises en forme de paragraphes. Elles s affichent les unes sous les autres. Elles peuvent contenir d autres éléments de type bloc et/ou en ligne. Par ordre alphabétique, il s agit des balises <blockquote> (citation), <div> (conteneur générique de type bloc), <form> (formulaire), <h1> à <h6> (titres 1 à 6), <li> (élément d une liste à puces ou d une liste numérique), <ol> (liste numérique), <p> (paragraphe), <pre> (texte préformaté), <table> (tableau), <td> (cellule de tableau), <th> (en-tête de tableau), <tr> (ligne de tableau) et <ul> (liste à puces). L exemple suivant donne une idée de la façon dont les balises en ligne et de type bloc se positionnent lorsqu aucune directive de mise en page n est fournie. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html> </body> <div style= background-color:yellow; width:500px; height=500px; margin: 20px; padding: 10px; > <img src=chute-eau.jpg> <span style= font-size: 16px; color:blue; >Ce texte

4 Hiérarchie des éléments 123 est mis en forme par la première balise span</span> <span style= color: red; >et celui-ci par la deuxième balise span.</span> <div style= background-color: burlywood; margin: 40px; padding: 30px; > Ce texte est affi ché dans le deuxième div </body> </html> La structure de ce document est la suivante : <div> <img> <span></span> <span></span> <div> texte La première balise en bloc <div> inclut trois balises en ligne, qui seront affichées successivement, de gauche à droite, dans l espace réservé par la balise <div>. Une deuxième balise <div> fait suite à la première. Elle sera donc affichée sur le paragraphe suivant (voir Figure 4.1).

5 124 CHAPITRE 4 Mise en page Figure 4.1 : Affichage des deux balises <div> et des trois balises en ligne. Définir des réglages valables sur toutes les pages d un site <link> Pour fixer la couleur de l arrière-plan, du texte, des liens, pour définir l espace entre les paragraphes, entre les mots, etc., il vous suffit de définir les styles correspondants dans une feuille de styles externe, d enregistrer cette feuille de styles dans un fichier d extension.css et de la référencer dans chaque page à l aide de la balise <link>. Voici un exemple de feuille de styles dans lequel nous définissons les caractéristiques des balises <body> (le corps

6 Définir des réglages valables sur toutes les pages d un site 125 du document), <li> (listes à puces), <b> (attribut gras), <a> (liens hypertextes) et <h1> (titres de niveau 1). body background-image: mosaique.gif; font-family: arial, helvetica, sans-serif; color: blue; li font-family: Verdana; font-size: 13px; b font-family: Verdana; font-size: 14px; font-weight: bolder; a font-family: Verdana; font-size: 12px; font-weight: bold; color: red; text-decoration: overline; h1 font-family: arial; font-size: 16px; font-weight: bold; color: black;

7 126 CHAPITRE 4 Mise en page Pour utiliser cette feuille de styles dans une page web, il suffit de la référencer dans la balise <link>. Ici, la feuille de styles se trouve dans le même dossier que la page XHTML et a pour nom «moncss.css». <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html> <head> <link rel= stylesheet type= text/css href= moncss.css /> </head> <body>   </body> </html> Enrouler un texte autour d une image fl oat Pour enrouler un texte autour d une image, deux conditions doivent être réunies : 1. Le texte et l image doivent avoir le même parent. 2. L image doit être positionnée en flottant (fl oat) dans le parent. Dans cet exemple, l image est insérée dans une balise <div> qui flotte sur la partie gauche du parent (<body>). Le texte qui suit s enroule autour de l image, puisqu il a le même parent (<body>). La Figure 4.2 représente le résultat obtenu dans Internet Explorer.

8 Enrouler un texte autour d une image 127 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html> </body> <div style= fl oat: left; > <img src= chute-eau.jpg > <p>iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur. Idcirco iam rebus omnibus (ut Moses5 Timaeusque6 testantur) absolutis, de producendo homine postremo cogitavit. Verum nec erat in archetypis unde novam sobolem effi ngeret, nec in thesauris quod novo fi lio hereditarium largiretur, nec in subselliis totius orbis, ubi universi contemplator iste sederet. </p> </body> </html> Figure 4.2 : Le texte s enroule autour de l image qui est positionnée en flottant sur le côté gauche de la balise <div>.

9 128 CHAPITRE 4 Mise en page Positionnement flottant fl oat Vous utiliserez la propriété fl oat pour positionner un élément à gauche (left) ou à droite (right) dans son parent. Si un ou plusieurs autres contenus sont placés dans le parent, ils occupent l espace laissé libre par le flottant et s enroulent autour de lui. Dans cet exemple, deux styles sont définis : vert définit un flottant positionné à gauche dans le parent (<body>), large de 100 pixels dont l arrière-plan a une couleur verte ; img définit un flottant positionné à droite dans le parent (<body>). Ces deux styles sont utilisés par des balises <div>. La première affiche un texte sur fond vert dans la partie gauche de la fenêtre. La deuxième, une image dans la partie droite de la fenêtre. Un texte est ajouté en dehors des deux balises <div>. Il occupe donc la place laissée libre entre ces deux balises et s enroule autour d elles (voir Figure 4.3). <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN > <html> <head> <style type= text/css >.vert background-color: #A5F95B; fl oat: left; width: 100px;

10 Positionnement flottant 129.img fl oat: right; </style> <body > <div class= vert > Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. <div class= img > <img src= cartoon.gif > Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. </body> </html> Info Les balises <div> s allongent verticalement en fonction de leur contenu, à moins que la propriété height n ait été définie. Dans ce cas, la propriété overfl ow gère tout éventuel débordement. Reportez-vous à la section «Débordement d un élément de boîte» pour en savoir plus à ce sujet.

11 130 CHAPITRE 4 Mise en page Figure 4.3 : Le texte central s enroule autour des deux flottants. Positionnement fixe position : fi xed ; Pour qu un élément occupe une position fixe dans la fenêtre du navigateur, sans être affecté par les éventuels déplacements des barres de navigation, vous ferez appel à la règle de position fi xed. Cette règle peut être définie dans n importe quel style CSS et utilisée autant de fois que

12 Positionnement fixe 131 nécessaire. Mais attention, elle n est pas compatible avec les navigateurs Internet Explorer 6 et précédents. Si nécessaire, consultez la section suivante pour prendre connaissance d une technique compatible avec ces navigateurs. Dans cet exemple, nous définissons deux styles à positionnement fixe : div.image-fi xed définit une zone figée à 5 pixels du bord gauche et 10 pixels du bord supérieur de la fenêtre et fixe ses marges à 5 pixels ; div.text-fi xed définit une zone figée à 5 pixels du bord gauche et 160 pixels du bord supérieur de la fenêtre, définit ses dimensions, sa couleur d arrière-plan et sa bordure. Le code XHTML est très simple à comprendre. Il met en place une balise <div> de classe img-fi xed et y affiche une image. Il affiche ensuite des informations textuelles dans une balise <div> de classe text-fi xed. Enfin, il affiche un long texte, décalé de 200 pixels vers la droite (paddingleft: 200px;). <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <html> <head> <style type= text/css > div.image-fi xed position: fi xed; left: 5px; top: 10px; div.text-fi xed position: fi xed;

13 132 CHAPITRE 4 Mise en page left: 5px; top: 160px; width: 150px; height: 180px; background-color: whitesmoke; border: solid 1px black; body padding-left: 200px; </style> </head> <body> <div class= image-fi xed ><img src= animal.gif /> <div class= text-fi xed > Le texte de cette balise div reste fi xe quand les barres de défi lement sont utilisées.<br/><br/>ceci fonctionne aussi bien dans Internet Explorer que dans les navigateurs Gecko. <div> Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat [...] </body> </html> Comme le montre la Figure 4.4, la barre de défilement n a aucune incidence sur les deux balises <div> affichées dans la partie gauche de la fenêtre.

14 Positionnement fixe compatible avec tous les navigateurs 133 Figure 4.4 : Les deux balises <div> sont figées dans la partie gauche de la fenêtre. Positionnement fixe compatible avec tous les navigateurs <!--[if lte IE 6]> overfl ow : hidden ; overfl ow: auto ; position : absolute; Internet Explorer 6 et inférieur n interprètent pas correctement l instruction position: fi xed;. Cette section va vous montrer comment simuler cette instruction pour

15 134 CHAPITRE 4 Mise en page figer un élément dans la fenêtre du navigateur, qu il s agisse d une version ancienne ou récente d Internet Explorer ou d un navigateur Gecko (Mozila, FireFox, Thunderbird, SeaMonkey ou Nestcape). La technique utilisée repose sur l utilisation d une instruction conditionnelle qui teste le type et la version du navigateur utilisé. S il s agit d une version 6 ou inférieure d Internet Explorer (<!--[if lte IE 6]>), les styles body, html et div.fi xed sont redéfinis afin de simuler l instruction position: fi xed; : la hauteur est maximisée sur les balises <body> et <html> ; la propriété overfl ow de la balise <body> est réglée sur auto pour faire apparaître la barre de défilement verticale si cela est nécessaire ; la propriété overfl ow de la balise <html> est réglée sur hidden pour ne pas afficher une seconde barre de défilement verticale. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <html> <head> <style type= text/css > div.fi xed position: fi xed; border: solid 1px black; background-color: whitesmoke; width: 150px; height: 180px; left: 5px; top: 60px; padding: 5px;

16 Positionnement fixe compatible avec tous les navigateurs 135 body padding-left: 220px; </style>  </head> <body> <div class= fi xed > Le texte de cette balise div reste fi xe quand les barres de défi lement sont utilisées.<br/><br/>ceci fonctionne aussi bien dans Internet Explorer que dans les navigateurs Gecko. Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat [...] </body> </html>

17 136 CHAPITRE 4 Mise en page Le code XHTML débute par la déclaration d une balise <div> de classe fi xed. Cette balise est positionnée dans la partie supérieure gauche de la page, dimensionnée et remplie. Un long texte suit cette balise. Comme le montre la Figure 4.5, la barre de défilement verticale peut être déplacée sans modifier la position de la balise <div> de classe fi xed. Figure 4.5 : La balise <div> est figée dans la partie supérieure gauche de la fenêtre.