PA Mozaik : ajout d'une mozaik sous Crédits

Bonjour !

Me revoilà avec un nouveau petit problème. Je sens d'avance que la solution implique une histoire de position, absolute, relative etc, et que je vais tomber des nues devant sa simplicité. Cependant, j'ai déjà lu les tutoriels sur tout ce qui est positions et cie mais malheureusement ce n'est pas assez spécifique à mon problème qui inclus de vils "hover".  

J'ai installé la PA Mozaik, et je l'ai personnalisé pour qu'elle convienne davantage aux besoins de mon forum.

J'étais toute fière de m'en sortir seule, jusqu'à ce que je veuille rajouter une nouvelle bande ouvrante, juste sous "Nos Crédits", en bas à droite.
Et là, c'est le drame. J'ai tenté plusieurs approches, avec les positions, les float, les tout ce que vous voulez, et au final, soit c'est bien positionné mais ça s'ouvre dans n'importe quel sens (notamment avec absolute), soit ça ne s'ouvre carrément pas, soit ça se place n'importe où, soit l'image disparaît, soit le texte apparaît sous l'image (Oo), soit les deux bandes à droites s'ouvrent au lieu d'une seule... Et ce n'est qu'un échantillon de mes ratés de ces derniers jours x'DD  

Pour l'instant, voilà ce que j'ai obtenu de moins atroce :

Liens vers fowtest : http://legraphcmal.forumactif.org/

Et en voici le CSS et le HTML (ce qui concerne le "Guide du Nouveau" est normalement intitulé "guide" dans les class et id).

CSS :

Code:

