Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé

Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique................................... 3 2 Complément de XHTML 3 2.1 La notion de validité.................................. 3 2.2 Insérer des images dans vos pages........................... 4 2.3 Définir des listes d éléments.............................. 5 3 Utilisation du langage CSS 5 3.1 Lier sa page à une feuille de style CSS........................ 5 3.1.1 Ce qu est une feuille de style......................... 5 3.1.2 Intérêt de la manipulation........................... 6 3.1.3 La pratique................................... 6 3.1.4 Un exemple concret.............................. 6 3.2 Le modèle DOM.................................... 6 3.2.1 Document Object Model............................ 6 3.2.2 La notion d ID................................. 6 3.2.3 La notion d héritage.............................. 7 3.3 Les sélecteurs CSS................................... 8 3.3.1 Les sélecteurs de base............................. 9 3.3.2 Sélecteurs de classe et d ID.......................... 9 3.3.3 Le sélecteur multiple.............................. 10 3.3.4 Le sélecteur par héritage............................ 10 4 Etude de propriétés CSS 11 4.1 Les images avec CSS.................................. 11 4.2 Largeur et hauteur................................... 12 4.3 Les notions de marges et de padding......................... 12 4.4 Le placement des objets................................ 13 4.4.1 La propriété display............................. 13 4.4.2 La propriété float............................... 15 4.4.3 La propriété clear............................... 15 4.4.4 La propriété overflow............................. 17 5 Références 17 2

1 Introduction 1.1 La philosophie W3C 2 COMPLÉMENT DE XHTML Le W3C, ou World Wild Web Consortium, est un consortium qui a été fondé en 1994 par monsieur Berners-Lee. Le consortium est une organisation constituée de groupes de travail qui vise à développer des standards et des normes pour le web. Le but de ces standards est de créer une unification de la manière de créer des contenus pour le web, notamment les pages web. Le HTML a longtemps été un langage hasardeux trop permissif quant à sa syntaxe. Il en résulte de nombreuses pages codées de manières fort différentes, les rendant plus rapidement obsolètes. Aujourd hui, le travail du W3C est reconnu mondialement et le web de l avenir se trouve dans le XHTMl et non le HTML. La philosophie W3C consiste, en temps que développeur, à s efforcer de respecter les normes recommandées (et non imposées) par le W3C. Il en résulte des pages web plus propres, plus structurées et plus pérennes. 1.2 Du HTML au XHTML Mais au fond, quelle différence entre ces langages, et d où sort ce fameux X? Le principe de base est de considérer qu un fichier HTML est également un fichier XML. Le XML est un métalangage (langage qui définit des langages) et les pages web telles que nous vous avons appris à les faire dans la séance précédente sont des fichiers XML. XML est utilisé pour de nombreuses autres choses, comme les flux RSS, les fichiers de configuration, etc... L idée générale est de séparer le contenu de sa forme. Un document XML structure les informations, et permet ensuite de les organiser indépendamment de leur contenu. Voilà pourquoi nous n écrirons presque plus de définition de forme (taille, couleur, alignement) au sein du code XHTML. On définit des zones, manipulables ensuite via le langage CSS. Voilà en quoi consiste la philosophie du web selon le W3C : respecter les standards et structurer l information. 1.3 Et dans la pratique Dans la pratique, XHTML supprime des balises de HTMl considérées comme obsolètes. Rassurez-vous, aucune des ces balises ne vous ont été apprises à la première séance. Et d une manière générale, écitez de copier-coller des gros morceaux de HTML depuis un autre site : vérifiez d abord sa validité vis-à-vis des standards du W3C. 2 Complément de XHTML Nous allons apprendre ici à utiliser d autres balises qui n ont pas été évoquées à la première séance. 2.1 La notion de validité Un document XHTML est dit valide lorsqu il respecte les normes du W3C. Mais ce n est pas aussi simple, car il y a plusieurs normes. Les principales sont XHTML 1.0 Strict, XHTML 1.0 Transitional et XHTML 1.1. Vous n aurez besoin de XHTML 1.0 Transitional que si vous devez valider de vieux documents HTML existants. Nous recommandons d utiliser XHTML 1.0 Strict, pour des raisons liés aux types MIME des fichiers que nous n expliciterons pas ici. Une 3

