HTML 4 avec XHTML et CSS (chap.11-15)

Elizabeth Castro
HTML 4 avec XHTML et CSS
Trad. Bernard Jolivalt
Ed. CampusPress, coll. Le Programmeur, 2006

Précédemment :
Notes sur les chapitres 1 à 5 – 6 à 10

Aux suivants !

Chapitre 11 / Mettre en page avec des styles

Ecrire les éléments div dans un ordre logique, contrôler leur disposition avec les styles.

.cache {display: none; } : empêche l’affichage des éléments de classe “cache”.
.invisible {visibility: hidden; } : affiche un espace vide à la place des éléments de classe “invisible”.
.bloc {display: block; } : transforme en blocs les éléments en ligne de classe “bloc”.
.liste {display: list-item; } : transforme en listes les éléments en ligne de classe “liste”.
div#id {position: absolute; left: 25%; } : décale la gauche de l’élément div dont l’identifiant est “id” à 25% de la largeur du navigateur.
.superieur {position: relative; top: -10px; } : décale les éléments de classe “superieur” de 10 pixels vers le haut, sans affecter les autres éléments.

Arrière-plan :
body {
background-color: red;
background-image: url(image.gif);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left; }
=
body {background: red url(image.gif) repeat-x fixed top left; }

Bordures :
div.class {
border-width: 5px;
border-bottom-width: 10px;
border-style: solid[none/dotted/dashed...];
border-color: black; }
=
div.class {
border: 5px solid black;
border-bottom: 10px; }
=
div.class {
border: solid #000000;
border-width: 5px 5px 10px 5px; }

Espacement (entre le contenu d’un élément et ses bordures) :
div.class {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 2px; }
=
div.class {padding: 10px 5px 20px 2px; }

Marges (entre un élément et les autres) :
div.class {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 2px; }
=
div.class {margin: 10px 5px 20px 2px; }

Empilement :
div#derriere {z-index: 25; }
div#devant {z-index: 500; }
=> L’élément dont la valeur du z-index est plus élevée s’affichera devant l’autre élément.

Débordement :
div#id {width: 100px; height: 150px; overflow: auto; }
=> Si le contenu de l’élément ne peut s’afficher entièrement dans les dimensions indiquées, des barres de défilement apparaîtront.

Flottement :
XHTML :
<div id=”id1″></div>
<div id=”id2″></div> Texte
CSS (1) :
div#id1 {float: right; }
div#id2 {float: right; }
=> L’élément div dont l’identifiant est “id1″ flottera à droite de l’élément div dont l’identifiant est “id2″ qui flottera à droite du texte.
CSS (2) :
div#id1 {float: right; }
div#id2 {float: right; clear: right; }
=> L’élément div dont l’identifiant est “id2″ flottera à droite, sous l’élément div dont l’identifiant est “id1″ qui flottera à droite du texte.

Chapitre 12 / Des feuilles de style pour l’impression

Feuilles de style selon le support :
<link rel=”stylesheet” media=”screen” type=”text/css” href=”screen.css” />
<link rel=”stylesheet” media=”print” type=”text/css” href=”print.css” />
<link rel=”stylesheet” media=”handheld” type=”text/css” href=”handheld.css” />

Pour l’impression :
- Utiliser des tailles de police mesurées en points (pt) ;
- Eviter veuves et orphelins : {widows: 3; orphans: 3; } ;
- Masquer les parties indésirables avec {display: none; } ;
- Supprimer l’arrière-plan ;
- Utiliser des couleurs qui passent bien en N&B.

Chapitre 13 / Les listes

Liste non numérotée :
<ul>
<li>1er item</lI>
<li>2ème item</li>
</ul>

Liste numérotée :
<ol start=”5″>
<li>5ème item</lI>
<li>6ème item</li>
</ol>

Liste de définitions :
<dl>
<dt>1er terme</dt>
<dd>1ère définition</dd>
<dt>2ème terme</dt>
<dd>2ème définition</dd>
</dl>

Marqueurs de liste :
li {list-style-type: disc[none/circle/square/decimal/upper-alpha/lower-alpha/upper-roman/lower-roman; }
li {list-style-image: url(http://www.site.org/img/puce.gif); }

Marqueurs de listes numérotées imbriquées :
ol li {list-style-type: upper-roman; }
ol ol li {list-style-type: upper-alpha; }
ol ol li {list-style-type: decimal; }
ol ol ol li {list-style-type: lower-alpha; }

Chapitre 14 / Les tableaux

Centrer un tableau en XHTML (attribut désapprouvé) :
<table align=”center”>
<tbody>
<tr><td>&nbsp;</td></tr>
</tbody>
</table>

Centrer un bloc en CSS (à partir d’IE6) :
{margin-right: auto; margin-left: auto; }

Aligner le contenu d’un tableau en XHTML (attributs valides) :
<table>
<tbody>
<tr align=”left” valign=”top”><td>&nbsp;</td></tr>
</tbody>
</table>

Aligner le contenu d’un bloc en CSS :
div.class {text-align: justify; vertical-align: top;}

Chapitre 15 / Les cadres

Cadre flottant à droite :
iframe.classe {float: right; }
<iframe src=”page.html” name=”nom” width=”200px” height=”300px” scrolling=”auto” border=”0″ frameborder=”0″ class=”classe”>
Texte alternatif
</iframe>
Texte à afficher à gauche de l’iframe

Contenu incorporé sans cadre (IE6 ajoute des barres de défilement) :
<object type=”text/html” data=”page.html” width=”200px” height=”300px”>Texte alternatif</object>

Types MIME :
http://www.iana.org/assignments/media-types/

(To be continued…)