Problème avec le Panneau d'affichage

[Jézebel L.]

Bonjour/Bonsoir

J'aurais besoin de vous, svp ^^
Voilà, je viens d'installer une bannière aléatoire sur le forum, en suivant ceci :

https://forum.forumactif.com/t301577-creer-une-banniere-aleatoire-ou-defilante-pour-son-forum

Mais voilà, dès qu'elle fut mise, ma PA est devenue grande !!!
j'ai eu beau réduire les bannières, rien...
j'aimerais que ma Pa soit moins "imposante", c'est pas très joli -_-

aidez moi svp

Lien du forum : http://monde-oublie.forumactif.com/


Css de la pa :

Code:


/*page d'accueil*/               
    *{
  margin:150; /* Annule toutes les marges par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
  padding:20; /* Annule tous les remplissages par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
}
a{
  outline:0; /* Supprime la bordure à l'activation du lien */
}
#menu{
  width:150px;
  margin:20px auto 0 auto; /* Sert à centrer le menu dans la page pour l'exemple, valeurs à modifier selon votre gré ou à supprimer */
}
.menu{
  height:20px;
  line-height:20px;
  width:150px;
  background: #456B35;
  color: #19AD16;
  text-align:center;
}
.menu a{
  display:block;
  width:40%;
  height:40%;
}

.menu a:link, .menu a:visited, .menu a:hover{
  color:#19AD16;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold; /* Met le texte du menu en gras, à supprimer si vous n'en voulez pas */
  text-decoration:none; /* Supprime le soulignement du lien, pour le rétablir passez la valeur à underline */
  background: #456B35;
}
.menu a:hover{
  background: #19AD16;
  color:#FFFFFF;
}
#desc{
  background: #19AD16;
  height:50px;
  font-family:georgia,sans-serif;
  font-size:10px;
  color:#FFFFFF;
  padding:2px;
  border:1px solid #456B35;
}
.fond {
background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
width:auto;
height:auto;
border:5px solid #456B35;
border-radius: 20px 20px 20px 20px;
padding:20px;}

.phrasepa {
opacity:0.8;
font-family:georgia;
font-size:30px;
color:#456B35;
text-align:center;
text-shadow:1px 1px 2px black; }

.phrasepa2 {
opacity:0.8;
font-family:georgia;
font-size:30px;
color:#456B35;
text-align:center;
text-shadow:1px 1px 2px black;}

.phrasepa3 {
opacity:0.8;
font-family:georgia;
font-size:25px;
color:#556627;
text-align:center;}

.blocpa {
background-color:#B0CC99;
padding:8px;
box-shadow:0px 0px 10px #19AD16;
margin:10px;
margin-left:-10px;}

.contexte {
  position: relative;
  overflow:auto;
  height: 225px;
  width: 225px;
padding:8px;
  background: #456B35;
  color: white;
  margin-top: 2px;
box-shadow:1px 1px 10px #19AD16;
text-align:justify;
 

}

.contexte:hover {
overflow-x: hidden;
overflow-y: auto;
width:300px;
height:225px;}

.contexte img{
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 3s;
  -moz-transition: -moz-transform 4s;
  -o-transition: -o-transform 4s;
  -webkit-transition: -webkit-transform 4s; }


.contexte:hover img{
  transform: translateX(+338px);
  -moz-transform: translateX(+338px);
  -o-transform: translateX(+338px);
  -webkit-transform: translateX(+338px);
}

.toppart img {
box-shadow:0px 0px 10px #19AD16;
opacity:0.5;}

.toppart img:hover {
box-shadow:0px 0px 10px #19AD16;
opacity:1;

}

.wanted {
position: relative;
width:80px;
height:90px;
opacity:0.8;
font-family:georgia;
font-size:15px;
color:#6FC4C1;
text-align:center;
 background: #456B35;}

.wanted img {
position:absolute;
left: 0;
  top: 0;
  opacity:1;
 -moz-transition: all 2s;
-webkit-transition: all 2s;}

.wanted:hover img {
opacity:0;
}

div.staff {
  position: relative;
  float: left;
}

div.staff span {
  display:  /* ceci masque l'infobulle */
}
div.staff:hover {
  background: none; /* correction d'un bug IE */
  z-index: 20; /* on définit une valeur pour l'ordre d'affichage */
}
div.staff:hover span {
height:74px;
  width: 115px;
display: inline;
position: absolute;
top: 0px;
left: 40px;
background-color: ;
color: ; #96CA2D
padding: 0px;
border-top: none ;
border-right: none ;
border-bottom: none ;
  border-radius: none ;
  z-index:20;
}

div.staff2 {
  position: relative;
  float: left;
}

div.staff2 span {
  display: /* ceci masque l'infobulle */
}
div.staff2:hover {
  background: none; /* correction d'un bug IE */
  z-index: 40; /* on définit une valeur pour l'ordre d'affichage */
}
div.staff2:hover span {
height:74px;
  width: 115px;
display: inline;
position: absolute;
top: 0px;
left: 40px;
background-color: ;
color: ; #96CA2D
padding: 0px;
border-top: 0px solid ;
border-right: 0px solid ;
border-bottom: 0px solid ;
  border-radius: 0px 0px 0px 0px;
  z-index:40;
}


.staffie {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: relative;
  z-index:30;
  }

.staffie:hover {
  position: relative;
  z-index:30;
    transform: rotate(360deg);
      transition:  rotate(360deg);
      -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition:  rotate(360deg);
    -ms-transition:  rotate(360deg);
    -khtml-transition:  rotate(360deg);
  }

.staffie2 {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: relative;
  z-index:50;
  }

.staffie2:hover {
  position: relative;
  z-index:50;
    transform: rotate(360deg);
      transition:  rotate(360deg);
      -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition:  rotate(360deg);
    -ms-transition:  rotate(360deg);
    -khtml-transition:  rotate(360deg);
  }

et son javascripts :

Code:

function afficheDesc(txt){
  document.getElementById("desc").innerHTML = txt;
}

function cacheDesc(){
  document.getElementById("desc").innerHTML = "";
}

Et une dernière chose : la transparence de mon forum est parti dès que j'ai mis la bannière aléatoire
C'était ça son code css :

Code:

/* -- Opacite -- */
             
                .bodyline
                {
                opacity :0.8 ;
                }

.bodyline
{
opacity :0.8;
    -moz-opacity :0.8 ;
    -ms-filter: "alpha(opacity=70)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */
  border-left: px solid ;
  border-right: px solid ;}


Merci de m'avoir lu

[Jézebel L.]

Up ! svp

[Dark-Imperator]

Je ne vois pas le problème. Enfin ta bannière est naturellement très grande et donc ton forum (du moins sa largeur) également. C'est tout à fait normal.

Mais peut être pas... Aurais tu un code HTML sur lequel je puisse jeter un coup d'oeil ? Et qu'est ce que tu veux réduire précisément ? Largeur ? Hauteur ?

EDIT : qu'entends tu par transparence du forum ?

Edit 2 :

Essayes ce code CSS pour voir. J'ai retouché un peu la taille sur en largeur et hauteur. Si ça marche dis le moi et si tu vois +/- de redimensionnement dis le moi :

Code:

1.   
2.   /*page d'accueil*/             
3.       *{
4.     margin:100; /* Annule toutes les marges par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
5.     padding:20; /* Annule tous les remplissages par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
6.   }
7.   a{
8.     outline:0; /* Supprime la bordure à l'activation du lien */
9.   }
10.   #menu{
11.     width:100px;
12.     margin:20px auto 0 auto; /* Sert à centrer le menu dans la page pour l'exemple, valeurs à modifier selon votre gré ou à supprimer */
13.   }
14.   .menu{
15.     height:20px;
16.     line-height:20px;
17.     width:100px;
18.     background: #456B35;
19.     color: #19AD16;
20.     text-align:center;
21.   }
22.   .menu a{
23.     display:block;
24.     width:40%;
25.     height:40%;
26.   }
27.   
28.   .menu a:link, .menu a:visited, .menu a:hover{
29.     color:#19AD16;
30.     font-family:arial,sans-serif;
31.     font-size:12px;
32.     font-weight:bold; /* Met le texte du menu en gras, à supprimer si vous n'en voulez pas */
33.     text-decoration:none; /* Supprime le soulignement du lien, pour le rétablir passez la valeur à underline */
34.     background: #456B35;
35.   }
36.   .menu a:hover{
37.     background: #19AD16;
38.     color:#FFFFFF;
39.   }
40.   #desc{
41.     background: #19AD16;
42.     height:50px;
43.     font-family:georgia,sans-serif;
44.     font-size:10px;
45.     color:#FFFFFF;
46.     padding:2px;
47.     border:1px solid #456B35;
48.   }
49.   .fond {
50.   background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
51.   width:auto;
52.   height:auto;
53.   border:5px solid #456B35;
54.   border-radius: 20px 20px 20px 20px;
55.   padding:20px;}
56.   
57.   .phrasepa {
58.   opacity:0.8;
59.   font-family:georgia;
60.   font-size:30px;
61.   color:#456B35;
62.   text-align:center;
63.   text-shadow:1px 1px 2px black; }
64.   
65.   .phrasepa2 {
66.   opacity:0.8;
67.   font-family:georgia;
68.   font-size:30px;
69.   color:#456B35;
70.   text-align:center;
71.   text-shadow:1px 1px 2px black;}
72.   
73.   .phrasepa3 {
74.   opacity:0.8;
75.   font-family:georgia;
76.   font-size:25px;
77.   color:#556627;
78.   text-align:center;}
79.   
80.   .blocpa {
81.   background-color:#B0CC99;
82.   padding:8px;
83.   box-shadow:0px 0px 10px #19AD16;
84.   margin:10px;
85.   margin-left:-10px;}
86.   
87.   .contexte {
88.     position: relative;
89.     overflow:auto;
90.     height: 225px;
91.     width: 225px;
92.   padding:8px;
93.     background: #456B35;
94.     color: white;
95.     margin-top: 2px;
96.   box-shadow:1px 1px 10px #19AD16;
97.   text-align:justify;
98.   
99.   
100.   }
101.   
102.   .contexte:hover {
103.   overflow-x: hidden;
104.   overflow-y: auto;
105.   width:300px;
106.   height:225px;}
107.   
108.   .contexte img{
109.     position: absolute;
110.     left: 0;
111.     top: 0;
112.     transition: transform 3s;
113.     -moz-transition: -moz-transform 4s;
114.     -o-transition: -o-transform 4s;
115.     -webkit-transition: -webkit-transform 4s; }
116.   
117.   
118.   .contexte:hover img{
119.     transform: translateX(+338px);
120.     -moz-transform: translateX(+338px);
121.     -o-transform: translateX(+338px);
122.     -webkit-transform: translateX(+338px);
123.   }
124.   
125.   .toppart img {
126.   box-shadow:0px 0px 10px #19AD16;
127.   opacity:0.5;}
128.   
129.   .toppart img:hover {
130.   box-shadow:0px 0px 10px #19AD16;
131.   opacity:1;
132.   
133.   }
134.   
135.   .wanted {
136.   position: relative;
137.   width:80px;
138.   height:90px;
139.   opacity:0.8;
140.   font-family:georgia;
141.   font-size:15px;
142.   color:#6FC4C1;
143.   text-align:center;
144.    background: #456B35;}
145.   
146.   .wanted img {
147.   position:absolute;
148.   left: 0;
149.     top: 0;
150.     opacity:1;
151.    -moz-transition: all 2s;
152.   -webkit-transition: all 2s;}
153.   
154.   .wanted:hover img {
155.   opacity:0;
156.   }
157.   
158.   div.staff {
159.     position: relative;
160.     float: left;
161.   }
162.   
163.   div.staff span {
164.     display:  /* ceci masque l'infobulle */
165.   }
166.   div.staff:hover {
167.     background: none; /* correction d'un bug IE */
168.     z-index: 20; /* on définit une valeur pour l'ordre d'affichage */
169.   }
170.   div.staff:hover span {
171.   height:74px;
172.     width: 115px;
173.   display: inline;
174.   position: absolute;
175.   top: 0px;
176.   left: 40px;
177.   background-color: ;
178.   color: ; #96CA2D
179.   padding: 0px;
180.   border-top: none ;
181.   border-right: none ;
182.   border-bottom: none ;
183.     border-radius: none ;
184.     z-index:20;
185.   }
186.   
187.   div.staff2 {
188.     position: relative;
189.     float: left;
190.   }
191.   
192.   div.staff2 span {
193.     display: /* ceci masque l'infobulle */
194.   }
195.   div.staff2:hover {
196.     background: none; /* correction d'un bug IE */
197.     z-index: 40; /* on définit une valeur pour l'ordre d'affichage */
198.   }
199.   div.staff2:hover span {
200.   height:74px;
201.     width: 115px;
202.   display: inline;
203.   position: absolute;
204.   top: 0px;
205.   left: 40px;
206.   background-color: ;
207.   color: ; #96CA2D
208.   padding: 0px;
209.   border-top: 0px solid ;
210.   border-right: 0px solid ;
211.   border-bottom: 0px solid ;
212.     border-radius: 0px 0px 0px 0px;
213.     z-index:40;
214.   }
215.   
216.   
217.   .staffie {
218.     -webkit-transition: 1s;
219.     -moz-transition: 1s;
220.     -o-transition: 1s;
221.     transition: 1s;
222.     position: relative;
223.     z-index:30;
224.     }
225.   
226.   .staffie:hover {
227.     position: relative;
228.     z-index:30;
229.       transform: rotate(360deg);
230.         transition:  rotate(360deg);
231.         -webkit-transform: rotate(360deg);
232.       -moz-transform: rotate(360deg);
233.       -o-transition:  rotate(360deg);
234.       -ms-transition:  rotate(360deg);
235.       -khtml-transition:  rotate(360deg);
236.     }
237.   
238.   .staffie2 {
239.     -webkit-transition: 1s;
240.     -moz-transition: 1s;
241.     -o-transition: 1s;
242.     transition: 1s;
243.     position: relative;
244.     z-index:50;
245.     }
246.   
247.   .staffie2:hover {
248.     position: relative;
249.     z-index:50;
250.       transform: rotate(360deg);
251.         transition:  rotate(360deg);
252.         -webkit-transform: rotate(360deg);
253.       -moz-transform: rotate(360deg);
254.       -o-transition:  rotate(360deg);
255.       -ms-transition:  rotate(360deg);
256.       -khtml-transition:  rotate(360deg);
257.     }


Pas gronder si ça marche pas je suis un codeur du dimanche !

[Jézebel L.]

Bonsoir ^^

Merci d'avoir répondu.
J'ai essayé ton code, mais la PA n'a pas changé de taille

Mes bannières font : 1178 x 650.

La transparence c'est que avant, la bannière était en fond, et on pouvait la voir à travers les topics et tout..
et là ça le fait plus depuis que j'ai mis les bannières aléatoires.

[Dark-Imperator]

Nom de dieu je retenterai demain. La taille c'est 650 largeur ? Dans ce cas ça va sinon à corriger
J'crois bien que les bannières aléatoires ne sont pas bannière de fond (donc bannière simple donc peut être cause agrandissement de PA) va falloir regarder les codes ^^ chose que je ferai demain (si tu veux bien attendre )

[Jézebel L.]

Pour les bannières : largeur = 1178 et hauteur = 650

Aah ok ! c'est pas en fond !
c'est donc pour ça, que la transparence et tout le système saute !
raaah ! dommage....

Ok, no prob, à demain ^^

[Dark-Imperator]

Oups j'ai confondu ! Oui donc ta bannière est super large Tu me diras vu que tu la veux en fond ça devrait le faire. Bon j'ai jeté un coup d'oeil aux codes (et cherchant à droite à gauche) voilà ce que je te proposes :

--> Enlèves toute trace du script de ta bannière aléatoire (fais en une sauvegarde sur word ou bloc note au cas où.)

--> Direction le Panneau d'administration - Affichage - Gestion des images "Avancé" et tu me supprimes ce qu'il y'a dans "Image de fond de page" (si il y'a rien c'est parfait)

--> Ensuite direction Feuille de CSS et tu ajoutes cela

Code:

.ban1 { background-image: url('lien_vers_ton_image1.jpg'); }
.ban2 { background-image: url('lien_vers_ton_image2.jpg'); }
.ban3 { background-image: url('lien_vers_ton_image3.jpg'); }

Tu changes bien les "liens_vers_ton-image" par de vrais liens ^^

--> ensuite Général - Forum - Configuration - Description du site. Tu ajoutes ça :

Code:

<script type=text/javascript> var banListe=['1','2','3']; document.write('<body class=ban' + banListe[Math.floor(Math.random()*banListe.length)] +'>'); </script>

Et enfin pour éviter que les images se répètent tu mets cela dans feuille CSS :

Code:

body {
background-repeat: no-repeat;
}

Penses bien à mettre une image transparent et petite (du genre 700*250 dans Gestion des Images pour la bannière) et réduis la taille du corps de la page à 70% et là ta PA devrait être comme neuve !

[Jézebel L.]

Bonsoir,

Alors, j'ai fait comme tu m'as dit.
La transparence est revenue !!! ô joie !

Merci ^^

Et voilà une capture d'écran, après avoir zoomer un peu afin d'avoir une vue d'ensemble sur la fameuse PA.

Spoiler:

Par contre les bannières aléatoires ne se font qu'au changement de page

[Dark-Imperator]

C'est normal non ? Les bannières aléatoire sont sensées changer à chaque actualisation ou changement de pages ^^

[Jézebel L.]

Re !

Oui, enfin, c'est la 1ère option des bannières aléatoires.
Car la seconde ici :

https://forum.forumactif.com/t301577-creer-une-banniere-aleatoire-ou-defilante-pour-son-forum

permettait qu'elles changent et cela sans changer de pages.

Mais c'est pas grave car grâce à la transparence ont peut voir les différentes bannières.

Par contre la PA, on peut rien y faire d'autre je crois...

[Dark-Imperator]

Ah oui je vois je ne savais pas que tu voulais avec défilement ^^

Ben c'est la même chose que mon post sauf que tu changes le premier code par :

Code:

var banner = new Array();
 
banner.push('adresse_image_1');
banner.push('adresse_image_2');
banner.push('adresse_image_3');
 
document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];
 