2 COMPLÉMENT DE XHTML fois que vous avez choisi une norme, vous devez l indiquer dans le document. Celà se fait en ajoutant les deux lignes suivantes avant le tag d ouverture <html>. <?xml v e r s i o n= 1. 0 encoding= iso 8859 15?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > Déclarer la norme choisie Vous remarquerez que la première déclaration indique l encodage du fichier. Celà ne vous empêche pas d utiliser une balise META pour le préciser encore. En effet, cette déclaration précise l encodage lorsque le document est interprété comme un fichier xml, alors que la balise META indique l encodage lorsque le fichier est interprété en tant que XHTML. Pour savoir si vos pages sont valides, vous pouvez vous rendre sur le site http ://validator.w3.org/ pour vérifier la validité de vos pages. Lorsque votre site est en ligne et valide, il est de bon ton d apposer un bandeau W3C pour le signaler. Cette validité est un gage de sérieux de la part du développeur. Le tag d ouverture <html> change légèrement lui aussi. Il convient de le déclarer comme dans cet exemple : <?xml v e r s i o n= 1. 0 encoding= iso 8859 15?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>page vide pour t e s t e r</ t i t l e> </head> <body> </body> </html> Un document XHTML 1.0 Strict Ce fichier se trouve dans le dossier canevas et se nomme vide.htm. 2.2 Insérer des images dans vos pages Pour ajouter des images, il suffit d utiliser une balise <img>. Sa syntaxe est la suivante : 4

3 UTILISATION DU LANGAGE CSS <img src= URL v e r s l image alt= Texte a l t e r n a t i f ou t i t r e /> Insérer des images Vous pouvez voir que la balise <img> est une balise qui s ouvre et se ferme avec un seul tag. Cette balise peut aussi posséder des attributs width et height, mais nous vous déconseillons leur utilisation. Il vaut mieux dimensionner correctement ses images avec un éditeur d image. Vous pouvez le faire avec The GIMP par exemple, qui est un logiciel libre de droits et gratuit. Malgré la popularité du format JPEG, nous vous recommandons l utilisation du format PNG pour vos images web. PNG supporte la transparence, comme GIF, mais permet d afficher des images avec une aussi bonne qualité que JPEG. Des fichiers d images sont disponibles dans le répertoire canevas. Vous pouvez partir de vide.htm pour faire un test. 2.3 Définir des listes d éléments Pour définir une liste d éléments, comme dans un menu par exemple, utilisez ceci : <ul> < l i>item 1</ l i> < l i>item 2</ l i> < l i>item 3</ l i> < l i>item 4</ l i> < l i>item 5</ l i> </ ul> Listes d éléments Les balises <li> peuvent bien sûr contenir des liens, des images ou autre. Néanmmoins, il convient de ne les utiliser que pour un petit volume, comme pour les items d un menu. Par défaut, celà donne une liste à puce avec des éléments alignés verticalement, mais celà peut être modifié avec CSS. 3 Utilisation du langage CSS 3.1 Lier sa page à une feuille de style CSS 3.1.1 Ce qu est une feuille de style A la séance précédente, vous avez tapé du code CSS à l intérieur de la balise <style>. Une feuille de style n est rien d autre qu un fichier texte contenant le code CSS dont vous avez besoin. Il ne doit en aucun cas contenir du HTML. Vous devez lui donner l extension *.css. 5

3 UTILISATION DU LANGAGE CSS 3.1.2 Intérêt de la manipulation Lorsque vous allez créer un site, il sera composé de plusieurs pages XHTML différentes, et vous voudrez (à moins d être bizarre) qu elles respectent un même design. On emploie le terme de charte graphique. Vous allez donc pouvoir dire à la page de respecter les styles présents dans tel ou tel fichier *.css. Vous pouvez faire un tour sur le site http ://www.csszengarden.com/tr/francais/. Les pages ont toutes le même code HTML, seule la feuille de style change. 3.1.3 La pratique Il existe plusieurs méthodes pour lier sa page à une feuille de style. Voici celle que nous vous recommandons. Dans l en-tête (à l intérieur de la balise <head>), ajoutez le code suivant : <style type= t e x t / c s s > @import u r l ( chemin/ v e r s / l e / f i c h i e r /de/ s t y l e. css ) ; </ style> Un document XHTML 1.0 Strict L avantage de cette méthode est que import est une directive de CSS2. Et alors, direzvous? Et alors si jamais le visiteur utilise un navigateur qui ne supporte que le CSS1, la feuille de style ne sera pas importée, et votre site s affichera de manière simpliste mais lisible. Alors qu avec une autre méthode, un vieux navigateur pourrait interpréter à moitié la feuille de style et rendre le site illisible. 3.1.4 Un exemple concret Ouvrez le fichier style.htm dans votre navigateur. Puis éditez ce fichier, remplacez style1.css par style2.css, enregistrez et actualisez. Vous pouvez voir que ce simple fait peut impliquer des changements importants quant aux placements des conteneurs les uns par rapport aux autres. 3.2 Le modèle DOM 3.2.1 Document Object Model Le Document Object Model est une manière de représenter votre document XHTML. Il consiste à le considérer comme une structure arborescente. Chaque balise est un noeud, la racine est la balise <html>. Pour toute balise donnée, les balises qu elle contient sont appelées ses enfants et la balise concernée le parent. Pour mieux comprendre celà, vous pouvez utilisez un outil fort utile intégré dans le navigateur Firefox, appelé inspecteur DOM. Reprenez le fichier style.htm dans votre navigateur, puis cliquez sur Outils -> Inspecteur DOM. Développez un peu l arbre présenté pour visualiser sa structure. Lorsque vous cliquez sur un conteneur, ses bords apparaissent en rouge quelques instants pour vous le montrer. 3.2.2 La notion d ID En XHTML, tous les noeuds (les balises) ont le droit d utiliser l attribut id. Cet attribut sert à donner un nom unique à ce noeud. Dans un document, deux attributs id ne doivent 6

3 UTILISATION DU LANGAGE CSS en aucun cas contenir la même valeur. Il s agit d un identifiant unique dans tous le document, désignant le noeud qui le possède. Celà est utile pour désigner les zones principales de vos pages, comme le menu ou le corps de texte. Cet ID est utilisable dans vos feuilles de style CSS, pour attribuer un style au noeud possédant tel ou tel ID. Pour ce faire, il faut utiliser la syntaxe suivante : nomdelabalise#i d c h o i s i { a t t r i b u t c s s : v a l e u r 1 ; a t t r i b u t c s s 2 : v a l e ur2 ; / Par exemple / div#menu { font s i z e : 1 2 pt ; c o l o r :# f f 0 0 0 0 ; Utiliser les ID dans votre feuille de style 3.2.3 La notion d héritage Les balises enfants possèdent une partie des propriétés CSS de leurs parents, notamment toutes les propriétés de décoration du texte comme sa couleur, sa police, sa taille, son alignement, etc. L héritage concerne aussi les enfants des enfants, les enfants des enfants des enfants, etc. Cette notion d héritage est très puissante car elle peut s utiliser avec les noms de balise, avec les classes et avec les ID. Il également possible d utiliser cette notion d héritage et d arborescence pour désigner des balises particulières. Par exemple, vous pouvez affecter par un style donné tous les paragraphes (balises <p>) des DIV d une classe donnée (par exemple maclasse ). Vous le verrez dans la section suivante. Prenons un premier exemple qui montre comment les propriétés s héritent. Le code CSS a été écrit directement dans la balise <style> pour faciliter la lecture, bien que la méthode via un fichier externe soit préconisée : <?xml v e r s i o n= 1. 0 encoding= iso 8859 15?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>page vide pour t e s t e r</ t i t l e> <meta http equiv= Content Type content= t e x t /xhtml ; c h a r s e t=i s o 8859 1 /> <style content= t e x t / c s s > 7

