Problème code catégories et forums

Salut à vous, les codeurs!

Je suis à personnaliser un thème que j'ai pris dans le libre service et j'aimerais en quelque sorte inverser certains éléments pour l'aspect des catégories et des forums... En ce moment, ça ressemble à ça. Mais j'aimerais modifier le code pour que ça ressemble plutôt à ça.

Je n'ose pas trop jouer dans le code, puisque je semble avoir un don pour déformer mon forum quand je m'y mets...

Voici le lien vers mon forum.

Et le CSS complet auquel j'ai apporté quelques modifications...

Code:

body
{
  background: url(http://img11.hostingpics.net/pics/789672texturefond303.jpg); /* lien motif de fond */
  margin: 0;
  letter-spacing: 1px;
}
.bodylinewidth
{
  width: 900px;
  background: #1f1e1d; /* couleur de fond interieure */
}
.bodyline
{
  padding: 0;
}
a:link, a:hover
{
  text-decoration: none !important;
  font-weight: normal !important;
}

/* HEADER ET NAVIGATION */
#navigation
{
  width: 900px;
  margin: auto;
  background: #1f1e1d; /* 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/sniv.jpg); /* banniere */
  border-bottom: 30px solid #131311; /* bordure sous banniere */
}
#render1
{
  position: absolute;
  width: 400px;
  height: 500px;
  background: url(http://img11.hostingpics.net/pics/169099render1.png); /* render de gauche */
  margin-left: -150px; /* decalage du render */
  transition: 1s;
}
#render2
{
  position: absolute;
  width: 400px;
  height: 500px;
  background: url(http://img11.hostingpics.net/pics/755438render2.png); /* render de droite */
  margin-left: 730px; /* decalage du render */
  transition: 1s;
}
#bloc_ban:hover #render1
{
  margin-left: -100px; /* decalage du render gauche au survol de banniere - pour pas de decalage mettre la meme marge que plus haut */
  transition: 1s;
}
#bloc_ban:hover #render2
{
  margin-left: 680px; /* decalage du render gauche au survol de banniere - pour pas de decalage mettre la meme marge que plus haut */
  transition: 1s;
}
#render1:hover
{
  margin-left: 0px !important; /* decalage du render gauche au survol de lui-meme - pour pas de decalage mettre la meme marge que plus haut */
  transition: 2s !important;
}
#render2:hover
{
  margin-left: 580px !important; /* decalage du render gauche au survol de lui-meme - pour pas de decalage mettre la meme marge que plus haut */
  transition: 2s !important;
}
/* toutes les marges des renders sont a adapter selon leur taille */
#render1_bloc, #render2_bloc
{
  position: absolute;
  width: 220px;
  height: 240px;
  background: #131311; /* couleur de fond du bloc apparaissant au survol des deux renders */
  border: 3px double #606736; /* bordures des cadres textes sur les renders */
  opacity: 0;
  transform: rotate(-20deg);
  margin-left: 80px;
  margin-top: 240px;
  transition-duration: 2s;
}
#render1:hover #render1_bloc, #render2:hover #render2_bloc
{
  opacity: 0.9;
  transform: rotate(0deg);
  transition-duration: 1s;
  transition-delay: 1s;
}
#titre_forum
{
  position: relative;
  z-index: 11;
  text-align: center;
  font-family: 'Rock Salt', cursive;
  font-size: 28px;
  margin-top: -34px;
  color: #606736; /* couleur du titre du forum sous la banniere */
}
#sous_titre_forum
{
  text-align: center;
  font-family: 'Arial', ;
  font-size: 12px;
  letter-spacing: 10px; /* espacement des lettres du sous-titre */
  color: #968888; /* couleur du sous-titre du forum */
}
.ban_titre /* mise en forme des titres des cadres textes apparaissant sur les renders */
{
  text-align: center;
  font-family: 'Playfair Display SC', serif;
  color: #606736;
  font-size: 18px;
}
.ban_contenu /* mise en forme du contenu texte des cadres apparaissant sur les renders */
{
  width: 200px;
  margin: auto;
  height: 200px;
  overflow: auto;
  font-size: 10px;
  text-align: justify;
}

/* 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://img11.hostingpics.net/pics/158208fondcolonne.jpg) bottom left no-repeat #1f1e1d; /* couleur et image de fond colonne */
  overflow-x: hidden;
  overflow-y: auto;
}
.colonne_titre /* titre du haut de la colonne */
{
  padding: 10px 0;
  text-align: center;
  font-family: 'Playfair Display SC', serif;
  color: #606736;
  font-size: 18px;
}
.colonne_paragraphe /* premier paragraphe de la colonne */
{
  font-size: 11px;
  text-align: justify;
  background: #131311;
  padding: 5px;
  font-family: 'Arial';
  color: #968888;
}
.colonne_liens
{
  margin: 20px 0;
}
.colonne_liens a /* mise en forme des liens rapides */
{
  display: block;
  width: 50%;
  background: #131311;
  margin: 5px 0;
  padding: 3px 3px;
  color: #968888;
  font-size: 10px;
  font-variant: small-caps;
  font-family: 'Arial';
  text-shadow: 0px 0px 0px #606736;
  border-left: 5px solid #131311;
  transition: 1s;
}
.colonne_liens a:hover
{
  border-left: 5px solid #606736;
  text-shadow: 0px 0px 2px #606736;
}
.colonne_savoir /* bloc savoir au milieu de la colonne */
{
  width: 50%;
  margin: auto;
  max-height: 30%;
  overflow: auto;
  background: #131311;
  border: 3px double #606736;
  opacity: 0.9;
}
.savoir_titre /* titre du bloc savoir */
{
  text-align: center;
  font-family: 'Playfair Display SC', serif;
  color: #606736;
  font-size: 18px;
}
.savoir_contenu /* contenu du bloc savoir */
{
  text-align: justify;
  font-size: 11px;
  padding: 10px;
  font-family: 'Arial';
  color: #968888;
}

/* CATEGORIES */

.forumline /* mise en forme de tout les blocs cadres interieurs */
{
  width: 95%;
  margin: 20px auto !important;
  background: #272625;
  padding: 10px;
}
.forumline2 /* mise en forme des blocs des categories */
{
  width: 93%;
  margin: 20px auto !important;
  background: #272625;
  padding: 10px;
}
.categorie_titre h2 /* mise en forme du titre de categorie */
{
  dispay: block;
  font-family: 'Rock Salt', cursive;
  font-size: 28px;
  text-align: center;
  color: #6A706A;
  font-weight: normal;
  text-shadow: 1px 1px 0px #1f1e1d;
  border-bottom: 1px solid #444341;
  padding-bottom: 2px;
}
.forum_bloc /* mise en forme du bloc forum */
{
  width: 95%;
  height: 120px;
  padding: 10px;
  overflow: hidden;
  margin: 20px auto;
  background: #131311;
  opacity: 0.9; /* opacite du bloc forum - mettre 1 pour le laisser normal */
  transition: 500ms;
}
.forum_bloc:hover
{
  opacity: 1;
}
.forum_left /* partie gauche du bloc forum avec description et effet coulissant */
{
  position: absolute;
  width: 400px;
  height: 120px;
  overflow: hidden;
}
.illu /* image de description */
{
  position: absolute;
  z-index: 1;
}
.description_contenu /* contenu de description */
{
  position: absolute;
  z-index: 2;
  margin-left: -400px;
  background: #131311;
  width: 400px;
  height: 75px; /* hauteur de description */
  overflow: auto;
  text-align: justify;
  font-family: 'Arial', ;
  font-size: 11px;
  letter-spacing: 2px;
  color: #968888;
  line-height: 10px; /* espace entre les lignes texte */
  padding-bottom: 2px;
  border-bottom: 1px solid #1f1e1d; /* bordures entre description et sousforum */
  transition: 1s;
}
.forum_left:hover .description_contenu, .forum_left:hover .sous_forum
{
  margin-left: 0;
}
.sous_forum /* mise en forme des sous forum */
{
  position: absolute;
  z-index: 2;
  width: 400px;
  height: 43px;
  overflow: auto;
  margin-top: 75px;
  padding-top: 2px;
  margin-left: -400px;
  background: #131311;
  text-align: center;
  transition: 1s;
}
.sous_forum a /* liens des sous forum */
{
  color: #968888;
  font-size: 11px;
  font-family: 'Arial', ;
  text-transform: uppercase;
}
.sous_forum img
{
  vertical-align: middle;
}
.forum_stats /* zone des stats du forum */
{
  position: absolute;
  width: 150px;
  height: 120px;
  text-align: center;
  margin-left: 400px;
  font-family: 'Arial', ;
  font-size: 11px;
  letter-spacing: 6px;
  color: #968888;
}
.stats1 /* mise en forme des chiffres de stats */
{
  display: block;
  font-family: 'Rock Salt', serif;
  font-size: 20px;
}
.forum_right /* partie droite du bloc forum */
{
  position: absolute;
  margin-left: 550px;
  width: 245px;
  text-align: center;
  height: 120px;
  overflow: auto;
}
.forum_name a /* lien vers le forum */
{
  display: block;
  margin-bottom: 15px;
  font-family: 'Rock Salt', cursive;
  font-size: 15px;
  font-weight: normal !important;
  color: #606736 !important;
  opacity: 1;
  transition: 500ms;
}
.forum_name:hover
{
  text-shadow: 0px 0px 4px #606736;
  opacity: 0.8;
  font-weight: bold;
}
.last_mess /* dernier message */
{
  font-family: 'Arial', ;
  font-size: 12px;
}
.forum_icone /* icone old new lock du forum */
{
  position: absolute;
  margin-left: 776px;
  margin-top: 15px;
  border: 5px solid #272625;
  transform: rotate(10deg);
}
/* TITRES ZONES DE SAISIES ET BOUTONS */

input, select, textarea /* mise en forme des zones de saisie */
{
  background: #1f1e1d;
  padding: 3px;
  box-shadow: 0px 0px 0px #606736;
  border: none;
  transition: 500ms;
}
input:focus, select:focus, textarea:focus /* mise en forme des zones de saisie selectionnees */
{
  box-shadow: 0px 0px 3px #606736;
}
.mainoption, .liteoption /* mise en forme des boutons */
{
  background: #131311;
  color: #6A706A;
  cursor: pointer;
  transition: 500ms;
}
.mainoption:hover, .liteoption:hover /* mise en forme des boutons au survol */
{
  color: #606736;
}
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: 'Rock Salt', cursive;
  color: #606736;
  font-size: 28px;
  font-weight: normal;
}
h1.pagetitle /* mise en forme de titre */
{
  font-size: 28px;
  letter-spacing: 2px;
  font-weight: normal;
}
.cattitle, .secondarytitle h2 /* mise en forme de titre */
{
  font-size: 28px;
  font-weight: normal;
}
/* PROFIL */
.profil
{
  width: 200px;
  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 #000000;
  margin-left: -170px;
  margin-top: 153px;
}
.pseudo /* mise en forme du pseudo */
{
  width: 206px;
  background: #131311;
  font-family: 'Playfair Display SC', serif;
  font-size: 24px;
  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: #131311;
  border: 3px double #606736; /* 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: #131311; /* 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: #131311;
  border: 3px double #606736;
  color: #57554C;
}

/* EDITEUR DE MESSAGE */
.sceditor-container /* contenu editeur */
{
  background: #1f1e1d !important;
  border: none !important;
}
.sceditor-toolbar /* barre contenant les boutons */
{
  background: #131311 !important;
  border-bottom: 2px solid #272625 !important;
}
.sceditor-group /* groupes de boutons */
{
  background: #1f1e1d !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;
}

/* QEEL */
.qeel1 /* petit texte */
{
  text-align: center;
  font-family: 'Arial', ;
  font-size: 12px;
  letter-spacing: 5px;
  color: #444341;
}
.qeel2, .qeel3 /* blocs en deux colonnes */
{
  width: 46%;
  height: 120px;
  padding: 10px;
  overflow: auto;
  margin: 20px auto;
  background: #131311;
}
.qeel2
{
  float: left;
}
.qeel3
{
  float: right;
}
.qeel4 /* bloc large */
{
  width: 95%;
  height: 60px;
  padding: 10px;
  overflow: auto;
  margin: 20px auto;
  background: #131311;
  font-size: 12px;
}
.qeel5 /* zone des groupes */
{
  width: 90%;
  text-align: center;
  color: #1f1e1d;
}
.qeel5 a /* groupes liens */
{
  font-family: 'Rock Salt', cursive;
  font-size: 28px;
}
/* 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 pour l'aide que vous m'apporterez, je vous serai infiniment reconnaissante !!

Yo!!

Alors j'ai essayé et ça rend pas trop mal, dis-moi si ça te vas :)


N'hésite pas si tu as des questions où si cela ne fonctionne pas comme tu le souhaite


Ryukaï.

Salut Ryukaï!
Après test et quelques mini modifs de mon côté, je suis très satisfaite du résultat!! Merci beaucoup :)))

Mission accomplie ici!!