setInterval("document.getElementById('pun-logo').firstChild.src= banner[Math.floor(Math.random()*banner.length)];",3000);

[Jézebel L.]

Bonsoir,

Oui c'était bien ça ^^
Je m'excuse si je me suis mal exprimée, en tout cas merci, c'est très gentil de ta part.


Par contre je sais pas si c'est du aux nouveaux codes, mais voilà que la PA fait des sienne, enfin un menu tout du moins :



Bien entendu, j'ai essayé de rectifier son css et le généralité page accueil, rien n'y fait...ça veut pas
et les 2 derniers liens s'emmêlent les pinceaux :no

Je redonne mon css, je suis pas très douée, peut être que quelque chose m'a échappée.

Code:

/*page d'accueil*/               
    *{
  margin:150; /* Annule toutes les marges par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
  padding:20; /* Annule tous les remplissages par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
}
a{
  outline:0; /* Supprime la bordure à l'activation du lien */
}
#menu{
  width:150px;
  margin:20px auto 0 auto; /* Sert à centrer le menu dans la page pour l'exemple, valeurs à modifier selon votre gré ou à supprimer */
}
.menu{
  height:20px;
  line-height:20px;
  width:150px;
  background: #456B35;
  color: #19AD16;
  text-align:center;
}
.menu a{
  display:block;
  width:40%;
  height:40%;
}

