Forum décalé vers la droite sur Chrome

2 participants

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

Résolu Forum décalé vers la droite sur Chrome

Message par FireStone Lun 11 Fév 2013 - 15:51

Bonjour ou bonsoir ^^

Merci de prendre le temps de lire ce sujet. :3
Il se trouve que mon forum sous chrome est tout décalé vers la droite. J'ai essayer de modifier mes codes, mais ça rend pire sur les autres navigateurs. Je ne suis pas sous chrome, mais j'ai demandé à un de mes membres de faire un screen pour vous montrer. https://i.servimg.com/u/f73/17/95/99/27/biteee10.jpg

Voici donc le forum -> http://poorsoul.forumactif.fr/

Nous avons les templates modifié et la feuille de style CSS plutôt remplit et un p'tit code javascript. ^^

Template Index_box:

Template Index box:

Template Overall Header:

J'ai aussi le Template Viewtopic_body de modifié, mais je ne pense pas que ça pourrait avoir une influence la structure du forum, si c'est possible, je vous l'enverrai. xD

Donc voici le CSS du forum
Code:
a.forumlink{
                font-size: 16px;
            font-family: zapfino !important;
                letter-spacing: 1px;
                color: #a30000 !important;
                text-shadow: 1px 1px 2px #000000;
                transform: all;
                -moz-transform: all;
                -o-transform: all;
                -htm-transform: all;
                -webkit-transform: all;
                transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                -htm-transition: 1s;
                -webkit-transition: 1s;
  text-decoration: none !important;      }

a.forumlink:hover{
  font-size: 16px;
  letter-spacing: 3px;
  font-family: zapfino !important;
                color: #FF0000 !important;
                text-shadow: 2px 2px 2px #000000;
                transform: all;
                -moz-transform: all;
                -o-transform: all;
                -htm-transform: all;
                -webkit-transform: all;
                transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                -htm-transition: 1s;
                -webkit-transition: 1s;
text-decoration: none !important;          }


/********Titre des Catégories**********/

.secondarytitle h2 .timg { display: none; }
.secondarytitle h2 img { display: inline!important; }


.TitreCategorie{
  font-size:60px;
  margin-top:-30px;
}

/********************Les messages***********/

.postbody
{
text-align: justify;
padding: 10px;
font-size: 13px;
line-height: 14px;
  width:550px;
}

/***Vu profil***/

.nom{
  padding-top: 10px;
  padding-bottom: 12px;
  font-size:15px;
  text-shadow: 1px 1px 0px black;
  text-transform:capitalize;
  }

.nom:hover{
  padding-top: 10px;
  padding-bottom: 12px;
  font-size:15px;
  text-shadow: 0px 0px 3px white;
  text-transform:capitalize;
}
 
.profilentour {
text-align: center;
font-size:12px;
padding-left: 8px;
  padding-right: 8px;
background-image: url(http://www.webdeez.eu/wp-content/uploads/2010/11/colourloverscom-gothic_wallpaper.jpg);
border-radius: 20px 20px 20px 20px;
border: 2px solid #000000;
  padding-bottom: 7px;
}

.fiche {
  margin-top:5px;
text-align: center;
font-size:12px;
padding-left: 6px;
  padding-right: 4px;
background-image: url(http://www.webdeez.eu/wp-content/uploads/2010/11/colourloverscom-gothic_wallpaper.jpg);
border-radius: 20px 20px 20px 20px;
border: 2px solid #000000;
}

.infos_profil{
  display: none;
  text-align: left;
}

/*******Description dans les description******/

.allmeo{
  font-size: 12px;
  padding:7px;
border: 3px solid #27160f;
background-Color: #27160f;
border-radius: 20px 20px 20px 20px;
overflow: auto;
  height: 100px:
}

.event{
  color: #ffffff;
  margin-top: -20px;
  padding:7px;
border: 3px solid #000000;
background-image: url(http://img4.hostingpics.net/pics/731571000000C34A05C06646AC5701188.png);
border-radius: 20px 20px 20px 20px;

}

/***Dernier messages des cathérogie******/

.tournedernier{
  margin-left: -20px;
  font-size: 13px;
  width: 110px;
  height:120px; 
  padding:7px;
border: 3px solid #27160f;
background-Color: #27160f;
border-radius: 20px 20px 50px 20px;
    transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

.tournedernier:hover{
  font-size: 13px;
  width: 110px;
  height:120px; 
  padding:7px;
border: 3px solid #27160f;
background-Color: #27160f;
border-radius: 20px 20px 50px 20px;
    transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
}

/*****Image des forum********/

.tourneimage{
    border: 2px solid grey;
  border-left: 2px solid #c9c9c9;
  border-right: 2px solid #c9c9c9;
  background-Color: #612c2c;
  -webkit-border-radius: 20px;
  border-radius: 10px 10px 10px 10px;
    transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
  }

.tourneimage:hover{
    border: 2px solid grey;
  border-left: 2px solid #c9c9c9;
  border-right: 2px solid #c9c9c9;
  background-Color: #292929;
  -webkit-border-radius: 20px;
  border-radius: 10px 10px 10px 10px;
    transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
  }   

/*****Legend*******/

.tourneD{
    border: 2px solid grey;
  border-left: 2px solid #c9c9c9;
  border-right: 2px solid #c9c9c9;
  background-Color: #292929;
  -webkit-border-radius: 20px;
  border-radius: 10px 10px 10px 10px;
    transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
  }   


 
a
{
outline: none;
}
 
a:link
{
text-decoration: none !important;
}
 
a:hover
{
text-decoration: underline overline !important;
}
 
.bodylinewidth
{
width: 600px;
}
 
#i_logo
{
margin-top: -10px;
}
 
 
 /*************Entre Catégorie et contour du forum*******/

#page-body
{
background-image: url();
-moz-border-radius: 20px;
border-radius: 20px;
  border-left: 0px double #000000;
  border-right: 0px double #000000;
padding-top: 20px;
margin-left: 8px;
  margin-right: 8px;
margin-bottom: 50px;
}
 
/****************Les catégories************/


 
table
{
max-width: 680px;
margin: auto;
}
 
.row1, .row2, .row3, .row3Right
{
-moz-border-radius: 5px;
border-radius: 5px;
padding4px;
border: none !important;
}
 
.thHead
{
border: none !important;
}
 
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
 
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
border-top: 1px solid #73a2c3 !important;
}
 
.catLeft, .catRight
{
border: none! important;
}
 
th
{
color: grey;
font-variant: small-caps;
letter-spacing: 2px;
text-shadow: 1px 1px 2px #000000;
}
 
.catHead
{
border: none !important;
}
 
.catBottom
{
border: none !important;
}
 
.cattitle
{
margin-left: 20px;
font-variant: small-caps;
}
 
.code
{
  border-radius: 7px;
-moz-border-radius: 8px;
padding: 5px;
border: 2px inset grey;
padding: 5px;
background-color: #919191;
color: black;
}
 
.quote
{
border-radius: 8px;
-moz-border-radius: 8px;
padding: 5px;
background-color: #d9d9d9;
-moz-box-shadow: 3px 3px 3px black;
box-shadow: 3px 3px 3px black;
color: #4d4d4d;
}
 
.spoiler_closed
{
background-color: #d3e4ec;
border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #8dbcdd;
}
 
.spoiler_content,.spoiler_closed
{
-moz-border-radius: 10px 0px 10px 0px;
    -webkit-border-radius: 10px 0px 10px 0px;
    border-radius: 20px 0px 30px 0px;
  color: black;
background-color: grey;
  border: 1px solid white;
}
 
 
 
 
 
 
#page-footer
{
background-image: url();
background-repeat: no-repeat;
background-position: top center;
width: 700px;
height: 120px;
margin-bottom: -18px;
}
 
#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}





.spoiler_content,.spoiler_closed
{
-moz-border-radius: 10px 0px 10px 0px;
    -webkit-border-radius: 10px 0px 10px 0px;
    border-radius: 10px 0px 10px 0px;
  color: black;
  background-color: grey;
  border: 1px solid white;
}




 
.infobulle{
position: relative;
border-radius: 20px;
z-index: 0;}
 
.infobulle:hover{
background-color: transparent;
border-radius: 20px;
z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #69564e;
bborder-radius: 20px;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
 
.infobulle span img{
border: 2px;
border-radius: 20px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 140px;
left: -20px;
width: x px ;
color:#ffffff;
border-radius: 20px;
border: 2px solid #ffffFF;}




...


a img {
opacity: 0.8;
}

a:hover img {
opacity: 1.0;
}



#chatbox_header .cattitle strong { display: none;
height:950px;}
#chatbox_header .cattitle:before { content: "L'antre des âmes"; }
body.chatbox {
background-image: url('http://i41.servimg.com/u/f41/14/21/43/68/textuu10.jpg');
}
body.chatbox {
    background-color: #ffffff;
}

body.chatbox {
background-image: url("http://i11.servimg.com/u/f11/16/88/30/97/textuu12.jpg");
  background-color: #ffffff;
  color: #000000;
background-repeat: repeat; /*pour image de fond qui se repete*/
-webkit-border-radius: 20px; /*pour les arrondis*/
-moz-border-radius: 20px; /*pour les arrondis*/
border-radius: 20px; /*pour les arrondis*/
}

#chatbox .chatbox_row_1,#chatbox .chatbox_row_2{
background-color: transparent;
}

/************ QUI EST EN LIGNE******************/

#slidepanno {
display: block;
overflow: hidden;
width: 194px;
height: 270px;
position:absolute;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
-htm-transition: width 1s linear;
transition: width 1s linear;
}


#slidepanno:hover {
width: 660px;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
-htm-transition: width 1s linear;
transition: width 1s linear;
z-index: 4;
 position:absolute;
}

body
{
background-position: top, center;
  float:center;
  display:inline;
background-repeat: repeat-y;
}

body, td.bodyline{margin-top: 0px;padding-top: 0px;}

a.mainmenu:link, a.mainmenu:visited{
margin-right : -5px;
margin-left: -5px;
color: #aaa19d;
size: 10px;
text-shadow: 1px 1px 1px #000000;}

J'ai aussi un code J'avaScript récent, au cas où il pourrait avoir un rapport avec le problème, le voici ->
Code:
jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; top: 50px; left: -5px; z-index:10000;"><tr><td><div id="Concour" scrolling="no" style="width: 160px; height: 200px; display: none; " marginwidth="0" marginheight="0" frameborder="0">

<center><iframe src="http://poorsoul.forumactif.fr/h3-concour" style="height: 220px; width: 180px; background:transparent;" frameborder="no"; scrolling="no"></iframe></center>

</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'Concour\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );

Merci beaucoup de prendre le temps pour mon problème. ^^
FireStone

FireStone
Nouveau membre

Messages : 13
Inscrit(e) le : 06/02/2012

http://poorsoul.forumactif.fr/
FireStone a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum décalé vers la droite sur Chrome

Message par Scipion Lun 11 Fév 2013 - 17:13

Bonsoir

En faisant des tests avec vos codes CSS, sous le navigateur Chrome, j'ai remarqué que le décalage vers la droite disparaît et le forum reprend une position normale lorsque j'enlève un petit code positionné dans la partie 'Catégories'.

Ce code est le suivant :

Code:
table
{
max-width: 680px;
margin: auto;
}
Donc, à votre tour, retirez-le et voyez ce que cela donne avec d'autres navigateurs notamment.

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8654
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Forum décalé vers la droite sur Chrome

Message par FireStone Lun 11 Fév 2013 - 17:55

Ça fonctionne ! *o*

Merci beaucoup ! =D
FireStone

FireStone
Nouveau membre

Messages : 13
Inscrit(e) le : 06/02/2012

http://poorsoul.forumactif.fr/
FireStone 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