Header de fond non centré mobile/ordinateur (Javascript + CSS)

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

Résolu Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Sam 7 Jan 2017 - 21:18

Détails techniques


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

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Dès l'installation du code
Lien du forum : http://previouslyon.forumactif.com/

Description du problème

Bonjour, bonsoir Smile

Je viens vers vous car je m'arrache les cheveux depuis des semaines sur ce problème de header. J'ai tout essayé, tous les codes Javascript trouvés, tous les codes CSS trouvés, mais il semblerait que le problème soit persistant (et bien insupportable.

Dans l'objectif d'installer un jour des headers aléatoires de fond sur notre forum, mes co-fondatrices et moi-même avons décidé d'installer ce javascript :

Code:
$(function(){
                                          var a = ["http://zupimages.net/up/16/40/oayo.png"];
                                        $("body").css("background-image", "url("+a[Math.floor(Math.random() * a.length)]+")");
$("body").css("background-position", "center top" )
                                });

Voici le CSS complet du forum (nous ne sommes pas des pros, loin de là, merci de ne pas être trop moqueurs).
Code:
/*************** DEFINITION GLOBALE DU FORUM ******************************/
/* BANNIERE FOND DE FORUM */
body{
text-align:justify;
background-repeat:no-repeat;
background-position: top center;
}

#i_logo {
background-position: top center;
 background-repeat: no-repeat;
}

.choixheader {background-size:auto; background-position: 50% 0%;}

a {outline: none;}

/* Sélectionner le code */
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

/* Texte justifié */
div.postbody {
  display: block;
  padding-left: 40px;
  padding-right: 40px;
  text-align:justify;
  padding-top:15px;
}

/* Barre de navigation */
a.mainmenu, a.mainmenu:link, a.mainmenu:visited{
  font-family : Playfair Display; /* CHOIX DE LA POLICE */
  text-transform:uppercase;
  color: #EB9749; /* COULEUR DE LA POLICE */
  font-size: 13px; /* TAILLE DE LA POLICE */
  font-weight: bold; /* EPAISSEUR */
}

/* Enlever soulignement pseudo/liens */
A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}

/* Enlever dernière édition */
-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }

/* Pseudos modifiés */
.poster_name {
font-family: 'Cormorant SC', cursive;
font-size:24px;}

/**************************** FIN DEFINITION GLOBALE DU FORUM *************************/

/* CLASSES C, D, U /retour série, nouvelle série*/ /******A FAIRE : Groupes + autres *******/

c {text-transform: uppercase;
  color:#ec6700;
  font-weight: bold;
  font-size:10px;}

d {text-transform: uppercase;
  color:#d23100;
  font-weight: bold;
  font-size:10px;}

u {text-transform: lowercasecase;
  color:#ffcc00;
  font-weight: bold;
  text-decoration:none}

r /*retour série*/
{ font-weight: bold;
  color:#cd7773;
  font-size:12px;}

n /*nouvelle série*/
{ font-weight: bold;
  color:#db9f52;
  font-size:12px;}

pr /*présent*/
{ font-weight: normal;
  color: #86BA55;
  font-size:10px;}

hlf /*moins préxent*/
{ font-weight: normal;
  color:#F77C0A;
  font-size:10px;}

abs /*absent*/
{ font-weight: normal;
  color:#a32218;
  font-size:10px;}


/********************************** SCROLL BAR *******************************/
::-webkit-scrollbar{
 width: 5px; /*largeur de la scrollbar verticale*/
 height: 10px; /*hauteur de la scrollbar horizontale*/
}
::-webkit-scrollbar-track {
 background: #790d0e; /*couleur du fond de la scrollbar*/
 border: 1px solid #790d0e;  /*bordure*/
}
::-webkit-scrollbar-thumb {
background-color: #f9e55e; /*couleur de l'ascenseur*/;
}

/******************************** FIN SCROLLBAR ***************************************/

 /******************************************** CODE PA **********************************/
/* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
  .cssactif_pa_main {
      width: 800px;
  height: 600px;
      padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
      margin: 0 auto;
  }
 
  .cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
        font-family: "Cormorant", cursive;    /* Police de caractère */
      font-weight: normal; /* Épaisseur normale */
      color: #DB615A; /* Couleur du texte */
      font-size: 20px; /* Grosseur du texte */
      text-transform:uppercase;
      margin:0;
  }

  .cssactif_pa_main h3 { /* Titre des colonnes LE STAFF etc */
font-family: 'Playfair Display', cursive;    /* Police de caractère */
      font-weight: normal; /* Épaisseur normale */
      color: #EB8E36; /* Couleur du texte */
      font-size: 15px; /* Grosseur du texte */
      text-transform:uppercase;
      margin:0;

  }
 
  .cssactif_pa_colonne { /* Style général des colonnes */
      float: left; /* Place les colonnes un à côté de l'autre */
      width: 33%; /* Donne la grandeur des colonnes */
      margin: 1px;
      background-color: #a32218; /* Couleur de fond */
      height: 575px; /* Hauteur des colonnes: doit être fixe */
      color: #EB9749; /* Couleur du texte */
      opacity: 0.9; /* Opacité des colonnes */
   
      /* Transition */
      -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

  }
 
  .cssactif_pa_colonne p { /* Paragraphe des colonnes */
  padding: 0 10px; /* Padding */
  text-indent: 10px; /* Alinéa */
  text-align: justify;  /* Alignement du texte */
  }

.cssactif_pa_header { /* Style commun des header de couleur */
  padding: 10px;
  height: 40px;
}

.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #EB8E36; /* Couleur du texte */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */
  text-align:center;

}
.colgauche .cssactif_pa_header {background-color: #901A12;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #790D0E;} /* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #630607;} /* Colonne de droite, couleur du header */
/* Contenu des colonnes */

.new {
  margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
  padding: 5px; /* Padding */
  border-bottom: 1px solid #6B0B0C; /* Bordure du séparateur */
 
  text-align: justify; /* Alignement du texte */
}
.new1 {
  margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
  padding: 5px; /* Padding */

 
  text-align: justify; /* Alignement du texte */
}

.new em { /* Dates */
  color: #F0EC16;  /* Couleur du texte */
  text-transform: uppercase; /* Transformation du texte en majuscule */
  font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: 'Times New Roman', cursive; /* Police de caractère */ }

.new1 em { /* Dates */
  color: #DFC512;  /* Couleur du texte */
  text-transform: uppercase; /* Transformation du texte en majuscule */
  font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: 'Times New Roman', cursive; /* Police de caractère */
}

.new em:after {
  content: "";  /* Ajoute la flèche après les dates */
}

.secondarytitle{ /* Modifie la forme des titres de catégorie */
  text-transform: uppercase;
}
.cattitle{ /* Modifie la forme des titres de catégorie */
  text-transform: uppercase;
}
.tops /*image tops sites*/
{
  width: 40px;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=50);
  position: center;
}

.tops:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
  position: center;
}

.staff {
  padding: 3px;
  width: 30px;} /* DEFINI CADRE ICONES STAFF */

.imgserie {
  border: 1px solid #6B0B0C;
  padding:1px;
  max-width: 200px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);} /* DEFINI CADRE IIMAGE SERIE DU MOIS */

.texte1 {
text-align:justify;
max-width:230px;} /* DEFINI CADRE IIMAGE SERIE DU MOIS */

.friends { padding: 3px ;
  width: 20px;} /* DEFINI CADRE ICONES PARTENAIRES */

.reseaux { padding: 3px;
  width: 35px;
  position: center;} /* DEFINI CADRE ICONES RESEAUX SOCIAUX */

a.tooltip em { /* Infos bulle PA */
        display:none;
    }
    a.tooltip:hover { /* Infos bulle PA */
        border: 0;
        position: relative;
        z-index: 999;
        text-decoration:none;
    }
    a.tooltip:hover em {  /* Infos bulle PA */
        font-style: normal;
        display: block;
        position: absolute;
        top: 0px;
        left: -50px;
        padding: 5px;
        border: 1px solid #A82822;
        background: #6B0B0C;
        width:125px;
        border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
    }
 /**************************************** FIN CODE PA *********************************/

/***************************** CHATBOX LATERALE ****************************************/
.ChatboxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 50%; /* à 10% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et collé au bord gauche */
  width : 100px; /* dimension 100px */
}
.ChatboxLaterale iframe {
  width: 800px; /* largeur */
  height: 300px; /* hauteur */
  display: none; /* caché par défaut */
}
.boutonChatbox {
vertical-align: bottom; /* on aligne le bouton en bas, le long de la chatbox */
}
.boutonChatbox img {
cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}
/************************** FIN CHATBOX LATERALE ***************************************/

/*************************** APPARENCE CATEGORIES *******************************/

/* Mise en forme du "bloc" qui contient le titre */
.TitreCategorie {
  background-image:url('http://zupimages.net/up/16/44/5g86.png');
  background-position:center;
  background-size:100%;
  width: 100%; /*largeur à modifier selon vos goûts*/
  height:100%;
  position: center;
  margin:auto; /* on centre le bloc */
  padding:2px; /*espace entre la bordure et le texte*/
  border-bottom:0px;
}