.menu a:link, .menu a:visited, .menu a:hover{
  color:#19AD16;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold; /* Met le texte du menu en gras, à supprimer si vous n'en voulez pas */
  text-decoration:none; /* Supprime le soulignement du lien, pour le rétablir passez la valeur à underline */
  background: #456B35;
}
.menu a:hover{
  background: #19AD16;
  color:#FFFFFF;
}
#desc{
  background: #19AD16;
  height:50px;
  font-family:georgia,sans-serif;
  font-size:10px;
  color:#FFFFFF;
  padding:2px;
  border:1px solid #456B35;
}
.fond {
background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
width:auto;
height:auto;
border:5px solid #456B35;
border-radius: 20px 20px 20px 20px;
padding:20px;}

.phrasepa {
opacity:0.8;
font-family:georgia;
font-size:30px;
color:#456B35;
text-align:center;
text-shadow:1px 1px 2px black; }

.phrasepa2 {
opacity:0.8;
font-family:georgia;
font-size:30px;
color:#456B35;
text-align:center;
text-shadow:1px 1px 2px black;}

.phrasepa3 {
opacity:0.8;
font-family:georgia;
font-size:25px;
color:#556627;
text-align:center;}

.blocpa {
background-color:#B0CC99;
padding:8px;
box-shadow:0px 0px 10px #19AD16;
margin:10px;
margin-left:-10px;}

.contexte {
  position: relative;
  overflow:auto;
  height: 225px;
  width: 225px;
padding:8px;
  background: #456B35;
  color: white;
  margin-top: 2px;
box-shadow:1px 1px 10px #19AD16;
text-align:justify;
 

}

.contexte:hover {
overflow-x: hidden;
overflow-y: auto;
width:300px;
height:225px;}

.contexte img{
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 3s;
  -moz-transition: -moz-transform 4s;
  -o-transition: -o-transform 4s;
  -webkit-transition: -webkit-transform 4s; }


.contexte:hover img{
  transform: translateX(+338px);
  -moz-transform: translateX(+338px);
  -o-transform: translateX(+338px);
  -webkit-transform: translateX(+338px);
}

.toppart img {
box-shadow:0px 0px 10px #19AD16;
opacity:0.5;}

.toppart img:hover {
box-shadow:0px 0px 10px #19AD16;
opacity:1;

}

