HTML & CSS – mise en page

Dans cette deuxième partie du tutoriel HTML & CSS pour les débutants nous allons approfondir nos connaissances en HTML mais surtout en CSS.
En effet depuis que la mise en forme de la page est prise en compte par le CSS l'apprentissage du HTML (au sens strict) se résume à très peu de choses ...
Délibéremment je n'évoquerai pas les nouveautés apportées par la version 5 de HTML et la version 3 de CSS. En effet vous trouverez dans ce site un tutoriel dédié à HTML5 et un autre tutoriel sur CSS3.

Les différents chapitres

De nouvelles propriétés CSS Le positionnement

De nouvelles propriétés CSS

Je pourrais vous donner la liste de de toutes les propriétés CSS avec pour chaque propriété les valeurs possibles dont la valeur par défaut (c'est à dire celle retenue lorsque la propriété n'est pas mentionnée) mais ça ne serait absolument pas pédagogique. Chaque propriété CSS doit être replacée dans un contexte qui précise le rôle qu'elle joue dans la mise en page.
Nous verrons aussi dans ce chapitre quelques balises HTML qui n'avaient pas encore été évoquées dans la première partie.

Exemple 1

Grâce aux pseudo-classes du CSS on peut réaliser des animations basiques de la page.
Par ailleurs nous n'avons pas tout dit sur les tableaux.

Le code de la page

<!DOCTYPE html> <html><head><title>page21- css : les pseudo classes compléments sur tableaux</title> <style> * { font-family : sans-serif ; font-size : 20px; text-decoration : none ; } body { width : 90% ; border : 1px solid black ; margin : 20px auto 20px auto ; } img { display : block ; width : 300px ; opacity : 0.5 ; } img.deforme {height : 100px;} img:hover {width : 400px ; height :300px ; opacity : 1;} img:active {visibility : hidden; } h1 {text-align : center ; font-size :150% ; text-transform :uppercase ; } h1:hover , a:hover {color: red; text-decoration : underline overline ; } p {margin : 10px ; } p:first-line{font-weight : bold ; font-style : italic ; } p:first-letter {font-family : serif ; font-size : 200% ; } table {width :80% ; } caption {text-align :center ; font-weight : bold; } thead {background-color : grey ; opacity : 1;} tr {height : 40px ; } td {padding-left :5px ; } td.droite {text-align : right ; padding-right : 5px ;} tbody {background-color : grey ;opacity : 0.5;} img, table {margin : 10px auto 10px auto ;} </style> </head> <body > <h1>Animer les images - compléments sur les tableaux </h1> <p>Les deux premières images sont déformées : non respect des proportions d'origine. <br>Survolez l'une des trois images et observez ... <br>Cliquez l'une des trois images et observez ...</p> <img src ='../images/toucan.jpg' class ='deforme'> <img src ='../images/tortue.jpg' class ='deforme'> <img src ='../images/riviere.jpg' > <table> <caption>Tarifs France & UE</caption> <thead> <tr> <th>référence</th><th>désignation</th><th>prix HT en €</th> </tr> </thead> <tbody> <tr> <td >bo11</td><td>boulon</td><td class ='droite'>10,50</td> </tr> <tr> <td >v015</td><td >vis</td><td class ='droite' >5,50</td> </tr> <tr> <td >cl05</td><td >clou</td><td class ='droite'>12,00</td> </tr> </tbody> </table> <table> <caption>Tarifs exportation</caption> <thead> <tr> <th>référence</th><th>désignation</th><th>prix HT en $</th> </tr> </thead> <tbody> <tr> <td >bo11</td><td>boulon</td><td class ='droite'>11,50</td> </tr> <tr> <td >v015</td><td >vis</td><td class ='droite' >6,50</td> </tr> <tr> <td >cl05</td><td >clou</td><td class ='droite'>13,00</td> </tr> </tbody> </table> <a href = "#" >retour haut de page </a> </body></html>

Aperçu avec le navigateur

Essayez !

Chaque exemple est, comme d'habitue, affiché dans un nouvel onglet. Pensez à fermer ces onglets ensuite sauf celui avec pour titre "HTML & CSS - mise en page".

Nouveautés du code HTML