/* mise en forme du titre lui-même */
.TitreCategorie h2 {
  margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  letter-spacing:2px; /* espacement entre les lettres */
  color:#cf5853; /* couleur du texte */
  font-family: "Playfair Display", cursive;
  text-transform: uppercase;
  font-weight: lighter; /* épaisseur du texte */
  font-size:20px;
}

/* Mise en forme titre forum */
.fo_name {
  margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
  text-align: center; /*alignement du texte par rapport au bloc qui le contient */
  letter-spacing:2px; /* espacement entre les lettres */
  color:#DFC512; /* couleur du texte */
  font-weight: bolder; /* épaisseur du texte */
  font-family: "Playfair Display", cursive;
  text-transform:uppercase;
  font-size:10px;}

/* Largeur de la cellule du dernier message posté */
.LastPost {
  width:200px;
  text-align:middle;
}

/*Largeur de la cellule sous forum */
.s_forum {
  width: 100px;
  height: 65px;
  padding: 10px;
  display: block;
  text-align: center;
  background-color:#790D0E;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* hauteur description */
.fo_desc {
height: 65px;
text-align:justify;
overflow-y: scroll;}

/* Avatar dernier Posteur INDEX */
.lastpost-avatar {
float: left;
padding-left: 10px;
padding-top:10px;
}

.lastpost-avatar img {
width: 55px;
height: 80px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

/* Avatar dernier Posteur SOUS FORUMS*/
.lastpost-avatar2 {
float: left;
padding-left: 10px;
}

.lastpost-avatar2 img {
width: 35px;
height: 50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;}

/*********************** FIN APPARENCE CATEGORIES **********************************/


/************************************* CODES FICHES *********************************************/

/* Code message simple + répertoire + marathon + presentation staff */

.titre2  {
  text-align: center;
  font-size: 25px; 
  color:#A82822;
  padding-bottom:5px;
  font-weight: light;
  font-family: "Playfair Display", serif;
  text-transform: uppercase;} /*mise en forme titre*/

.sstitre { 
  text-align: center;
  font-size: 15px; 
  color:#DEC311;
  font-family: "Playfair Display", serif;
  text-transform: lowercase;
  font-style: italic;} /*mise en forme sous titre*/

.cadreS { 
  background-color: #630607;
  padding:10px;
  margin: 3px;
  width: 450px;
  border-radius: 5px; } /*cadre titres*/

.cadreS2 {
  background-color: #630607;
  color:#EB9749;
  padding:10px;
  margin: 3px;
  max-width: 450px;
  border-radius: 5px;
  text-align:justify; } /*cadre descriptions*/

.cadreS3 {
  background-color: #630607;
  color:#EB9749;
  margin: 3px;
  padding:10px;
  width: 210px;
  min-height: 200px;
  max-height:200px;
  overflow-y:scroll;
  overflow-x:hidden;
  border-radius: 5px;
  text-align:justify;
  display:inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;} /*cadre répertoire*/

.cadreS3b {
  background-color: #630607;
  color:#EB9749;
  margin: 3px;
  padding:10px;
  width: 210px;
  min-height: 200px;
  max-height:200px;
  overflow-y:scroll;
  overflow-x:hidden;
  border-radius: 5px;
  text-align:justify;
  display:inline-block;
} /*cadre blabla avec scrollbar*/

.cadreS4 {
  background-color: #630607;
  color:#EB9749;
  margin: 3px;
  padding:10px;
  width: 130px;
  min-height: 150px;
  max-height:150px;
  overflow-y:hidden;
  overflow-x:hidden;
  border-radius: 5px;
  text-align:justify;
  display:inline-block;
  background-size:contain} /*cadre jours calendrier*/

.img1 {
  max-width: 450px;
  margin: auto;
  border-radius:10px;} /*image présentation*/

.img2 {
  max-width: 450px;
  margin: auto;
  border-radius:10px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);} /*image noir&blanc*/

/* fin code message simple + répertoire + marathon + presentation staff */



/* code fiche pub */

.cadreP {
  background-color: transparent;
  width: 480px;
  margin: 10px;
}

.titreP {
  text-align: center;
  text-transform: uppercase;
  font-size: 25px; 
  color: #EB8E36;
  padding-bottom:10px;
  border-bottom:1px dashed #A82822;
  font-family: 'Playfair Display', serif;
}

/* fin code fiche pub */

/************************************* FIN CODE FICHES ******************************************/

Comme templates modifiées, nous avons : index_box, overall_header et topics_list_box. Cependant nous avons essayé en enlevant ces dernières et le problème persiste. Nous n'avons touché à aucune template sous la section "Version Mobile".

Nous avons également 3 autres JS : Sélectionner un code, Chatbox latérale et Déconnexion sans pseudo, mais une fois désactivés, le problème persiste.

Nous pensons que le problème vient de :
Code:
body{
background-position: top center;
}

Car lorsque nous l'enlevons, tout s'affiche correctement sur mobile (Iphone sous Safari) mais le header est donc décalé sur la gauche sur ordinateur (mac sous Chrome/Mozilla & PC sous Chrome).
Et si nous le mettons, tout apparait correctement sur ordinateur mais est décalé sur la gauche (comme sur la capture d'écran) sur mobile...

Voilà, j'espère que vous aurez toutes les informations nécessaires pour nous aider. J'ai déjà installé ce code par le passé et tout allait bien. Mais là, impossible de le faire marcher correctement.

Merci d'avance pour votre aide,

Bonne soirée.


Dernière édition par paeonia le Sam 14 Jan 2017 - 11:23, édité 1 fois
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Dim 8 Jan 2017 - 20:21

Up, merci d'avance Smile
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Mar 10 Jan 2017 - 16:50

Up, merci d'avance Smile
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Ven 13 Jan 2017 - 21:04

Up, merci d'avance Smile
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par Bad_girls le Sam 14 Jan 2017 - 9:22

Bonjour!

Vous avez un iphone ou un smartphone?
parce que je sais qu'il y a des choses qui fonctionnent bien sur smartphone et moins bien sur iphone...

Cordialement
avatar

Bad_girls
*****

Féminin
Messages : 685
Inscrit(e) le : 21/09/2010

http://leforumdesamis.monally.com/portal.htm
Bad_girls a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Sam 14 Jan 2017 - 9:33

Bonjour Smile

Nous sommes trois sous IPhone ! J'ai cependant accès à des Android, je vais essayer dans la journée alors Smile

Je reviens vers vous dès que possible !
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par Bad_girls le Sam 14 Jan 2017 - 9:35

Ok!
Par exemple, j'avais mis les décos feux d'artifices sur mon forum. Sur mon smartphone j'avais accès tout à fait normalement à mon forum, mais pas ma soeur qui est sur iphone... Wink
avatar

Bad_girls
*****

Féminin
Messages : 685
Inscrit(e) le : 21/09/2010

http://leforumdesamis.monally.com/portal.htm
Bad_girls a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par Ajesto le Sam 14 Jan 2017 - 9:48

Bonjour,

Depuis un Galaxy S5, tout est centré. Aussi sur iPhone.

Bien à vous,
Laiorm
avatar

Ajesto
****

Masculin
Messages : 325
Inscrit(e) le : 17/09/2016

http://codage-actif.forumactif.com/
Ajesto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Sam 14 Jan 2017 - 10:07

Bonjour Laiorm,

Pourriez-vous me dire depuis quel IPhone ?
Parce que le mien est un 6s et c'est toujours décalé sur la gauche :/

Merci d'avance Smile
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par Ajesto le Sam 14 Jan 2017 - 10:18

J'ai un iPhone 5, je vais voir avec un ami si je peut lui emprunter son iPhone 7 pour essayer

Bien à vous,
Laiorm
avatar

Ajesto
****

Masculin
Messages : 325
Inscrit(e) le : 17/09/2016

http://codage-actif.forumactif.com/
Ajesto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par paeonia le Sam 14 Jan 2017 - 11:22

Je viens d'essayer sur Galaxy A3 et A5, et en effet, tout est centré...

Bon, bah au pire, nous préciserons que ça plante sur les IPhone 6s etc, ce n'est pas bien grave...
Étrange que le souci apparaisse d'un seul coup cela dit :/

Je passe le sujet en résolu du coup, merci Bad_girls et Laiorm pour votre aide Smile

Bon week-end à tous !
avatar

paeonia
Nouveau membre

Messages : 8
Inscrit(e) le : 07/01/2017

http://previouslyon.forumactif.com/
paeonia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par Bad_girls le Sam 14 Jan 2017 - 11:25

De rien Wink
avatar

Bad_girls
*****

Féminin
Messages : 685
Inscrit(e) le : 21/09/2010

http://leforumdesamis.monally.com/portal.htm
Bad_girls a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)

Message par Chacha le Sam 14 Jan 2017 - 11:38

Bienvenue sur le forum de support de Forumactif

Bonjour,

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54816
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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