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 charge 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 HTML5 et CSS3. En effet vous trouverez dans ce site un "tutoriel HTML" et un "tutoriel CSS" présentant respectivement toutes les nouveautés de la version 5 de HTML et de la version 3 de 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.

La notion d'héritage est fondamentale en CSS ; elle doit être parfaitement comprise.

Notion d'héritage en CSS

L'héritage signifie que tout élément HTML enfant va hériter des styles de son parent.

Exemple

Le code d'une page web :

CSS : body {width : 600px; color : red; font-family : arial; border : 1px solid black;} p {color : navy; } .important {background : black; color : white; } HTML : <body> <h1>Titre général de la page </h1> <h2>Sous titre </h2> <p>Corps du texte 1 <br>Blabla ... </p> <p>Corps du texte 2 <br>Blabla ... </p> <p>Corps du texte 3 <br>Blabla ... </p>

La balise BODY contient cinq balises : H1,H2,trois balises P. Ces cinq éléments sont "enfants" de BODY.
Ces cinq éléments héritent des propriétés de leur parent (BODY). Donc les boites H1,H2 & P auront la même largeur que leur parent : 600px. Le texte contenu dans ces différentes boites sera de couleur rouge et avec la police "arial".
En effet les propriétés width,color, font-family sont héritables. Par contre la propriété border n'est pas héritable donc les boites H1,H2 & P ne seront pas bordurées !
Il peut y avoir "rupture d'héritage". Ce qui est le cas ici pour les éléments P dont le texte contenu sera en bleu marine. En effet la règle de style ayant pour sélecteur P rompt l'héritage sur la propriété "color" !

Ordre de priorité

En CSS, si il y a un conflit, c’est-à-dire si un élément reçoit plusieurs fois une même propriété avec des valeurs différentes, le style qui va être prioritaire est celui qui est le plus proche de l’élément.
Si on rajoute à la deuxième balise P l'attribut class ='important' alors il y a conflit sur deux propriétés (background & color).
Pour le deuxième élément P ce seront alors les valeurs définies dans la classe "important" qui s'appliquent.
Et si on rajoute à la troisième balise P l'attribut : style ="color : olive;background : yellow;" ??? Rendu du code !

Premier paragraphe : texte bleu marine sur fond blanc ;
Deuxième paragraphe : texte blanc sur fond noir ;
Troisième paragraphe : texte vert olive sur fond jaune.

Ordre par rapport à l'emplacement du CSS

Si il y a conflit pour une ou plusieurs propriétés CSS c'est la règle de style en ligne qui est prioritaire.
Ensuite ce sera la règle dans la feuille de style interne et en dernier la règle dans la feuille de style externe.
Donc dans l'exemple, le 3ième paragraphe sera en vert olive sur fond jaune : règle de style en ligne prioritaire sur les autres.

Les pseudo classes

Les pseudo-classes sont :active & :hover
Grâce aux pseudo-classes du CSS on peut réaliser des effets visuels simples.

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: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> Rendu de 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 pour 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.
Il y a en effet deux règles de style qui s'appliquent alors : img {width : 300px;} et img.deforme {height : 100px ;}. Or les trois images ont pour dimensions d'origine 800 par 600 donc un rapport 4/3.
La règle de style concernant la classe "deforme" est mal écrite. Il aurait fallu écrire : img.deforme{height:100px ; width : auto;} . Ce qui veut dire que dans ce cas la largeur est recalculée en fonction de la hauteur pour qu'il y ait respect des proportions.

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'une balise H1 ou A 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) ;}

Gestion du débordement

Dès qu'une boite a une taille fixe son contenu peut éventuellement déborder ...

Exemple avec bug

Le code la page (extraits) :

<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> …
Rendu de ce code !

Trois boites ; chacune contenant un texte en latin.

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égueule" !

Pour simuler une tablette avec votre ordinateur il suffit de réduire la largeur de l'onglet.

