Convertir Une Page Existante /
Restaurons La Bannière

Restaurer la Bannière (Masthead)

La table au sommet de la page contenant le nom du site et une petite publicité.

Dans le fichier original nous avions :

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="bottom" background="topbg.gif">
<font size="+3" color="#442200" face="Arial, Helvetica, Verdana, sans-serif"><b>Travel Guide</b></font>
</td>
<td width="234" align="center" valign="middle">
<img src="ad.gif" height="60" width="234" alt="advertisement">
</td>
</tr>
</table>

Grâce à notre nettoyage du balisage, voilà ce que nous avons désormais :

<table cellspacing="0">
<tr>
<td>Travel Guide</td>
<td><img src="ad.gif" height="60" width="234" alt="advertisement"></td>
</tr>
</table>

Deux défis se posent : 
*répliquer les styles de la cellule Travel Guide de telle manière que le texte ressembe à ce qu'il était 
avant que nous nous débarassions de l'élément ''font'', et de l'attribut valign et ainsi de suite...
*s'assurer que les cellules ont une largeur correcte

Pour y parvenir, nous devrions identifier chacune des cellules avec une étiquette (label) unique, de telle façon 
que nous disposions d'un moyen de cibler chaque cellule avec son propre style. C'est exactement le rôle de l'attribut '''id'''.

<pre>
<table cellspacing="0">
<tr>
<td id="title">Travel Guide</td>
<td id="advert"><img src="ad.gif" height="60" width="234" alt="advertisement"></td>
</tr>
</table>

Maintenant que chacune de ces cellules de tableaux ont été identifiés, nous pouvons régler un style avec les sélecteurs d'id. Dans la première cellule,nous avons besoin de recréer le style du texte et le placer au bas de cellule.

Rappelez-vous que nous avons déjà une règle qui fixe la police(font-element) pour toutes les cellules de tableaux.

Mais l'ordre des polices dans cette règle était Verdana, Arial, Helvetica, sans-serif. La balise font du titre appelée est Arial, Helvetica, Verdana, sans-serif. Le text était aussi graissé en utilisant la balise <b> et mis en couleur marron.

Pour finir, la taille à régler était de +3.

CSS n'accepte pas ces valeurs, mais dans la plupart des cas +3 sera égal à environ 200%. Ainsi nous avons le style suivant illustré dans la figure 1.5

a:visited {color: #990099;}
td#title {vertical-align: bottom; color: #442200;
   font: bold 200% Arial, Helvetica, Verdana, sans-serif;}

Un bon début mais il manque toujours l'image d'arrière-plan. Nous pouvons l'amnener facilement avec la propriété background

td#title {vertical-align: bottom; color: #442200;
   background: transparent url(topbg.gif) left top;
   font: bold 200% Arial, Helvetica, Verdana, sans-serif;}

Dans la figure 1.5, notez que la publicité n'est pas placée comme nous aimerions. Souvenez-vous que nous avons déjà une règle établissant que toutes les tables ont une largeur (width) de 100% ainsi le problème est que la table est trop étroite. Les cellules sont tout simplement trop larges : En l'absence de tout autre information, le navigateur a rendu chaque cellule à égale distance. Ce que nous avons besoin de faire est de définir la largeur de l'une d'entre elles permettant à l'autre d'occuper l'espace restant :

td#title {vertical-align: bottom; color: #442200;
   background: transparent url(topbg.gif) left top;
   font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
td#advert (width:234 px;}

Une telle règle indique au navigateur que la cellule de publicité doit être de 234 px de large - la même largeur que l'image - Le navigateur règlera la largeur à cette distance et fera que l'autre cellule -la cellule de titre- aussi large qu'il faudra pour remplir le reste de la table globale. Ainsi nous obtenons le résultat en figure 1.6

Le Contenu et Son Sommet

(Le Menu Breadcrumbs ou les petits cailloux)

Avec l'en-tête masthead sous contrôle, nous nous sommes souciés de la première table dans le document. Le reste de la page est inséré dans une seconde table mais comme la première, nous n'allons pas ajouter un id vers l'élément table lui-même.

Parce que nous ajouterons des ids aux cellules elles-mêmes, il n'est pas nécessaire de mettre un id sur la table.

Jetons un oeil à la première rangée de la table. Elle contient exactement deux cellules mais dans la version originale, beaucoup de balises étaient incluses dans la présentation de ces cellules :

<tr>
<td bgcolor="#663300" valign="middle"><font size="+2"> </font>
<font face="Arial, Helvetica, Verdana, sans-serif" color="#FFFFFF" size="+1">
<b>Destinations</b></font></td>
<td colspan="2" bgcolor="#997753" valign="middle"><font size="-1" 
face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF"> <b>
<a href="/northam/">
<font color="#FFFFFF">North America</font></a> > 
<a href="/northam/west/">
  <font color="#FFFFFF">Western US</font></a> > 
<a href="northam/west/ca/">
<font color="#FFFFFF">California</font></a> > 
<a href="/northam/west/ca/mid/">
  <font color="#FFFFFF">Mid-state</font></a> > 
<a href="/northam/west/ca/mid/pch">
   <font color="#FFFFFF">Pacific Coast Highway</font></a> > 
</b></font></td>
</tr>

Comparons à ce que nous avons maintenant :

<tr>
<td>Destinations</td>
<td colspan="2">
<a href="/northam/">North America</a> > 
<a href="/northam/west/">Western US</a> > 
<a href="northam/west/ca/">California</a> > 
<a href="/northam/west/ca/mid/">Mid-state</a> > 
<a href="/northam/west/ca/mid/pch">Pacific Coast Highway</a> >
</td>
</tr>

Identifions ce que ces cellules partagent en commun avant de travailler sur les styles. D'abord, toutes étaient réglées à valign="middle" et qualifiées avec du texte en blanc (color="#FFFFFF"). Le texte dans toutes les cellules était graissé avec l'élément <b>.

Aussi identifions les cellules id et aussi la rangée qui les contient pour préparer nos styles

<tr id="content-top">
<td id="sidetop">Destinations</td>
<td id="crumbs" colspan="2">
<a href="/northam/">North America</a> > 
<a href="/northam/west/">Western US</a> > 
<a href="northam/west/ca/">California</a> > 
<a href="/northam/west/ca/mid/">Mid-state</a> > 
<a href="/northam/west/ca/mid/pch">Pacific Coast Highway</a> >
</td>
</tr>

La première chose à effectuer est d'utiliser l'id de ligne pour appliquer des styles communs au contenu des cellules. Nous ferons cela en utilisant un sélecteur descendant. Un sélecteur descendant sélectionne un élément qui descend d'un autre (par exemple une table, un td, ul ou li). Dans la règle nous avons simplement écrit que nous sélectionnons n'importe quel élément td qui est descendant de n'importe quel élément qui a un id avec une valeur de content-top. Ceci diminue considérablement la sélection des cellules. En CSS1 on parlait de sélecteur contextuel.

td#advert {width: 234 px}
#content-top td {color: white; vertical-align: middle; font-weight:bold;}
</style>

Remplissons les arrières-plans et polices de ces deux cellules afin d'avoir une meilleure de ce que ça donne. Tout ce dont nous avons besoin est de reproduire les valeurs de bgcolor pour obtenir les couleurs d'arrière-plan :

#content-top td {color: white; vertical-align: middle; font-weight:bold;}
tr td#sidetop {background: #663300;}
tr td#crumbs {background: #997753;}
</style>

Maintenant tout ce nous avons à faire est ajouter les valeurs nécessaires pour les familles de police et les tailles dans les deux cellules. La cellule sidetop est comme notre titre : les déclarations de marquage original pour Arial avant

 toute autre police. Les cellules crumbs (petits cailloux), cependant utilisent 

( voir la figure 1.7)

tr td#sidetop {background: #663300;
 font: 115% Arial, Helvetica, Verdana, sans-serif;}
tr td#crumbs {background: #997753; font-size: 85%;}
</style>

Les choses sont un peu serrées dans ces cellules, de telle manière que nous souhaitons ajouter un peu de padding (la taille des espaces autour d'un élément). Autre chose à noter : Le mot Destinations n'est pas graissé. Ceci à cause de la déclaration : font: 115% Arial, Helvetica, Verdana, sans-serif; a l'effet de rendre la largeur de la police font-weight de la cellule à normal. Ceci arrive parce que les mots-clés manquants pour la largeur, le style et la variance du texte sont réglés à défaut, et toutes sont normal. Aussi est-il nécessaire d'ajouter que nous devons graisser ce texte (ajouter bold)

tr td#sidetop {background: #663300;
 font: bold 115% Arial, Helvetica, Verdana, sans-serif;}
tr td#crumbs {background: #997753; font-size: 85%;}
</style>

et ouvrir un peu d'espace autour du texte dans ces cellules en lui ajoutant un peu de padding.

#content-top td {color: white; vertical-align: middle; 
 font-weight: bold; padding: 0.1em 0.2 em 0;}

em signalons qu'en CSS em est l'unité se référant à une hauteur de police donnée. En CSS, une hauteur en em est définie comme équivalente à la boîte de caractère pour une police donnée. L'unité em permet de définir une taille relative de police : par exemple 1.3em équivaut à une taille de 130%.

Dans notre exemple du padding, on parcourt dans le sens des aiguilles d'une montre en partant du sommet. Ici 0.1em définit le padding du sommet, 0.2em le padding droite et gauche et 0 le padding du bas. Mais on aurait pu écrire pour avoir le même résultat : 0.1em 0.2em 0 0.2em et obtenu le même résultat !

L'autre chose à réparer dans cette ligne est la couleur des liens dans la cellule des petits cailloux (crumbs). Dans la conception originale ils étaient tous en blancs, mais ici il y a le rouge que nous avons déjà défini pour tous les liens du documents. Ce rouge est défini dans la règle a:link {color: #990000} qui outrepasse la couleur white que nous avons assigné à la cellule elle-même. La même chose se serait produite si n'importe lequel de ces liens avait été visité exception faite que les liens auraient été en violet (##990099). De ce fait les flèches sont en blanc, mais les liens restent rouge. Il est temps de définir deux règles de sélecteurs descendants :

tr td#crumbs {background: #997753; font-size: 85%;}
tr td#crumbs a:link {color: white; }
tr td#crumbs a:visited {color: gray; }
</style>

Entre le padding et la couleur donnée aux liens, nous obtenons un résultat montré dans la figure 1.8 très proche de la conception originale.

Il pourrait y avoir quelques pixels de différences dans les largeurs de cellule, mais personne ne le remarquera !

Voyons désormais le StylismeSurLaSideBar