Dans un premier temps je vous ai dit que pour construire un tableau de données il fallait utiliser quatre conteneurs : TABLE contenant des balises TR ; conteneurs TR contenant des balises TH ou TH

Ces quatre conteneurs sont facultatifs mais facilitent la mise en forme du tableau via le CSS.

<a href = "#" ... : si la balise A la valeur de l'attribut href est # cela veut dire retour vers le haut de la même page.

Analyse de la feuille de style

Il y a énormément de nouveautés dans cette feuille de style :
Je commente uniquement les règles de style avec des nouveautés.

* { font-family : sans-serif ; font-size : 20px; text-decoration : none ; }  : La valeur de la propriété font-family peut être un nom de police ou une famille de police. sans-serif est une famille de police. Donc ici le navigateur va afficher le texte avec une police sans empattement installée sur le PC (Arial en général).
Rappel : Times New Roman est une police avec serif c'est à dire avec empattements alors que Arial est une police sans serif c'est à dire sans empattements.
Text-decoration : none : pour toutes les balises les surlignage et soulignage sont supprimés. Donc les liens hypertexte (balise A) ne seront plus soulignés.

body { width : 90% ; border : 1px solid black ; margin : 20px auto 20px auto ; } : dans le cadre du "responsive web design" (adaptation de la page à tous types d'écrans) la largeur de la page est exprimée en % de la largeur de l'écran. je n'en dis pas plus pour l'instant.
La méga propriété margin avec 4 valeurs remplace avantageusement 4 propriétés : margin-top : 20px ; margin-right : auto ; margin-bottom : 20px ; margin-left : auto )
Retenez la syntaxe : margin : Haut Droite Bas Gauche

img { display : block ; width : 300px ; opacity : 0.5 ; } : les images deviennent des boîtes (saut de ligne avant et après) avec une largeur de 300 pixels et sont à demi transparentes.
la valeur opacity est comprise entre 0 (image transparente) et 1 (image complètement opaque).

img.deforme {height : 100px;}  : si on applique la classe deformee à une image celle-ci alors affichée avec les dimensions 300 par 100 c'est à dire un rapport 3 sur 1.
En effet il y a la règle img {width : 300px;} et la classe deforme qui précise height : 100px . Or les trois images ont pour dimensions d'origine 800 par 600 donc un rapport 4/3. Elles seront donc très déformées !

img:hover {width : 400px ; height :300px ; opacity : 1;} : lors du survol de l'image celle-ci prend les dimensions citées (400 par 300 donc un rapport 4/3 comme à l'origine) et elle devient bien nette (opacity : 1).
:hover est une pseudo classe qui permet de gérer un événement (survol par la souris ou le doigt).
Cette pseudo classe peut s'appliquer à n'importe quelle balise.

img:active {visibility : hidden; }: durant le clic l'image cliquée devient invisible mais les éléments HTML situés en dessous ne remontent pas ; l'emplacement est réservé.
:active est une autre pseudo classe qui peut aussi être associée à n'importe quelle balise.

h1 {text-align : center ; font-size :150% ; text-transform :uppercase ; }: La propriété text-transform avec la valeur uppercase convertit le texte en majuscules.
Moralité : lorsque vous saisissez le texte ne tapez jamais directement en majuscules car vous vous priveriez des lettres majuscules accentuées.

h1:hover , a:hover {color: red; text-decoration : underline overline ; } : si survol d'un titre de niveau 1 ou d'un lien alors le texte de l'élément devient rouge avec soulignement et surlignement.

p{margin : 10px ; } : remplace avantageusement 4 propriétés ; voir plus haut.

p:first-line{font-weight : bold ; font-style : italic ; } : la première ligne du texte balisé par P est en gras et en italique