Mais au fait pourquoi ça déborde ???
Il y a 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 ce "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 avant d'aborder le "débogage" analysons le CSS de cette page qui comprend pas mal de nouveautés.

Les nouveautés CSS dans la feuille de style

*{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 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.
Rendu de la version corrigée !

Observations

Le titre de niveau 1 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 ; } : signifie que 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

Positionner les images

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 ;} body {width : 90% ; margin : auto; border : 2px solid navy; } h1 {height : 50px ; line-height : 50px ; font-size : 120% ; text-align :center; } body 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 ;} ... <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> …
Essayez !

Les images de cette page sont affichées selon deux méthodes totalement différentes.
Les deux premières s'affichent avec une largeur de 400px et sont centrées horizontalement dans la page.
Les deux suivantes sont positionnées à gauche dans leur boite DIV.
Notez que les deux premières sont "enfants" de body et les deux suivantes sont "enfants" de 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 ...

body img {display : block ;... } : une image "enfant" de BODY est transformée en élément "bloc" pour pouvoir appliquer le centrage horizontal (margin_left / margin-right à auto).

div {height : 200px ; overflow : auto ; } : affichage éventuel d'une barre de défilement vertical dans chaque boite DIV pour pouvoir lire le texte initialement masqué.

div img {float : left ; margin :10px;}: une image contenue dans un DIV "flotte" à gauche dans son conteneur sans coller aux bords (marge de 10px ).

Balise SPAN - les entités de caractères

Le code de la page (extraits)

CSS : * {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% ; } table {empty-cells : hide ; border-spacing : 10px ;} div img {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 ; } HTML : <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 : <br>&lt; img src = "../images/toucan.jpg" &gt; </div> <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> …
Essayez !

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.

Les nouveautés présentées

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 une autre 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).

Encore une 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.
Sachez que si par étourderie (ou ignorance) vous avez encodé en Unicode une page qui est lue avec le système ANSI ou vice-versa les lettres accentuées vont apparaitre de façon bizarre ...
par contre si les lettres accentuées sont représentées par leur entité de caractère l'affichage sera toujours correct !

Cette notion de système d'encodage (ANSI, UNICODE) sera évoquée un peu plus loin.

Nouveautés CSS

Encore beaucoup de nouveautés dans la feuille de style !

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

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

div img {width : 100px ; float : right ; margin : 10px ; } : une image contenue dans un DIV se positionne à droite dans sa boite 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".
La balise span est très utilisé pour mettre en forme une fraction de texte dans un paragraphe. Par exemple pour souligner une fraction de texte il suffit d'écrire : < span class ="souligne" > texte ici souligné </span>
Et bien sûr il doit y avoir une règle de style : .souligne{text-decoration :underline; }

Arrière plan d'une boite - CSS et tableaux HTML

Le code de l'exemple (extrait)

CSS : * {font-family : tahoma, calibri, arial ; font-size : 14px ;} body {width : 900px; 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 ;height : 300px ; width : 100%; background : 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 ; } HTML : ... <div></div> <table class ='tableau1'> ... </table> <table class ='tableau2'> ... </table> Essayez ce code !

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

la boite DIV a pour fond une image et on demande que l'image s'adapte à la taille de la boite avec la propriété 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.

Plusieurs boites de front ! Comment ?

Faut-il rappeler que par défaut les boites d'une page se positionnent les unes en dessous des autres. C'est le mode de positionnement normal ou flux normal des éléments de type "block".
Donc dès que vous voulez mettre plusieurs éléments "block" côte à côte vous devez utiliser une technique de positionnement !

Paradoxalement la propriété CSS position avec ses différentes valeurs : absolute, fixed, relative est rarement utilisée pour placer de front plusieurs boites ...

Si vous voulez que plusieurs boites se positionnent côte à côte dans leur conteneur parent il faut que la somme de leur largeur ne dépasse pas celle du parent.
Attention la largeur totale d'une boite peut être supérieure à celle indiquée par la propriété width ; il faut ajouter à la largeur exprimée par width les marges gauche et droite externe et interne ainsi que les bordures gauche et droite.

