Code CSS et version mobile moderne !

[adrien_69]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.passionlachasse.com

Description du problème

Bonjour,

J'ai un petit problème avec ce code CSS :

Code:

/*BARRE MENU*/
/*image site*/
.site{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site2.png'); /*mise en cache de l'image de survole*/
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site1.png'); /*image si la souris ne survole pas*/
width: 53px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}
.site:hover{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/site2.png'); /*image si la souris survole*/
width: 53px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}
/*image forum*/
.forum{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum2.png'); /*mise en cache de l'image de survole*/
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum1.png'); /*image si la souris ne survole pas*/
width: 59px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}
.forum:hover{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum2.png'); /*image si la souris survole*/
width: 59px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}
/*image portail*/
#i_icon_mini_portal{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/portail2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/portail1.png'); /*image si la souris ne survole pas*/
width:62px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_portal:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/portail2.png'); /*image si la souris survole*/
width:62px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image faq*/
#i_icon_mini_faq{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/faq2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/faq1.png'); /*image si la souris ne survole pas*/
width:47px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_faq:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/faq2.png'); /*image si la souris survole*/
width:47px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image recherche*/
#i_icon_mini_search{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/recherche2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/recherche1.png'); /*image si la souris ne survole pas*/
  width:96px; /*Largeur de l'image*/
  height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_search:hover{
  background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/recherche2.png'); /*image si la souris survole*/
  width:96px; /*Largeur de l'image*/
  height:38px; /*Hauteur de l'image*/
}
/*image liste membre*/
#i_icon_mini_members{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/membres2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/membres1.png'); /*image si la souris ne survole pas*/
width:78px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_members:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/membres2.png'); /*image si la souris survole*/
width:78px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image groupe*/
#i_icon_mini_groups{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/groupes2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/groupes1.png'); /*image si la souris ne survole pas*/
width:72px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_groups:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/groupes2.png'); /*image si la souris survole*/
width:72px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image profil*/
#i_icon_mini_profile{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/profil2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/profil1.png'); /*image si la souris ne survole pas*/
width:54px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_profile:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/profil2.png'); /*image si la souris survole*/
width:54px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image mp (pas de nouveaux messages)*/
#i_icon_mini_message{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/messagerie2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/messagerie1.png'); /*image si la souris ne survole pas*/
width:96px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_message:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/messagerie2.png'); /*image si la souris survole*/
width:96px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image mp (nouveaux messages)*/
#i_icon_mini_new_message{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/messagerie3.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/messagerie3.png'); /*image si la souris ne survole pas*/
width:96px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_new_message:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/messagerie3.png'); /*image si la souris survole*/
width:96px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image déconnexion*/
#i_icon_mini_logout{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/deconnexion2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/deconnexion1.png'); /*image si la souris ne survole pas*/
width:125px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_logout:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/deconnexion2.png'); /*image si la souris survole*/
width:125px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image s'enregistrer*/
#i_icon_mini_register{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/enregistrement2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/enregistrement1.png'); /*image si la souris ne survole pas*/
width:107px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_register:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/enregistrement2.png'); /*image si la souris survole*/
width:107px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
/*image connexion*/
#i_icon_mini_login{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/connexion2.png'); /*mise en cache de l'image de survole*/
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/connexion1.png'); /*image si la souris ne survole pas*/
width:107px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}
#i_icon_mini_login:hover{
background-image:url('http://passionlachasse.free.fr/passionlachasse.com/barre/connexion2.png'); /*image si la souris survole*/
width:107px; /*Largeur de l'image*/
height:38px; /*Hauteur de l'image*/
}

/*LIENS CATEGORIES*/

a.forumlink:link, a.forumlink:visited {
font-family: Verdana,Arial,Sans Serif;
font-size:14px;
color: #58580e;
hover: #FF6600;
display: block;
margin-left:10px;
text-shadow: #58580e 0px 0px 0px;
margin-bottom:-10px;
margin-left: 30px;
font-weight: normal;
letter-spacing:-1px;
  transition: 0s;  /* Temps de déplacement */
-moz-transition: 0s; /* Temps de déplacement (pour une version en particulier */
-o-transition: 0s; /* Temps de déplacement (pour une version en particulier */
-htm-transition: 0s; /* Temps de déplacement (pour une version en particulier */
-webkit-transition: 0s; /* Temps de déplacement (pour une version en particulier */
}
a.forumlink:hover {color: #FF6600}

Quand je passe la version mobile de mon forum en version moderne, ce code là me décale toute la version moderne sur mobile et donc le forum n'est pas navigable.

Est ce qu'il est possible de rajouter quelques choses sur le code pour que le code ne fonctionne pas sur la version mobile mais uniquement sur ordinateur ?

Merci !

Cordialement, Adrien.

[Walt]

Bonjour,

Pourriez-vous activer la version moderne afin que je constate le problème directement, et que je puisse comprendre quelle partie de ce CSS est responsable du décalage ?

Cordialement,
Walt

[adrien_69]

Bonjour,

Merci pour votre réponse !

C'est fait !

Amitiés, Adrien.

[Walt]

Bonsoir,

Dans votre CSS, remplacez ceci :

Code:

/*image forum*/
.forum{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum2.png'); /*mise en cache de l'image de survole*/
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum1.png'); /*image si la souris ne survole pas*/
width: 59px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}
.forum:hover{
background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum2.png'); /*image si la souris survole*/
width: 59px; /*Largeur de l'image*/
height: 38px; /*Hauteur de l'image*/
}

Par ceci :

Code:

/*image forum*/
body:not(#mpage-body-modern) .forum{
    background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum2.png'); /*mise en cache de l'image de survole*/
    background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum1.png'); /*image si la souris ne survole pas*/
    width: 59px; /*Largeur de l'image*/
    height: 38px; /*Hauteur de l'image*/
}
.forum:hover{
    background-image: url('http://passionlachasse.free.fr/passionlachasse.com/barre/forum2.png'); /*image si la souris survole*/
}

Cette correction va faire apparaitre un autre problème : l'image de feuille verte va recouvrir les forums. Pour corriger cela, il vous faudra également supprimer cet extrait de votre CSS :

Code:

.cat_no_new
{background-image: url('http://passionlachasse.free.fr/passionlachasse.com/images/feuille_verte.gif') ;}
.forum_no_new
{background-image: url('http://passionlachasse.free.fr/passionlachasse.com/images/feuille_verte.gif') ;}
.cat_new
{background-image: url('http://passionlachasse.free.fr/passionlachasse.com/images/feuille.gif') ;}
.forum_new
{background-image: url('http://passionlachasse.free.fr/passionlachasse.com/images/feuille.gif') ;}
.cat_locked
{background-image: url('http://passionlachasse.free.fr/passionlachasse.com/images/feuille_v.gif') ;}
.forum_locked
{background-image: url('http://passionlachasse.free.fr/passionlachasse.com/images/feuille_v.gif') ;}

Cordialement,
Walt

[adrien_69]

Bonjour,

Merci beaucoup, c'est parfait !

Amitiés, Adrien.