Page d'accueil ( Infobulle ) + Smileys

[Dragibus67]

Bonjour, j'ai un problème concernant ma page d'accueil. Je pense que c'est du à la mise à jour mais je n'en sais rien ^^ !
Dans l'onglet " Staff / Crédits " , la présentation des administrateurs s'affichent en dessous de l'image, ce qui décalent tout et quand je vais sur l'image l'infobulle est... Vide xD . Avant ça marchait, donc déjà ça peut pas être moi qui ait fait une bêtise x) . Je vous met le code de cette partie :

Code:

<!--      PARTIE STAFF      -->
 <h1 class="titres_pa">
 Administration
</h1>
 <div class="fond_blocs">
 <table align="center" border="0">
 <tbody>
 <tr>
 <td>
 <div class="thumbnail">
 <div><img id="" style="width: 100px; height: 100px;" src="http://i44.servimg.com/u/f44/14/14/93/78/imagep13.png" alt="" class="bordure" /><span></span>
 </div><span></span>
 <div style="" class="tstaff" align="center">
 <div class="nom_bull">
 Croc Noir / Fidji <br /><br />
 <div class="presentation">
 Fondatrice et administratrice du forum. N'hésitez pas à lui poser toutes vos questions, elle ne mord pas ( Quoique... ) !
</div><br /><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=1">MP</a> | <a href="http://loupsauvage.forumactif.com/u1">Profil</a>
 </div>
 </div><span></span>
 </div>
 </td>
 <td>
 <div class="thumbnail">
 <div><img id="" style="width: 100px; height: 100px;" src="http://i44.servimg.com/u/f44/14/14/93/78/kerine10.jpg" alt="" class="bordure" /><span></span>
 </div><span></span>
 <div style="" class="tstaff" align="center">
 <div class="nom_bull">
 Kerine / Kygan <br /><br />
 <div class="presentation">
 Elle est devenue administratrice du forum grâce à son dévouement pour celui-ci et la confiance que je lui accorde. C'est quelqu'un de génial ! N'hésitez pas à lui poser vos questions ^^ , mais attention, elle déteste les fautes d'orthographe !
</div><br /><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=48">MP</a> | <a href="http://loupsauvage.forumactif.com/u48">Profil</a>
 </div>
 </div><span></span>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div class="thumbnail">
 <div><img id="" style="width: 100px; height: 100px;" src="http://img11.hostingpics.net/pics/268678kaya.png" alt="" class="bordure" /><span></span>
 </div><span></span>
 <div style="" class="tstaff" align="center">
 <div class="nom_bull">
 Kaya / Uky <br /><br />
 <div class="presentation">
 Kaya / Uky est la nouvelle administratrice du forum. C'est ma soeur de coeur ♥ . Je lui fais confiance et elle mérite largement ce rôle ! Félicitation à toi ma Kaya d'amour <3 . Si vous avez une question, vous pouvez lui poser également , elle se fera un plaisir d'y répondre .
</div><br /><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=137">MP</a> | <a href="http://loupsauvage.forumactif.com/u137">Profil</a>
 </div>
 </div><span></span>
 </div>
 </td>
 <td>
 <div class="thumbnail">
 <div><img id="" style="width: 100px; height: 100px;" src="http://i44.servimg.com/u/f44/14/14/93/78/imagep15.png" alt="" class="bordure" /><span></span>
 </div><span></span>
 <div style="" class="tstaff" align="center">
 <div class="nom_bull">
 Pseudo/ Pseudo <br /><br />
 <div class="presentation">
 Petite présentation
</div><br /><a href="LIEN">MP</a> | <a href="LIEN">Profil</a>
 </div>
 </div><span></span>
 </div>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </td>
 <!--      FIN DE LA PARTIE STAFF      -->

Est-ce que vous sauriez aussi quel code je dois mettre pour que cette partie ait une barre de défilement ? Que je puisse mettre plus de 4 personnes en quelque sorte .

Autre problème : Tous mes smileys personnalisés ont disparu. Ils ne s'affichent plus. Y a t-il un moyen d'y remédier ? ( Je sais que c'est une question par sujet, mais je me suis dit que les smileys étaient peut-être dus à la mise à jour aussi )

Merci d'avance pour vos réponses, bonne journée .

[Jervis]

Bienvenue au Club ...
ça me le fait aussi >

Spoiler:

On attend toujours :/

[Dragibus67]

Ah oui xD . Ça va être réparé alors je pense. Il faut savoir être patient ^^ ! Tu as aussi le problème avec les smileys ?

[Jervis]

étrangement non. Ils sont bien là dans la galerie, et semblent toujours heureux.

[Tech]

Bonjour,

Merci de fournir le code complet de votre page d'accueil et si possible des captures d'écran montrant le résultat normal et le résultat anormal.

Cordialement.

[Dragibus67]

Oh c'est étrange pour les smileys... Un membre de mon forum m'a dit qu'il les voyait sans problème. Mon ordi ayant des bugs, je me suis dis que ça devait être ça. Mais j'ai changé d'ordi et c'est exactement la même chose. Je vois juste le nom de code.
Smiley par défaut, je les vois : ( Vous pouvez voir que ceux que j'ai ajouté ne s'affichent pas ).
Et là encore d'autres personnalisés qui ne s'affichent pas :

Pour le code de ma page d'accueil, le voici ( Je l'ai mis en spoiler car il est long ) :

Spoiler:

L'énorme bug :
Comme vous le voyez, tout est décalé, les images sont mêmes pas dans la PA...
Je peux vous fournir une image que j'avais fait lorsque j'avais commandé ma PA, même si les couleurs ne correspondent pas ^^ :