p:first-letter {font-family : serif ; font-size : 200% ; } : la première lettre du texte balisé par P sera une lettrine ; taille de 40px (200 % de 20px) et la lettre aura des empattements (police avec serif telle TNR (Times New Roman)

:first-line et :first-letter sont aussi des pseudo-classes.

table {width :80% ; } : Les tableaux de la page auront une largeur de 80% mais non pas de l'écran mais de la page ! En effet TABLE est "descendant" de BODY donc la largeur est exprimée en % de celle de son container.

caption {text-align :center ; font-weight : bold; } : la légende de chaque tableau sera centrée horizontalement dans sa boîte et aura de la graisse

thead {background-color : grey ; opacity : 1;} : l'en-tête de chaque tableau aura comme couleur de fond un gris opaque.

tr {height : 40px ; }  : la hauteur de chaque ligne des tableaux ne sera pas auto (hauteur ajustée au contenu) mais toujours 40 pixels.
Par défaut le texte d'une cellule de tableau est toujours centrée verticalement dans sa cellule.

td {padding-left :5px ;} : ne pas confondre margin (marges extérieures à la bordure) avec padding (marges intérieures à la bordure) .
Grâce à une marge interne gauche le texte contenu dans une cellule balisée par TD ne colle pas à la bordure gauche.

td.droite {text-align : right ; padding-right : 5px ;} : classe droite spécifique au conteneur TD.
Par défaut dans les cellules balisées par TD le contenu est aligné à gauche. Or pour faciliter l'addition de la colonne, les montants doivent être alignés à droite (mais sans coller à la bordure droite).

tbody {background-color : grey ;opacity : 0.5;} :
Le corps du tableau aura comme couleur de fond un gris clair obtenu en appliquant une certaine transparence à un gris soutenu. Il y avait une autre solution en utilisant une seule propriété : {background-color : lightgrey ;} ou {background-color : rgb(190,190,190) ;}

Exemple 2 avec bug !

Le code la page

Trois boîtes grâce au conteneur DIV.

<style> * {font-family :cursive ; font-size : 14px ;} h1,div {width : 90% ; margin :10px auto 10px auto ; } h1 {height : 50px ; font-family : arial ; font-size : 120% ; text-align :center; border :1px solid black ; } div {height: 150px ; border : 1px dashed red ;} p {text-indent : 50px ; text-align : justify ; margin-left : 5px ; margin-right :5px ;} p:first-line {font-variant : small-caps ; } </style> </head> <body> <h1>Le centrage vertical d'un titre dans sa boîte - gestion du débordement</h1> <div> <p>Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri.</p> <p>Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, et causarum legitima silente defensione carnifex rapinarum sequester et obductio capitum et bonorum ubique multatio versabatur per orientales provincias, quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella Parthica cerentur, et Aegypto, quam necessario aliud reieci ad tempus.</p> </div> <div> ... </div> <div> ... </div> …

Aperçu avec le navigateur

Essayez !

Sur un écran d'ordinateur le rendu est correct mais sur de petits écrans (tablette et smartphone) c'est la catastrophe. Le texte déborde de sa boîte et recouvre le texte de la boîte suivante.
Il y a en effet une propriété CSS overflow dont la valeur par défaut est visible ce qui veut dire que si il y a "surplus" (contenu dépasse le contenant) alors le "surplus" déborde sur la boîte de dessous.

Il y a aussi, mais c'est moins grave, le titre qui n'est pas centré verticalement dans sa boîte (mais aligné en haut).

Mais rassurez vous il n'y aura pas grand-chose à changer pour avoir une mise en page plus propre. Voir page suivante.
Mais avant d'aborder le "débuggag" analysons le CSS de cette page qui comprend pas mal de nouveautés.

Nouveautés CSS

*{font-family :cursive ; font-size : 14px ;} : il y a trois familles de police : serif, sans-serif et cursive
Les polices cursives sont celles qui imitent l'écriture manuscrite.

h1{height : 50px ; font-family:arial } : la valeur par défaut de la propriété height est auto ; c'est à dire que la hauteur est ajustée au contenu. Ici la boîte H1 aura une hauteur de 50 pixels quelque soit le contenu. Pour que le titre ne s'affiche pas en cursive il faut procéder à une "rupture d'héritage" c'est à dire redéfinir la police à utiliser pour le sélecteur H1.

div {height: 150px ; border : 1px dashed red ;} : DIV est une balise de type block très utilisée pour créer de grandes zones dans la page. Ici chaque boîte DIV sera bordurée par un trait discontinu (dashed) rouge. Chaque boîte DIV aura toujours une hauteur de 150 pixels quelque soit le contenu ...
Rappel : valeur par défaut de la propriété height pour une boîte est auto (ajustement de la hauteur de la boîte au contenu).

p {text-indent : 50px ; text-align : justify ; margin-left : 5px ; margin-right :5px ;} : retrait de première ligne (indentation) de 50 pixels ; justification du texte ; marges gauches et droite de 5 pixels pour que le texte ne colle pas aux bordures de la balise parente (DIV).

p:first-line {font-variant : small-caps ; } : la première ligne de chaque paragraphe sera en petite majuscules.
Ne confondez pas avec text-transform : uppercase ; : majuscules normales.

Exemple 2 corrigé

C'est la version "débuggée" de la page précédente !

Aperçu avec le navigateur

Essayez !

Le titre est désormais parfaitement centré verticalement dans sa boîte.

Dans chaque DIV le "surplus" est masqué (donc il n'y a pas de débordement) mais dès le survol par la souris la boîte s'agrandit en hauteur pour afficher tout son contenu.

On s'est contenté d'ajouter trois règles de style !

Les ajouts dans la feuille de style

h1 {line-height : 50px ; } div {overflow :hidden ; } div:hover {height :auto ; }

Expliquons ces ajouts !

h1 {line-height : 50px ; } : un texte est toujours centré verticalement dans sa ligne. Donc si la ligne unique d'un texte a la même hauteur que la boîte qui la contient alors le texte sera aussi centré verticalement dans sa boîte.

div {overflow :hidden ; } : l'éventuel "surplus" de texte (contenu dépassant le contenant) est masqué.

div:hover {height :auto ; } : si survol de la boîte par la souris la hauteur de celle-ci s'adapte au contenu !

A propos de la propriété overflow

Exemple 3

Le code de la page (extraits)

... <style> * {font-family : tahoma, calibri, arial ; font-size : 14px ;} h1, div {width :90% ; margin :10px auto 10px auto ; border :1px solid black ;} h1 {height : 50px ; line-height : 50px ; font-size : 120% ; text-align :center; } img {display : block ; width : 400px ; margin :10px auto 10px auto ; } div {height : 200px ; overflow : auto ; } div img {width :100px ; float : left ; margin :10px;} p{text-align : justify ; margin-left : 5px ; margin-right :5px ;} </style> </head> <body> <h1>La propriété float</h1> <img src='../images/tortue.jpg'> <img src='../images/toucan.jpg'> <div> <img src ='../images/html5_logo.png'> <p>Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere … </div> <div> <img src ='../images/svg_logo.png'> <p>Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie ... </div> …

Aperçu avec le navigateur

Essayez !

Les images de cette page sont affichées selon deux méthodes totalement différentes. Les deux premières se comportent comme des boîtes bien centrées dans la page. Les deux suivantes sont positionnées à gauche dans chaque boîte DIV.

Nouveautés dans le code CSS

* {font-family : tahoma, calibri, arial ; … } :si le navigateur ne trouve pas la police tahoma il va utiliser calibri, si il ne trouve pas calibri il va utiser Arial, etc.

h1{height : 50px ; line-height : 50px ; … }: centrage vertical du titre dans sa boîte. Attention ça suppose que le titre tient sur une seule ligne sinon ...

img {display : block ; ... } :la balise IMG transformée en balise block pour pouvoir appliquer la propriété margin :auto.

div {height : 200px ; overflow : auto ; } : affichage éventuel d'une barre de défilement dans chaque boîte DIV pour gérer l'éventuel débordement de texte.

div img {... ; float : left ; margin :10px;}: le sélecteur div img signifie "images contenues dans un DIV".
Donc les images contenues dans un DIV redeviennent de type inline et "flottent" à gauche dans leur boîte parente (DIV) sans coller aux bords de la boîte DIV (marge de 10px ).

Ne confondez pas le sélecteur div img avec le sélecteur div, img. Dans le premier cas il faut lire "balises IMG dans DIV " et dans le deuxième cas il faut lire : "balises DIV et IMG".

La page intitulée "page24.htm"

Le code de la page (extraits)

… <style> * {font-family : tahoma, calibri, arial ; font-size : 14px ;} body {width : 90%; margin : 10px auto 10px auto ;} h1,div,table{width :80% ; margin :10px auto 10px auto ;} h1 {height : 50px ; line-height : 50px ; font-size : 120% ; text-align :center; border : 1px solid red ; } div {background : rgb(190,190,190) ; } p{text-align : justify ; margin-left : 5px ; margin-right :5px ;} p:first-letter {font-family : serif ; font-size :300% ; } .signale{font-weight : bold ; text-decoration : underline ; } table {empty-cells : hide ; border-spacing : 10px ;} img {display : block ; width : 200px ; margin : 10px auto 10px auto ;} div img { display : inline ; width : 100px ; float : right ; margin : 10px ; } tr {height: 100px ; } td {font-size : 40px ; text-align : center; font-weight : bold ; color : white ; border : 1px solid black ; background : grey ; } </style> </head> <body> <h1>Balise span - entité de caractères - compléments sur les tableaux</h1> <div> <img src ='../images/html5_logo.png'> <p>Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus ... </div> <div> <img src ='../images/svg_logo.png'> <p>Nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris <span class ='signale'>important</span> implacabilitati sedisset, id velut fas iusque perpensum ... digesta, cum bella Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.</p> </div> <div> <p>Dans une page web c'est à dire un fichier avec l'extension htm ou html une instruction HTML n'est jamais affichée mais va être interprétée. <br>Or si vous voulez réaliser un tutoriel vous souhaitez parfois que certaines instructions HTML soient simplement affichées ... <br>Il y a bien sûr une solution : remplacer les chevrons par les entités de caractère correspondantes. <p>Exemple d'instruction pour insérer une image dans une page : &lt; img src = "../images/toucan.jpg" &gt; </div> <img src ='../images/toucan.jpg'> <table> <tr><th colspan ='3'>Clavier tactile </th></tr> <tr><td></td><td>&uarr;</td><td></td></tr> <tr><td>&larr;</td><td></td><td>&rarr;</td></tr> <tr><td></td><td>&darr;</td><td></td></tr> </table> …

Aperçu avec le navigateur

Essayez !

Trois boites avec un fond gris clair. Dans les deux premières une image positionnée en haut à droite.
Une lettrine en début de chaque paragraphe.
Dans les deux premières boîtes le mot important est affiché en gras souligné.
Dans la troisième boîte une instruction HTML qui n'est pas interprétée par le navigateur mais simplement affichée …
En dessous une image plus grande que les deux précédentes et centrée.
Sous l'image un clavier tactile … Ce clavier tactile c'est en fait un tableau (3 par 3). Sur les 9 cellules 4 seulement sont remplies avec une entité de caractère qui affiche une flèche. Les cellules vides n'apparaissent pas.

Nouveautés HTML

Dans le code HTML nous avons des mots commençant par le caractère "&" et se terminant par ";".
Ainsi nous avons l'instruction suivante :

&lt; img src = "../images/toucan.jpg" &gt;

Dans cette instruction nous avons utilisé deux entités de caractère qui représentent respectivement les symboles < et > !
Donc si vous remplacez les chevrons par leur entité de caractère ça ressemble à une instruction HTML mais ça n'en n'est plus une pour le navigateur qui se contente donc d'afficher le texte (mais ne l'interprète pas)!

<tr><th colspan ='3'>Clavier tactile </th></tr>

Fusion de trois cellules en une seule.
Donc le tableau comprend trois cellules par lignes sauf pour la première ligne (une seule cellule).

<tr><td></td><td>&uarr;</td><td></td></tr>

Dans la deuxième ligne du tableau il y a trois cellules dont 2 vides et la cellule non vide contient une entité de caractère qui permet d'afficher une flèche vers le haut.

A propos des entités de caractère

Une entité de caractère permet d'insérer dans une page web certains symboles et lettres. Supposons que vous vouliez insérer le symbole € mais que le clavier ne dispose pas de cette touche ; il suffit de taper en un seul mot(sans espace) : "&" puis "euro" puis ";"

Un entité de caractère commence toujours par "&" et se termine toujours par ";"

Certains développeurs web utilisent aussi les entités de caractère pour représenter les lettres accentuées.

Vous devez vous dire qu'ils sont "maso" ... En fait non dans l'éditeur NotePad vous avez la fonction remplacer .C'est donc très rapide de remplacer "é" par son entité de caractère, etc.

Vous devez vous demander maintenant l'intérêt de cette manipulation ...
Et bien quelque soit le système d'encodage utilisé pour créer la page et celui utilisé pour lire la page les lettres accentuées seront toujours correctement affichées. Ce qui n'est pas le cas si par étourderie (ou ignorance) vous avez encodé en Unicode une page lue avec le système ANSI ou si vous avez encodé en ANSI une page lue avec le système Unicode.
Cette notion de système de codage sera évoquée un peu plus loin.

Attention tous les caractères constitutifs d'une entité de caractère doivent être collés (sans espace).

Nouveautés CSS

p:first-letter {font-family : serif ; font-size :300% ; } : la première lettre de chaque paragraphe sera une lettrine.

.signale{font-weight : bold ; text-decoration : underline ; } : si vous appelez la classe signale alors le texte balisé apparaît en gras et souligné.

table { empty-cells : hide ; border-spacing : 10px ;} : les cellules vides sont masquées ; espacement entre les bordures de cellules : 10px (par défaut : 1px).

img {display : block ; width : 200px ; } : les images deviennent de type block afin que la propriété margin puisse s'appliquer.

div img { display : inline ; width : 100px ; float : right ; margin : 10px ; } : les images contenues dans les boîtes DIV sont redéfinies inline et se positionnent à droite dans la boîte DIV sans toucher le bord de la boîte (marge de 10 pixels).

tr {height: 100px ; } : hauteur de chaque ligne d'un tableau : 100 pixels.

td {font-size : 40px ; text-align : center; font-weight : bold ; color : white ; border : 1px solid black ; background : grey ;} : ainsi les flèches (contenues dans des cellules délimitées par TD) apparaissent centrées en blanc gras sur fond gris foncé.

Les balises génériques de HTML

span et div sont des balises génériques (aucune mise en forme par défaut). Mais span est de type inline alors que div est de type block.

Exemple 5

Le code de la page (extrait)

… <style> * {font-family : tahoma, calibri, arial ; font-size : 14px ;} body {width : 90%; margin : 10px auto 10px auto ;} h1,div,table{width :80% ; margin :10px auto 10px auto ;} h1 {height : 50px ; line-height : 50px ; font-size : 120% ; text-align :center; border : 1px solid red ; } div {border :1px solid red ; } #boite1 {height : 300px ; background-color :aqua ; } #boite2 {height : 300px ; background-image : url(../images/fond1.jpg) ; background-size :cover ; } table {border :1px solid black ;} tr {height : 50px ; } th, td {border : 1px dotted black ; } td {padding-left : 10px ; } .tableau1{border-collapse : collapse ; } .tableau2{border-spacing : 10px ; } .tableau1 td{vertical-align : top ; } .tableau2 td {vertical-align :bottom ; } </style> </head> <body> <h1>Arrière plan d'une boîte - CSS & tableau </h1> <div id = 'boite1'></div> <div id = 'boite2'></div> <table class ='tableau1'> ... </table> <table class ='tableau2'> ... </table>

Aperçu avec le navigateur

Essayez !

Deux boîtes : la première avec en fond une couleur (bleu aquatique) et la deuxième avec en fond une image.
Deux tableaux avec des cellules très hautes.
Dans le premier tableau les bordures contiguës sont fusionnées alors qu'elles sont bien espacées dans le deuxième.
Dans le premier tableau le texte contenu dans chaque TD est aligné verticalement haut alors que dans le deuxième tableau le texte contenu dans chaque TD est aligné verticalement bas.

Analyse de la feuille de style

#boite1 {height : 300px ; background-color : aqua ; }: la boîte identifiée boite1 aura comme fond : la couleur aqua.

#boite2 {height : 300px ; background-image : url(../images/fond1.jpg) ; background-size :cover ; } : la deuxième boîte a pour fond une image et on demande que l'image s'adapte à la taille de la boîte avec la nouvelle propriété CSS background-size : cover.

th, td {border : 1px dotted black ; } : bordures de cellules en pointillés (dotted).

.tableau1{border-collapse : collapse ; } : l'appel de la classe tableau1 se traduit par la fusion des bordures contiguïes dans le tableau.
Valeur par défaut de border-collapse : separate

.tableau2{border-spacing : 10px ; } : l'appel de la classe tableau2 se traduit par un espacement de 10px entre les bordures.
Valeur par défaut de border-spacing : 1px

.tableau1 td{vertical-align : top ; } : les cellules TD contenues dans un tableau affecté de la classe tableau1 verront le texte aligné verticalement en haut.
Valeur par défaut de la propriété vertical-align : middle (centrage vertical dans la cellule).

.tableau2 td {vertical-align :bottom ; }
Les cellules TD contenues dans un tableau affecté de la classe tableau2 verront le texte aligné verticalement en bas.

Positionnement des boîtes

Aperçu de ce que vous voulez obtenir

Première solution : utiliser la propriété CSS float

Le code de la page "page26_bug.htm" (extrait)

... <style> * {font-family : arial ; font-size : 14px ; margin :0px ; padding :0px ;} body {width : 90% ; margin :20px auto 20px auto; } div {background : purple ; opacity : 0.4 ; } h2, p {width : 90% ; margin : 10px auto 10px auto ; background : white ; } h2{height : 30px ; line-height : 30px ; text-align : center ; font-size: 130% ; } p {text-align : justify ; padding: 5px ; } #entete, #pied {width : 100% ; height : 100px ; margin-top : 10px ; margin-bottom :10px ;} #menu {width : 28% ; height : 300px ; } #corps {width :70%; height : 400px ;} </style> </head> <body> <div id ='entete'> <h2>En-tête page</h2> </div> <div id ='menu'> <h2>Menu</h2> </div> <div id = 'corps'> <h2>Le corps de la page</h2> </div> <div id ='pied'> <h2>Le pied de page</h2> </div> …

Commentaire du code CSS

* {...; margin :0px ; padding :0px ;} : suppression des marges (externes et internes) par défaut prévues par le HTML; les marges sont ensuite redéfinies).

#entete, #pied {width : 100% ... : les boîtes identifiées "entete" et "pied" ont une largeur de 100% de leur boîte "parente" qui est est ici BODY. Comme la page a une largeur de 90% de l'écran ces deux boîtes auront aussi une largeur de 90% de l'écran. Il s'agit d'une notation en relatif.

#menu {width : 28% ; ... : la largeur de la boîte identifiée "menu" est égale à 28% de la boîte parente qui fait 90% de l'écran.
La notation en relatif est très souple. Si par exemple vous décidez de ramener la largeur de BODY à 900px automatiquement la largeur de "menu" sera ajustée (900 * 28%).

Commentaire du HTML

Dans le conteneur HEAD une nouvelle instruction : meta charset ='utf-8'
Cette instruction force le navigateur à lire la page avec le jeu de caractères Unicode (norme UTF-8). En effet par défaut un navigateur lit la page selon le codage Occidental ou ANSI ou latin1 (norme ISO-88591).

Aperçu avec le navigateur

Testez ce code!

C'est la catastrophe !

Les boîtes apparaissent les unes en dessous des autres en fonction de l'ordre d'appel. Mais après tout c'est normal c'est le positionnement par défaut des boîtes. On dit qu'elles sont dans le flux.

Rassurez vous, il n'y a que quelques correctifs à apporter !

