Header de fond non centré mobile/ordinateur (Javascript + CSS)
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Header de fond non centré mobile/ordinateur (Javascript + CSS)
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, bonsoirJe 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
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
Up, merci d'avance
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
Up, merci d'avance
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
Up, merci d'avance
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
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
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
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
Bonjour
Nous sommes trois sous IPhone ! J'ai cependant accès à des Android, je vais essayer dans la journée alors
Je reviens vers vous dès que possible !
Nous sommes trois sous IPhone ! J'ai cependant accès à des Android, je vais essayer dans la journée alors
Je reviens vers vous dès que possible !
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
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...
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...
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
Bonjour,
Depuis un Galaxy S5, tout est centré. Aussi sur iPhone.
Bien à vous,
Laiorm
Depuis un Galaxy S5, tout est centré. Aussi sur iPhone.
Bien à vous,
Laiorm
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
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
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
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
J'ai un iPhone 5, je vais voir avec un ami si je peut lui emprunter son iPhone 7 pour essayer
Bien à vous,
Laiorm
Bien à vous,
Laiorm
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
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
Bon week-end à tous !
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
Bon week-end à tous !
Re: Header de fond non centré mobile/ordinateur (Javascript + CSS)
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. |
Sujets similaires
» Header de fond non centré
» Header + Pattern centrer sur toutes les tailles d'ordinateur
» Code Javascript: Mon texte en pied-de-page n'est pas centré. Tutoriel de Threax
» [JavaScript] Header Aléatoire
» Header non centré
» Header + Pattern centrer sur toutes les tailles d'ordinateur
» Code Javascript: Mon texte en pied-de-page n'est pas centré. Tutoriel de Threax
» [JavaScript] Header Aléatoire
» Header non centré
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum