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

4 participants

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 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é️©️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é️©️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
paeonia

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 Dim 8 Jan 2017 - 20:21

Up, merci d'avance Smile
paeonia

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 Mar 10 Jan 2017 - 16:50

Up, merci d'avance Smile
paeonia

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 Ven 13 Jan 2017 - 21:04

Up, merci d'avance Smile
paeonia

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 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
Bad_girls

Bad_girls
*****

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

http://creations-offertes.1fr1.net/
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 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 !
paeonia

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 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
Bad_girls

Bad_girls
*****

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

http://creations-offertes.1fr1.net/
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 Sam 14 Jan 2017 - 9:48

Bonjour,

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

Bien à vous,
Laiorm
Ajesto

Ajesto
****

Masculin
Messages : 329
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 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
paeonia

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 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
Ajesto

Ajesto
****

Masculin
Messages : 329
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 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 !
paeonia

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 Sam 14 Jan 2017 - 11:25

De rien Wink
Bad_girls

Bad_girls
*****

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

http://creations-offertes.1fr1.net/
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 Sam 14 Jan 2017 - 11:38

Header de fond non centré mobile/ordinateur (Javascript + CSS) 4qhGdLE
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.
Chacha

Chacha
Modéractif
Modéractif

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

https://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

- Sujets similaires

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