Apparence de la barre de navigation

2 participants

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

Résolu Apparence de la barre de navigation

Message par emc2 Mer 17 Sep 2014 - 10:38

Détails techniques


Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : depuis de départ
Lien du forum : http://chevaux-passions.forumactif.org/

Description du problème

Bonjour,
J'utilise régulièrement ce code pour donner une apparence à la barre de navigation des fora que je développe. Hors, il se trouve que pour celui-ci, seul l'image "calendrier" apparaît. Il me semble avoir paramétrer le forum comme pour les autres, mais rien n'y fait. J'ai fini par faire carrément un copié/collé du code CSS d'un forum ou cela fonctionne, mais même ainsi, je n'ai que "Calendrier". Je ne vois plus quoi vérifier. J'ai tracé un trait noir sur la capture là ou devrait apparaître les autres boutons de la navigation, (à droite de "Calendrier").
Merci pour l'aide.

Code:
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
  background-image:url(http://i75.servimg.com/u/f75/16/74/01/20/83_24_10.png);/*image si la souris
  ne survole pas*/
  width:83px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_index:hover{
  background-image:url(http://i75.servimg.com/u/f75/16/74/01/20/83_24_11.png);
/*image si la souris survole*/
  width:83px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
  background-image:url(http://i75.servimg.com/u/f75/16/74/01/20/113_2410.png); /*image si la souris

ne survole pas*/
  width:113px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_calendar:hover{
  background-image:url(http://i75.servimg.com/u/f75/16/74/01/20/113_2411.png);

/*image si la souris survole*/
  width:113px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/33_24_10.png'); /*image si la souris

ne survole pas*/
  width:33px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_faq:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/33_24_11.png');

/*image si la souris survole*/
  width:33px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/125_2410.png'); /*image si la souris

ne survole pas*/
  width:125px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_search:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/125_2411.png');

/*image si la souris survole*/
  width:125px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/98_24_10.png'); /*image si la souris

ne survole pas*/
  width:98px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_members:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/98_24_11.png');

/*image si la souris survole*/
  width:98px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/80_24_10.png'); /*image si la souris

ne survole pas*/
  width:80px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_groups:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/80_24_11.png');

/*image si la souris survole*/
  width:80px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/51_24_10.png'); /*image si la souris

ne survole pas*/
  width:51px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_profile:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/51_24_11.png');

/*image si la souris survole*/
  width:51px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/102_2410.png'); /*image si la souris

ne survole pas*/
  width:102px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_message:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/102_2411.png');

/*image si la souris survole*/
  width:102px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/90_24_10.png'); /*image si la souris

ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_new_message:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/90_24_11.png');

/*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/126_2410.png'); /*image si la souris

ne survole pas*/
  width:126px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_logout:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/126_2411.png');

/*image si la souris survole*/
  width:126px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/senreg10.png'); /*image si la souris

ne survole pas*/
  width:118px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_register:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/senreg11.png');

/*image si la souris survole*/
  width:118px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/connex10.png'); /*image si la souris

ne survole pas*/
  width:113px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}
#i_icon_mini_login:hover{
  background-image:url('http://i75.servimg.com/u/f75/16/74/01/20/connex11.png');

/*image si la souris survole*/
  width:113px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
}


Dernière édition par emc2 le Jeu 18 Sep 2014 - 22:39, édité 1 fois
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par Invité Mer 17 Sep 2014 - 19:22

Bonsoir,

Pouvez-vous transmettre l'intégralité de votre feuille de style svp ?


Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par emc2 Mer 17 Sep 2014 - 20:59

C'est la seule chose que j'ai mise pour l'instant. Je débute son développement.
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par [Nihil] Mer 17 Sep 2014 - 22:12

Essaye de rajouter pour le CSS de tes images ceci :
Code:
background-position: 0;

Exemple :
Code:
#i_icon_mini_index{
  background-image:url(http://i75.servimg.com/u/f75/16/74/01/20/83_24_10.png);/*image si la souris
  ne survole pas*/
  width:83px; /*Largeur de l'image*/
  height:24px; /*Hauteur de l'image*/
  background-position: 0;
}
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par emc2 Mer 17 Sep 2014 - 22:37

Effectivement, ça fonctionne ainsi. Mais je ne m'explique pas pourquoi cela fonctionne ailleurs sans cette ligne de code, alors que sur ce forum, il faut l'ajouter sauf sur l'image "calendrier". De plus, ce n'est pas la première, mais la seconde de la barre de navigation !
Mystère ...
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par [Nihil] Mer 17 Sep 2014 - 22:52

Sur ce forum là, les images sont normalement définies sur cette grande image : https://2img.net/i/fa/sprite_prosilver_navbar.png

Si on regarde bien, on peut voir qu'elle contient les différentes icones de base de du forum, mais à des placement différents. Pour les placer, ForumActif utiliser background-position avec des valeurs différentes, en fonction de l'image.
L'image du calendrier est celle tout en haut si on regarde bien, avec un background-position de 0 0 (0 sur l'axe X et sur l'axe des Y), c'est pour cela que cela fonctionnait.
Les autres images elles avaient des positionnement tels que 0 -255px pour l'image d'index par exemple. Faites une petite recherche sur le fonctionnement des sprites en CSS si vous voulez en savoir plus Very Happy

Pour les autres forum, il se peut qu'ils avaient une autre technique pour les images, notamment s'il y avait des images mises dans le panneau d'adminstration, si vous nous donnez le lien d'un de ces forums où cela fonctionnait directement, nous pourrons chercher d'où cela venait Smile
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la barre de navigation

Message par emc2 Jeu 18 Sep 2014 - 22:39

Merci pour l'explication. je note ça sur le carnet du TA pour faire des recherches ultérieures. Je balise en résolu.
emc2

emc2
*****

Messages : 555
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

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


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