Débuggage : la page intitulée "page26_ok.htm"

Nous allons "débugger" la page précédente !

Le code de la page

Très peu de changement par rapport à la page précédente. Simplement quelques ajouts dans la feuille de style.
Il faut rajouter dans la feuille de style deux règles :

#entete, #menu, #pied {float : left ; } #corps {float : right ; }

Aperçu avec le navigateur

Essayez !

Les boîtes identifiées menu et corps sont côte à côte comme nous le voulions.
Nous avions déjà utilisé la propriété float pour positionner (à gauche ou à droite) un élément inline dans un élément block. Ici nous utilisons cette propriété avec des boîtes (éléments block).
Donc la propriété float peut aussi s'appliquer à des éléments block !

Rappels

Attention la largeur totale d'une boîte peut être nettement supérieure à celle précisée par la propriété width.

Donc dans notre exemple il faut éviter que la largeur totale de menu plus largeur totale de corps ne dépassent la largeur de la page sinon la boîte corps va certes s'afficher à droite mais sous (et non pas à côté) la boîte menu.

Deuxième solution : utilisation de display : inline-block

Des éléments affectés de la propriété display : inline-block se positionnent côte à côte tant qu'il y a de la place (alors que les éléments block se positionnent les uns au dessous des autres.

Le code CSS

