Bonsoir,
Premièrement voici le code html de la zone ou se situe mon lien :
<div id="announce" class="block">
<h2><span>Annonce</span></h2>
<div class="box">
<div class="inbox">
<div><center><p><b><h3>Bienvenue à tous sur Ecran-noir.fr, forum d'entraide informatique</p></b></h3>
<br/>
<p><b><h3><a href="http://www.ecran-noir.fr/viewtopic.php?id=117">Decouvrez notre Guide d'Optimisation Windows Seven!</a></p></b></h3>
<br/>
<table>
<tr>
<td><center><h5><a href="http://www.ecran-noir.fr/index.php#idx3" title="Conseils, maintenance, entraide... "><img src="/img/Iridium/computer.png"></a></h5></center></td>
<td><center><h5><a href="http://www.ecran-noir.fr/index.php#idx3" title="Créez et partagez vos meilleures astuces informatiques... "><img src="/img/Iridium/apprendre.png"></a></h5></center></td>
<td><center><h5><a href="http://www.ecran-noir.fr/index.php#idx4" title="Avatars, bannières, GIF animés... "><img src="/img/Iridium/paint.png"></a></h5></center></td>
<td><center><h5><a href="http://www.ecran-noir.fr/index.php#idx1" title=" Bienvenue dans le bistrot du forum !"><img src="/img/Iridium/home.png"></a></h5></center></a></td>
</tr>
<tr>
<td><center><b><h3><a href="#idx3" title="Conseils, maintenance, entraide... ">Entraide</a></b></h3></center></td>
<td><center><b><h3><a href="#idx3" title="Créez et partagez vos meilleures astuces informatiques... ">Tutoriels</a></b></h3></center></td>
<td><center><b><h3><a href="#idx4" title="Avatars, bannières, GIF animés... ">Design</a></b></h3></center></td>
<td><center><b><h3><a href="#idx1" title=" Bienvenue dans le bistrot du forum !">Discuter</a></b></h3></center></td>
</tr>
</table>
</center></div>
</div>
</div>
</div>
Deuxièmement, voici une image représentant cette zone :
http://img8.hostingpics.net/pics/618846Capture3.png
Les balises center me servent à aligner chaque images au dessus de chaque textes (Entraide, tutoriels...), la méthode n'est peut être pas convenable, mais elle a le mérite de fonctionner. (si tu as mieux je suis preneur bien entendu)
La balise h5 me permet de différencier les liens images des liens textes du tableau, sans ça, le cadre que je veux faire apparaitre lors du survol du lien image apparaitrait aussi sur le texte, la aussi je ne connais pas les lois du html/css, mais ça fonctionne.
Concernant le texte alternatif, je ne vois tout bonnement pas à quoi il sert. (même fonction que title? Merci de m'éclairer)
Maintenant parlons de mon problème, voici est un des 4 liens image présent sur l'annonce :
http://www.ecran-noir.fr/img/Iridium/computer.png
Ceci est le cadre que je voudrais voir apparaitre lors du passage du curseur sur le lien image précédent :
http://www.ecran-noir.fr/img/Iridium/cadre.png
Tout ceci dans le but que les 2 cadres rouges présent sur computer.png et cadre.png se confondent pour donner l'impression que la lumière rouge s'est intensifiée.
Mais aujourd'hui je n'arrive à obtenir que ce résultat :
http://img706.imageshack.us/img706/2790/sanstitrepe.png
En utilisant le css suivant :
#announce table h5 a:hover {background: url(../../img/Iridium/cadre.png) no-repeat}
Comment modifier ce code css pour que les cadres rouges se superposent?
J'espère avoir été plus clair que dans mon explication précédente.
Je tiens tout de même à préciser deux ou trois petites choses, il est clair que je ne suis pas un pro du html/css, je débute en tant qu'amateur, je ne veux pas jouer aux "cowboys" ou à quoi que ce soit d'autre, j'ai fais tout ceci par pure passion.
J'attends de ce forum des conseils clairs et précis (autre qu'ironiques ou sarcastiques), prononcé par des membres respectueux et tolérants.
Voila, si vous voulez d'avantages de précisions je vous les apporterais, bonne soirée à vous!
