Titre: problème pour faire un menu via des images
Posté par: Soundboy39 le le 08-05-2012 a 10:09:41
Bonjour à tous !!
Voilà j'ai un problème qui concerne à la fois le HTML et le CSS, je me suis lancé dans un truc que je pensais être tout con mais qui me donne du fil à retordre...
J'ai fait les textes des liens de mon menu principal sous photoshop pour qu'ils ait de beaux effets...
il faut donc que je créer mon menu en mettant les images exportées en tant que liens...
Jusque là tout va bien mais j'aimerai que l'image change au survol, j'ai donc décidé de passer par le CSS est la propriété "background", j'ai créer 3 type d'images : les images transparentes (en PNG) qui serviront pour la partie HTML, les images pour les liens inactif, et les images pour les liens actifs et survolés... que j'utilise dans le CSS pour la partie background.
Voici mon code HTML :
Code:
<html>
<div id="hmenu">
<ul class="hmenu">
<li class="hmenu"><a id="hmenu-accueil" href="#" title="Accueil"><img src="hmenu/hmenu-transparent_accueil.png" /></a></li>
<li class="hmenu"><a id="hmenu-presentation" href="#" title="Presentation"><img src="hmenu/hmenu-transparent_presentation.png" /></a></li>
<li class="hmenu"><a id="hmenu-contact" href="#" title="Contact"><img src="hmenu/hmenu-transparent_contact.png" /></a></li>
</ul>
</div>
</html>
|
|
et mon code CSS :
Code:
<style type="text/css">
ul.hmenu
{
display:inline;
}
li.hmenu
{
display:inline;
list-style:none;
padding:0;
margin:0;
}
a#hmenu-accueil:link, a#hmenu-accueil:visited
{
background:url('hmenu/hmenu_accueil.png') no-repeat scroll 0 0 transparent;
padding:0;
margin:0;
}
a#hmenu-accueil:hover, a#hmenu-accueil:active
{
background:url('hmenu/hmenu-activehover_accueil.png') no-repeat scroll 0 0 transparent;
padding:0;
margin:0;
}
a#hmenu-presentation:link, a#hmenu-presentation:visited
{
background:url('hmenu/hmenu_presentation.png') no-repeat scroll 0 0 transparent;
padding:0;
margin:0;
}
a#hmenu-presentation:hover, a#hmenu-presentation:active
{
background:url('hmenu/hmenu-activehover_presentation.png') no-repeat scroll 0 0 transparent;
padding:0;
margin:0;
}
a#hmenu-contact:link, a#hmenu-contact:visited
{
background:url('hmenu/hmenu_contact.png') no-repeat scroll 0 0 transparent;
padding:0;
margin:0;
}
a#hmenu-contact:hover, a#hmenu-contact:active
{
background:url('hmenu/hmenu-activehover_contact.png') no-repeat scroll 0 0 transparent;
padding:0;
margin:0;
}
</style>
|
|
Le problème que j'ai c'est qu'aucun background ne s'affiche... ni à l'état inactif du lien ... ni à l'état actif. Les images de background sont pourtant bien chargées par le navigateur.
Je ne vois pas de solution...
merci pour votre aide,
MICKAEL |
Titre: Re:problème pour faire un menu via des images
Posté par: KB le le 10-05-2012 a 11:16:23
Salut,
quand je lis ton problème et que je vois en signature:MO'WebCreation
Creation et Gestion de site Internet |
|
ca me fait peur....Mais bon, je dis rien, on va encore dire que je suis méchant !
| Les images de background sont pourtant bien chargées par le navigateur. |
|
Comment le sais -tu? tu l'as vu avec Firebug?
Et le fait que ton lien est deja une image ne pauserai pas un probleme? celle-ci ne "cacherai" pas ton background?
Et le fait que tu ais des div et des class du même nom, ca aide pas pour la clarté! |
Titre: Re:problème pour faire un menu via des images
Posté par: WebD le le 10-05-2012 a 19:22:18
| J'ai fait les textes des liens de mon menu principal sous photoshop pour qu'ils ait de beaux effets... |
|
Tu aurais pu le faire en CSS3 mais bon je dis rien on va encore dire que je suis méchant.
Si tes background ne s'affichent pas c'est que tes liens sont mauvais.
A+ |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|