J'ai bousillé les messages

Bonjour à vous qui osez s'aventurer ici :) Alors voilà mon problème... J'ai personnalisé un code dans le libre service pour créer mon forum. Mais comme j'ai pas encore beaucoup d'expérience, j'ai bousillé les couleurs pour la section message... J'aime pas du tout comment ça rend (voir ici.

Voici un schéma de ce que j'aimerais : TADAAAA.

En somme, j'aimerais qu'il y ait un joli contour autour de mon avatar. Que le pseudo et le rang soient déplacés dans le boîte de message (peut-être les boutons d'édition pourraient-il être déplacés dans le bas du message). Et les détails du profil peuvent être mis en-dessous, comme sur le schéma, ou ils peuvent rester en hover.

J'aimais bien le tuto d'Halloween avec ce résultat pour la section profil.

Voici le CSS de mon forum

Code:

body
{
  background-color: #eef2f6; /* lien motif de fond */
  margin: 0;
  letter-spacing: 1px;
}
.bodylinewidth
{
  width: 900px;
  background: #dde5ee; /* couleur de fond interieure */
}
.bodyline
{
  padding: 15px;
}
a:link, a:hover
{
  text-decoration: none !important;
  font-weight: normal !important;
}

/* HEADER ET NAVIGATION */
#navigation
{
  width: 900px;
  margin: auto;
  background: #dde5ee; /* couleur de fond navigation */
  text-align: right;
  padding: 3px 0;
}
#navigation img
{
  display: none;
}
#navigation a.mainmenu
{
  font-family: 'Arial';
  font-size: 11px;
  font-variant: small-caps;
}
#bloc_ban
{
  position: relative;
  z-index: 10;
  width: 900px;
  margin: auto;
  height: 500px;
  overflow: hidden;
  background: url(http://zupimages.net/up/16/32/3cxw.jpg); /* banniere */
  border-bottom: 30px solid #dde5ee; /* bordure sous banniere */
}
#titre_forum
{
  position: relative;
  z-index: 11;
  text-align: center;
  font-family: 'UnifrakturCook', cursive;
  font-size: 45px;
  margin-top: -34px;
  color: #02314B; /* couleur du titre du forum sous la banniere */
  display: none !important;
}
#sous_titre_forum
{
  text-align: center;
  font-family: 'Arial', ;
  font-size: 12px;
  letter-spacing: 2px; /* espacement des lettres du sous-titre */
  color: #02314B; /* couleur du sous-titre du forum */
}


/* COLONNE */
#colonne
{
  position: fixed;
  width: 20%;
  height: 100%;
  top: 0;
  left: 0; /* pour coller a droite mettre right a la place de left */
  background: url(http://zupimages.net/up/16/35/1vix.jpg) bottom left no-repeat #dde5ee; /* couleur et image de fond colonne */
  overflow-x: hidden;
  overflow-y: auto;
}
.colonne_titre /* titre du haut de la colonne */
{
  padding: 5px 0;
  text-align: center;
  font-family: 'UnifrakturCook', cursive;
  color: #02314B;
  font-size: 32px;
}
.colonne_paragraphe /* premier paragraphe de la colonne */
{
  font-size: 11px;
  text-align: justify;
  background: #688ab1;
  padding: 5px;
  font-family: 'Arial';
  color: #eef2f6;
}
.colonne_liens
{
  margin: 20px 0;
}
.colonne_liens a /* mise en forme des liens rapides */
{
  display: block;
  width: 50%;
  background: #688ab1;
  margin: 5px 0;
  padding: 3px 3px;
  color: #eef2f6;
  font-size: 10px;
  font-variant: small-caps;
  font-family: 'Arial';
  text-shadow: 0px 0px 0px #606736;
  border-left: 5px solid #688ab1;
  transition: 1s;
}
.colonne_liens a:hover
{
  border-left: 5px solid #eef2f6;
  text-shadow: 0px 0px 2px #ffffff;
}
.colonne_savoir /* bloc savoir au milieu de la colonne */
{
  width: 50%;
  margin: auto;
  max-height: 30%;
  overflow: auto;
  background: #688ab1;
  border: 3px double white;
  opacity: 0.9;
}
.savoir_titre /* titre du bloc savoir */
{
  text-align: center;
  font-family: 'Aladin', cursive;
  color: #eef2f6;
  font-size: 18px;
}
.savoir_contenu /* contenu du bloc savoir */
{
  text-align: justify;
  font-size: 11px;
  padding: 10px;
  font-family: 'Arial';
  color: #eef2f6;
}

/* --------------------------------- CATEGORIES --------------------------------- */


/* SOUS-FORUM CACHES */

.sf
{
  width: 100px;
  height: 170px;
  overflow: hidden;
  position: relative;
  top: 0em;
  background-color: #cdd8e5;
}
.sf_img
{
  position: relative;
  z-index: 2;
  width: 100px;
  height: 170px;
  margin-left: 0px;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
}
.sf:hover .sf_img
{
  margin-left: 400px;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  opacity: 0.9;
}    
.sf_description
{
  position: relative;
  z-index: 1;
  width: 100px;
  height: 170px;
  margin-top: -175px;
  font-size: 11px;
  color: #02314b;
  padding: 5px;
  overflow: auto;
}
.sf_description a
{
  color: #02314b;
}
.sf_description a:hover
{
  color: #0470af;
  text-decoration: none !important;
}

/*** FONDS GENERAUX ***/

/* Fond titre catégorie */
.cate_titre
{
  width: 780px;
  height: 35px;
  margin: auto;
}

/* Mise en forme nom de catégorie */
h2
{
  font-size: 45px;
  font-family: 'UnifrakturCook', cursive;
  color: #02314b;
  text-align: center;
}

/* Fond du forum */
.categorie
{
  background-color: #bccbdc;
  width: 750px;
}


/*** MISE EN FORME DES FORUM ***/

/* Mise en forme du texte des titres de forum */
.forumlink
{
  position: relative;
  left: 2em;
  top: 0.6em;
  color: #02314b !important;
  font-family: 'UnifrakturCook', cursive;
  font-size: 36px !important;
  font-weight: none !important;
  z-index: 1;
}

.forumlink:hover
{
  color: white !important;
  text-decoration: none !important;
}

.forumlink a
{
  font-size: 36px;
  width: 500px;
}

/* Mise en forme de la description */
.description
{
  width: 300px;
  height: 100px;
  overflow: auto;
  font-size: 11px;
  text-align: justify;
  background-color: #cdd8e5;
  color: #007BAA;
  border-top: 5px solid #007BAA;
  padding: 15px;
}

/*** DERNIERS MESSAGES ***/
.derniers_messages
{
  text-align: center;
  font-size: 11px;
}

.derniers_messages a
{
  color: #007BAA !important;
}

/*--------------------------------- FIN CATEGORIES --------------------------------- */

/* TITRES ZONES DE SAISIES ET BOUTONS */

input, select, textarea /* mise en forme des zones de saisie */
{
  background: #eef2f6;
  padding: 3px;
  box-shadow: 0px 0px 0px #02314b;
  border: none;
  transition: 500ms;
}
input:focus, select:focus, textarea:focus /* mise en forme des zones de saisie selectionnees */
{
  box-shadow: 0px 0px 3px #02314b;
}
.mainoption, .liteoption /* mise en forme des boutons */
{
  background: #eef2f6;
  color: #6A706A;
  cursor: pointer;
  transition: 500ms;
}
.mainoption:hover, .liteoption:hover /* mise en forme des boutons au survol */
{
  color: #02314b;
}
td.catHead, th.thHead, td.catSides, td.spaceRow, th.thSides, th, th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop
/* mise en forme des titres de tableaux */
{
  text-align: center;
  font-family: 'Arial';
  color: #02314b;
  font-size: 12px;
  font-weight: normal;
}
h1.pagetitle /* mise en forme de titre */
{
  font-size: 28px;
  letter-spacing: 2px;
  font-weight: normal;
  font-family: 'UnifrakturCook', cursive;
}
.cattitle, .secondarytitle h2 /* mise en forme de titre */
{
  font-size: 28px;
  font-weight: normal;
  font-family: 'UnifrakturCook', cursive;
}
/* PROFIL */
.profil
{
  width: 225px;
  margin: 5px;
}
.rang /* mise en forme du rang texte penche sur le cote de l avatar */
{
  position: absolute;
  height: 20px;
  width: 320px;
  transform: rotate(-90deg);
  text-align: center;
  font-family: 'Arial';
  font-size: 11px;
  letter-spacing: 5px;
  line-height: 9px;
  text-shadow: 0px 0px 3px #FFFFFF;
  margin-left: -170px;
  margin-top: 153px;
}
.pseudo /* mise en forme du pseudo */
{
  width: 206px;
  background: #89a4c2;
  font-family: 'Georgia';
  font-size: 20px;
  font-variant: small-caps;
  text-align: center;
  letter-spacing: 3px; /* espacement des lettres */
}
.pseudo strong
{
  font-weight: normal !important;
}
.ava_img
{
  width: 200px; /* taille emplacement avatar */
  height: 320px; /* taille emplacement avatar */
  overflow: hidden;
  background: #dde5ee;
  border: 5px solid #02314b; /* bordure avatar */
}
.profil_bloc
{
  position: absolute;
  width: 200px;
  height: 320px;
  margin-top: 3px;
  margin-left: 3px;
  overflow: hidden;
}
.profil_contenu /* mise en forme du contenu du profil */
{
  position: absolute;
  width: 190px;
  height: 310px;
  background: #eef2f6; /* couleur de fond du bloc info profil */
  overflow: auto;
  opacity: 0;
  padding: 5px;
  font-family: 'Arial', ;
  font-size: 12px;
  margin-top: 310px;
  margin-left: 190px;
  transition: 1s; /* duree de la transition apparition du profil */
}
.profil:hover .profil_contenu
{
  width: 190px;
  height: 310px;
  opacity: 0.9;
  margin-left: 0;
  margin-top: 0;
}
.post_date /* mise en forme de la date du message */
{
  font-family: 'Arial', ;
  font-size: 11px;
  letter-spacing: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #131311;
}
.message_contenu /* mise en forme des messages */
{
  padding: 20px; /* marge interieure */
  text-align: justify; /* texte justifie */
  font-size: 14px; /* taille de police */
  line-height: 14px; /* hauteur de ligne */
}
.code, .quote, .spoiler_closed, .spoiler_content
{
  padding: 5px;
  background: #eef2f6;
  border: 3px double #02314b;
  color: #02314b;
}

/* EDITEUR DE MESSAGE */
.sceditor-container /* contenu editeur */
{
  background: #dde5ee !important;
  border: none !important;
}
.sceditor-toolbar /* barre contenant les boutons */
{
  background: #dde5ee !important;
  border-bottom: 2px solid #272625 !important;
}
.sceditor-group /* groupes de boutons */
{
  background: #dde5ee !important;
  border-bottom: 1px solid #000000 !important;
}
a.sceditor-button /* boutons */
{
  background: #272625 !important;
}
.sceditor-container textarea, .sceditor-container iframe /* zone de saisie texte */
{
  padding: 5px !important;
  color: #57554C !important;
  font-size: 11px !important;
}
    /************************************************************ DÉBUT QEEL ************************************************************/

    /*Fond du qeel*/
    #qeel {
      position: relative;
      width: 800px;
      height: 680px;
      margin: auto;
      margin-top: 50px;
      margin-bottom: 50px;
      background: #cdd8e5 url('http://zupimages.net/up/16/25/zp3v.jpg') no-repeat top center;
      border-radius: 20px;
      box-shadow: 0px 0px 10px #02314b;
      opacity: 0.8;
    }


    /*Titre du qeel*/
    #qeel_title {
      color: #eef2f6;
      font-size: 44px;
      font-family: 'UnifrakturCook', cursive;
      text-shadow: 1px 1px 2px #000000;
      padding-left: 15px;
    }


    /*Carré des informations sur les membres*/
    #qeel_info_members {
      position: absolute;
      top: 25px;
      left: 25px;
      width: 320px;
      height: 290px;
      background-color: rgba(20, 19, 19, 0.6);
      border-radius: 10px;
      box-shadow: 0px 0px 3px #02314b;
      padding: 10px;
      color: #c9c7be;
      font-size: 13px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: left;
    }


    /*Mise en forme des listes des membres connectés*/
    #userlists {
      margin-top: 5px;
      height: 205px;
      overflow: auto;
    }
    #totalconn {
      margin-top: 5px;
    }
    #totalconn .row1{
      background: transparent;
      vertical-align: top;
    }
    #totalconn .gensmall {
      color: #c9c7be;
      font-size: 13px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: left;
    }


    /*Section des groupes*/
    #qeel_bottom {
      position: absolute;
      top: 418px;
      left: 0px;
      width: 800px;
      text-align: center;
    }


    /*Nom des groupes*/
    .qeelonglet {
      display: inline-block;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 2px;
      height: 40px;
      font-size: 30px;
      font-family: 'UnifrakturCook', cursive;
      letter-spacing: 1px;
      text-shadow: 0px 0px 3px #000000;
      opacity: 0.6;
    }
    /*Groupe au survol*/
    .qeelonglet_0:hover {
      cursor: pointer;
      opacity: 0.8;
    }
    /*Groupe actif*/
    .qeelonglet_1 {
      opacity: 1;
    }


    /*Description des groupes*/
    .contenu_qeelonglet {
      position: relative;
      width: 800px;
      height: 200px;
      margin-top: 20px;
      display: none;
    }
    /*Images des groupes*/
    .contenu_qeelonglet img {
      width: 800px;
      height: 200px;
      border-radius: 0px 0px 20px 20px;
    }
    /*Descriptions des groupes*/
    .qeel_desc {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 780px;
      height: 180px;
      background-color: rgba(20, 19, 19, 0.6);
      border-radius: 0px 0px 20px 20px;
      padding: 10px;
      color: #c9c7be;
      font-size: 13px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: justify;
      overflow: auto;
      transition: 0.5s;
      opacity: 0;
    }
    /*Descriptions des groupes au survol*/
    .contenu_qeelonglet:hover .qeel_desc {
      opacity: 1;
    }

    /************************************************************ FIN QEEL ************************************************************/

/* SUPPRESSION DES BORDURES */

    .row3Right, th
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }

Merci à l'avance à l'âme charitable qui prendra quelques moments de son temps pour m'aider ^^

Bonjour, finalement j'ai continué a jouer avec les codes et j'ai réussi à colmater les choses! Ce sujet peut donc être archivé, merci ^^