En effet aucun changement pour la partie HTML.

Extrait de la feuille de style :

... #entete, #pied {width : 100% ; height : 100px ;} #menu {width : 28% ; height : 400px ; margin-right : 1%} #corps {width : 70%; height : 300px ;} #entete, #menu, #pied, #corps {display : inline-block ; margin-top : 10px ; vertical-align : top ; }

Les quatre boîtes se voient affecter de la propriété display : inline-block.
Pour que la boîte "menu" ne colle pas horizontalement à la boîte "corps" j'ai prévu une marge droite de 1%.
A partir du moment que les largeurs des boîtes sont exprimées en % les marges gauche et droite doivent aussi être exprimées en %.

Par défaut les éléments inline-block s'alignent verticalement par rapport à la base aussi faut-il ajouter vertical-align : top

Aperçu avec le navigateur

Essayez !

Troisième solution : le positionnement absolu

Nous pouvons aussi le le positionnement absolu.

Pour chaque division il alors faut préciser position : absolute ainsi que les coordonnées d'un angle de la boîte. En général on précise les coordonnées de l'angle supérieur gauche grâce aux propriétés top et left mais on peut aussi utiliser le bottom et right.

Le code de la page "page27_bug.htm" (extrait)

Ici j'utilise les nouvelles balises structurantes introduites par HTML5 !

La feuille de style (extraits) :

... body { width : 90% ; margin :20px auto 20px auto; } header, nav, section, footer {position : absolute ; background : lime} header{width : 100% ; height : 100px ; left :0% ; top : 0px } nav {width : 28% ; height : 400px ; left :0% ; top : 120px ;} section {width : 70%; height : 400px ; right :0% ; top : 120px ;} footer {width : 100% ; height : 100px ; left :0% ; top : 540px ;}

le code HTML :

<body> <header> <h2>En-tête page</h2> </header> <nav> <h2>Menu</h2> </nav> <section> <h2>Le corps de la page</h2> </section> <footer> <h2>Le pied de page</h2> </footer> </body>

Commentaire du CSS

header, nav, section, footer {position : absolute ; } : on précise que les quatre divisions seront positionnées en absolu.

header{width : 100% ; height : 100px ; left :0% ; top : 0px } : puis pour chaque division on précise la position de la boîte par rapport au coin haut gauche de la page (propriétés top et left) ainsi que les dimensions de chaque boîte).
Les valeurs des propriétés width, top, right doivent dans le cadre du "responsive web design" être exprimées en %.

Aperçu avec le navigateur

Essayez

Commentaire

C'est la catastrophe ; la page occupe tout l'écran et les divisions se positionnent par rapport à l'écran !

