Mon forum est penché

[LetPet]

Bonjour,
Désolé si je ne me suis pas présenté, sinon je le ferais ^^
Je viens vous exposer mon problème en espèrant qu'il soit dans la bonne catégorie :/ .
Alors voilà:
J'avais crée un thème pour mon forum dans "Thème temporaire" et j'ai voulu l'installer provisoirement pour voir le rendu. Ensuite, j'ai remis l'ancien thème qui était un peu différent mais là n'est pas le problème.
J'ai envoyé un MP à ma co-administratrice pour lui dire ce qu'elle pensait du header et elle m'a dit qu'elle voyait le forum penché. je lui ai demandé de me faire un screen et voici ce qu'elle voit:

Spoiler:

Tendis que moi j'ai ça:

Spoiler:

Elle utilise Google Chrome et moi Internet Explorer .
Je ne comprend pas pourquoi ça fait ça?
L'adresse de mon forum: (j'enlève si c'est interdit) http://lesmangastoutunart.forumgratuit.org/
Merci d'avoir lu.
Cordialement, LetPet

[Artdrock]

Bonjour,
Je vois ton forum moi aussi penché et j'ai aussi Chrome
La souris 'molette haut bas' fait bouger l'image en diagonale !

[sandra b]

Je crois pas a mes yeux , je viens de voir sur explorer 9 et google crhome et je vois votre forum bien penché , j'espere que ça va se arranger pour vous LetPet , vraiment , c'est bizarre ça .

[nickylarson]

Bonsoir

Sur tablette toshiba at100 avec le navigateur d'origine il est bien penche bisard

Drôle

Bonne soirée

[Manumanu]

Hilarant en tout cas.

Bref, sur .bodyline il y a ceci :

Code:

