Apparence de la barre de navigation
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Apparence de la barre de navigation
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
Re: Apparence de la barre de navigation
Bonsoir,
Pouvez-vous transmettre l'intégralité de votre feuille de style svp ?
Cordialement.
Pouvez-vous transmettre l'intégralité de votre feuille de style svp ?
Cordialement.
Invité- Invité
Re: Apparence de la barre de navigation
C'est la seule chose que j'ai mise pour l'instant. Je débute son développement.
Re: Apparence de la barre de navigation
Essaye de rajouter pour le CSS de tes images ceci :
Exemple :
- 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;
}
Re: Apparence de la barre de navigation
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 ...
Mystère ...
Re: Apparence de la barre de navigation
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
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
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
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
Re: Apparence de la barre de navigation
Merci pour l'explication. je note ça sur le carnet du TA pour faire des recherches ultérieures. Je balise en résolu.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum