Problème avec le tutoriel "Une image réactive (rollover) sans JS&

Bonsoir,

Je viens de procéder aux changement nécessaires comme indiqué sur le tutoriel, mais le résultat escompté, n'est pas du tout celui que j'attendais.


En images :

Avant http://img108.echo.cx/img108/5320/avant5qa.th.gif

Après http://img108.echo.cx/img108/256/apres2nc.th.gif

Auriez vous une idée pour que je puisse récupérer un barre horizontale ?
Modifié par Ji_D (10 Jun 2005 - 20:34)

Bonsoir Ji_D,

Bienvenue.

Si tu as la possibilité de mettre la page (et non les images) qui te pose problème en ligne nous arriverons plus facilement à t'aider.

Désolé mais il s'agit de mon installation local... Il s'agit d'un forum IPB 1.3.1, Je suis en train de construire une skin et j'ai remplacé les liens du submenu par des boutons, j'ai ensuite fait la manippe conseillé sur le tutoriel.


Avant modification :

<table width="100%" cellspacing="1" id="submenu">
<tr>
<td align='center'><a href='http://www.shareaza-france.com/forum'><img src="style_images/2/portail_f.gif" alt="Portail" /></a><!--IBF.RULES--><a href='http://www.shareaza-france.com/tutos.php'><img src="style_images/2/tutorial_f.gif" alt="Tutoriels" /></a><!--IBF.RULES--><a href='http://www.shareaza-france.com/forum/index.php?showforum=42'><img src="style_images/2/baseco.gif"><!--IBF.RULES--><a href='http://www.shareaza-france.com/download.php'><img src="style_images/2/downloads_f.gif" alt="Downloads" /></a><!--IBF.RULES--><a href='http://www.shareaza-france.com/forum/index.php?act=Help'><img src="style_images/2/aide_f.gif" alt="Aide" /></a><!--IBF.RULES--><a href='http://www.shareaza-france.com/forum/index.php?act=Search&f='><img src="style_images/2/recherches_f.gif" alt="Recherches" /></a><!--IBF.RULES--><a href='http://www.shareaza-france.com/forum/index.php?act=Members'><img src="style_images/2/membres_f.gif" alt="Membres" /></a><!--IBF.RULES--></td>
</table>

Modifié :

<table  width="100%" cellspacing="1" id="submenu">
<tr><td align='center'><a class="image" href='http://www.shareaza-france.com/forum/index.php?act=home' > </a><!--IBF.RULES--><a class="image1" href='http://www.shareaza-france.com/tutos.php' ></a><!--IBF.RULES--><a class="image2" href='http://www.shareaza-france.com/forum/index.php?showforum=42' ></a><!--IBF.RULES--><a class="image3" href='http://www.shareaza-france.com/download.php' ></a><!--IBF.RULES--><a class="image4" href='http://www.shareaza-france.com/forum/index.php?act=Help' ></a><!--IBF.RULES--><a class="image5" href='http://www.shareaza-france.com/forum/index.php?act=Search&f=' ></a><!--IBF.RULES--><a class="image6" href='http://www.shareaza-france.com/forum/index.php?act=Members' ></a><!--IBF.RULES--></td>
</table>

Le CSS :

#logostrip { padding: 0px;marg
in: 0px;border: 0px solid #000; }
#submenu { font-size: 10px;margin: 3px 0px 3px 0px;font-weight: bold;color: #000; }
#submenu a:link, #submenu  a:visited, #submenu a:active { font-weight: bold;font-size: 10px;text-decoration: none;color: #000; }
#submenu a:hover { text-decoration: underline;color: #9AACC2; }


a.image { display: block; width: 79px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/portail_f.gif); background-repeat: no-repeat; }

a.image:hover { background-image: url(style_images/<#IMG_DIR#>/portail_bc.gif); / }

a.image1 { display: block; width: 80px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/tutoriels_f.gif); background-repeat: no-repeat; }

a.image1:hover { background-image: url(style_images/<#IMG_DIR#>/tutoriels_bc.gif); / } 

a.image2 { display: block; width: 192px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/baseco_f.gif); background-repeat: no-repeat; }

a.image2:hover { background-image: url(style_images/<#IMG_DIR#>/baseco_bc.gif); / } 

a.image3 { display: block; width: 155px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/download_f.gif); background-repeat: no-repeat; }

a.image3:hover { background-image: url(style_images/<#IMG_DIR#>/download_bc.gif); / } 

a.image4 { display: block; width: 123px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/aide_f.gif); background-repeat: no-repeat; }

a.image4:hover { background-image: url(style_images/<#IMG_DIR#>/aide_bc.gif); / } 

a.image5 { display: block; width: 99px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/recherches_f.gif); background-repeat: no-repeat; }

a.image5:hover { background-image: url(style_images/<#IMG_DIR#>/recherches_bc.gif); / }

a.image6 { display: block; width: 99px; height: 40px; background-image: url(style_images/<#IMG_DIR#>/membres_f.gif); background-repeat: no-repeat; }

a.image6:hover { background-image: url(style_images/<#IMG_DIR#>/membres_bc.gif); / }

Modifié par Ji_D (10 Jun 2005 - 21:23)

Heu ... Tu réalises ta mise en page avec des tables. Ce qu'en aucun cas le tutoriel ne t'indique de faire.

Si tu restes un peu parmi nous, tu apprendras sûrement à faire autrement

Je ne voudrais pas trop m'avancer mais quelque chose me dit que ton problème est (indépendamment) lié à cela.

Je t'invite à regarder le code source de l'exemple donné.

Il faut dire que je n'y connais rien au html et autre langage... Je débute

J'avais tous simplement remplacé, "ma" ligne par celle du tuto, je vais essayer en supprimant les "tables", mais je crois surtout que je vais laisser ça au webmaster, après tout c'est son domaine.

En tout cas je te remercie d'avoir essayé de m'aider.
Je ferais un petit UP du sujet pour te tenir au courant.
Modifié par Ji_D (11 Jun 2005 - 23:24)

J'ai compris d'où viens le problème... Dans la modification, je ne demande pas aux boutons d'être alignés à l'horizontale...
Une idée ?