.bodyline {
-webkit-transform: rotate(340deg);
background: url('http://img15.hostingpics.net/pics/540361pattern.png'\');
transform: rotate(340deg);
}

Pas de mystère. Vous lui dites de faire une rotation de 340degrés, il le fait. Enfin, vous le dites à safari et Chrome via -webkit-, et à IE10 qui est le seul à prendre en compte la propriété finale "transform" sans préfixe. Donc Firefox et IE9 voient la version "normale".

enlevez les deux propriétés transform, ne laissez que background.

[LetPet]

Merci les gens

C'est bizarre, moi je voici ceci:

Code:

  .bodyline {
background : url(\'http://img15.hostingpics.net/pics/540361pattern.png\');
}
\');

[Manumanu]

Dans la zone css ?

[AenigmA]

Bonsoir,
Manu a totalement raison, il y a bien ces 3 lignes

Pas mal l'astuce pour le 1er avril en mettant 180° hihi

[FANCH 56]

Hilarant en tout cas.

Bref, sur .bodyline il y a ceci :

Code:

.bodyline {
-webkit-transform: rotate(340deg);
background: url('http://img15.hostingpics.net/pics/540361pattern.png'\');
transform: rotate(340deg);
}

Pas de mystère. Vous lui dites de faire une rotation de 340degrés, il le fait. Enfin, vous le dites à safari et Chrome via -webkit-, et à IE10 qui est le seul à prendre en compte la propriété finale "transform" sans préfixe. Donc Firefox et IE9 voient la version "normale".

enlevez les deux propriétés transform, ne laissez que background.

Sous FF, je vois également la version penchée.

[sandra b]

Toujours penché votre forum ! j’espère vraiment que ça se arrange pour vous .

[Ziel74]

Bizarre en effet ! Bon courage pour trouver le problème !

[LetPet]

Oui, j'ai bien regardé dans le CSS ^^
Quelqu'un peut pas modifier mon CSS T_T Je ne le vois pas moi D:
Désolé du dérangement :/

[Manumanu]

Copie-colle le entièrement ici, je te le modifie (et corrige si besoin), comme ça tu auras juste à le copier-coller à nouveau.

Sous FF, je vois également la version penchée.

Oui, Firefox a publié la version 16 tout récemment, et ils prennent en charge la propriété finale transform, ce qui porte au nombre de trois le nombre de navigateur la supportant : IE10, Firefox 16 et Opera 12.1. Plus qu'à attendre Chrome...

[LetPet]

Je te remercie énormément Manumanu pour l'aide que tu m'apporte. Ca me fait vraiment plaisir de savoir qu'il y est quelqu'un qui veuille bien m'aider (:

Attention c'est long:

[AenigmA]

Bonjour, Manu te dit de faire cela

Efface ceci

Code:

.bodyline {
background : url(\'http://img15.hostingpics.net/pics/540361pattern.png\');
}
\');
}

Enregistre, puis remets ceci à la fin

Code:

.bodyline {
background : url(\'http://img15.hostingpics.net/pics/540361pattern.png\');
}

[Manumanu]

Ouhlala...

Effectivement, les lignes que je t'ai demandé de checher n'y sont pas... Et pour cause, il y a tellement de problèmes dans ce CSS que c'est la première fois que je vois les navigateur buguer au point d'attribuer "proprement" des propriétés destinés à d'autres sélecteurs. La moitié des propriétés sont déclarées deux fois voire trois fois, pour les mêmes sélecteurs ; et bien d'autres choses.

Voilà le code, arrangé (il prend beaucoup moins de place !) :

Code:

/* PAGE D\'ACCUEIL */
.forumline {
border: 1px solid black;
}

a {
opacity: 1;
color: #ffff99;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
text-decoration: none !important;
}

a: link,a: active,a: visited {
color: #ffffff;
text-decoration: none;
}

a: hover {
opacity: 1;
color: #5f6c69;
text-decoration: none !important;
text-shadow: 0 0 3px black;
}

a: hover {
opacity: 1;
color: #5f6c69;
text-decoration: none !important;
text-shadow: 0 0 3px black;
}

/* ITALIQUE GRAS SOULIGNEMENT */
i: hover {
color: white;
}

u {
text-decoration: none;
border-bottom: 1px solid black;
border-top: 1px solid black;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}

/* TITRE FORUM */
.forumlink {
width: 500px;
height: 20px;
font-variant: small-caps;
border: 1px solid black;
font-weight: normal;
font-family: Georgia;
text-align: center;
font-size: 16px;
border-radius: 0 0 5px 5px;
background: #ccffff;
box-shadow: 0 0 5px black;
color: #ccffff;
position: relative;
}

/* QEEL */
.fondqeel {
background: url("http: https://i.servimg.com/u/f45/16/15/17/76/font10.png");
width: 700px;
border-radius: 20px;
margin-left: 30px;
}

.imgqeel {
border-radius: 20px 20px 0 0;
}

.titreqeel {
width: 240px;
height: 20px;
font-variant: small-caps;
border: 1px solid black;
font-weight: normal;
font-family: Georgia;
text-align: center;
font-size: 16px;
border-radius: 0 0 5px 5px;
background: #00d8ff;
box-shadow: 0 0 5px black;
color: #fff;
position: relative;
}

.boxqeel {
width: 230px;
height: 200px;
font-family: Georgia;
font-size: 12px;
font-weight: normal;
border: 1px solid black;
background-color: #00d8ff;
text-align: justify;
margin-left: 5px;
margin-top: -10px;
padding-top: 15px;
overflow: auto;
}

.titreqeelbas {
width: 240px;
height: 20px;
border: 1px solid black;
font-weight: normal;
font-family: Georgia;
text-align: center;
font-size: 16px;
border-radius: 0 0 5px 5px;
background: #00d8ff;
box-shadow: 0 0 5px black;
color: #fff;
position: relative;
}

.boxqeelbas {
width: 230px;
height: 150px;
font-family: Georgia;
font-size: 12px;
font-weight: normal;
border: 1px solid black;
background-color: #00d8ff;
text-align: justify;
margin-left: 5px;
margin-top: -10px;
padding-top: 15px;
overflow: auto;
}

.a {
font-variant: small-caps;
}

.onglet {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
width: 110px;
text-align: center;
border-radius: 10px 10px -40px -40px;
padding: 5px;
}

.onglet_0 {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
text-align: center;
border-radius: 10px 10px -40px -40px;
padding: 5px;
}

.onglet_1 {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
text-align: center;
border-radius: 10px 10px -40px -40px;
padding: 5px;
width: 110px;
}

.contenu_onglet {
width: 110px;
background-color: #FF9F9F;
width: 550px;
border-radius: 10px 10px -40px -40px;
margin-top: -1px;
padding: 5px;
display: none;
}

ul {
margin-top: 0;
margin-bottom: 0;
margin-left: -10px;
}

h1 {
margin: 0;
padding: 0;
}

.tableau_le {
background-color: #0000;
border-radius: 50px;
border-bottom: 1px dotted #000d8ff;
border-top: 1px dotted #00d8ff;
}

.image_staff,.image_partenaire,.image_bienvenue,.image_concours {
border-bottom: 1px dotted #00d8ff;
}

.partenaire {
overflow: auto;
}

.image {
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-o-transition-duration: 2s;
-o-transition-timing-function: linear;
transition-duration: 2s;
transition-timing-function: linear;
}

.image: hover {
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-o-transform: rotate(340deg);
-ms-transform: rotate(340deg);
transform: rotate(340deg);
}

.presentation_fora {
font-size: 12px;
}

/* LIEN */
#i_logo {
margin: -10px -10px -48px;
}
.code, .quote, .spoiler_content, .spoiler_closed {
display: block;
font-family: Times New Roman;
font-size: 12px;
color: #000000;
line-height: 125%;
border-width: 5px;
font-variant: small-caps;
-webkit-border-image: url("http: https://i.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
-moz-border-image: url("http: https://i.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
-o-border-image: url("http: https://i.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
border-image: url("http: https://i.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
border-radius: 5px 5px 5px 5px;
background: #fffddd;
box-shadow: 0 0 5px black;
}
.titres {
text-transform: uppercase;
text-shadow: 0 2px 3px black;
color: white;
text-align: center;
font-size: 20px;
border-bottom-style: double;
margin-bottom: 3px;
margin-left: 25px;
margin-right: 25px;
}

.fond {
padding-top: 3px;
padding-bottom: 3px;
background: #00ffff;
-moz-border-radius: 20px;
border: 2px white solid;
width: 500px;
}

.textes {
background: #00ffff;
border-top: 2px dashed white;
border-bottom: 2px dashed white;
width: 450px;
text-align: justify;
line-height: 10px;
font-variant: small-caps;
padding-bottom: 3px;
font-variant: small-caps;
padding-top: 3px;
margin-left: 25px;
margin-right: 25px;
}

.bodyline {
background: url("http: https://2img.net/r/hpimg15/pics/540361pattern.png");
}

[LetPet]

Merci infiniment Manumanu!
Je n'ai fais qu'une partie de CSS seulement ^^
Est-ce que le forum est toujours penché?
Par contre on ne voit plus mon

Code:

.bodyline {
background: url("http: https://2img.net/r/hpimg15/pics/540361pattern.png");
}

D:

[Manumanu]

Non, il n'est plus penché. Par contre, l'image est toujours dans le CSS, regarde la dernière ligne, je la vois moi. Sur quel navigateur est-ce que tu ne la vois plus ?

[sandra b]

Coucou LetPet , je viens de voir sur google chrome et explorer 9 et du mon côté votre forum est nikel , même si on a des soucis de connections votre forum marche pour moi !

[LetPet]

Merci
Elle n'aparaît pas sur mon forum D:

[Manumanu]

Tu peux faire un screen ?

[LetPet]

Voilà

Spoiler:

[AenigmA]

Mets ceci à la place

.bodyline {
background: url(http: https://2img.net/r/hpimg15/pics/540361pattern.png);
}

[Manumanu]

Ha, j'ai fait une petite erreur, remplace tout par ça :

Code:

/* PAGE D\'ACCUEIL */
.forumline {
border: 1px solid black;
}

a {
opacity: 1;
color: #ffff99;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
text-decoration: none !important;
}

a: link,a: active,a: visited {
color: #ffffff;
text-decoration: none;
}

a: hover {
opacity: 1;
color: #5f6c69;
text-decoration: none !important;
text-shadow: 0 0 3px black;
}

a: hover {
opacity: 1;
color: #5f6c69;
text-decoration: none !important;
text-shadow: 0 0 3px black;
}

/* ITALIQUE GRAS SOULIGNEMENT */
i: hover {
color: white;
}

u {
text-decoration: none;
border-bottom: 1px solid black;
border-top: 1px solid black;
box-shadow: 0 0 5px rgba(0,0,0,.5);
}

/* TITRE FORUM */
.forumlink {
width: 500px;
height: 20px;
font-variant: small-caps;
border: 1px solid black;
font-weight: normal;
font-family: Georgia;
text-align: center;
font-size: 16px;
border-radius: 0 0 5px 5px;
background: #ccffff;
box-shadow: 0 0 5px black;
color: #ccffff;
position: relative;
}

/* QEEL */
.fondqeel {
background: url("http://i45.servimg.com/u/f45/16/15/17/76/font10.png");
width: 700px;
border-radius: 20px;
margin-left: 30px;
}

.imgqeel {
border-radius: 20px 20px 0 0;
}

.titreqeel {
width: 240px;
height: 20px;
font-variant: small-caps;
border: 1px solid black;
font-weight: normal;
font-family: Georgia;
text-align: center;
font-size: 16px;
border-radius: 0 0 5px 5px;
background: #00d8ff;
box-shadow: 0 0 5px black;
color: #fff;
position: relative;
}

.boxqeel {
width: 230px;
height: 200px;
font-family: Georgia;
font-size: 12px;
font-weight: normal;
border: 1px solid black;
background-color: #00d8ff;
text-align: justify;
margin-left: 5px;
margin-top: -10px;
padding-top: 15px;
overflow: auto;
}

.titreqeelbas {
width: 240px;
height: 20px;
border: 1px solid black;
font-weight: normal;
font-family: Georgia;
text-align: center;
font-size: 16px;
border-radius: 0 0 5px 5px;
background: #00d8ff;
box-shadow: 0 0 5px black;
color: #fff;
position: relative;
}

.boxqeelbas {
width: 230px;
height: 150px;
font-family: Georgia;
font-size: 12px;
font-weight: normal;
border: 1px solid black;
background-color: #00d8ff;
text-align: justify;
margin-left: 5px;
margin-top: -10px;
padding-top: 15px;
overflow: auto;
}

.a {
font-variant: small-caps;
}

.onglet {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
width: 110px;
text-align: center;
border-radius: 10px 10px -40px -40px;
padding: 5px;
}

.onglet_0 {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
text-align: center;
border-radius: 10px 10px -40px -40px;
padding: 5px;
}

.onglet_1 {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
padding: 3px;
text-align: center;
border-radius: 10px 10px -40px -40px;
padding: 5px;
width: 110px;
}

.contenu_onglet {
width: 110px;
background-color: #FF9F9F;
width: 550px;
border-radius: 10px 10px -40px -40px;
margin-top: -1px;
padding: 5px;
display: none;
}

ul {
margin-top: 0;
margin-bottom: 0;
margin-left: -10px;
}

h1 {
margin: 0;
padding: 0;
}

.tableau_le {
background-color: #0000;
border-radius: 50px;
border-bottom: 1px dotted #000d8ff;
border-top: 1px dotted #00d8ff;
}

.image_staff,.image_partenaire,.image_bienvenue,.image_concours {
border-bottom: 1px dotted #00d8ff;
}

.partenaire {
overflow: auto;
}

.image {
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-o-transition-duration: 2s;
-o-transition-timing-function: linear;
transition-duration: 2s;
transition-timing-function: linear;
}

.image: hover {
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-o-transform: rotate(340deg);
-ms-transform: rotate(340deg);
transform: rotate(340deg);
}

.presentation_fora {
font-size: 12px;
}

/* LIEN */
#i_logo {
margin: -10px -10px -48px;
}
.code, .quote, .spoiler_content, .spoiler_closed {
display: block;
font-family: Times New Roman;
font-size: 12px;
color: #000000;
line-height: 125%;
border-width: 5px;
font-variant: small-caps;
-webkit-border-image: url("http://i46.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
-moz-border-image: url("http://i46.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
-o-border-image: url("http://i46.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
border-image: url("http://i46.servimg.com/u/f46/17/26/74/77/fond10.png") 5 repeat;
border-radius: 5px;
background: #fffddd;
box-shadow: 0 0 5px black;
}
.titres {
text-transform: uppercase;
text-shadow: 0 2px 3px black;
color: white;
text-align: center;
font-size: 20px;
border-bottom-style: double;
margin-bottom: 3px;
margin-left: 25px;
margin-right: 25px;
}

.fond {
padding-top: 3px;
padding-bottom: 3px;
background: #00ffff;
border-radius: 20px;
border: 2px white solid;
width: 500px;
}

.textes {
background: #00ffff;
border-top: 2px dashed white;
border-bottom: 2px dashed white;
width: 450px;
text-align: justify;
line-height: 10px;
font-variant: small-caps;
padding-bottom: 3px;
font-variant: small-caps;
padding-top: 3px;
margin-left: 25px;
margin-right: 25px;
}

.bodyline {
background: url("http://img15.hostingpics.net/pics/540361pattern.png");
}

[LetPet]

Merci merci merci!
Je ne sais vraiment pas quoi faire pour te remercier Manumanu!

[Manumanu]

Tout simplement mettre ton topic en résolu et marquer les posts qui ont été utiles, au cas où d'autres auraient un problème similaire (même si c'est plutôt "précis" comme problème). Et remercie également Aenigma qui a participé.

[LetPet]

D'accord.
Merci tous le monde de m'avoir gentillement proposé votre aide