Code CSS et version mobile moderne !

2 participants

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

Résolu Code CSS et version mobile moderne !

Message par adrien_69 Mer 17 Jan 2018 - 17:55

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.
avatar

adrien_69
****

Masculin
Messages : 414
Inscrit(e) le : 09/02/2005

Voir le profil de l'utilisateur http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS et version mobile moderne !

Message par Walt Mer 17 Jan 2018 - 18:13

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6019
Inscrit(e) le : 08/09/2015

Voir le profil de l'utilisateur
Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS et version mobile moderne !

Message par adrien_69 Mer 17 Jan 2018 - 18:56

Bonjour,

Merci pour votre réponse !

C'est fait ! Smile

Amitiés, Adrien.
avatar

adrien_69
****

Masculin
Messages : 414
Inscrit(e) le : 09/02/2005

Voir le profil de l'utilisateur http://www.passionlachasse.com
adrien_69 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS et version mobile moderne !

Message par Walt Mer 17 Jan 2018 - 23:32

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6019
Inscrit(e) le : 08/09/2015

Voir le profil de l'utilisateur
Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code CSS et version mobile moderne !

Message par adrien_69 Ven 19 Jan 2018 - 13:54

Bonjour,

Merci beaucoup, c'est parfait ! Wink

Amitiés, Adrien.
avatar

adrien_69
****

Masculin
Messages : 414
Inscrit(e) le : 09/02/2005

Voir le profil de l'utilisateur http://www.passionlachasse.com
adrien_69 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