Que s'est-il passé ?
Nous voulions que nos 4 grandes divisions se positionnent en absolu par rapport au coin haut gauche de la page or ici elles se sont positionnées en absolu mais par rapport au coin haut gauche de l'écran.
Les largeurs des divisions ont elles aussi été calculées par rapport à l'écran et non par rapport à la page !

Dans le cadre du positionnement absolu les boîtes "enfants" se positionnent par rapport au coin haut gauche de la boîte "parente" seulement si cette dernière est elle-même positionnée en absolu (ou en relatif ou en fixe). Sinon les boîtes se positionnent par rapport au coin haut gauche de l'écran ...

Débuggage : "page27_ok.htm"

Il suffit de rajouter dans la feuille de style la règle de style suivante :

body {position : relative ; }

Comme la page (sélecteur body) est positionnée en relatif les boîtes "enfants" de BODY vont se positionner désormais par rapport au coin haut gauche de BODY (la page) et non plus par rapport au coin haut gauche de l'écran.

Aperçu avec le navigateur

Essayez !

Mais pourquoi ne pas positionner BODY en absolu ?

Tout simplement parce que dans le cadre du positionnement absolu on ne peut pas utiliser margin : auto donc on ne peut alors centrer automatiquement la page dans l'écran.

Pour des raisons obscures la propriété margin :auto n'est pas compatible avec position : absolute.
Par contre les propriétés margin :auto et position : relative sont parfaitement compatibles.

Conclusion


Retour menu