boite à smileys - elle est déformée.

[Invité]

Bonjour,

→ adresse du forum : http://forumtestmady.forumgratuit.org/
→ version phpBB2.
→ fondatrice du forum.
→ j'utilise chrome & firefox.

Encore une fois, merci du temps que vous allez m'accorder.

Mon problème vient de la boite à smileys (je ne sais pas trop comment appeler ça, désolée). Normalement, les smileys prennent toute la place et la boite défile de haut en bas. Sur mon forum test, c'est comme s'il y avait une image sous les smileys, une image trop large qui déforme la boite. Du coup, il faut qu'on déplace la boite de droite à gauche. Je ne sais pas d'où ça vient, pouvez-vous m'aider ?

boite à smiley sans problème


boite à smiley avec problème (sur mon forum test)

merci d'avance !

[missx]

salut
peut tu ouvrir un forum aux invités (autorisation de répondre) pour voir cette boite ?
A+

[Invité]

bonjour,

c'est chose faite ! (=

cordialement.

[missx]

as tu modifié le template d'affichage des smileys ?
tu peut mettre ton css perso ?

[Invité]

non, je n'ai pas modifié le template des smileys. en fait, je ne sais même pas de quel template il s'agit.

et voilà le css du forum ↓

Code:

/* ESPACE HEADER - NAVIGATION */
#i_logo
{margin-bottom: 30px;}

/* ENLEVER SOULIGNEMENT DES LIENS + TRANSITION CHANGEMENT DE COULEUR */
a:link,a:active,a:visited,a:hover
{text-decoration: none; font-weight:bold;
-webkit-transition:color 400ms ease-out;
-moz-transition:color 400ms ease-out;
-o-transition:color 400ms ease-out;
transition:color 400ms ease-out;}
a:hover
{text-decoration: none !important;}

