Problème de barre de navigation en CSS

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème de barre de navigation en CSS

Message par Rough Lun 30 Avr 2012 - 23:16

Bonsoir à tous, Smile

Voici mon soucis Confused
j'ai suivi à la lettre un tuto sur FDF pour avoir une barre de navigation qui change (de couleur pour ma part) au survol de la souris, donc avec CSS. J'ai bien suivi toutes les étapes:
- désactiver le texte dans la barre de navigation
- remplacer l'adresse des images par
Code:
http://2img.net/i/fa/empty.gif
j'ai ensuite placé ce code dans la feuille de style:
Code:
/*IMAGE INDEX*/
#i_icon_mini_index{
  background-image:url('http://upload.is.free.fr/img.php?img=g0ahcnxt.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_index:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=0wc8tkmp.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE PORTAIL*/
#i_icon_mini_portal{
  background-image:url('http://upload.is.free.fr/img.php?img=g9b13709.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_portal:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=niz3ixwl.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
  background-image:url('http://upload.is.free.fr/img.php?img=icsufwp9.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_calendar:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=e4e9zb1b.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://upload.is.free.fr/img.php?img=3fyzwppy.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_faq:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=aa0yumkl.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://upload.is.free.fr/img.php?img=xh80aqqc.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_search:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=jba24jzf.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE LISTE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://upload.is.free.fr/img.php?img=l5xxbs6r.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_members:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=dehw2xpn.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://upload.is.free.fr/img.php?img=spjrudej.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_groups:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=qs66yv8l.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://upload.is.free.fr/img.php?img=el99talv.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_profile:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=mwqwildy.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
  background-image:url('http://upload.is.free.fr/img.php?img=cd787ovu.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_message:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=02d7oyu4.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://upload.is.free.fr/img.php?img=3m1yzc1g.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_new_message:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=ry6r1qxz.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://upload.is.free.fr/img.php?img=zsa8oog8.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_logout:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=w4iubr1y.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://upload.is.free.fr/img.php?img=kuii1wr4.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_register:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=ykec5y8h.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://upload.is.free.fr/img.php?img=2gmvng8c.png'); /*image si la souris ne survole pas*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_login:hover{
  background-image:url('http://upload.is.free.fr/img.php?img=p93fc5vr.png'); /*image si la souris survole*/
  width:110px; /*Largeur de l'image*/
  height:40px; /*Hauteur de l'image*/
}
mais rien n’apparaît et je ne trouve pas la solution. Cela peut il venir de l'hébergeur ?
Mon forum est en phpbb2
voici le lien si sa peux vous aidez http://marksmen-team.forum-xbox.net/
Merci d'avance à tous ceux qui prendront le temps de m'aider Smile


Dernière édition par Rough le Mar 1 Mai 2012 - 10:32, édité 1 fois
avatar

Rough
Nouveau membre

Messages : 2
Inscrit(e) le : 07/10/2011

http://heavy-motors.forum-xbox.net
Rough a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de barre de navigation en CSS

Message par Scoubifitz Mar 1 Mai 2012 - 1:02

bonsoir,
remplacez par :

Code:
/*IMAGE INDEX*/
#i_icon_mini_index{
background-image:url('http://upload.is.free.fr/upload/g0ahcnxt.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_index:hover{
background-image:url('http://upload.is.free.fr/upload/0wc8tkmp.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE PORTAIL*/
#i_icon_mini_portal{
background-image:url('http://upload.is.free.fr/upload/g9b13709.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_portal:hover{
background-image:url('http://upload.is.free.fr/upload/niz3ixwl.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
background-image:url('http://upload.is.free.fr/upload/icsufwp9.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_calendar:hover{
background-image:url('http://upload.is.free.fr/upload/e4e9zb1b.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
background-image:url('http://upload.is.free.fr/upload/3fyzwppy.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_faq:hover{
background-image:url('http://upload.is.free.fr/upload/aa0yumkl.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
background-image:url('http://upload.is.free.fr/upload/xh80aqqc.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_search:hover{
background-image:url('http://upload.is.free.fr/upload/jba24jzf.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE LISTE MEMBRES*/
#i_icon_mini_members{
background-image:url('http://upload.is.free.fr/upload/l5xxbs6r.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_members:hover{
background-image:url('http://upload.is.free.fr/upload/dehw2xpn.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
background-image:url('http://upload.is.free.fr/upload/spjrudej.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_groups:hover{
background-image:url('http://upload.is.free.fr/upload/qs66yv8l.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
background-image:url('http://upload.is.free.fr/upload/el99talv.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_profile:hover{
background-image:url('http://upload.is.free.fr/upload/mwqwildy.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
background-image:url('http://upload.is.free.fr/upload/cd787ovu.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_message:hover{
background-image:url('http://upload.is.free.fr/upload/02d7oyu4.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
background-image:url('http://upload.is.free.fr/upload/3m1yzc1g.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_new_message:hover{
background-image:url('http://upload.is.free.fr/upload/ry6r1qxz.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
background-image:url('http://upload.is.free.fr/upload/zsa8oog8.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_logout:hover{
background-image:url('http://upload.is.free.fr/upload/w4iubr1y.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
background-image:url('http://upload.is.free.fr/upload/kuii1wr4.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_register:hover{
background-image:url('http://upload.is.free.fr/upload/ykec5y8h.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
background-image:url('http://upload.is.free.fr/upload/2gmvng8c.png'); /*image si la souris ne survole pas*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
#i_icon_mini_login:hover{
background-image:url('http://upload.is.free.fr/upload/p93fc5vr.png'); /*image si la souris survole*/
width:110px; /*Largeur de l'image*/
height:40px; /*Hauteur de l'image*/
}
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de barre de navigation en CSS

Message par Rough Mar 1 Mai 2012 - 10:31

ça fonctionne nickel, merci beaucoup...mais je comprends pas ou vous avez trouvé ces URL reflexion
avatar

Rough
Nouveau membre

Messages : 2
Inscrit(e) le : 07/10/2011

http://heavy-motors.forum-xbox.net
Rough a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum