Création d'un tableau graphique
compatible IE / Mozilla...
W3C compliant
La gestion des tableaux est différente d'un navigateur à un autre.
L'idée ici est de créer un tableau GRAPHIQUE, mais dont l'ambition serait de s'adapter à tous vos besoins (largeur & hauteur).
Etape 1 : création sous Toshop.
A/je crée le fond (rectangle blanc bords arrondis + ombre portée)
B/ Je dessine les bords de la barre supérieure. (au crayon)
C/ Remplissage d'un dégradé.
D/ Création d'un reflet.
E/ rajout d'une zone type LCD (ombre interne)
F/ Découpage en tranche.
NB : je fabrique des tranches de 1 pixel de large pour les zones "extensibles" du milieu.
Exportation en images...
ETAPE 2 : DREAMWEAVER ou à la main sous notepad...
Création d'un tableau 3x3 de 500px de large.
Remplissez les images des 4 coins.
Pour le fond de la ligne du bas,
Pour MOZILLA :
Sélectionnez la ligne complete (<tr>......</tr>)...
Et appliquez une image de fond. (ici cadre_O2.gif)
 Pour IE6 et cie
Sur la cellule du milieu (<td>...</td>) choisissez une image de fond...
(ça ne change rien, mais c'est compatible pour les 2)
Vous devriez avoir dans les tags, deux "background=....gif"
- 1 pour le TR (Mozilla)
- 1 pour le TD du milieu (IE)
Etape 3 : Premiers ajustements.
Il se peut, en fonction de vos images, que les cadres ne suivent pas (décalage hauteur).
 Il suffit de mettre dans la cellule ne contenant pas d'image (celle du milieu)
un fichier image transparent de la même taille que celle des coins.
ici 8 pixels.
Vous devriez avoir quelque chose comme ceci....
voici le code HTML...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head></head>
<body>
<p> </p>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr background="images/cadre_02.gif">
<td width="8"><img src="images/cadre_01.gif" width="8" height="29"></td>
<td width="407" nowrap background="images/cadre_02.gif"> titre</td>
<td width="85"><img src="images/cadre_04.gif" width="85" height="29"></td>
</tr>
<tr>
<td></td>
<td>inside</td>
<td></td>
</tr>
<tr background="images/cadre_10.gif">
<td width="8"><img src="images/cadre_09.gif"></td>
<td width="407" nowrap background="images/cadre_10.gif"> <img src="blank.gif" width="8" height="8"></td>
<td width="85"><img src="images/cadre_12.gif"></td>
</tr>
</table>
<p> </p>
</body>
</html>
|
Si l'on modifie la largeur de la cellule centrale, le cadre réagit parfaitement.
ETAPE 4 : Les cellules centrales.
C'est une étape plus délicate, car les cellules doivent s'étirer dans la hauteur et en largeur pour la cellule centrale. Et c'est un vrai casse-tête pour rendre compatible IE/mozilla votre code...
Le problème : IE permet de changer
l'image cellule (TD) par cellule. C'est ce dont nous avons besoin...
Mozilla ne permet qu'une seule image pour la ligne (TR) et donc les trois cellules (TD)...
Une des solutions : passer par les styles CSS.
<head>
<STYLE type="text/css">
.gauche {
background-image: url(images/cadre_05.gif);
background-repeat: repeat-y;
}
.droite {
background-image: url(images/cadre_08.gif);
background-repeat: repeat-y;
}
.centre {
text-align: left;
background-image: url(images/cadre_06.gif);
}
</STYLE>
</head>
|
Insérer ce code en début de code HTML ou dans votre CSS...
3 classes ont été crées. .gauche .droite .centre...
Choisissez la bonne image pour chaque cellule. NB on ne répète l'image que verticalement pour droite & gauche... (repeat-y)
Il suffit d'appeler ces classes pour chaque cellule.
<tr>
<td class="gauche"></td>
<td class="centre">inside<br><br><br></td>
<td class="droite"></td>
</tr>
|
Et hop... le tour est joué... ça marche ! Sous IE et sous Mozilla !
645 minutes se sont écoulées depuis le dernier visiteur...Global HITS=3160
Week HITS : 25
| 
