[forumactif]CSS barre de navigation

Date d'inscription: 12/04/2011

Bonjour a toutes et a tous. J'vais vous apprendre et vous montrez le code CSS d'une barre de navigation qui change au passage d'une sourie. Je sais ce n'est pas ce qu'il y a de plus compliquer mais ça peux être sympa pour embellir vot' forum.

Ce code marche sous phpbb2 ça c'est sur a 100% le reste je ne sais pas je n'ai pas encore testé.Si vous avez modifier vos template de la barre de navigation je pense que ça peux marché je n'en suis pas sur je ne suis pas très fan des templates.

Bien avant toute chose je vous propose d'aller dans votre panneau d'administrations, direction Affichage au rond point prenez la sortie En-tête & Navigation puis mettez les option de la partie souligner en rouge.

Code:

#i_icon_mini_NOM{
width: Ceci est pour la largeur de l'image en px (pixel) n'oubliez pas de mettre ";" a la fin de chaque "phrase";
height: Ca c'est pour la hauteur de l'image en px;
background-image:url('Lien image');
}

Le seconde code

Code:

#i_icon_mini_NOM:hover{ /*---- hover = Change d'apparence au survol de la souris----*/
width: Ceci est pour la largeur de l'image px;
height: Ca c'est pour la hauteur de l'image px;
background-image:url('Lien de la seconde image');
}

Maintenant la partie la plus dur pour moi, si un bon français veux prendre le relais c'est d'accord XD. Comment vous expliquez le mot NOM dans les parties code... Je ne vais pas me prendre la tête pour faire simple remplacer le mot NOM par un des mots de la colonne de gauche ci dessous :

index ---------------------------------(Index du forum)
search ---------------------------------(Recherche)
members ---------------------------------(Les membres)
profile ---------------------------------(Profil utilisateur)
message ---------------------------------(Message privé)
new_message ---------------------------------(Nouveau message privé)
logout ---------------------------------(Ce déconnecter)
register ---------------------------------(Inscription)
login ---------------------------------(Connexion)
calendar ---------------------------------(Calendrier)
faq ---------------------------------(FAQ)
groups ---------------------------------(Groupe)

Pour être sur que vous voyez de quoi je parle je vais vous montrez un exemple final :

Code:

#i_icon_mini_groups{
width:145px;
height:120px;
background-image:url('Lien image');
}

#i_icon_mini_groups{
width:145px;
height:120px;
background-image:url('Lien de la seconde image');
}

Voila je pense que le compte est bon je tiens a m'excuser de la présentation j'ai eu la flemme de faire quelque chose de correct et de mon français un peu bizarre par moment.

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]