/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/813214fondPA990x485pxPNG.png);
  /*background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);*/
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#mozaik_top:hover .mozaik_titretop
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
/*bandeau à droite = les crédits FERMES*/
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Crédits OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Crédits FERMEE*/
.mozaik_titrecredits
{
  display: block;
  width: 30px;
  height: 238px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Crédits OUVERTE au passage de la souris*/
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Crédits OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238x;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*bandeau en bas à droite = le Guide FERME*/
#mozaik_guide
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 240px;
  margin-right: -30px;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Guide OUVERT au passage de la souris*/
#mozaik_guide:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Guide FERMEE*/
.mozaik_titreguide
{
  display: block;
  width: 30px;
  height: 238px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Guide OUVERTE au passage de la souris*/
#mozaik_guide:hover .mozaik_titreguide
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Guide OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte*/
#mozaik1
{
    position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
    /*box-shadow: 0px 0px 5px #000000;*/
}



/*News*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 315px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 630px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/113953titresannalyse.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/450060titres2volonte.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/460142titres2pouvoir.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/504734titres2creativit.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;
  font-size: 11px;
  color: #595959;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*contenu de mozaik STAFF*/
.staff_mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;

}

/*bloc contenant la description Staff*/
.staff_description
{
  display: block;
  width: 280px;
  margin: auto;
  height: 44px;
  overflow: hidden;
  border: 2px solid transparent;
 
}

/*contenu de la description Staff*/
.staff_description_contenu
{
  position: absolute;
  display: block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  background-color: #DFD1A4;
  font-size: 10px;
  color: #595959;
  text-align: justify;
padding: 0px;
  margin: auto;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
/*description apparaissant au passage de la souris Staff*/
.staff_description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  box-shadow: 0px 0px 5px #000000;
  transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

/*style cellules fusionnées tableau Admin-Modo Staff*/
.td_staff_descr
{
width: 276px;
height: auto;
text-align: center;
}

/*style cellules indiv Profil Staff*/
.td_staff_profil
{
  width: 138px;
  height:auto;
  padding-right: 7px;
  text-align: right;
}
/*style cellules indiv MP Staff*/
.td_staff_mp
{
  width: 138px;
  height:auto;
  padding-left: 7px;
  text-align: left;
}


/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.mozaik_predef
{
  clear: both;
  display: block;
  height: 60px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.mozaik_predef:hover
{
  display: block;
  height: 60px;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}

HTML :

Code:

 
<div id="mozaik">
                                                                                                                                                                                                                                        
 <div id="mozaik_top">
                                                                                                                           <span class="mozaik_titretop"><img src="http://img15.hostingpics.net/pics/612828topsite.png" alt="Top sites et Partenaires" /></span>                                                                                                                      
 <div class="mozaik_contenu2">
                                                                                                                          Votez pour nous !<br />    <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a>    <br /><br />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></a>                                                                                                                    
 </div>
                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                      
 <div id="mozaik_credits">
                                                                                                                       <span class="mozaik_titrecredits"><img src="http://img15.hostingpics.net/pics/603093crdits.png" alt="Nos Crédits" /></span>                                                                                                                      
 <div class="mozaik_contenu3">
                                                                                                                          Nous remercions tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <br />    Cette page d'accueil a été réalisée par Sparrow-style, prise sur <a href="http://www.never-utopia.com">Never-Utopia</a>.<br /><br />    (c) merci de respecter le travail de ces personnes.                                                                                                                      
 </div>
                                                                                                                                                                                                                                              
 </div>
 <div id="mozaik_guide">
                                                                                                                       <span class="mozaik_titreguide"><img src="http://img11.hostingpics.net/pics/301667guidedunouveau.png" alt="Guide" /></span>                                                                                                                      
 <div class="mozaik_contenu3">
                                                                                                                         LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS                                                                                                                      
 </div>
                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                      
 <div id="mozaik_accueil">
                                                                                                                                                                                                                                            
 <div id="mozaik1">
                                                                                                                                                                                                                                                  
 <div class="mozaik_titre1">
                                                                                                                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                                  
 <div class="mozaik_contenu">
                                                                                                                             Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                                                                                                              
 </div>
                                                                                                                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                            
 <div id="mozaik2">
                                                                                                                                                                                                                                                  
 <div class="mozaik_titre2">
                                                                                                                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                                  
 <div class="mozaik_contenu">
                                                                                                                                                                                                
 <div class="mozaik_news">
                                                                                                    <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe <span style="text-decoration: line-through;">dans le petit village de thiercelieux</span>... Dormez braves gens !                                                                                    
 </div>
                                                                                                                                                                                                                                                                                                        
 <div class="mozaik_news">
                                                                                                    <span class="mozaik_datenews">09/10/2012</span>Après deux semaines de dur labeur, vos admines préférées ont réussi à installer la nouvelle PA ! Rien ne les arrête ! N'hésitez pas à leur envoyer vos cookies en remerciement ou à commenter dans la place publique.                                            
 </div>
                                                                                      
 <div class="mozaik_news">
                                                                                                    <span class="mozaik_datenews">//info\\</span> Le Staff recrute ! Animateurs, codeurs, responsables de pubs et partenariats... N'hésitez pas à contacter le staff si vous êtes intéressés                                             
 </div>
                                                                                                                                                                                            
 </div>
                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                      
 <div id="mozaik3">
                                                                                                                                                                                                                                                  
 <div class="mozaik_titre3">
                                                                                                                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                                  
 <div class="staff_mozaik_contenu">
                                                                                                  
 <div class="staff_description" style="background-image: url(http://img11.hostingpics.net/pics/941088adminstestneleam2.png); background-repeat: no-repeat; background-position: center;">
                                                                                            
 <div class="staff_description_contenu">
                                                                                      
 <table>
                                                                                              
 <tbody>
                                                                                          
 <tr>
                                                                                                        
 <td colspan="2" class="td_staff_descr">
                                                     Admine, Chevalier membrivore connue sous le nom de Terreur des Cookies.                                                
 </td>
                                                                                                    
 </tr>
                                                                                                
 <tr>
                                                                                                    
 <td class="td_staff_profil">
                                                     <a href="http://ewilan.forumactif.fr/u363">Profil</a>                                                  
 </td>
                                                                                                                
 <td class="td_staff_mp">
                                                     MP                                                    
 </td>
                                                                                          
 </tr>
                                                                                              
 </tbody>
                                                                                        
 </table>
                                                                                  
 </div>
                                                                                                
 </div>
                                                                          
 <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/852208adminstestnessa.png); background-repeat: no-repeat; background-position: center;">
                                                                                            
 <div class="staff_description_contenu">
                                                                    
 <table>
                                                                          
 <tbody>
                                                                                
 <tr>
                                                                                      
 <td style="width: 276px; height:12px; text-align: center;">
                                               Admine qui a peur des crabes et du vide mais qui fouettera le (ou la) premie(re) qui en rira !                                            
 </td>
                                                                                  
 </tr>
                                                                                
 <tr>
                                                                                      
 <td styl="width: 276px; height: 12px; text-align: center;">
                                               Vous pouvez l'amadouer en lui envoyant une bouteille de rhum par la post >MP< ou simplement l'observer (de loin!) (très loin...) lorsqu'elle fait son footing sur la plage <a href="http://ewilan.forumactif.fr/u390">ici</a>                                          
 </td>
                                                                                  
 </tr>
                                                                            
 </tbody>
                                                                      
 </table>
                                                                
 </div>
                                                                                                
 </div>
                                                                                            
 <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/535485adminstestmyya.png); background-repeat: no-repeat; background-position: center;">
                                                                                            
 <div class="staff_description_contenu">
                                                     Admine, <a href="http://ewilan.forumactif.fr/u681">Profil</a>, MP, Palmares, etc.                                                
 </div>
                                                                                                
 </div>
                                                                                            
 <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522016adminstestdream.png); background-repeat: no-repeat; background-position: center;">
                                                                                            
 <div class="staff_description_contenu">
                                                   Modo, <a href="http://ewilan.forumactif.fr/u908">Profil</a>, MP, Palmares, etc.                                                
 </div>
                                                                                          
 </div>
                                                                                        
 <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522680adminstestkillian.png); background-repeat: no-repeat; background-position: center;">
                                                                                            
 <div class="staff_description_contenu">
                                                 Modo, <a href="http://ewilan.forumactif.fr/u420">Profil</a>, MP, Palmares, etc.                                            
 </div>
                                                                                        
 </div>
                                                                                                                                            
 </div>
                                                                                                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                          
 <div id="mozaik4">
                                                                                                                                                                                                                                                  
 <div class="mozaik_titre4">
                                                                                                                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                                  
 <div class="mozaik_contenu">
                                                                                                                                                   <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_11.jpg" alt="Predef" /></span><span class="predef_nom">Ewilan Gil'Sayan</span>Faut-il vraiment présenter cette dessinatrice sans pareil..?<a href="http://ewilan.forumactif.fr/t2250-ewilan-gil-sayan-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_10.jpg" alt="Predef" /></span><span class="predef_nom">Salim Condo</span>Marchombre de légende.<a href="http://ewilan.forumactif.fr/t2251-salim-condo-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline"><br />Voir sa fiche</a></span>                                                                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                              
 </div>
</div>

Comme vous pouvez le constater, "Guide du Nouveau" se tient à peu près à carreau. Mais "Nos Crédits" l'embarque complètement dès qu'on l'effleure. A cause du float: right de Guide sans doute, mais en l'enlevant Guide s'ouvre alors n'importe comment TT

Une fois de plus je serais très reconnaissante à la (aux) personne(s) qui saura(ont) m'expliquer ma boulette afin que je puisse la corriger et l'appliquer à l'avenir =)
Un grand merci d'avance !

Salut !

Il est mieux d'avoir l'élément en "absolute" dans ce cas là, au moins on est sûr qu'il est indépendant et que le mouvement des autres ne va pas le perturber.
Du coup, à la place de position: relative mets "absolute".
Remplace du coup le margin-right que tu avais par un "margin-left: 958px;"
Et pour le hover (qui va buguer du coup avec ce premier changement), il te faut là aussi retirer le position relative (pas besoin de préciser absolute puisque c'est déjà dans les propriétés en "normal"), et mets un "margin-left: 658px;".

Si ça fait pareil que ce que j'ai eu en test ça devrait régler ton souci^^

Okhmhaka : MER-CI ! C'est parfait !

Et pour le hover (qui va buguer du coup avec ce premier changement), il te faut là aussi retirer le position relative (pas besoin de préciser absolute puisque c'est déjà dans les propriétés en "normal"), et mets un "margin-left: 658px;".

-> OK, c'est là que j'ai planté dans mes tentatives d'absolute TT Dès que le truc s'ouvrait mal je tentais de modifier sa position au lieu de la supprimer simplement... Je ne comprends pas très bien le "658px" par contre ? Ça marche impecc' mais pourquoi 658, il se réfère à quoi ?

En fait, la position absolute permet de dire à un élément qu'il ne tient pas compte du positionnement des suivants. Donc il va se placer par rapport au bloc dans lequel il est, et éventuellement s'il est précédé d'élément en relative il se mettra en dessous mais totalement à gauche. Si tu mets un élément après lui, il agira comme si l'élément en absolute n'existait pas.
J'suis pas sûr d'être clair mais bref XD.

Vu que l'élément se place par défaut le plus à gauche possible dans le bloc qui le contient, il faut le placer manuellement là où tu veux. Et l'avantage de l'absolute, c'est que tu peux mettre les marges que tu veux, les autres éléments ne seront pas affectés. Du coup là, le margin-left c'est une "marge gauche", ce qui fait qu'en gros je met un espace entre lui et sa gauche de 658px (ce qui concrètement le déplace vers la droite ^^). Pour trouver le chiffre, il m'est pas venu tout pile comme ça, j'ai testé (avec un outil firefox permettant de modifier le css sur une page, sans changer sa source bien sûr, juste pour tester) et en bougeant la valeur j'ai pu caler le bloc au pixel près. J'ai fait pareil pour le hover.

J'espère que j'ai pas été trop confus dans mes explications :/

Ok merci, je savais pas si on pouvait trouver aux alentours de 658px par un calcul quelconque ou quoi ^^
Dans mon dernier essai d'absolute avec marges et tutti quanti, le truc se plaçait bien mais s'ouvrait... à droite x'D Ce fut la goutte d'eau.

C'est très clair, encore merci ! =)
J'édite tout de suite en résolu.