Avant tout marchait parfaitement. ( S'il faut modifier quelque chose, comme je l'ai demandé dans mon premier message : Pourriez-vous me donner le code pour pouvoir avoir une barre de défilement pour la partie du staff justement :p : )

PS : Je ne vois pas les avatars non plus. Juste l'image des rangs mais plus les avatars .

[Dragibus67]

Ah ! Je vois à nouveau les avatars et les smileys *.* ! Parfait . Il n'y a plus que le problème des infobulles à régler ^^

[Dragibus67]

Personne ne sait ?

[Tech]

Bonjour,

Merci de fournir également le CSS

Cordialement.

[Dragibus67]

Bonjour, le voici ^^ :

Code:

  /** le premier onglet par défaut **/
        .onglet
        {
                display:inline-block; /* c'est pour ordonner au texte de rester sur la même ligne */
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid #A5714C; /* une bordure de un pixel */
                cursor:pointer;
            color: #A1674E; /* couleur du premier onglet */
            -moz-border-radius: 10px; /* les bordures arrondies*/
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px; /* la taille du texte */
            margin-left: 20px; /* on le décolle un peu de la partie gauche */
        }
     
      /** les onglets à l'état normal **/
        .onglet_0
        {
                background:#FEE3A2; /* la couleur du fond */
                border-bottom:1px solid #A5714C; /* la couleur de la bordure en bas*/
            color : #A1674E;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px;
           
        }
     
      /** les onglets quand on passe la souris dessus **/
        .onglet_1
        {
                background:#FEE3A2;
                border-bottom:0px solid #A5714C;
                padding-bottom:4px;
            color: #A1674E;
            text-shadow: 0px 0px 2px #A1674E;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px;
           
        }
     
      /** code pour le contenu des onglets en général **/
        .contenu_onglet
        {
                background-color:#FEE3A2;
                border:1px solid #A5714C;
                margin-top:-1px;
                padding:5px;
                display:none;
            width: 75%; /* la largeur générale du contenu des onglets */
            height: 430px; /* la longueur général du contenu des onglets */
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
     
      /** le code pour le nom du forum mais aussi tous les titres des onglets**/
      .nom_forum {
     
      color: #fff; /* la couleur du texte */
      text-shadow: 0px 0px 3px #fff; /* une petite ombre*/
      font-size: 25px;
      padding: 3px;
      text-align: center; /* le texte est centré*/
      background-color: #EABB6A;
      border:2px solid #A5714C;}
   
    /** les propriétés communes pour tous les blocs comme la couleur du fond, la bordure etc**/
    .fond_blocs {
    background-color: #EABB6A;
    color: #000;
    border: 2px solid #A5714C;
    padding: 5px; /* on met une petite marge intérieure*/}
   
    /** le code spécifique pour le bloc du contexte **/
    .bloc_contexte {
    width: 250px;
    height: 200px;
    text-align: justify; /* on justifie le texte */
    font-size: 12px;}
   
/** une petite bordure autour de toutes les images **/   
    .bordure {
      border:2px solid #A5714C; /* la bordure*/
      -moz-box-shadow: 0px 0px 2px #000; /* un effet d'ombrage */
      -webkit-box-shadow: 0px 0px 2px #000;
      box-shadow: 0px 0px 2px #000;}
     
      /** la navigation à l'état normal **/
#navigation a:link, #navigation a:visited, #navigation a:active {
width: 250px;
height: 15px;
font-style: Georgia; /* la famille du texte */
font-size: 20px;
text-align: center;
padding: 2px;
color: #80461C; /* la couleur */
line-height: 13px;
display: block; /* on aligne les liens */
text-transform: capitalize;}

/** la navigation quand on passe la souris dessus **/
#navigation a:hover {
color: #04F4333 ;
font-size: 20px;
text-shadow: 0px 0px 2px #A5714C;
}

/** le code pour le bloc de nouveautés **/
.bloc_news {
 width: 270px;
 height: 280px;
 text-align: center;
 font-size: 12px; }
 
 /** le code pour le membre du mois **/
 .membre {
 
 font-size: 15px;
 padding: 2px;
 text-align: justify;}
 
 /** le code pour la partie texte dans l'onglet nouveautés **/
 .bloc_joindre {
 
 width: 230px;
 height: 120px;
 text-align: justify;
 font-size: 12px;}
 
 /** le code du bloc météo **/
 .bloc_meteo {
 width: 200px;
 font-size: 15px;}
 
      /* infobulle*/
.tstaff{font-size:1em;}

.thumbnail{position: relative;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail span{
position: absolute;
background-color: #EABB6A; /* la couleur du fond */
padding: 10px;
left: -1000px;
visibility: hidden;
color: #000000;
-webkit-box-shadow: 0px 3px 2px #000;
-moz-box-shadow: 0px 3px 2px #000;
box-shadow: 0px 3px 2px #000;

}

.thumbnail span img{border: 1px groove;}

.thumbnail:hover span{
visibility: visible;
top:-10px;
left: 0px;
width: 150px; /* la largeur de l'infobulle */
height:200px; /* la longueur de l'infobulle*/}
/*fin infobulle*/

img { border: 0px; }
.Style1 {font-size: 9px}

/** le code pour chaque nom de staff dans l'infobulle **/
 .nom_bull {
 color: #fff;
 text-shadow: 0px 0px 2px #fff;
 font-size: 18px;}

/** le code de la présentation du staff dans l'infobulle **/
 .presentation {
 
 width: 110px;
 height: 150px;
 text-align: justify;
 font-size: 12px;
 overflow: auto; /* on active la barre de défilement*/}

 .jaune {
 color: #f0fc5a;
 padding: 6px; }
 
 .rouge {
  color: #de090f;
 padding: 6px;}
 
 .bleu {
  color: #2b36d0;
 padding: 6px;}
 
 .gris {
  color: #758c86;
 padding: 6px;}
 
 .orange {
    color: #dfae48;
 padding: 6px;}
 
 .vert {
    color: #39855e;
 padding: 6px;}
 
 /** dans l'onglet meutes, ce code concerne la partie des statistiques **/
 .stats {
 text-align: center;
 font-size: 14px;
 padding: 10px;}
 
 /** le code des titres dans l'onglet staff et crédits **/
 .titres_pa {
 color: #fff;
 text-shadow: 0px 0px 2px #fff;
 background-color: #D3AF6E;
 padding: 2px;
 font-size: 23px;
  border:2px solid #A5714C;}
 
 /** le code pour la partie recrutement **/
 .bloc_recrut{
 width: 200px;
 font-size: 19px;
 height: 180px;}

 /** le code pour la partie crédit**/
 .bloc_credit {
 width: 200px;
 height: 180px;
 padding: 5px;
 text-align: justify;}
 
 /** le code pour les deux titres des partenaires, coup de coeur **/
 .titre_partenaire {
  color: #fff;
 text-shadow: 0px 0px 2px #fff;
 background-color: #D3AF6E;
 padding: 2px;
 font-size: 18px;}
 
/** le code pour la partie nos autres partenaires **/
  .bloc_partenaire {
  width: 300px;
  height: 150px;
  overflow: auto;
  padding: 2px;}

/** le code pour activer la barre de défilement dans l'onglet meutes **/
  .meutes {
width: 75%;
height: 430px;
overflow: auto;}


    a.forumlink{
      display:block;
      font-size:14px; /* la taille de la police */
      padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
      text-align:center;
      font-variant:small-caps; /* Les petites capitales */
      color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
      border-bottom:4px double #6a3e1a;
      font-weight:normal; /* Le texte non boldé */
      margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
      }
   
    a.forumlink:hover{
      font-variant:small-caps;
      color:#6e5831 !important;
      border-bottom:4px double #6a3e1a;
      font-weight:bold; /* Texte en  gras */
      display:block;
      }
   
    div.stats_cate{ /* La div ayant pour class 'stats_cate' */
      font-size:12px;
      text-align:right;
      /* border-bottom:#6a3e1a 1px solid; */
      text-decoration : underline;
      border-right:#6a3e1a 3px solid;
      font-style:italic; /* On met le texte en italic */
      color:#6a3e1a;
      /*padding-right:4px;  On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
      margin-bottom:4px;
      /* width:220px;  On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
    /*  margin-left:385px; On place le bloc à droite en le décallant par rapport au bord gauche de la case */
      }
   
    div.description{  /* La div ayant pour class 'description' */
      background-color:#efdec0; /* On lui donne une couleur de fond */
      -moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
      -webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
      border-radius:10px; /* réglage des arrondis des coins */
      border:1px solid #b79981;
      width:560px;
      min-height:20px; /* La hauteur minimum */
      font-size:12px;
      text-align:justify;
      text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
      padding:4px;
      margin:4px;
      color:#6e5831;
      }

[Dragibus67]

Up ^^

[Dragibus67]

Up

[Dragibus67]

Up

[Mimibue]

up, j'ai le même problème

[Dragibus67]

Merci pour le up ^^

PS : Bonne année  

[OnyxK]

Bouh!

Pour les infobulles, le nouvel éditeur de la PA n'accepte plus les "div" à l'intérieur des "span" comme cela le faisait avant, alors il faut tout remplacer les "div" à l'intérieur du "span" de l'infobulle par des "span" et remlacer le "span" de l'infobulle par un "div". En résumé, il faut tout recoder les endroits avec des infobulles...

Dragibus: Pour arranger les infobulles, essaies avec ceci comme CSS:

Code:

  /** le premier onglet par défaut **/
        .onglet
        {
                display:inline-block; /* c'est pour ordonner au texte de rester sur la même ligne */
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid #A5714C; /* une bordure de un pixel */
                cursor:pointer;
            color: #A1674E; /* couleur du premier onglet */
            -moz-border-radius: 10px; /* les bordures arrondies*/
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px; /* la taille du texte */
            margin-left: 20px; /* on le décolle un peu de la partie gauche */
        }
      
      /** les onglets à l'état normal **/
        .onglet_0
        {
                background:#FEE3A2; /* la couleur du fond */
                border-bottom:1px solid #A5714C; /* la couleur de la bordure en bas*/
            color : #A1674E;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px;
            
        }
      
      /** les onglets quand on passe la souris dessus **/
        .onglet_1
        {
                background:#FEE3A2;
                border-bottom:0px solid #A5714C;
                padding-bottom:4px;
            color: #A1674E;
            text-shadow: 0px 0px 2px #A1674E;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px;
            
        }
      
      /** code pour le contenu des onglets en général **/
        .contenu_onglet
        {
                background-color:#FEE3A2;
                border:1px solid #A5714C;
                margin-top:-1px;
                padding:5px;
                display:none;
            width: 75%; /* la largeur générale du contenu des onglets */
            height: 430px; /* la longueur général du contenu des onglets */
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
      
      /** le code pour le nom du forum mais aussi tous les titres des onglets**/
      .nom_forum {
      
      color: #fff; /* la couleur du texte */
      text-shadow: 0px 0px 3px #fff; /* une petite ombre*/
      font-size: 25px;
      padding: 3px;
      text-align: center; /* le texte est centré*/
      background-color: #EABB6A;
      border:2px solid #A5714C;}
    
    /** les propriétés communes pour tous les blocs comme la couleur du fond, la bordure etc**/
    .fond_blocs {
    background-color: #EABB6A;
    color: #000;
    border: 2px solid #A5714C;
    padding: 5px; /* on met une petite marge intérieure*/}
    
    /** le code spécifique pour le bloc du contexte **/
    .bloc_contexte {
    width: 250px;
    height: 200px;
    text-align: justify; /* on justifie le texte */
    font-size: 12px;}
    
/** une petite bordure autour de toutes les images **/    
    .bordure {
      border:2px solid #A5714C; /* la bordure*/
      -moz-box-shadow: 0px 0px 2px #000; /* un effet d'ombrage */
      -webkit-box-shadow: 0px 0px 2px #000;
      box-shadow: 0px 0px 2px #000;}
      
      /** la navigation à l'état normal **/
#navigation a:link, #navigation a:visited, #navigation a:active {
width: 250px;
height: 15px;
font-style: Georgia; /* la famille du texte */
font-size: 20px;
text-align: center;
padding: 2px;
color: #80461C; /* la couleur */
line-height: 13px;
display: block; /* on aligne les liens */
text-transform: capitalize;}

/** la navigation quand on passe la souris dessus **/
#navigation a:hover {
color: #04F4333 ;
font-size: 20px;
text-shadow: 0px 0px 2px #A5714C;
}

/** le code pour le bloc de nouveautés **/
.bloc_news {
 width: 270px;
 height: 280px;
 text-align: center;
 font-size: 12px; }
 
 /** le code pour le membre du mois **/
 .membre {
 
 font-size: 15px;
 padding: 2px;
 text-align: justify;}
 
 /** le code pour la partie texte dans l'onglet nouveautés **/
 .bloc_joindre {
 
 width: 230px;
 height: 120px;
 text-align: justify;
 font-size: 12px;}
 
 /** le code du bloc météo **/
 .bloc_meteo {
 width: 200px;
 font-size: 15px;}
 
      /* infobulle*/
.tstaff{font-size:1em; display: block;}

.thumbnail{position: relative;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail div{
position: absolute;
background-color: #EABB6A; /* la couleur du fond */
padding: 10px;
left: -1000px;
visibility: hidden;
color: #000000;
-webkit-box-shadow: 0px 3px 2px #000;
-moz-box-shadow: 0px 3px 2px #000;
box-shadow: 0px 3px 2px #000;

}

.thumbnail div img{border: 1px groove;}

.thumbnail:hover div{
visibility: visible;
top:-10px;
left: 0px;
width: 150px; /* la largeur de l'infobulle */
height:200px; /* la longueur de l'infobulle*/}
/*fin infobulle*/

img { border: 0px; }
.Style1 {font-size: 9px}

/** le code pour chaque nom de staff dans l'infobulle **/
 .nom_bull {
 color: #fff;
 display: block;
 text-shadow: 0px 0px 2px #fff;
 font-size: 18px;}

/** le code de la présentation du staff dans l'infobulle **/
 .presentation {
 display: block;
 width: 110px;
 height: 150px;
 text-align: justify;
 font-size: 12px;
 overflow: auto; /* on active la barre de défilement*/}

 .jaune {
 color: #f0fc5a;
 padding: 6px; }
 
 .rouge {
  color: #de090f;
 padding: 6px;}
 
 .bleu {
  color: #2b36d0;
 padding: 6px;}
 
 .gris {
  color: #758c86;
 padding: 6px;}
 
 .orange {
    color: #dfae48;
 padding: 6px;}
 
 .vert {
    color: #39855e;
 padding: 6px;}
 
 /** dans l'onglet meutes, ce code concerne la partie des statistiques **/
 .stats {
 text-align: center;
 font-size: 14px;
 padding: 10px;}
 
 /** le code des titres dans l'onglet staff et crédits **/
 .titres_pa {
 color: #fff;
 text-shadow: 0px 0px 2px #fff;
 background-color: #D3AF6E;
 padding: 2px;
 font-size: 23px;
  border:2px solid #A5714C;}
 
 /** le code pour la partie recrutement **/
 .bloc_recrut{
 width: 200px;
 font-size: 19px;
 height: 180px;}

 /** le code pour la partie crédit**/
 .bloc_credit {
 width: 200px;
 height: 180px;
 padding: 5px;
 text-align: justify;}
 
 /** le code pour les deux titres des partenaires, coup de coeur **/
 .titre_partenaire {
  color: #fff;
 text-shadow: 0px 0px 2px #fff;
 background-color: #D3AF6E;
 padding: 2px;
 font-size: 18px;}
 
/** le code pour la partie nos autres partenaires **/
  .bloc_partenaire {
  width: 300px;
  height: 150px;
  overflow: auto;
  padding: 2px;}

/** le code pour activer la barre de défilement dans l'onglet meutes **/
  .meutes {
width: 75%;
height: 430px;
overflow: auto;}


    a.forumlink{
      display:block;
      font-size:14px; /* la taille de la police */
      padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
      text-align:center;
      font-variant:small-caps; /* Les petites capitales */
      color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
      border-bottom:4px double #6a3e1a;
      font-weight:normal; /* Le texte non boldé */
      margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
      }
    
    a.forumlink:hover{
      font-variant:small-caps;
      color:#6e5831 !important;
      border-bottom:4px double #6a3e1a;
      font-weight:bold; /* Texte en  gras */
      display:block;
      }
    
    div.stats_cate{ /* La div ayant pour class 'stats_cate' */
      font-size:12px;
      text-align:right;
      /* border-bottom:#6a3e1a 1px solid; */
      text-decoration : underline;
      border-right:#6a3e1a 3px solid;
      font-style:italic; /* On met le texte en italic */
      color:#6a3e1a;
      /*padding-right:4px;  On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
      margin-bottom:4px;
      /* width:220px;  On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
    /*  margin-left:385px; On place le bloc à droite en le décallant par rapport au bord gauche de la case */
      }
    
    div.description{  /* La div ayant pour class 'description' */
      background-color:#efdec0; /* On lui donne une couleur de fond */
      -moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
      -webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
      border-radius:10px; /* réglage des arrondis des coins */
      border:1px solid #b79981;
      width:560px;
      min-height:20px; /* La hauteur minimum */
      font-size:12px;
      text-align:justify;
      text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
      padding:4px;
      margin:4px;
      color:#6e5831;
      }

Et cela dans la PA:

Code:

<!--      PARTIE STAFF      -->
 <h1 class="titres_pa">
 Administration
</h1>
 <div class="fond_blocs">
 <table align="center" border="0">
 <tbody>
 <tr>
 <td>
 <div class="thumbnail">
 <img style="width: 100px; height: 100px;" src="http://i44.servimg.com/u/f44/14/14/93/78/imagep13.png" alt="" class="bordure" />
<div>
 <span class="tstaff" align="center">
 <span class="nom_bull">
 Croc Noir / Fidji <br /><br />
 <span class="presentation">
 Fondatrice et administratrice du forum. N'hésitez pas à lui poser toutes vos questions, elle ne mord pas ( Quoique... ) !
</span><br /><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=1">MP</a> | <a href="http://loupsauvage.forumactif.com/u1">Profil</a>
 </span>
 </span></div>
 </div>
 </td>
 <td>
 <div class="thumbnail"><img style="width: 100px; height: 100px;" src="http://i44.servimg.com/u/f44/14/14/93/78/kerine10.jpg" alt="" class="bordure" />
<div>
 <span class="tstaff" align="center">
 <span class="nom_bull">
 Kerine / Kygan <br /><br />
 <span class="presentation">
 Elle est devenue administratrice du forum grâce à son dévouement pour celui-ci et la confiance que je lui accorde. C'est quelqu'un de génial ! N'hésitez pas à lui poser vos questions ^^ , mais attention, elle déteste les fautes d'orthographe !
</span><br /><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=48">MP</a> | <a href="http://loupsauvage.forumactif.com/u48">Profil</a>
 </span>
 </span></div>
 </div>
 </td>
 </tr>
 <tr>
 <td>
 <div class="thumbnail"><img style="width: 100px; height: 100px;" src="http://img11.hostingpics.net/pics/268678kaya.png" alt="" class="bordure" />
<div>
 <span class="tstaff" align="center">
 <span class="nom_bull">
 Kaya / Uky <br /><br />
 <span class="presentation">
 Kaya / Uky est la nouvelle administratrice du forum. C'est ma soeur de coeur ♥ . Je lui fais confiance et elle mérite largement ce rôle ! Félicitation à toi ma Kaya d'amour <3 . Si vous avez une question, vous pouvez lui poser également , elle se fera un plaisir d'y répondre .
</span><br /><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=137">MP</a> | <a href="http://loupsauvage.forumactif.com/u137">Profil</a>
 </span>
 </span></div>
 </div>
 </td>
 <td>
 <div class="thumbnail"><img style="width: 100px; height: 100px;" src="http://i44.servimg.com/u/f44/14/14/93/78/imagep15.png" alt="" class="bordure" />
 <span class="tstaff" align="center">
 <span class="nom_bull">
 Pseudo/ Pseudo <br /><br />
 <span class="presentation">
 Petite présentation
</span><br /><a href="LIEN">MP</a> | <a href="LIEN">Profil</a>
 </span>
 </span></div>
 </div>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </td>
 <!--      FIN DE LA PARTIE STAFF      -->

[Admin SOA]

Bonne année à tous !

J'ai le même problème exposé dans Ce sujet, mais aussi ICI, ICI, ICI, ICI, ICI, ICI, ICI, ICI,

+ problèmes d'affichage de largeur du forum quand on poste ou édite un sujet
+ problèmes d'affichages de certaines signatures (celles codées en BBC) > Signalé, réglé et de nouveau en bug
+ problèmes avec d'autres codes CSS et html (transform: rotate par exemple) > signalés il y a plusieurs mois après le changement d'éditeur de messages et toujours pas réglés.
+ problèmes avec les balises color, li/ul (list) en html ET en BBC signalé ICI et franchement, la dernière réponse me fait juste carrément baliser.
+ problèmes lors des éditions de message avec ces balises (list, table et cie) qui s’ajoutent, se modifient, engendre des sauts de ligne en tout genre depuis la mise en place de l’éditeur de message il y a plusieurs mois et toujours pas réglé
+ problèmes d’édition de la PA ICI et ICI

Franchement, je sais que je vais me faire jeter parce que je suis la seule à ouvrir la gueule, mais là je sature. Après avoir galéré avec l’autre éditeur et avoir toujours des problèmes qui n’ont pas été réglés et m’être entendu dire une douzaine des fois que mes codes (issus de tutos) était tout pourris et que je pouvais apprendre le CSS et le html pour être une pro avant d’essayer de rendre mon fofo plus joli (pas comme ça je vous l’accorde), vous remettez ça avec la PA… Nan je peux rein ajouter en restant polie, voila.

[Amallia]

J'ajoute qu'en plus de tous les problèmes cités il y a aussi des problèmes avec les balises fieldset ! Pour une raison que j'ignore, votre nouvel éditeur ajoute des balises fieldset, les changes de place, bref n'en fait qu'à sa guise et je suis bonne pour tout recoder à chaque fois que j'édite.

Mais bien évidemment, comme d'habitude, vous allez dire que ce n'est pas un "bogue". Vous dédouanez complètement et poliment nous envoyer chier.

[Dragibus67]

Bonjour, merci beaucoup OnyxK pour le code. J'ai modifié l'ancien par ce que vous m'avez donné. J'ai de nouveau les infobulles, mais les deux petites images sortent toujours de la PA et une image d'un des admins est décalée ; il y a un grand espace avec celle d'au-dessus, comme vous pouvez le voir ici :



Admin SOA, je suis désolée pour tous les problèmes que vous rencontrez :/ hélas, c'est pas moi qui vais pouvoir aider ^^' . J'ai fais un tour sur votre forum, à première vue, je n'ai rien vu de très dérangeant, mais il faut être inscrit je pense pour voir les problèmes essentiels. En tout cas, je le trouve vraiment superbe ♥ ! J'espère que forumactif va faire quelque chose :/ .
Pareil pour Amallia.

[Amallia]

C'est parce que nous avons recoder de manière a pallier ses différents problèmes ou tout simplement recorriger le code à chaque édition de celui-ci ( notamment pour l'histoire des fieldset ). Pour les infobull on les a supprimer pour utiliser une autre fonction ( qui permet de beaucoup la personnalisé mais bon, c'est déjà ça ) et pour les marquee, pareil, on recorrige derrière à chaque édition. Mais voilà, c'est pas normal que ça ne fonctionne plus.

Je pouvais éventuellement comprendre le problème des span et des div pour les marquee et fieldset, j'appelle ça un bug.

[Dragibus67]

Non, c'est sûr que ce n'est pas normal que ça ne fonctionne plus :/ .

Pour en revenir au bug de mes infobulles, quelqu'un a une solution ? Je pense que c'est juste au niveau de la dernière infobulle puisque c'est correct pour le reste, mais j'ai regardé et je n'ai pas vu ce qui n'allait pas ( Je suis pas douée je précise  :lol!: )

[MlleAlys]

J'ajoute qu'en plus de tous les problèmes cités il y a aussi des problèmes avec les balises fieldset ! Pour une raison que j'ignore, votre nouvel éditeur ajoute des balises fieldset, les changes de place, bref n'en fait qu'à sa guise et je suis bonne pour tout recoder à chaque fois que j'édite.

Mais bien évidemment, comme d'habitude, vous allez dire que ce n'est pas un "bogue". Vous dédouanez complètement et poliment nous envoyer chier.

Bonjour,
Dans le même ordre d'idées que le problème des balises <div> (qui sont des balises de type block, "bloc") qui ne sont plus acceptées dans les balises <span> (balise de type inline, "dans la ligne"), les balises <div> (type block) ne sont plus non plus acceptées dans les balises <fieldset> (type inline) ! ><"
(pour reprendre la très belle image de Lixyr (merci ), c'est comme vouloir faire entrer une voiture dans un siège auto ! ^^)

Bref, je ne sais pas si c'est la meilleure façon de faire ou même si ça marche dans tous les cas, mais j'ai remplacer mes balises <div> problématiques par des <span>, auxquelles j'ai forcé un affichage en block :

Le problème : Un code comme ça :

<fieldset>
       <legend>titre</legend>
       <div>
           blablabla
       </div>
</fieldset>

... est transformé comme ça par l'éditeur :

Code:

<fieldset> <legend></legend>titre </fieldset>
<div style="">
    blablabla
</div><fieldset></fieldset>

Alors que, corrigé de cette façon (en remplaçant la div par un span affiché en block) :

<fieldset>
       <legend>titre</legend>
       <span style="display:block;">
           blablabla
       </span>
</fieldset>

...le code est stable, et doit normalement afficher le même résultat ^^

[OnyxK]

Bouh!

Dragibus: Oui, désolée les espaces, voilà, j'ai testé et cela devrait être correct ^^

CSS

Code:

 /** le premier onglet par défaut **/
        .onglet
        {
                display:inline-block; /* c'est pour ordonner au texte de rester sur la même ligne */
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid #A5714C; /* une bordure de un pixel */
                cursor:pointer;
            color: #A1674E; /* couleur du premier onglet */
            -moz-border-radius: 10px; /* les bordures arrondies*/
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px; /* la taille du texte */
            margin-left: 20px; /* on le décolle un peu de la partie gauche */
        }
      
      /** les onglets à l'état normal **/
        .onglet_0
        {
                background:#FEE3A2; /* la couleur du fond */
                border-bottom:1px solid #A5714C; /* la couleur de la bordure en bas*/
            color : #A1674E;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px;
            
        }
      
      /** les onglets quand on passe la souris dessus **/
        .onglet_1
        {
                background:#FEE3A2;
                border-bottom:0px solid #A5714C;
                padding-bottom:4px;
            color: #A1674E;
            text-shadow: 0px 0px 2px #A1674E;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            font-size: 32px;
            
        }
      
      /** code pour le contenu des onglets en général **/
        .contenu_onglet
        {
                background-color:#FEE3A2;
                border:1px solid #A5714C;
                margin-top:-1px;
                padding:5px;
                display:none;
            width: 75%; /* la largeur générale du contenu des onglets */
            height: 430px; /* la longueur général du contenu des onglets */
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
      
      /** le code pour le nom du forum mais aussi tous les titres des onglets**/
      .nom_forum {
      
      color: #fff; /* la couleur du texte */
      text-shadow: 0px 0px 3px #fff; /* une petite ombre*/
      font-size: 25px;
      padding: 3px;
      text-align: center; /* le texte est centré*/
      background-color: #EABB6A;
      border:2px solid #A5714C;}
    
    /** les propriétés communes pour tous les blocs comme la couleur du fond, la bordure etc**/
    .fond_blocs {
    background-color: #EABB6A;
    color: #000;
    border: 2px solid #A5714C;
    padding: 5px; /* on met une petite marge intérieure*/}
    
    /** le code spécifique pour le bloc du contexte **/
    .bloc_contexte {
    width: 250px;
    height: 200px;
    text-align: justify; /* on justifie le texte */
    font-size: 12px;}
    
/** une petite bordure autour de toutes les images **/    
    .bordure {
      border:2px solid #A5714C; /* la bordure*/
      -moz-box-shadow: 0px 0px 2px #000; /* un effet d'ombrage */
      -webkit-box-shadow: 0px 0px 2px #000;
      box-shadow: 0px 0px 2px #000;}
      
      /** la navigation à l'état normal **/
#navigation a:link, #navigation a:visited, #navigation a:active {
width: 250px;
height: 15px;
font-style: Georgia; /* la famille du texte */
font-size: 20px;
text-align: center;
padding: 2px;
color: #80461C; /* la couleur */
line-height: 13px;
display: block; /* on aligne les liens */
text-transform: capitalize;}

/** la navigation quand on passe la souris dessus **/
#navigation a:hover {
color: #04F4333 ;
font-size: 20px;
text-shadow: 0px 0px 2px #A5714C;
}

/** le code pour le bloc de nouveautés **/
.bloc_news {
 width: 270px;
 height: 280px;
 text-align: center;
 font-size: 12px; }
 
/** le code pour le membre du mois **/
 .membre {
 
font-size: 15px;
 padding: 2px;
 text-align: justify;}
 
/** le code pour la partie texte dans l'onglet nouveautés **/
 .bloc_joindre {
 
width: 230px;
 height: 120px;
 text-align: justify;
 font-size: 12px;}
 
/** le code du bloc météo **/
 .bloc_meteo {
 width: 200px;
 font-size: 15px;}
 
     /* infobulle*/
.thumbnail{position: relative;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail .tstaff{
position: absolute;
background-color: #EABB6A; /* la couleur du fond */
padding: 10px;
left: -1000px;
visibility: hidden;
color: #000000;
-webkit-box-shadow: 0px 3px 2px #000;
-moz-box-shadow: 0px 3px 2px #000;
box-shadow: 0px 3px 2px #000;
font-size:1em;
}

.thumbnail .tstaff img{border: 1px groove;}

.thumbnail:hover .tstaff{
visibility: visible;
top:-10px;
left: 0px;
width: 150px; /* la largeur de l'infobulle */
height:190px; /* la longueur de l'infobulle*/}
/*fin infobulle*/

img { border: 0px; }
.Style1 {font-size: 9px}

/** le code pour chaque nom de staff dans l'infobulle **/
 .nom_bull {
 color: #fff;
 text-shadow: 0px 0px 2px #fff;
 font-size: 18px;}

/** le code de la présentation du staff dans l'infobulle **/
 .presentation {
 margin-top: 5px;
 margin-bottom: 5px;
 width: 150px;
 height: 150px;
 text-align: left;
 font-size: 12px;
 overflow: auto; /* on active la barre de défilement*/}

 .jaune {
 color: #f0fc5a;
 padding: 6px; }
 
.rouge {
  color: #de090f;
 padding: 6px;}
 
.bleu {
  color: #2b36d0;
 padding: 6px;}
 
.gris {
  color: #758c86;
 padding: 6px;}
 
.orange {
    color: #dfae48;
 padding: 6px;}
 
.vert {
    color: #39855e;
 padding: 6px;}
 
/** dans l'onglet meutes, ce code concerne la partie des statistiques **/
 .stats {
 text-align: center;
 font-size: 14px;
 padding: 10px;}
 
/** le code des titres dans l'onglet staff et crédits **/
 .titres_pa {
 color: #fff;
 text-shadow: 0px 0px 2px #fff;
 background-color: #D3AF6E;
 padding: 2px;
 font-size: 23px;
  border:2px solid #A5714C;}
 
/** le code pour la partie recrutement **/
 .bloc_recrut{
 width: 200px;
 font-size: 19px;
 height: 180px;}

 /** le code pour la partie crédit**/
 .bloc_credit {
 width: 200px;
 height: 180px;
 padding: 5px;
 text-align: justify;}
 
/** le code pour les deux titres des partenaires, coup de coeur **/
 .titre_partenaire {
  color: #fff;
 text-shadow: 0px 0px 2px #fff;
 background-color: #D3AF6E;
 padding: 2px;
 font-size: 18px;}
 
/** le code pour la partie nos autres partenaires **/
 .bloc_partenaire {
  width: 300px;
  height: 150px;
  overflow: auto;
  padding: 2px;}

/** le code pour activer la barre de défilement dans l'onglet meutes **/
 .meutes {
width: 75%;
height: 430px;
overflow: auto;}


    a.forumlink{
      display:block;
      font-size:14px; /* la taille de la police */
      padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
      text-align:center;
      font-variant:small-caps; /* Les petites capitales */
      color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
      border-bottom:4px double #6a3e1a;
      font-weight:normal; /* Le texte non boldé */
      margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
      }
    
    a.forumlink:hover{
      font-variant:small-caps;
      color:#6e5831 !important;
      border-bottom:4px double #6a3e1a;
      font-weight:bold; /* Texte en  gras */
      display:block;
      }
    
    div.stats_cate{ /* La div ayant pour class 'stats_cate' */
      font-size:12px;
      text-align:right;
      /* border-bottom:#6a3e1a 1px solid; */
      text-decoration : underline;
      border-right:#6a3e1a 3px solid;
      font-style:italic; /* On met le texte en italic */
      color:#6a3e1a;
      /*padding-right:4px;  On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
      margin-bottom:4px;
      /* width:220px;  On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
    /*  margin-left:385px; On place le bloc à droite en le décallant par rapport au bord gauche de la case */
      }
    
    div.description{  /* La div ayant pour class 'description' */
      background-color:#efdec0; /* On lui donne une couleur de fond */
      -moz-border-radius: 10px; /* Réglage des arrondis des coins pour mozilla */
      -webkit-border-radius: 10px; /* Réglage des arrondis des coins pour chrome et safari */
      border-radius:10px; /* réglage des arrondis des coins */
      border:1px solid #b79981;
      width:560px;
      min-height:20px; /* La hauteur minimum */
      font-size:12px;
      text-align:justify;
      text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
      padding:4px;
      margin:4px;
      color:#6e5831;
      }

Page d'accueil:

Code:

<!--         PARTIE STAFF         -->
<h1 class="titres_pa">
 Administration
</h1>
 
<div class="fond_blocs">
 
<table border="0" align="center">
 
<tbody>
 
<tr>
 
<td>
 
<div class="thumbnail">
 <img class="bordure" alt="" src="http://i44.servimg.com/u/f44/14/14/93/78/imagep13.png" style="width: 100px; height: 100px;" />
<div align="center" class="tstaff">
 
<div class="nom_bull">
 Croc Noir / Fidji
</div>
 <div class="presentation">
 Fondatrice et administratrice du forum. N'hésitez pas à lui poser toutes vos questions, elle ne mord pas ( Quoique... ) !
</div><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=1">MP</a> | <a href="http://loupsauvage.forumactif.com/u1">Profil</a>
</div>
 
</div>
 
</td>
 
<td>
 
<div class="thumbnail">
 <img class="bordure" alt="" src="http://i44.servimg.com/u/f44/14/14/93/78/kerine10.jpg" style="width: 100px; height: 100px;" />
<div align="center" class="tstaff">
 
<div class="nom_bull">
 Kerine / Kygan
</div>
 <div class="presentation">
 Elle est devenue administratrice du forum grâce à son dévouement pour celui-ci et la confiance que je lui accorde. C'est quelqu'un de génial ! N'hésitez pas à lui poser vos questions ^^ , mais attention, elle déteste les fautes d'orthographe !
</div><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=48">MP</a> | <a href="http://loupsauvage.forumactif.com/u48">Profil</a>
</div>
 
</div>
 
</td>
 
</tr>
 
<tr>
 
<td>
 
<div class="thumbnail">
 <img class="bordure" alt="" src="http://img11.hostingpics.net/pics/268678kaya.png" style="width: 100px; height: 100px;" />
<div align="center" class="tstaff">
 
<div class="nom_bull">
 Kaya / Uky
</div>
 
<div class="presentation">
 Kaya / Uky est la nouvelle administratrice du forum. C'est ma soeur de coeur ♥ . Je lui fais confiance et elle mérite largement ce rôle ! Félicitation à toi ma Kaya d'amour <3 . Si vous avez une question, vous pouvez lui poser également , elle se fera un plaisir d'y répondre.
</div><a href="http://loupsauvage.forumactif.com/privmsg?mode=post&u=137">MP</a> | <a href="http://loupsauvage.forumactif.com/u137">Profil</a>
</div>
 
</div>
 
</td>
 
<td>
 
<div class="thumbnail">
 <img class="bordure" alt="" src="http://i44.servimg.com/u/f44/14/14/93/78/imagep15.png" style="width: 100px; height: 100px;" />
<div align="center" class="tstaff">
 
<div class="nom_bull">
 Pseudo/ Pseudo
</div>
 
<div class="presentation">
 Petite présentation
</div><a href="LIEN">MP</a> | <a href="LIEN">Profil</a>
</div>
 
</div>
 
</td>
 
</tr>
 
</tbody>
 
</table>
 
</div>
 
</td>
 
<!--         FIN DE LA PARTIE STAFF         -->

Pour mettre une barre de défilement afin de mettre plus que 4 personnes dans ton staff, il faudrait aller dans la div ".fond_blocs" dans le CSS et rajouter ceci:

Code:

overflow: auto;

Par contre, il va peut-être aussi falloir augmenter la largeur du bloc également pour pouvoir y coincer ta barre de défilement ^^

[Dragibus67]

Bonjour OnyxK, merci beaucoup !! C'est vraiment gentil !  

Pour le défilement, j'ai regardé, mais je n'ai pas trouvé le code du bloc ^^' ( Ou c'est pas ça qu'il fallait chercher xD ? )
Mais sinon ce n'est pas grave .

[Dragibus67]

Quelqu'un sait ?

[Dragibus67]

Je trouverais bien un jour xD !
Bonne soirée et merci encore .