.wanted {
position: relative;
width:80px;
height:90px;
opacity:0.8;
font-family:georgia;
font-size:15px;
color:#6FC4C1;
text-align:center;
 background: #456B35;}

.wanted img {
position:absolute;
left: 0;
  top: 0;
  opacity:1;
 -moz-transition: all 2s;
-webkit-transition: all 2s;}

.wanted:hover img {
opacity:0;
}

div.staff {
  position: relative;
  float: left;
}

div.staff span {
  display:  /* ceci masque l'infobulle */
}
div.staff:hover {
  background: none; /* correction d'un bug IE */
  z-index: 20; /* on définit une valeur pour l'ordre d'affichage */
}
div.staff:hover span {
height:74px;
  width: 115px;
display: inline;
position: absolute;
top: 0px;
left: 40px;
background-color: ;
color: ; #96CA2D
padding: 0px;
border-top: none ;
border-right: none ;
border-bottom: none ;
  border-radius: none ;
  z-index:20;
}

div.staff2 {
  position: relative;
  float: left;
}

div.staff2 span {
  display: /* ceci masque l'infobulle */
}
div.staff2:hover {
  background: none; /* correction d'un bug IE */
  z-index: 40; /* on définit une valeur pour l'ordre d'affichage */
}
div.staff2:hover span {
height:74px;
  width: 115px;
display: inline;
position: absolute;
top: 0px;
left: 40px;
background-color: ;
color: ; #96CA2D
padding: 0px;
border-top: 0px solid ;
border-right: 0px solid ;
border-bottom: 0px solid ;
  border-radius: 0px 0px 0px 0px;
  z-index:40;
}


.staffie {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: relative;
  z-index:30;
  }

.staffie:hover {
  position: relative;
  z-index:30;
    transform: rotate(360deg);
      transition:  rotate(360deg);
      -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition:  rotate(360deg);
    -ms-transition:  rotate(360deg);
    -khtml-transition:  rotate(360deg);
  }

.staffie2 {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: relative;
  z-index:50;
  }

.staffie2:hover {
  position: relative;
  z-index:50;
    transform: rotate(360deg);
      transition:  rotate(360deg);
      -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition:  rotate(360deg);
    -ms-transition:  rotate(360deg);
    -khtml-transition:  rotate(360deg);
  }

Généralité page accueil :

Code:

<center><div class="fond"> <span class="phrasepa"><span class="blur"><font color="lime">Bienvenue sur NIGHT WORLD, cher {USER&amp;#8288;NAME}.</font></span></span><br/>
<img src="http://7f.img.v4.skyrock.net/9823/71709823/pics/3161169282_1_8_QylCpZMX.gif" border="0" alt="" /><div style="margin:auto;text-align:center;width:100%"><font color="orange"><span style="font-size: 12px; line-height: normal"><strong>(Forum optimisé pour Mozilla Firefox et Google Chrome. Tout autre navigateur pourrait mal afficher certaines choses et/ou ralentir le forum.)</span></font>
<br>
<font color="crimson"><span style="font-size: 11px; line-height: normal">/!\ Forum rpg Yaoi/Yuri/Jôsei. /!\ </strong> </span></font></div>

<table><tr><td><center><div class="blocpa" style="height:225px;width:180px;"><span class="phrasepa3" >Liens</span><div id="menu">
  <div class="menu" onmouseover="afficheDesc('Passage souhaité, svp. Manuel du débutant en Rpg disponible. ')" onmouseout="cacheDesc()">
      <a href=" http://monde-oublie.forumactif.com/f1-reglement-et-manuel-du-debutant-en-rpg ">Règlement</a>
  </div>
  <div class="menu" onmouseover="afficheDesc('A consulter souvent, svp')" onmouseout="cacheDesc()">
      <a href=" http://monde-oublie.forumactif.com/t1624-nouveautes-du-forum#64842">Nouveautés</a>
  </div>
  <div class="menu" onmouseover="afficheDesc('Quels clans intégrer ?')" onmouseout="cacheDesc()">
<a href="http://monde-oublie.forumactif.com/f41-explication-des-clans">Les Clans</a>
</div>
  <div class="menu" onmouseover="afficheDesc('Des persos qui n’attendent que vous !')" onmouseout="cacheDesc()">
      <a href="http://monde-oublie.forumactif.com/f53-les-personnages-predefinis">Les Prédéfinis</a>
</div>
  <div class="menu" onmouseover="afficheDesc('Quel temps fait-il ?')" onmouseout="cacheDesc()">
      <a href="http://monde-oublie.forumactif.com/t1625-meteo-du-japon-et-du-night-world">Météo</a>
</div>
    <div class="menu" onmouseover="afficheDesc('Quel temps fait-il au Japon et dans le Night World ?')" onmouseout="cacheDesc()">
      <a href=""></a>
  </div>
  <div id="desc"></div>
</div></div></center></td>


<td><div class="contexte"><p><center><b><span style="font-size: 18px; line-height: normal">CONTEXTE</span></b></center><br/><span class="blur"><span style="font-size: 14px; line-height: normal">Toi, étranger, qui effectue tes premiers pas ici, laisse moi te conter l’Histoire du monde oublié, que les humains ont nommé : le Night World.
<br>
Ici, tu croiseras toutes sortes de créatures. Des bénéfiques qui t’aideront dans tes quêtes et ton but, des maléfiques qu’il ne vaudra mieux ne pas croiser le chemin et des neutres se battant pour l’équilibre et la Paix.
<br>
Peut-être qu’en ces Terres trouveras-tu l’amour, peut-être qu’en ces Terres trouveras-tu des amis sur lesquels tu pourras compter, ou des ennemis voulant attenter à ta vie. Peut-être trouveras-tu ce que tu as toujours souhaité…
<br>
Mais auras-tu le courage de faire triompher tes idéaux et devenir plus fort ? Juste pour ta propre survie et ceux qui te sont chers…A toi de voir.
<br>
Nous somme tous maître de notre destin.
<br><div style="margin:auto;text-align:center;width:100%">Quel sera le tient ?</div></span>
<br><div style="margin:auto;text-align:center;width:100%"><a href="http://monde-oublie.forumactif.com/t13-histoire"><font color="tomato"><strong>Plus ?...</div></strong></font></a>
</span></p> </div></td>

<td><div class="blocpa" style="height:225px;width:190px;margin-left:5px;overflow:auto"><center><span class="phrasepa3" >Staff</span>
<br>
<br>
<font color="darkgreen">Abel : Admin</font>
<img src="http://i43.tinypic.com/2ce2exc.jpg" alt="abel" />
<br>
<br>
<font color="darkgreen">Jézebel : Co-admin</font>
<img src="http://i77.servimg.com/u/f77/13/41/02/96/jez10.jpg" alt="jezebel" />
<br>
<br>
<font color="darkgreen">Isant D'Havrelune : Modératrice chatbox & chef modératrice</font>
<img src="http://img15.hostingpics.net/pics/896627isg.jpg" alt="Isant D'Havrelune" />
<br>
<br>
<font color="darkgreen">Kanade : Modératrice</font>
<img src="http://i77.servimg.com/u/f77/13/41/02/96/kana10.jpg"/>
<br>
<br>
<font color="darkgreen">Taïga Uzuchiwa: Modératrice</font>
<img src="http://i77.servimg.com/u/f77/13/41/02/96/tai10.jpg" alt="taiga" />
<br>
<br>
<font color="darkgreen">Yuki Onna: Modératrice</font>
<img src="http://i41.servimg.com/u/f41/13/41/02/96/sans_225.jpg" alt="yuki" />
<br>
<br>
<font color="darkgreen">Velkan: Modérateur</font>
<img src=" http://i46.tinypic.com/1ykabb.jpg" alt="Velkan " />
<br>
<br>
<font color="darkgreen">Sachiko Lino : Modératrice</font>
<img src="http://i47.tinypic.com/2ykau01.jpg" alt="Sachiko " />
<br>
<br>
<font color="darkgreen">Riku Rokuo: Pubeur du forum sur Facebook</font>
<br>
<img src="http://i77.servimg.com/u/f77/13/41/02/96/riku10.jpg" alt="Riku" />
</div>

<br>
<br>

<tr><td><div class="toppart" style="margin-top:-20px;"><span class="phrasepa2" ><div style="margin:auto;text-align:center;width:100%">Top Partenaires</div></span><br/><table><tr><td>
<span><marquee><a href="http://www.deathnote-rpg.com/forum" class="postlink" target="_blank" rel="nofollow"><img src="http://i34.servimg.com/u/f34/11/64/49/00/logo_d11.gif" border="0" alt="" /></a>

<a href="http://les4royaumes.forumactif.org" class="postlink" target="_blank" rel="nofollow"><img src="http://i44.servimg.com/u/f44/17/84/81/84/bout10.png" border="0" alt="" /></a>

<a href="http://jonetsumangas.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://sd-2.archive-host.com/membres/images/140812315767156265/logo_j11.png" border="0" alt="" /></a>

<a href="http://airyscine.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa28.casimages.com/img/2011/08/16/110816015306580974.png" border="0" alt="" /></a>

<a href="http://blablabar.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://www.hostingpics.net/thumbs/13/00/61/mini_130061100X35BOUTON2.jpg" border="0" alt="" /></a>

<a href="http://www.bulle-shojo.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://img96.imageshack.us/img96/1320/sanstitre21p.png" border="0" alt="" /></a>

 <a href="http://maid-sama-rpg.forumactif.com/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img10.hostingpics.net/pics/825233Sans_titre_8.png" border="0" alt="" /></a><div style="margin:auto;text-align:center;width:100%">

<a href="http://bullesdencre.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow">
<img src="http://img11.hostingpics.net/pics/6938761311195368.gif" border="0" alt="" /></a>

<a href="http://graph-passion.forumsactifs.net/forum"><img src="http://i39.tinypic.com/2wovu5s.jpg" title="Graph-Passion"></a>

<a href="http://kichitown.meilleurforum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.servimg.com/u/f45/15/75/47/14/logo10.png" border="0" alt="" /></a>
<br>
<a href="http://kagawa.forumgratuit.org/" class="postlink" class="postlink" target="_blank" rel="nofollow"><img src="http://img198.imageshack.us/img198/4467/boutonkagawa.jpg" border="0" alt="" ></a>

<a href="http://reinventeladestinee.forumactif.com/" class="postlink" class="postlink" target="_blank" rel="nofollow"><img src="http://i28.servimg.com/u/f28/14/58/50/16/rld_ic11.jpg" border="0" alt="" ></a>

<a href="http://indiana-teller.allgoo.net/" class="postlink" target="_blank" rel="nofollow"><img src="http://i45.tinypic.com/1z39eo1.jpg" border="0" alt="" /></a>

<a href="http://vampire.knight.forever.un concurrent.be/index.php" target="_blank"><img src="http://media.tumblr.com/tumblr_lp3xnxUtzq1qcsita.gif" border="0" width="88" height="31" alt="VK forever"></a>

<a href="http://tokoshino-anakano.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/pics/545264TOKOprojectpart02.png" border="0" alt="" /></a>

<a href="http://kn-tamago.shojoblog.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://data0.shojoblog.com/kn-tamago/mod_article5416546_1.png?4666" border="0" alt="" /></a></marquee></span></td></tr></table></div></td>


<td><div class="blocpa" style="height:130px;width:280px;margin-left:15px;overflow:auto"><center><span class="phrasepa3" >Membres Or du mois de Mai</span>
<table><tr><td><div class=" membres or du mois de Mai "><p><br/><strong>Sachiko</strong><br/>
<img src="http://img11.hostingpics.net/pics/554033sachi.jpg" border="0" alt="" />
<br>
<br>
<strong>Velkan</strong>
<br>
<img src="http://img11.hostingpics.net/pics/448332vel.jpg" border="0" alt="" />
<br>
<br>
<strong>Et ex aequo : Shéhérazade </strong>
<br>
<img src="http://img11.hostingpics.net/pics/712383she.jpg" border="0" alt="" />
<br>
<strong>Rei</strong>
<br>
<img src="http://img11.hostingpics.net/pics/433051rei.jpg" border="0" alt="" />
</div></td></tr></table></center></div></td>

<td><div class="blocpa" style="height:130px;width:190px;margin-left:5px;overflow:auto"><center><span class="phrasepa3" >Top-Sites
<br>
<span style="font-size: 12px; line-height: normal">( Merci de voter tout les 2h. )</span></span><br/><br/>
<a href="http://www.root-top.com/topsite/gilgamesh/in.php?ID=2788" class="postlink" target="_blank" rel="nofollow"> <img src="http://i41.tinypic.com/2v187km.png" border="0" alt="" /></a>
<a href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=3188"><img src="http://i41.tinypic.com/2v187km.png" border="0" /></a>
<a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=7025"><img src="http://i41.tinypic.com/2v187km.png" border="0" alt="night world monde oublie" title="night world monde oublie"></a>
<a href="http://www.root-top.com/topsite/velusia/in.php?ID=5181">
<img src="http://i41.tinypic.com/2v187km.png" border="0" alt="top site velusia" title="top site velusia"></a>
<a href="http://lesforumsdefa.olympe.in/topsite/vote.php?id=198" target="_blank"><img src="http://lesforumsdefa.olympe.in/topsite/img/vote2.png" border="0" id="votelfd" /></a>
<br>
<a href="http://mondeoublienightworld.boosterforum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i21.servimg.com/u/f21/13/41/02/96/2_88x311.gif" border="0" alt="" />
</a>
<br>
<a href="http://www.sawen.net" target="_bank"><img src="http://www.sawen.net/sawentop.jpg" alt="Annuaire forum RPG" title="Annuaire forum RPG" width="88" height="31" border="0" /></a></span></div></div></center></div></td></tr></table>
<br/><span style="float:center;font-size:10px;color:white;opacity:0.4;">Crédits by <a href="">UmiBwack</a> sur <a href="">LG</a> -
</strong>Abel Lucrada-Edvige-<a href="http://graph-amyris.forumactif.com/"target="_blank"><img src="http://i69.servimg.com/u/f69/14/64/77/88/8826.png"alt="graphamyris"/></a>
- </a><font color="white">Retrouvez le forum sur</font><a href="https://www.facebook.com/pages/Le-monde-Oubli%C3%A9/246514808704948" class="postlink" target="_blank" rel="nofollow"><img src="http://i50.tinypic.com/344f9z8.jpg" border="0" alt="" /></a>
<a href="https://twitter.com/Le_Monde_Oublie" class="postlink" target="_blank" rel="nofollow"><img src="http://i49.tinypic.com/214a3id.png" border="0" alt="" /></a></span></div></div></center>


[Jézebel L.]

Up !

[Dark-Imperator]

Vi vi j'suis là désolé je n'ai pas pu me connecter hier soir ^^

Donc j'vais tenter un double coup de régler et la largeur de ta PA et le menu.

Essayes donc ce code :

Code:

1.   /*page d'accueil*/             
2.       *{
3.     margin:150; /* Annule toutes les marges par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
4.     padding:20; /* Annule tous les remplissages par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
5.   }
6.   a{
7.     outline:0; /* Supprime la bordure à l'activation du lien */
8.   }
9.   #menu{
10.     width:100px;
11.     margin:20px auto 0 auto; /* Sert à centrer le menu dans la page pour l'exemple, valeurs à modifier selon votre gré ou à supprimer */
12.   }
13.   .menu{
14.     height:25px;
15.     line-height:20px;
16.     width:150px;
17.     background: #456B35;
18.     color: #19AD16;
19.     text-align:center;
20.   }
21.   .menu a{
22.     display:block;
23.     width:40%;
24.     height:40%;
25.   }
26.   
27.   .menu a:link, .menu a:visited, .menu a:hover{
28.     color:#19AD16;
29.     font-family:arial,sans-serif;
30.     font-size:12px;
31.     font-weight:bold; /* Met le texte du menu en gras, à supprimer si vous n'en voulez pas */
32.     text-decoration:none; /* Supprime le soulignement du lien, pour le rétablir passez la valeur à underline */
33.     background: #456B35;
34.   }
35.   .menu a:hover{
36.     background: #19AD16;
37.     color:#FFFFFF;
38.   }
39.   #desc{
40.     background: #19AD16;
41.     height:50px;
42.     font-family:georgia,sans-serif;
43.     font-size:10px;
44.     color:#FFFFFF;
45.     padding:2px;
46.     border:1px solid #456B35;
47.   }
48.   .fond {
49.   background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
50.   width:auto;
51.   height:auto;
52.   border:5px solid #456B35;
53.   border-radius: 20px 20px 20px 20px;
54.   padding:20px;}
55.   
56.   .phrasepa {
57.   opacity:0.8;
58.   font-family:georgia;
59.   font-size:30px;
60.   color:#456B35;
61.   text-align:center;
62.   text-shadow:1px 1px 2px black; }
63.   
64.   .phrasepa2 {
65.   opacity:0.8;
66.   font-family:georgia;
67.   font-size:30px;
68.   color:#456B35;
69.   text-align:center;
70.   text-shadow:1px 1px 2px black;}
71.   
72.   .phrasepa3 {
73.   opacity:0.8;
74.   font-family:georgia;
75.   font-size:25px;
76.   color:#556627;
77.   text-align:center;}
78.   
79.   .blocpa {
80.   background-color:#B0CC99;
81.   padding:8px;
82.   box-shadow:0px 0px 10px #19AD16;
83.   margin:10px;
84.   margin-left:-10px;}
85.   
86.   .contexte {
87.     position: relative;
88.     overflow:auto;
89.     height: 225px;
90.     width: 225px;
91.   padding:8px;
92.     background: #456B35;
93.     color: white;
94.     margin-top: 2px;
95.   box-shadow:1px 1px 10px #19AD16;
96.   text-align:justify;
97.   
98.   
99.   }
100.   
101.   .contexte:hover {
102.   overflow-x: hidden;
103.   overflow-y: auto;
104.   width:300px;
105.   height:225px;}
106.   
107.   .contexte img{
108.     position: absolute;
109.     left: 0;
110.     top: 0;
111.     transition: transform 3s;
112.     -moz-transition: -moz-transform 4s;
113.     -o-transition: -o-transform 4s;
114.     -webkit-transition: -webkit-transform 4s; }
115.   
116.   
117.   .contexte:hover img{
118.     transform: translateX(+338px);
119.     -moz-transform: translateX(+338px);
120.     -o-transform: translateX(+338px);
121.     -webkit-transform: translateX(+338px);
122.   }
123.   
124.   .toppart img {
125.   box-shadow:0px 0px 10px #19AD16;
126.   opacity:0.5;}
127.   
128.   .toppart img:hover {
129.   box-shadow:0px 0px 10px #19AD16;
130.   opacity:1;
131.   
132.   }
133.   
134.   .wanted {
135.   position: relative;
136.   width:80px;
137.   height:90px;
138.   opacity:0.8;
139.   font-family:georgia;
140.   font-size:15px;
141.   color:#6FC4C1;
142.   text-align:center;
143.    background: #456B35;}
144.   
145.   .wanted img {
146.   position:absolute;
147.   left: 0;
148.     top: 0;
149.     opacity:1;
150.    -moz-transition: all 2s;
151.   -webkit-transition: all 2s;}
152.   
153.   .wanted:hover img {
154.   opacity:0;
155.   }
156.   
157.   div.staff {
158.     position: relative;
159.     float: left;
160.   }
161.   
162.   div.staff span {
163.     display:  /* ceci masque l'infobulle */
164.   }
165.   div.staff:hover {
166.     background: none; /* correction d'un bug IE */
167.     z-index: 20; /* on définit une valeur pour l'ordre d'affichage */
168.   }
169.   div.staff:hover span {
170.   height:74px;
171.     width: 115px;
172.   display: inline;
173.   position: absolute;
174.   top: 0px;
175.   left: 40px;
176.   background-color: ;
177.   color: ; #96CA2D
178.   padding: 0px;
179.   border-top: none ;
180.   border-right: none ;
181.   border-bottom: none ;
182.     border-radius: none ;
183.     z-index:20;
184.   }
185.   
186.   div.staff2 {
187.     position: relative;
188.     float: left;
189.   }
190.   
191.   div.staff2 span {
192.     display: /* ceci masque l'infobulle */
193.   }
194.   div.staff2:hover {
195.     background: none; /* correction d'un bug IE */
196.     z-index: 40; /* on définit une valeur pour l'ordre d'affichage */
197.   }
198.   div.staff2:hover span {
199.   height:74px;
200.     width: 115px;
201.   display: inline;
202.   position: absolute;
203.   top: 0px;
204.   left: 40px;
205.   background-color: ;
206.   color: ; #96CA2D
207.   padding: 0px;
208.   border-top: 0px solid ;
209.   border-right: 0px solid ;
210.   border-bottom: 0px solid ;
211.     border-radius: 0px 0px 0px 0px;
212.     z-index:40;
213.   }
214.   
215.   
216.   .staffie {
217.     -webkit-transition: 1s;
218.     -moz-transition: 1s;
219.     -o-transition: 1s;
220.     transition: 1s;
221.     position: relative;
222.     z-index:30;
223.     }
224.   
225.   .staffie:hover {
226.     position: relative;
227.     z-index:30;
228.       transform: rotate(360deg);
229.         transition:  rotate(360deg);
230.         -webkit-transform: rotate(360deg);
231.       -moz-transform: rotate(360deg);
232.       -o-transition:  rotate(360deg);
233.       -ms-transition:  rotate(360deg);
234.       -khtml-transition:  rotate(360deg);
235.     }
236.   
237.   .staffie2 {
238.     -webkit-transition: 1s;
239.     -moz-transition: 1s;
240.     -o-transition: 1s;
241.     transition: 1s;
242.     position: relative;
243.     z-index:50;
244.     }
245.   
246.   .staffie2:hover {
247.     position: relative;
248.     z-index:50;
249.       transform: rotate(360deg);
250.         transition:  rotate(360deg);
251.         -webkit-transform: rotate(360deg);
252.       -moz-transform: rotate(360deg);
253.       -o-transition:  rotate(360deg);
254.       -ms-transition:  rotate(360deg);
255.       -khtml-transition:  rotate(360deg);
256.     }


[Jézebel L.]

Bonsoir,

Ok, c'est pas grave ^^
Merci d'avoir répondu.

J'ai mis ton nouveau css et voilà une capture d'écran avec zoom
pour avoir une vue d'ensemble




Lien du forum : http://monde-oublie.forumactif.com/


Et le même menu toujours avec cet étrange problème :

[Dark-Imperator]

Il me semble que ta PA va mieux côté longueur ? essayes donc ça ?

Code:

1.  /*page d'accueil*/             
2.      *{
3.    margin:150; /* Annule toutes les marges par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
4.    padding:20; /* Annule tous les remplissages par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
5.  }
6.  a{
7.    outline:0; /* Supprime la bordure à l'activation du lien */
8.  }
9.  #menu{
10.    width:100px;
11.    margin:20px auto 0 auto; /* Sert à centrer le menu dans la page pour l'exemple, valeurs à modifier selon votre gré ou à supprimer */
12.  }
13.  .menu{
14.    height:25px;
15.    line-height:20px;
16.    width:155px;
17.    background: #456B35;
18.    color: #19AD16;
19.    text-align:center;
20.  }
21.  .menu a{
22.    display:block;
23.    width:40%;
24.    height:40%;
25.  }
26.   
27.  .menu a:link, .menu a:visited, .menu a:hover{
28.    color:#19AD16;
29.    font-family:arial,sans-serif;
30.    font-size:12px;
31.    font-weight:bold; /* Met le texte du menu en gras, à supprimer si vous n'en voulez pas */
32.    text-decoration:none; /* Supprime le soulignement du lien, pour le rétablir passez la valeur à underline */
33.    background: #456B35;
34.  }
35.  .menu a:hover{
36.    background: #19AD16;
37.    color:#FFFFFF;
38.  }
39.  #desc{
40.    background: #19AD16;
41.    height:60px;
42.    font-family:georgia,sans-serif;
43.    font-size:10px;
44.    color:#FFFFFF;
45.    padding:2px;
46.    border:1px solid #456B35;
47.  }
48.  .fond {
49.  background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
50.  width:auto;
51.  height:auto;
52.  border:5px solid #456B35;
53.  border-radius: 20px 20px 20px 20px;
54.  padding:20px;}
55.   
56.  .phrasepa {
57.  opacity:0.8;
58.  font-family:georgia;
59.  font-size:30px;
60.  color:#456B35;
61.  text-align:center;
62.  text-shadow:1px 1px 2px black; }
63.   
64.  .phrasepa2 {
65.  opacity:0.8;
66.  font-family:georgia;
67.  font-size:30px;
68.  color:#456B35;
69.  text-align:center;
70.  text-shadow:1px 1px 2px black;}
71.   
72.  .phrasepa3 {
73.  opacity:0.8;
74.  font-family:georgia;
75.  font-size:25px;
76.  color:#556627;
77.  text-align:center;}
78.   
79.  .blocpa {
80.  background-color:#B0CC99;
81.  padding:8px;
82.  box-shadow:0px 0px 10px #19AD16;
83.  margin:10px;
84.  margin-left:-10px;}
85.   
86.  .contexte {
87.    position: relative;
88.    overflow:auto;
89.    height: 225px;
90.    width: 225px;
91.  padding:8px;
92.    background: #456B35;
93.    color: white;
94.    margin-top: 2px;
95.  box-shadow:1px 1px 10px #19AD16;
96.  text-align:justify;
97.   
98.   
99.  }
100.   
101.  .contexte:hover {
102.  overflow-x: hidden;
103.  overflow-y: auto;
104.  width:300px;
105.  height:225px;}
106.   
107.  .contexte img{
108.    position: absolute;
109.    left: 0;
110.    top: 0;
111.    transition: transform 3s;
112.    -moz-transition: -moz-transform 4s;
113.    -o-transition: -o-transform 4s;
114.    -webkit-transition: -webkit-transform 4s; }
115.   
116.   
117.  .contexte:hover img{
118.    transform: translateX(+338px);
119.    -moz-transform: translateX(+338px);
120.    -o-transform: translateX(+338px);
121.    -webkit-transform: translateX(+338px);
122.  }
123.   
124.  .toppart img {
125.  box-shadow:0px 0px 10px #19AD16;
126.  opacity:0.5;}
127.   
128.  .toppart img:hover {
129.  box-shadow:0px 0px 10px #19AD16;
130.  opacity:1;
131.   
132.  }
133.   
134.  .wanted {
135.  position: relative;
136.  width:80px;
137.  height:90px;
138.  opacity:0.8;
139.  font-family:georgia;
140.  font-size:15px;
141.  color:#6FC4C1;
142.  text-align:center;
143.    background: #456B35;}
144.   
145.  .wanted img {
146.  position:absolute;
147.  left: 0;
148.    top: 0;
149.    opacity:1;
150.    -moz-transition: all 2s;
151.  -webkit-transition: all 2s;}
152.   
153.  .wanted:hover img {
154.  opacity:0;
155.  }
156.   
157.  div.staff {
158.    position: relative;
159.    float: left;
160.  }
161.   
162.  div.staff span {
163.    display:  /* ceci masque l'infobulle */
164.  }
165.  div.staff:hover {
166.    background: none; /* correction d'un bug IE */
167.    z-index: 20; /* on définit une valeur pour l'ordre d'affichage */
168.  }
169.  div.staff:hover span {
170.  height:74px;
171.    width: 115px;
172.  display: inline;
173.  position: absolute;
174.  top: 0px;
175.  left: 40px;
176.  background-color: ;
177.  color: ; #96CA2D
178.  padding: 0px;
179.  border-top: none ;
180.  border-right: none ;
181.  border-bottom: none ;
182.    border-radius: none ;
183.    z-index:20;
184.  }
185.   
186.  div.staff2 {
187.    position: relative;
188.    float: left;
189.  }
190.   
191.  div.staff2 span {
192.    display: /* ceci masque l'infobulle */
193.  }
194.  div.staff2:hover {
195.    background: none; /* correction d'un bug IE */
196.    z-index: 40; /* on définit une valeur pour l'ordre d'affichage */
197.  }
198.  div.staff2:hover span {
199.  height:74px;
200.    width: 115px;
201.  display: inline;
202.  position: absolute;
203.  top: 0px;
204.  left: 40px;
205.  background-color: ;
206.  color: ; #96CA2D
207.  padding: 0px;
208.  border-top: 0px solid ;
209.  border-right: 0px solid ;
210.  border-bottom: 0px solid ;
211.    border-radius: 0px 0px 0px 0px;
212.    z-index:40;
213.  }
214.   
215.   
216.  .staffie {
217.    -webkit-transition: 1s;
218.    -moz-transition: 1s;
219.    -o-transition: 1s;
220.    transition: 1s;
221.    position: relative;
222.    z-index:30;
223.    }
224.   
225.  .staffie:hover {
226.    position: relative;
227.    z-index:30;
228.      transform: rotate(360deg);
229.        transition:  rotate(360deg);
230.        -webkit-transform: rotate(360deg);
231.      -moz-transform: rotate(360deg);
232.      -o-transition:  rotate(360deg);
233.      -ms-transition:  rotate(360deg);
234.      -khtml-transition:  rotate(360deg);
235.    }
236.   
237.  .staffie2 {
238.    -webkit-transition: 1s;
239.    -moz-transition: 1s;
240.    -o-transition: 1s;
241.    transition: 1s;
242.    position: relative;
243.    z-index:50;
244.    }
245.   
246.  .staffie2:hover {
247.    position: relative;
248.    z-index:50;
249.      transform: rotate(360deg);
250.        transition:  rotate(360deg);
251.        -webkit-transform: rotate(360deg);
252.      -moz-transform: rotate(360deg);
253.      -o-transition:  rotate(360deg);
254.      -ms-transition:  rotate(360deg);
255.      -khtml-transition:  rotate(360deg);
256.    }

[Jézebel L.]

Re !

J'ai copier coller ton nouveau css, et voilà ce que ça donne :

http://monde-oublie.forumactif.com/

Par contre toujours même prob pour le même cadre...
ça en devient presque désespérant, je sais pas ce qu'il a -_-

[Dark-Imperator]

Si tu as toujours le CSS de base (le tout premier) remets, peut être c'était juste un bug de chargement de la page

[Jézebel L.]

OK, je vais le faire.

[Jézebel L.]

Bonsoir,

Bon, pour le prob avec la pa, enfin le menu lien, toujours pas arrangé.
En revanche c'est ok pour les bannière aléatoires.
Merci encore ^^

Prob résolu.