Exemple

Le code HTML commun aux différentes solutions

<header> <h2>En-tête de page </h2> </header> <section> <nav> <img src ="../images/bikini.jpg" class ="droite" /> <h2>Menu </h2> </nav> <article> <img src ="../images/trikini.jpg" class ="gauche"/> <h2>Contenu</h2> </article> </section> <footer><h2>Pied de page</h2></footer>

BODY contient trois grandes divisions : HEADER, SECTION, FOOTER.
La boite SECTION contient à son tour deux boites : NAV, ARTICLE.
Les boites NAV et ARTICLE sont donc "enfants" de SECTION et doivent être de front.

Le code CSS commun aux différentes solutions

Pour positionner les images dans les différentes boites et formater les titres.

h2 {font-size : 14pt ; text-align : center; } img.gauche {height : 100px ; float : left ; } img.droite {height : 100px ; float : right ; }

Première solution : float

La feuille de style

body {width : 900px; margin : 10px auto 10px auto ; } header, footer{height : 100px ; width : 100%;} header,nav,article,footer {background : pink ; margin-top : 10px;} nav{float : left ; width : 29% ; height : 400px ; } article {float : right ; width : 69% ; height : 400px ; margin-left : 1% } footer {height : 100px ; float : left ; }

La propriété float est en principe destinée à positionner (à gauche ou à droite) un élément "inline" dans son conteneur. Mais dans la pratique elle est très utilisée pour positionner de front plusieurs grandes divisions de la page.

Les deux boites "enfants" de SECTION doivent être de front.
Il faut donc que la somme de leur largeur ne dépasse pas celle de SECTION.
La boite NAV doit "flotter" à gauche et la boite ARTICLE doit "flotter" à droite.
De plus méfiez vous, si pour ces boites vous avez défini des marges gauche et droite la largeur totale est supérieure à celle indiquée par la propriété width d'où l'importance de supprimer toutes les marges (internes et externes) par défaut avec l'instruction * {margin :0 ; padding :0;} Le rendu !

Deuxième solution : display :inline-block

Une autre technique consiste à transformer les éléments NAV et ARTICLE en "inline-block" c'est à dire des boites qui par défaut se positionnent côte à côte si il y a de la place bien sûr !

Attention si les éléments "inline-block" n'ont pas la même hauteur ils s'alignent verticalement par rapport à la base. Il faut donc forcer l'alignement vertical par le haut avec vertical-align : top.

La feuille de style

body {width : 900px ; margin : 10px auto 10px auto ;} header, nav, article, footer {background : pink ; display : inline-block ; vertical-align:top;} header,footer {width : 100% ; height : 100px ; margin-top : 10px ; } nav{width : 29% ; height : 400px ; margin-top : 10px; } article {width : 69% ; height : 400px ; margin-top : 10px; margin-left: 1% ;}

Les boites HEADER, NAV, ARTICLE,FOOTER sont désormais des éléments "inline-block".
Il faut toujours éviter que les boites ne se collent d'où certaines marges externes.
Attention la largeur totale de ARTICLE est 70% : 69% + 1% de marge gauche. Le rendu !

Troisième solution : display : flex

Enfin la version 3 de CSS apporte une solution simple de mise en page : l'outil flexbox !
Dans notre exemple il suffit de transformer la balise SECTION (qui a pour enfants NAV et ARTICLE) en "flex_container" : section {display : flex; }
Grâce à cette simple règle les boites "enfants" de SECTION vont se positionner côte à côte !

La feuille de style

body {width : 900px; margin : 10px auto 10px auto ; } header, footer{height : 100px ; width :100%;} header,na article,footer {background : pink ; margin-top : 10px;} section {display : flex; } nav, article {height : 400px;} article {width : 69%; margin-left : 1%; } nav {width : 29%; margin-right : 1%;}

SECTION est désormais un "flex-container". Le rendu !
Retour menu