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érément 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é à HTML (version 5) et un autre tutoriel sur CSS (version 3).

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

Testez ce code !

Chaque exemple est, comme d'habitude, 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). C'est une solution beaucoup plus souple !
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 éléments "block" (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 de plus 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 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.
Certains propriétés CSS peuvent être suivies de plusieurs valeurs. On dit que ce sont des méga-propriétés. Pensez aussi à margin : haut droite bas gauche.

p{margin : 10px ; } : remplace avantageusement 4 propriétés (margin-top :10px; margin-bottom :10px ; margin-left :10px ; lmargin-right :10px;)

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 boite 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 !

Passons à un nouvel exemple !

Le code la page (extraits)

Trois boites grâce au conteneur DIV.

<style> * {font-family :cursive ; font-size : 14px ;} h1,div {width : 80% ; 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 boite - 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 boite et recouvre le texte de la boite suivante.
Pour parler cru : "ça dégueulle" !
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épassant le contenant) alors le "surplus" est quand même affiché et déborde de son conteneur.

Il y a aussi, mais c'est moins grave, le titre qui n'est pas centré verticalement dans sa boite (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 boite 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 car sinon H1 hérite de BODY qui lui même hérite de *

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 boite DIV sera bordurée par un trait discontinu (dashed) rouge. Chaque boite DIV aura toujours une hauteur de 150 pixels quelque soit le contenu ...
Rappel : valeur par défaut de la propriété height pour une boite est auto (ajustement de la hauteur de la boite 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


Testez le code corrigé !

Le texte dans H1 est désormais parfaitement centré verticalement dans sa boite.

Dans chaque DIV le "surplus" est masqué (donc il n'y a pas de débordement) mais dès que la boite est survolée par la souris (ou le doigt) elle 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 boite qui la contient alors le texte sera de facto centré verticalement dans sa boite.

Attention sur un écran de tablette ou smartphone le titre va tenir sur 2 lignes donc une hauteur totale de 100px. Le titre va déborder de son conteneur (H1)!
Je ne vous donne pas la solution pour l'instant mais sachez qu'elle existe : les medias queries !

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

div:hover {height :auto ; } : si survol de la boite 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 boites bien centrées dans la page. Les deux suivantes sont positionnées à gauche dans chaque conteneur 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 te. Attention ça suppose que le titre tient sur une seule ligne sinon débordement du titre de H1. Je rappelle que ce risque est réel sur des petits écrans ...

img {display : block ;... } : la balise IMG transformée en balise block pour pouvoir appliquer le centrage horizontal (margin_left / margin-right).

div {height : 200px ; overflow : auto ; } : affichage éventuel d'une barre de défilement dans chaque boite 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 boite parente (DIV) sans coller aux bords de la boite 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><strong>Il y a bien sûr une solution : remplacer les chevrons par les entités de caractère correspondantes.</strong> <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


Testez le code ci-dessus !

Remarques :
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 boites le mot important est affiché en gras souligné.
Dans la troisième boite 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)!

Il y a aussi un instruction HTML étrange ...

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

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

Autre instruction bizarre ...

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

Sens : 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 afficher un symbole (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 accentuées. 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 ";"

Donc quelques entités :

&uarr; affiche une flèche en haut &duarr; affiche une flèche en bas &lt; affiche un chevron ouvrant &gt; affiche un chevron fermant*

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 si elles sont encodées en entités de caractère !
Car sachez que si par étourderie (ou ignorance) vous avez encodé en Unicode une page qui est lue avec le système ANSI ou si vous avez encodé en ANSI une page lue avec le système Unicode les lettres accentués vont apparaitre de façon bizarre ...
Cette notion de système de codage (ANSI, UNICODE) sera évoquée un peu plus loin.

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é apparait 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 le centrage horizontal puisse s'appliquer.

div img { display : inline ; width : 100px ; float : right ; margin : 10px ; } : les images contenues dans les boites DIV sont redéfinies inline et se positionnent à droite dans la boite DIV sans toucher le bord de celle-ci (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 une balise générique 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 boite - CSS & tableau </h1> <div id = 'boite1'></div> <div id = 'boite2'></div> <table class ='tableau1'> ... </table> <table class ='tableau2'> ... </table>

Aperçu avec le navigateur

Testez ce code !

Deux boites : 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 contigües 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 boite identifiée boite1 aura comme fond : la couleur aqua.

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

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

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

.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 boites

Aperçu de ce que vous voulez obtenir

Première solution

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

... <meta charset ='utf-8'> <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 seront ensuite redéfinies).

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

#menu {width : 28% ; ... : la largeur de la boite identifiée "menu" est égale à 28% de son parent (BODY) 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 alors automatiquement la largeur de "menu" sera ajustée (900px * 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).
Il faut bien sûr que la page soit encodée en UTF-8. Voir menu "encodage" de NotePad !

Aperçu avec le navigateur

Testez ce code!

C'est la catastrophe !

Les boites 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 blocs. On dit que les blocs sont dans le flux.

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

Débuggage

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

Le code de la page après corrections

Très peu de changement par rapport à la page précédente. Simplement quelques ajouts dans la feuille de style :

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

Aperçu avec le navigateur

Testez le code corrigé !

Les boites 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é pour positionner à gauche ou droite de la page des blocs.

Rappels

Attention la largeur totale d'une boite 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 + largeur totale de corps ne dépassent la largeur de la page sinon la boite corps va certes s'afficher à droite mais sous (et non pas à côté) la boite menu.

Dans l'exemple pour les blocs "menu" et "corps" il y a ni marges externes gauche et droite, ni marges internes gauche et droite, ni bordures donc la largeur totale correspond à celle définie par width !

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

Des boites affectés de la propriété display : inline-block se positionnent côte à côte par défaut tant qu'il y a de la place.

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 boites se voient affecter de la propriété display : inline-block donc ce sont des boites qui par défaut se positionnent côte à côte !
Pour que la boite "menu" ne colle pas horizontalement à la boite "corps" j'ai prévu une marge droite de 1%.
A partir du moment que les largeurs des boites 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


Testez le code !

Troisième solution : le positionnement absolu

Nous pouvons aussi utiliser le le positionnement absolu.

Pour chaque division il alors faut préciser position : absolute ainsi que les coordonnées d'un angle de la boite. 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 place des div ID ...

La feuille de style (extraits)

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

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 } : pour chaque division on précise la position de la boite par rapport au coin haut gauche de la page (propriétés top et left) ainsi que les dimensions de chaque boite).
Les valeurs des propriétés width, left, right doivent dans le cadre du "responsive web design" être exprimées en %.

le code HTML

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

Aperçu avec le navigateur

Essayez

Commentaire

C'est la catastrophe ; la page occupe tout l'écran et les divisions se positionnent par rapport au coin haut gauche de l'écran !

Que s'est-il passé ?
Nous voulions que nos 4 grandes divisions se positionnent par rapport au coin haut gauche de la page or ici elles se sont positionnées 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 boites "enfants" se positionnent par rapport au coin haut gauche de la boite "parente" seulement si cette dernière est elle-même positionnée en absolu (ou en relatif ou en fixe) sinon ces boites se positionnent par rapport au coin haut gauche de l'écran et les largeurs relatives évaluées par rapport à celle 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 boites "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 et les largeurs des boites calculées par rapport à celle de la page !

Aperçu avec le navigateur

Essayez le code débuggé !

Mais pourquoi ne pas avoir positionné BODY en absolu ?

Tout simplement parce que dans le cadre du positionnement absolu on ne peut pas centrer horizontalement avec la propriété margin.
En d'autres termes position : absolute et margin : ... auto ... auto sont incompatibles pour le même élément.
Par contre les propriétés position : relative et margin : ... auto ... auto sont parfaitement compatibles.

Conclusion


Retour menu