Problème avec design "SteamErsatz"

Bonsoir chèr(e)s ami(e)s !

Je me suis interessé de près au tuto de El Konkonbré M@squed qui explique comment Réaliser un design SteamErsatz. Je suis les instructions à la lettre (je pense :euh:

) mais je rencontre une problème à la fin. Rahhhh !

En effet, j'obtiens ceci :

Image utilisateur

Au lieu d'obtenir ça :

Image utilisateur

Si quelqu'un pourrai m'aider à résoudre ce petit problème sur la gauche, je ne le remercirai jamais assez.

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="design.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pifou, The site</title>
</head>

<body>

<table class="table_fx_div">

<tr class="haut">
<td class="HG"></td>
<td class="HM"></td>
<td class="HD"></td>
</tr>

<tr class="entete">
<td class="EG"></td>
<td class="EM">Ici, on met le bla bla de l'entête.</td>
<td class="ED"></td>
</tr>

<tr class="separation">
<td class="SG"></td>
<td class="SM"></td>
<td class="SD"></td>
</tr>

<tr class="contenant">
<td class="CG"></td>
<td class="CM">
Ici, on met le bla bla du Contenant.<br />
Et une 2eme ligne<br />
etc...
</td>
<td class="CD"></td>
</tr>

<tr class="bas">
<td class="BG"></td>
<td class="BM"></td>
<td class="BD"></td>
</tr>
</table>

</body>
</html>

Code CSS :

.table_fx_div { width: 400px; border-collapse: collapse; }
.table_fx_div td { padding: 0px; }

.table_fx_div .haut .HG, .table_fx_div .haut .HD, .table_fx_div .entete .EG, .table_fx_div .entete .ED, .table_fx_div .separation .SG, .table_fx_div .separation .SD, .table_fx_div .contenant .CG, .table_fx_div .contenant .CD, .table_fx_div .bas .BG, .table_fx_div .bas .BD { width: 20px; height: 20px; }

/* 3img dessus */
.HG { background-image: url(images/skn_coin_HG.gif); }
.HM { height: 20px; background-image: url(images/skn_coin_HM.gif); }
.HD { background-image: url(images/skn_coin_HD.gif); }

/* img entree-sortie et background de l'entête */
.EG { background-image: url(images/skn_vert_ent_G.gif); }
.EM { height: 20px; background-image: url(images/skn_Back_ent.gif);
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police utilisée */
font-size: 12px; /* Taille de la police */
color: #C4B550; /* Couleur de la police */
text-align: center;
}
.ED { background-image: url(images/skn_vert_ent_D.gif); }

/* 3img de separation */
.SG { background-image: url(images/skn_milieu_EC_G.gif); }
.SM { height: 20px; background-image: url(images/skn_milieu_EC_M.gif); }
.SD { background-image: url(images/skn_milieu_EC_D.gif); }

/* img entree-sortie et background du contenant */
.CG { background-image: url(images/skn_vert_cont_G.gif); }
.CM { height: 20px; background-image: url(images/skn_Back_cont.gif);
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police utilisée */
font-size: 12px; /* Taille de la police */
color: #C4B550; /* Couleur de la police */
text-align: left;
}
.CD { background-image: url(images/skn_vert_cont_D.gif); }

/* 3img dessus */
.BG { background-image: url(images/skn_coin_BG.gif); }
.BM { height: 20px; background-image: url(images/skn_coin_BM.gif); }
.BD { background-image: url(images/skn_coin_BD.gif); }

(je n'ai fait que les c/c d'après le tuto...)

D'après un tuto d'un membre.

Problème avec design "SteamErsatz"

Supprimer

Modérer

Signaler le message aux modérateurs