Modification d'un codage de catégories

Bien le bonjour à vous, Skaemp :) Voilà, je me tourne vers vous car j'aurais besoin de votre aide pour modifier légèrement un de vos magnifique codage de catégories :) Le codage se trouve à être celui du 9 février 23:32. Voilà, j'aurais aimé que l'image descriptive s'affiche au-dessus du texte de description et que pour les sous-forums, ce soit une seule et même image qui laisse apparaître le texte au survol. J'aurais aimée également qu'il y ait une image de fond sous ces mêmes sous-forums et qu'il y ait un haut et un bas de catégories en images. Pensez-vous que ce soit possible ? Je vous avoue que le codage et moi on est pas trop copains :s

Bonsoir,

Remplacez l'intégralité de la partie CSS par :

Code:: /* BLOC TITRE CATEGORIE */
.tleCAT {
margin:5px auto 0;
width:800px; height:35px; padding:25px 0; text-align:center;
background:url(image.png); /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0;
font-size:32px; text-transform:uppercase; letter-spacing:3px; font-family:Arial;
color:white; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.mdlCAT {
margin:auto;
width:800px; padding:25px 0 10px;
background:#3A3A3A; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:auto; margin-bottom:10px;
width:800px; height:35px;
background:url(image.png); /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:auto; margin-bottom:15px;
width:750px; padding-bottom:12px;
font-family:Arial; text-align:center;
background:rgba(0,0,0,0.5); /* MODIFIABLE */
}
/* BLOC TITRE FORUM */
.tleFRM {
margin:0 auto 12px;
width:735px; padding:10px 0 10px 15px;
text-transform:uppercase; text-align:left;
background:black; /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* TITRE FORUM */
.tleFRM a {
color:white !important; /* MODIFIABLE */
}
/* SURVOL TITRE FORUM */
.tleFRM:hover {
padding-left:45px; width:705px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
display:inline-block; vertical-align:top;
width:155px; height:93px; padding:7px 5px 0; overflow:hidden; border:2px solid;
text-align:center; font-size:10px; text-transform:uppercase;
border-color:rgba(250,250,250,0.3); background:rgba(250,250,250,0.6); /* MODIFIABLE */
}
/* COULEUR TITRE SUJET DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:black !important; /* MODIFIABLE */
}
/* BLOC ICÔNES / NOMBRE SUJETS & MESSAGES FORUM */
.imgFRM {
margin:7px auto 0;
width:150px; height:35px;
}
/* ICÔNES FORUM */
.imgFRM img {
width:150px; height:35px;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
position:absolute;
width:150px; height:25px; padding-top:10px; font-size:9px;
background:rgba(0,0,0,0.8); color:white; /* MODIFIABLE */
opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease;
}
.nbFRM:hover {
opacity:1;
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.avaFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:50px; height:100px; overflow:hidden; border:2px solid;
border-color:rgba(250,250,250,0.3); background:#CCC; /* MODIFIABLE */
}
.avaFRM img {
height:100px;
}
/* BLOC DESCRIPTION FORUM */
.descFRM {
display:inline-block; vertical-align:top;
width:305px; height:90px; padding:5px; overflow-y:auto; border:2px solid;
font-size:10px; text-align:justify; line-height:15px;
border-color:rgba(250,250,250,0.3); background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; margin-top:-5px; margin-left:-5px;
width:315px; height:100px;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.descFRM:hover img {
width:0;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top; margin-left:10px;
width:150px; height:100px; overflow:hidden; border:2px solid;
border-color:rgba(250,250,250,0.3); background:url(image.png); /* MODIFIABLE */
}
.sfFRM div {
position:relative;
width:150px; height:100px; overflow:hidden;
}
/* CONTENU SOUS-FORUMS */
.sfFRM div div {
width:140px; height:90px; padding:5px; overflow-y:auto;
text-align:left; font-size:11px;
background:#191919; /* MODIFIABLE */
transform:translateX(150px); -webkit-transform:translateX(150px);
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sfFRM:hover div div {
transform:translateX(0px); -webkit-transform:translateX(0px);
}
/* LIENS SOUS-FORUMS */
.sfFRM a {
color:white !important; /* MODIFIABLE */
}

Taille des images descriptives : 315*100
Taille de l'image des sous-forums : 155*105

Repérez les class .tleCAT & .btmCAT et remplacez le contenu des background adéquatement :

Code:: background:url(image.png);

Vous pouvez également moduler les hauteurs actuellement établies en modifiant la valeur des height :

Code:: height:35px;

Pour déterminer la hauteur de l'image du haut de catégorie, procédez à une simple opération mathématique qui consiste en la hauteur ajoutée au padding multiplié par 2 : Hauteur image = Height + Padding x 2 soit 35 + 25 * 2 = 85px.

Bonsoir Skaemp :) Merci infiniment à vous pour la modification de votre codage. Et merci pour l'explication de la modification de la hauteur :)