Bonjour,
J'ai créé en utilisant un tutoriel sur le présent site un menu avec des images fait en CSS et un rollover. Le principe est simple. J'ai une image transparente de taille fixe, tandis que le background de mon lien est une image et que ce background change lorsqu'on passe par-dessus l'image. Les images sont préloadées en les faisant afficher au début de ma page mais avec un "display : none".
Donc, jusque là tout allait bien.
Or, ce menu fonctionnait avec un tableau et j'ai décidé de virer le tableau pour à la place un paragraphe. J'ignore si un autre bloc y aurait été préférable, mais une chose est sûre mon menu doit tenir en une ligne. Là était d'ailleurs le pourquoi du tableau.
Donc, j'ai mis tous mes liens en une ligne et j'ai fait 2 constats. Le premier, dans tous les navigateurs, est qu'il y a un espace entre mes boutons. Cela est dû à la propreté de mon code, puisqu'en recollant tous les liens et images dans le code l'espace disparaît. Mais cela fait un code extrêmement difficile à lire et je voulais donc savoir s'il y a avait un quelconque problème de palier ce problème.
Deuxièmement, sous Mozilla, l'image ne s'affiche qu'à moitier. C'est plutôt curieux.
Je vous fournis le code d'un seul bouton ci-dessous pour que vous compreniez mieux.
Merci d'avance,
D@n!eL_
Modifié par D@n!eL_ (28 Feb 2006 - 05:28)
J'ai créé en utilisant un tutoriel sur le présent site un menu avec des images fait en CSS et un rollover. Le principe est simple. J'ai une image transparente de taille fixe, tandis que le background de mon lien est une image et que ce background change lorsqu'on passe par-dessus l'image. Les images sont préloadées en les faisant afficher au début de ma page mais avec un "display : none".
Donc, jusque là tout allait bien.
Or, ce menu fonctionnait avec un tableau et j'ai décidé de virer le tableau pour à la place un paragraphe. J'ignore si un autre bloc y aurait été préférable, mais une chose est sûre mon menu doit tenir en une ligne. Là était d'ailleurs le pourquoi du tableau.
Donc, j'ai mis tous mes liens en une ligne et j'ai fait 2 constats. Le premier, dans tous les navigateurs, est qu'il y a un espace entre mes boutons. Cela est dû à la propreté de mon code, puisqu'en recollant tous les liens et images dans le code l'espace disparaît. Mais cela fait un code extrêmement difficile à lire et je voulais donc savoir s'il y a avait un quelconque problème de palier ce problème.
Deuxièmement, sous Mozilla, l'image ne s'affiche qu'à moitier. C'est plutôt curieux.
Je vous fournis le code d'un seul bouton ci-dessous pour que vous compreniez mieux.
Merci d'avance,
D@n!eL_
<p>
<a href="?page=home" id="lien_01"><img src="img/none.gif" alt="Accueil" /></a>
<a href="?page=journal" id="lien_02"><img src="img/none.gif" alt="Journal" /></a>
</p>p#top_menu a img { width : 100px; height : 25px; }
a#lien_01 { background-image : url('../img/top-menu-01.gif'); }
a#lien_02 { background-image : url('../img/top-menu-02.gif'); }
a:hover#lien_01 { background-image : url('../img/top-menu-hover-01.gif'); }
a:hover#lien_02 { background-image : url('../img/top-menu-hover-02.gif'); }Modifié par D@n!eL_ (28 Feb 2006 - 05:28)