Convertir Une Page Existante /
Stylisme Sur La Side Bar

Stylisme sur la Sidebar

Le haut de la page est en bonne forme. Il est temps de donner un coup de chiffon à cette barre à gauche. C'est le premier endroit où l'on peut considérablement réduire le code et nous verrons les gains de productivité associé pour la maintenance de ce menu de gauche.

Le code en l'état de la conception originale est trop long à lister ici mais jetons un coup d'oeil aux trois premières lignes de la table qui contient les liens vers la destination Antarctica :

<td width="120" valign="top" bgcolor="#EBDAC6">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="blank.gif" height="3" width="1" alt=""></td>
</tr>
<tr>
<td> <a href="/antarctic/"><font size="-1" face="Verdana, Arial, Helvetica, sans-serif">Antarctica</font></a></td>
</tr>
<tr>
<td bgcolor="#A98763"><img src="blank.gif" height="1" width="1" alt=""></td>
</tr>
<tr>

Pour comparer, voilà le jeu complet de liens après avoir dénudé tout le code HTML non nécessaire y compris la cellule de table qui contient cette table :

<td>
<table cellspacing="0">
<tr><td><a href="/antarctic/">Antarctica</a></td></tr>
<tr><td><a href="/asia/">Asia</a></td></tr>
<tr><td><a href="/austral/">Australia</a></td></tr>
<tr><td><a href="/europe/">Europe</a></td></tr>
<tr><td><a href="/india/">India</a></td></tr>
<tr><td><a href="/northam/">North America</a></td></tr>
<tr><td><a href="/southam/">South America</a></td></tr>
</table>
</td>

Nous avons besoin à ce stade d'identifier l'élément td avec :

<td id="leftside" >

La première étape est de recréer les styles à partir du code original HTML.

tr td#crumbs a:visited {color:gray ;}
td#leftside {width: 120px; background: #EBDAC6;}
</style>

Souvenez-vous que nous n'avons pas besoin de définir un alignement vertical (vertical-align:top) parce que cela est déjà fait au début de la feuille de style. Tout ce qu'il reste à faire est de définir la largeur et l'arrière-plan comme nous l'avons fait au-dessus.

Ensuite nous avons besoin d'envisager soigneusement ce que la conception originale avait l'intention de faire : Les images blanches entre les liens étaient insérées de telle manière que leurs cellules aient une taille de 1 pixel et un arrière-plan avec un marron médium. L'effet est d'obtenir des bordures fines entre les liens. Maintenant que ces cellules sont fixés, mais que les cellules contenant les liens demeurent, nous pouvons déposer un style directement :

td#leftside {width: 120px; background: #EBDAC6;}
td#leftside {border-bottom: 1px solid #A98763;}
</style>

Sur la Figure 1.9, vous constatez que de simples bordures remplacent des combinaisons complexes d'images et de cellules.

A ce stade, nous sommes prêts à régler la taille de la police pour satisfaire les exigences de la conception originale et lancer quelques lignes de padding^[1] pour rendre les choses plus jolies :

td#leftside {border-bottom: 1px solid #A98763; font-size: 85%; padding: 0 0 1px 0.33em;}
td#leftside table {margin-top: 3px}
</style>

A suivre sur Suite !

^[1] .