/* BARRE DE NAVIGATION */
a.mainmenu:link, a.mainmenu:visited{
font-family:arial narrow; font-size:12px;text-transform:uppercase;
color:#778e60;}
a.mainmenu:hover, a.mainmenu:hover:visited{
font-family:arial narrow; font-size:12px;text-transform:uppercase;
color:#413c3c;}
.navig{
padding-top:8px; padding-bottom:8px;}

/* IMAGE DE FOND */
body{
background-attachment: fixed;
background-repeat: repeat-y;
background-position: center;
background-image:url('http://imageshack.us/a/img248/9977/fondv2.png');
background-color:#ece8be;}

/* CADRE FORUM */
.forumline
{width:730px;
background-color:#c5c29f;}

/* CATEGORIES */

.secondarytitle{
margin:auto;
position:relative; top:40px;
font-family: Playball;}
ct{font-size:40px;color:#778e60;}


/* TITRES FORUMS + TEXTE*/
a.forumlink{
font-family: arial narrow; font-size:13px;
text-transform:uppercase; letter-spacing:5px;color:#413c3c !important;}

a.forumlink:visited{
font-family: arial narrow; font-size:13px;
text-transform:uppercase; letter-spacing:5px;color:#413c3c !important;}
 
a.forumlink:hover{
font-family: arial narrow; font-size:13px;
text-transform:uppercase; letter-spacing:5px;color:#413c3c !important;}
 
a.forumlink:hover:visited{
font-family: arial narrow; font-size:13px;
text-transform:uppercase; letter-spacing:5px;color:#413c3c !important;}
   
a.forumlink:after{content:"★ "; opacity:0;}
a.forumlink:hover:after{content:"★ "; opacity:1;color:#413c3c;}

.forumlink{margin-left:10px; position:relative; top:4px; z-index:5;}


.fog{
background-color:#cfcca7;
text-transform:lowercase;
height:50px;
padding:5px; width:635px;
margin-left:10px;
position:relative;z-index:2;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
box-shadow: 1px 1px 5px -1px #afa49f;
-moz-box-shadow: 1px 1px 5px -1px #afa49f;
-webkit-box-shadow: 1px 1px 5px -1px #afa49f;}

.fod{height:40px; overflow:auto; text-align:justify;padding-right:2px;}

.fop{
width:150px; border-left:1px #c5c29f solid;}

.foi{
position:relative; right:12px;z-index:1;}

.pt{
position:relative;top:25px; right:100px;font-size:9px;z-index:3;
text-transform:uppercase;color:#778e60;font-family:arial narrow;
text-align:right;}

/* menu déroulant des sous-forums */
.openbig { height: 15px; width: 290px; overflow:hidden; margin:auto; display: block;
  -webkit-transition:height 800ms ease-out;
  -moz-transition:height 800ms ease-out;
  -o-transition:height 800ms ease-out;
  transition:height 800ms ease-out;
background-color:#cfcca7;
text-transform:lowercase;
position:relative; bottom:5px; z-index:3;
text-align:center;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
padding-right:5px; padding-left:5px;
box-shadow: 1px 1px 5px -1px #afa49f;
-moz-box-shadow: 1px 1px 5px -1px #afa49f;
-webkit-box-shadow: 1px 1px 5px -1px #afa49f;}

.openbig:hover { height: 63px;
-webkit-transition:height 800ms ease-out;
  -moz-transition:height 800ms ease-out;
  -o-transition:height 800ms ease-out;
  transition:height 800ms ease-out;}

.openbig_title { font-size: 10px;
  color:#778e60;
  font-family:arial narrow;
  text-transform:uppercase;
font-weight:bold;}

/* LES ZONES DE SAISIES ET LES BOUTONS */
.liteoption, .mainoption, .button2 {
  background-color:#cfcca7; border:1px #b6b392 solid;}

textarea, .textarea.post, input.post{
background-color:#cfcca7; border:1px #b6b392 solid;}

.postbody {text-align:justify; padding-left:10px; padding-right:10px;padding-top:10px;}

.signature_div img{max-height:400px;max-width:800px;}

-RETRAIT : ce CSS pose de nombreux problèmes - { display: none; }

hr { border-color: #c5c29f; }
i{color:#6e6c58;}
u{border-bottom: 1px #6e6c58 dashed; text-decoration: none;}

/* FROFIL DE GAUCHE */

.rara{font-family:arial narrow;
font-size:30px; text-transform:uppercase;
letter-spacing:10px;
position:relative; z-index:1;
text-align:center;
top:13px;}

.vava{
background-color:#cfcca7;
width:200px;
padding:5px;
border:1px #b6b392 solid;
position:relative; z-index:2;
margin-bottom:3px;}


.vava img{}

.nana{
font-family:Playball;
text-align:center;}
.nana:after{content:" ❞"; font-size:20px ;}

.profil{
line-height:1.2;
background-color:#cfcca7;
width:200px;
padding:5px;
border:1px #b6b392 solid;}

.profil img{width:200px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}

/* PAGE DACCUEIL */

.boxpa{
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
padding:10px; text-align:justify;
width:600px; z-index:2;
position:relative;
border-right:2px #989898 dashed;
border-left:2px #989898 dashed;}

.tipa{position:relative; bottom:18px;
  font-family:arial narrow; font-size:15px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
writing-mode: lr-tb;
text-transform:uppercase;}

.bvn{
font-family: Playball;
font-size:80px;
color:#778E60;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
writing-mode: lr-tb;}

.boite{position:relative;
width:100px;
height:50px;
overflow:hidden;
border: 1px #b6b392 solid;
padding:2px;}

.legende{position:absolute;
top:54px;
height:54px;
width:100%;
background-color:#cfcca7;
left:0;
font-size:10px;
padding:2px;
text-align:center;}

.boxpv{
  border:1px #b6b392 solid;
padding:5px;
background-color:#cfcca7;
text-align:center;
width:314px;}
 
.pv{width:40px;
  border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;}

.tipv{font-family:arial narrow;
font-size:18px; text-transform:uppercase;
color:#778e60;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
writing-mode: lr-tb;
margin-right:-10px;}

.boxpa2{border:1px #b6b392 solid;
padding:5px;
background-color:#cfcca7;
text-align:justify;
font-size:11px;}

.tipa2{font-family:arial narrow;
font-size:18px; text-transform:uppercase;
color:#778e60;}

.mdm{width:40px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}

.rond{font-size:15px;}

/* LE QEEL */

cit{color:#ece8be;}
ass{color:#8B896F;}
esp{color:#595847;}
tem{color:#2b2a22;}

.qui{font-family: Playball;
font-size:70px;
color:#778E60;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
writing-mode: lr-tb;}

.gr{position:relative; bottom:15px;
  font-family:arial narrow; font-size:20px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
writing-mode: lr-tb;}

.qu{width:560px;background-color:#c5c29f; padding:10px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
box-shadow: 1px 1px 5px -1px #afa49f;
-moz-box-shadow: 1px 1px 5px -1px #afa49f;
-webkit-box-shadow: 1px 1px 5px -1px #afa49f;}

.qe{width:260px; height:130px; overflow:auto;
text-align:justify; padding:5px;}

/* CITATION SPOILER CODE */

.quote{background-color:#cfcca7;
padding:5px; padding-top:0px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
border:1px #b6b392 solid;
  text-align:justify;}
.quote:before {
content:url("http://img94.imageshack.us/img94/8136/quotem.png"); position:relative; right:2px; top:2px;}

.code{background-color:#cfcca7;
padding:5px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
border:1px #b6b392 solid;
  text-align:justify;}

.selectCode { float: right; text-transform: lowercase; cursor:pointer; }

.spoiler_closed{
padding:5px; padding-top:0px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
border-bottom:0px #989898 solid;
border-top:1px #b6b392 solid;
  border-right:0; border-left:0px;
  text-align:justify;}

.spoiler_closed.hidden{
display:none;}

.spoiler_content{background-color:#cfcca7;
padding:5px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;
border:1px #b6b392 solid;
  text-align:justify;}

/* LES FICHES DU FORUM */
.box{background-color:#cfcca7;
padding:5px; text-align:justify;
font-size:11px;
line-height:normal;
border:1px #b6b392 solid;}

.tit{background-color:#c5c29f;
padding:5px; text-align:center;
font-family:arial narrow;
text-transform:uppercase;
font-size:18px;
letter-spacing:6px;
color:#778e60;}

.ima1{width:450px;
background-color:#c5c29f;
  padding:5px;margin-bottom:3px;}

.ima2{width:150px;
background-color:#cfcca7;
  padding:2px; float:left;
margin-right:3px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}

.ima3{width:150px;
background-color:#cfcca7;
  padding:2px; float:right;
margin-left:3px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}

.ima4{width:50px;
background-color:#cfcca7;
  padding:2px; float:left;
margin-right:2px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}

.ima5{width:50px;
background-color:#cfcca7;
  padding:2px; float:right;
margin-left:2px;border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}

.nom{font-family:Playball;
text-align:center;
font-size:30px;
font-weight:bold;
color:#543955;
background-color:#c5c29f;
padding:3px;}

.ft{font-family:arial narrow;
font-size:10px; text-transform:uppercase;
letter-spacing:3px;}

.box2{background-color:#c5c29f;
padding:5px; text-align:justify;
font-size:11px;line-height:normal;}

bw{font-family:arial narrow; font-weight:bold; color:#778e60;text-transform:uppercase;}
bc{font-family:arial narrow; font-style:italic; color:#413c3c;
  text-transform:uppercase;font-size:15px;}


.lien{background-color:#cfcca7;
padding:5px; text-align:justify;
font-size:11px;
line-height:normal;
border-radius: 0px 0px 25px 0px;
-moz-border-radius: 0px 0px 25px 0px;
-webkit-border-radius: 0px 0px 25px 0px;
float:left;
width:200px;
position:relative;}

.imgl{width:100px;
border-radius: 25px 10px / 10px 25px;
-moz-border-radius: 25px 10px / 10px 25px;
-webkit-border-radius: 25px 10px / 10px 25px;}



[Invité]

up; je remonte le sujet. (=

[Invité]

petit up. (=

[Invité]

up. (:

[Invité]

up (:

[Matriochka]

Bonjour,

Le souci vient sans doute d’ici, dans ton CSS :

Code:

/* CADRE FORUM */
.forumline
{width:730px;
background-color:#c5c29f;}

Tu appliques une largeur de 730 pixels à forumline, or cette class concerne aussi la boîte des smiley. Donc automatiquement, elle est redimensionnée à 730 pixels elle aussi

[Invité]

merci beaucoup Matriochka. (:
c'est pourtant bête mais je n'aurais pas pu trouver toute seule.