3 UTILISATION DU LANGAGE CSS </ style> </head> div { border : 1 px s o l i d #000000; margin : 1 0 px ; padding : 5 px ;. parent1 { c o l o r :# f f 0 0 0 0 ;. parent2 { text d e c o r a t i o n : u n d e r l i n e ;. parent3 { font s t y l e : i t a l i c ; <body> Ce t e x t e a l e s t y l e par défaut. <div class= parent1 > Ce t e x t e e s t rouge. <div class= parent2 > Ce t e x t e e s t rouge et s o u l i g n é. <div class= parent3 > Ce t e x t e e s t rouge, s o u l i g n é et i t a l i q u e. </body> </html> La notion d héritage Ce fichier se nomme heritage.htm. Ouvrez le dans votre navigateur pour voir les effets de l héritage. Comme vous pouvez le voir, les DIV imbriqués reprennent les propriétés de leurs parents, sans qu on ai besoin de les redéclarer. 3.3 Les sélecteurs CSS Lorsque vous définissez un style, vous écrivez un nom, une classe ou un id, suivi d accolades contenant les propriétés CSS dont vous avez besoin. Ce qui se trouve avant ces accolades s appelle un sélecteur CSS. 8

3 UTILISATION DU LANGAGE CSS 3.3.1 Les sélecteurs de base Vous connaissez déjà les sélecteurs de base. Les voici tout de même à titre de rappel : / Le s é l e c t e u r de b a l i s e s / div { / Le s é l e c t e u r de c l a s s e s /. maclasse { / Le s é l e c t e u r d ID / #iddudiv { Les sélecteurs de base 3.3.2 Sélecteurs de classe et d ID Si vous connaissez la nature des balises possédant les classes et les ID que vous utilisez, il convient de l indiquer dans le sélecteur. De cette manière par exemple : / Le s é l e c t e u r de c l a s s e s plus p r é c i s / / N a f f e c t e que l e s DIV possédant c e t t e c l a s s e / div. maclasse { / Le s é l e c t e u r d ID / / Seule LE ( car i l d o i t ê t r e unique ) DIV possédant c e t ID s e r a a f f e c t é / div#iddudiv { Des sélecteurs plus précis 9

3 UTILISATION DU LANGAGE CSS Notez qu il ne doit pas y avoir d espace après le nom de la balise dans ce cas. 3.3.3 Le sélecteur multiple Le sélecteur multiple permet d attribuer un lot de propriétés CSS à plusieurs sélecteurs en même temps. Comme ceci par exemple : / Ce s é l e c t e u r va a f f e c t e r l e s DIV de c l a s s e uneclasse l e s SPAN de c l a s s e uneautreclasse l e s b a l i s e s <p> / div. uneclasse, span. uneautreclasse, p { Le sélecteur multiple Celà est très utile pour éviter moults redondances. 3.3.4 Le sélecteur par héritage Voilà sans aucun doute le plus intéressant des sélecteurs. Il permet de parcourir l arborescence. Voyez plutôt : / Ce s é l e c t e u r a f f e c t e t o u t e s l e s b a l i s e s de c l a s s e uneclasse contenue dans un DIV / div. uneclasse { / Ce s é l e c t e u r a f f e c t e tous l e s DIV contenus dans une b a l i s e de c l a s s uneclasse /. uneclasse div { / Ce s é l e c t e u r a f f e c t e t o u t e s l e s b a l i s e s LI contenues dans l e s DIV de c l a s s e item eux même contenus dans l e DIV d id menu / 10

4 ETUDE DE PROPRIÉTÉS CSS div#menu div. item l i { Le sélecteur multiple 4 Etude de propriétés CSS Nous allons ici nous intéresser à quelques propriétés CSS. Avant celà, il est nécessaire de comprendre une chose : vous n ajoutez jamais de propriétés, vous modifiez les valeurs par défaut de propriétés existantes. 4.1 Les images avec CSS CSS permet à sa manière d inclure des images. Celà est très utile lorsque vous avez besoin d images pour la décoration du site (bannières, bordures ombrées). Pour celà, il faut indiquer à CSS une image de fond pour l élément choisi. Celà est bien sûr utilisable sur la balise body. Voici la méthode : body { background image : u r l ( chemin/ v e r s / l /image. png ) ; background r e p e a t : no repeat ; background p o s i t i o n : top l e f t ; background attachment : f i x e d ; Utiliser des images de fond La première propriété spécifie le chemin de l image. Il doit s agir du chemin relatif par rapport au fichier CSS et non par rapport au fichier HTML de votre page. Celà est fort utile pour composer des thèmes utilisables partout depuis le site. La deuxième propriété sert à gérer le motif. Si votre image de fond est une petite image, et que vous voulez remplir l espace de fond avec, il suffit d utiliser une répétition. On peut répéter l image sur tout le plan (papier peint), sur l axe horizontal, ou sur l axe vertical. On ne peut ne pas répéter du tout.la troisième propriété La troisième propriété permet de choisir ou l image va se placer dans l élément. La quatrième propriété prend la valeur fixed ou scroll. Celà n a de sens que lorsqu un ascenseur apparaît dans l élément possédant l image de fond. C est souvent le cas si vous mettez un fond à <body>. Si vous défilez et que vous avez choisi fixed, le fond ne bougera pas et le texte volera au dessus. Avec scroll, le fond va suivre le déplacement de l ascenseur. Attention : cette propriété ne fonctionne que sur <body>. Sur des DIV, sa valeur reste fixed même si vous la changez. 11

4 ETUDE DE PROPRIÉTÉS CSS Il convient d utiliser background-color conjointement avec ces propriétés, en lui donnant la valeur de fond de l image. Des exemples se trouvent dans le fichier background.htm et scoll.htm. 4.2 Largeur et hauteur Il est souvent utile de pouvoir gérer la largeur à la hauteur des éléments. Celà se fait via les propriétés width et height qui se précisent en pixels ou en pourcentage. Vous allez voir un exemple au paragraphe suivant. Il existe également min-width, min-height, max-width et max-height, mais Internet Explorer 6 ne les supporte pas. Il convient de s en passer dans un souci d accessibilité. 4.3 Les notions de marges et de padding La marge est la distance entre le bord du conteneur et ce qui l entoure. Le padding est la distance entre le bord du conteneur et ce qu il contient. Fig. 1 Les marges et le padding Les tailles des marges et des padding se définissent soit en pixels, soit en em, soit en pourcentage (fonctionne pour les marges de gauche et de droite). On les modifie ainsi : div. maclasse { margin top : 10 px ; margin bottom : 10em ; margin l e f t :15%; margin r i g h t :15%; 12

4 ETUDE DE PROPRIÉTÉS CSS padding l e f t : 2 0 px ; padding r i g h t : 2 0 px ; padding top : 1 0em ; padding bottom : 5em ; div. a u t r e C l a s s e { margin : 1 0 px ; pa&dding : 5em ; div. encoreautre { margin : 5px 50 px 5px 50 px ; padding : 1em 5px 1em 50 px ; Modifier les marges et le padding Savoir bien gérer les marges est important car celà joue sur la place que les éléments ont le droit ou non de prendre. Voyez un exemple dans le fichier marges.htm. 4.4 Le placement des objets 4.4.1 La propriété display Comme vous avez pu le remarquer, lorsque vous utilisez des DIV, ils se mettent les uns au dessus des autres, et prennent chacun la largeur complète de la page. Lorsque que vous utilisez des SPAN, ceux-ci ne prennent que la largeur occupée par leur contenu et ne force pas les autres SPAN à se placer au dessus et en dessous. Ces propriétés peuvent être changées via la propriété CSS display. Cette propriété peut prendre 17 valeurs, mais nous n en citerons que 3, à savoir block, inline et none. Lorsque la valeur choisie est block, l élément concerné a le comportement par défaut d un DIV. Lorsque la valeur est inline, l élément a le comportement par défaut d un SPAN. Vous pouvez de ce fait complètement inverser le fonctionnement de DIV et SPAN, mais celà n est pas recommandé. Changer cette valeur est utile pour gérer l alignement horizontal ou vertical d un menu par exemple. Voyez plutôt cet exemple, présent dans le fichier blocks.htm : <?xml v e r s i o n= 1. 0 encoding= iso 8859 15?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>images de fond</ t i t l e> <meta http equiv= Content Type content= t e x t /xhtml ; c h a r s e t=i s o 8859 1 /> <style content= t e x t / c s s > 13

4 ETUDE DE PROPRIÉTÉS CSS </ style> </head> div. b l o c s a { d i s p l a y : block ; div. cache a { d i s p l a y : none ; <body> <div> Du t e x t e avant l e s l i e n s <a href= # >Un l i e n</a> <a href= # >Un Autre</a> <a href= # >Un Troisième</a> Du t e x t e après l e s l i e n s </body> </html> <div class= b l o c s > Du t e x t e avant l e s l i e n s <a href= # >Un l i e n</a> <a href= # >Un Autre</a> <a href= # >Un Troisième</a> Du t e x t e après l e s l i e n s <div class= cache > Du t e x t e avant l e s l i e n s <a href= # >Un l i e n</a> <a href= # >Un Autre</a> <a href= # >Un Troisième</a> Du t e x t e après l e s l i e n s Utilisation de la propriété display Remarquez l utilisation d un sélecteur CSS par héritage. Utilisez l inspecteur DOM de Mozilla Firefox pour visualiser l espace occupé par les balises <a>. La valeur 14

4 ETUDE DE PROPRIÉTÉS CSS 4.4.2 La propriété float Cette propriété est la plus délicate à comprendre et à maîtriser. Elle permet de faire flotter un DIV. En fait, celà aura pour effet de réduire le DIV à la taille de son contenu, et d autoriser d autres DIV (ou éléments dont la propriété display vaut block) à se placer à sa droite ou à sa gauche, selon qu on le fasse flotter à droite ou à gauche. Vous pouvez voir l effet de float dans les fichiers style.htm et marges.htm ou cette propriété est utilisée, ainsi que dans le paragraphe suivant. Dans la pratique, lorsque vous faites flotter un élément, limitez toujours sa largeur à l aide de la propriété width. 4.4.3 La propriété clear Cette propriété est très fortement liée à float puisqu elle sert à interdire à un élément d être cotoyé par des flottants à sa droite ou sa gauche, ou les deux en mêmes temps (respectivement, utilisez les valeurs left,right et both). Si vous faites flotter un élément mais que le suivant interdit les flottants autour de lui, c est comme si vous laissiez le comportement par défaut, à ceci près que le flottant est limité à la largeur de son contenu. Le listing suivant montre les comportements cités : <?xml v e r s i o n= 1. 0 encoding= iso 8859 15?> <!DOCTYPE html PUBLIC //W3C//DTD XHTML 1. 0 S t r i c t //EN http : / /www. w3. org /TR/xhtml1/DTD/xhtml1 s t r i c t. dtd > <html xmlns= http : / /www. w3. org /1999/ xhtml xml : lang= f r > <head> <t i t l e>bien g é r e r l e s marges</ t i t l e> <style content= t e x t / c s s > body { margin : auto ; width :700 px ; div#corps { border r i g h t : 1 px s o l i d #000; border l e f t : 1 px s o l i d #000; padding r i g h t : 2 5 px ; padding l e f t : 2 5 px ; div. flottantgauche { f l o a t : l e f t ; div. f l o t t a n t D r o i t { f l o a t : r i g h t div#pied2 { c l e a r : both ; 15

4 ETUDE DE PROPRIÉTÉS CSS </ style> </head> <body> <div id= corps > <div> <div class= flottantgauche > <ul> < l i>ce</ l i> < l i>div</ l i> < l i>e s t</ l i> < l i>un</ l i> < l i>f l o t t a n t</ l i> </ ul> <div id= t e x t e 1 > Ce t e x t e e s t j u s t e l à pour f a i r e beau. <div id= pied1 > Ce t e x t e a u s s i. <p>&nbsp ;</p> <div style= c l e a r : both ; ></div> <p>&nbsp ;</p> <div> <div class= f l o t t a n t D r o i t > <ul> < l i>ce</ l i> < l i>div</ l i> < l i>e s t</ l i> < l i>un</ l i> < l i>f l o t t a n t</ l i> </ ul> </body> </html> <div id= t e x t e 2 > Ce t e x t e e s t j u s t e l à pour f a i r e beau. <div id= pied2 > Ce t e x t e a u s s i. Utiliser les propriétés float et clear 16

5 RÉFÉRENCES 4.4.4 La propriété overflow Cette propriété sert à gérer le comportement d un objet lorsque son contenu est obligé d en dépasser. Il prend la valeur auto, scoll, hidden ou visible. Exemples dans le fichier overflow.htm. 5 Références Contacter l auteur : jjansen@etu.enseeiht.fr Références CSS 2 : http ://www.w3schools.com/css/css reference.asp Validateur W3C : http ://validator.w3.org/ Mammouthland : http ://www.mammouthland.net/cours/css/ OpenWeb : http ://openweb.eu.org/ Alsacréations : http ://www.alsacreations.com/ Les tableaux en XHTML : http ://fr.selfhtml.org/html/tableaux/construction.htm http ://fr.selfhtml.org/html/tableaux/constitution.htm 17