Le Deal du moment : -29%
PC portable – MEDION 15,6″ FHD Intel i7 ...
Voir le deal
499.99 €

   :: Espace invités :: Intruders :: Réalisés Voir le sujet précédent Voir le sujet suivant Aller en bas

(template / css) problème disposition catégorie et forums

diluvienne
(template / css) problème disposition catégorie et forums Empty Mar 2 Juil - 11:54
Bonjour !

Je viens vers vous parce que ça fait un petit moment que je suis en galère avec le codage des catégories et forums de mon forum. J'ai fait pas mal de tests, j'ai essayé de démanteler les éléments du template en question, et regardé certains de vos codes en libre service pour voir comment c'était fichu, mais rien à faire… Je me suis fait un schéma pour m'aider, je le partage pour que vous voyez un peu mieux ce que j'aimerais faire !

Voilà la disposition que j'aimerais avoir
Voilà ce que j'ai

Alors, problème n°1 : j'ai placé les liens des sous-forums sous le bloc de description des forums, ils n'apparaissent pas, je ne comprends pas pourquoi... j'ai sûrement dû trop toucher aux codes et me perdre dans mes erreurs...

Problème n°2 : je ne sais  absolument pas comment ajouter l'image de la description des sous-forums entre le bloc de description et le bloc avec les statistiques et le dernier message (comme sur le schéma). Aussi, petite précision, j'aimerai mettre une image de description pour la partie RPG, mais pas pour toute la partie hors-jeu, donc j'imagine que la "div" qui contient l'image restera vide pour la partie hors-jeu ?

Voilà, j'vous mets le template et la partie du CSS en question à la suite, en espérant trouver solution à mon problème. D'avance merci !

Template index_box
Code:
     <table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>
 
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
 
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="bloclinksFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="boxDESC"><div class=".descFRM img"></div></div><div class="boxIIFRM">{catrow.forumrow.TOPICS} sujets/{catrow.forumrow.POSTS} réponses </br>{catrow.forumrow.LAST_POST}</div></div></div>
   


<!-- END forumrow -->
 
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
 
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->
    <!-- CODAGE PAR SKAEMP / CCCRUSH -->


CSS
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:10px auto;
width:800px; padding:10px 0;  
background:grey; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0 auto;
padding-left:10px; text-align:left; font-size:20px; text-transform:lowercase; letter-spacing:3px; font-family:Times New Roman;
color:white; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:0 auto 10px;
text-align:center; font-family:Arial;
}
/* BLOC TITRE FORUM / DESCRIPTION FORUM / LIENS SOUS-FORUMS */
.boxFRM {
display:inline-block; vertical-align:top;
width:595px; height:100px; overflow:hidden;
}
/* BLOC TITRE FORUM */
.tleFRM {
display:inline-block; vertical-align:top;
width:500px; height:15px; padding:5px 0 5px 10px; margin:0;
text-align:left; font-size:12px; font-weight:bold; text-transform:uppercase;
background:; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a {
color:grey, text-align:left; !important; /* MODIFIABLE */
}

/* DESCRIPTION FORUM */
.descFRM {
width:500px; height:65px; padding:5px; overflow-y:auto;
text-align:justify; font-size:11px; line-height:16px;
background:rgba(250,250,250,0.6); color:black; /* MODIFIABLE */
}

/* BLOC LIENS SOUS-FORUMS */
.bloclinksFRM{
display:inline-block; vertical-align:top;
width:500px; height:15px; padding:5px 0 5px 10px;
text-align:left; font-size:12px; font-weight:bold; text-transform:lowercase;
background:; /* MODIFIABLE */
}

/* BLOC IMAGE DESCRIPTIVE FORUM */
.boxDESC {
display:inline-block; vertical-align:top;
width:130px; height:100px;
background:#191919; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.boxDESC img {
position:absolute; margin-left:-125px; margin-top:-98px;
width:100px; height:200px;
}

/* BLOC DERNIER MESSAGE & STATS */
.boxIIFRM {
display:inline-block; vertical-align:top;
width:125px;height:100px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM {
  display:inline-block;
width:125px; height:80px; padding:0 5px; border-radius:10px 10px 0 0; overflow:hidden;
text-align:center; font-size:11px; text-transform:uppercase; line-height:14px;
background:rgba(250,250,250,0.8); color:black; /* MODIFIABLE */
}
Revenir en haut Aller en bas
Skaemp
(template / css) problème disposition catégorie et forums Empty Mar 2 Juil - 19:25
Bonsoir,

Avez-vous effectué ces expérimentations vous-même ou une personne tierce vous a-t-elle proposé ce travail en mon nom ?

Remplacez l'intégralité du template index_box par :
Code:
    <table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <span class="gensmall">{LAST_VISIT_DATE}<br />
     {CURRENT_TIME}<br />
     </span>
     <!-- END switch_user_logged_in -->
     <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
     </td>
     <td class="gensmall" align="right" valign="bottom"><!-- BEGIN switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>
 
 <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

     <!-- BEGIN cathead -->
     <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
    <div class="FRM"><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="boxDESC"></div><div class="lmsgFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets  - {catrow.forumrow.POSTS} messages</div>{catrow.forumrow.LAST_POST}</div></div>
     <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
 
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->
 

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:10px auto;
width:800px; padding:10px 0;  
background:#F4D100; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0 auto; padding-left:10px;
text-align:left; font-size:20px; text-transform:lowercase; letter-spacing:3px; font-family:Times New Roman;
color:white; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:0 auto 10px; width:800px;
text-align:center; font-family:Arial;
}
/* BLOC TITRE / DESCRIPTION / SOUS-FORUMS */
.boxFRM {
display:inline-block; vertical-align:middle;
width:500px; height:130px; text-align:left;
}
/* BLOC TITRE FORUM */
.tleFRM {
height:15px;
text-align:left; font-size:12px; font-weight:bold; text-transform:uppercase;
background:none; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a {
color:#F4D100; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
margin:5px 0;
width:495px; height:90px; padding-right:5px; overflow-y:auto;
text-align:justify; font-size:11px; line-height:15px;
background:none; color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
width:500px; height:15px; overflow:hidden;
text-align:left; font-size:12px; font-weight:bold; text-transform:lowercase;
background:none; color:#F4D100; /* MODIFIABLE */
}
/* LIENS SOUS-FORUMS */
.sfFRM a {
color:#F4D100; /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
.boxDESC {
margin:0 15px; display:inline-block; vertical-align:middle;
width:130px; height:100px;
background:#191919; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; margin-left:515px; margin-top:-5px;
width:130px; height:100px;
}
/* BLOC DERNIER MESSAGE & STATISTIQUES FORUM */
.lmsgFRM {
display:inline-block; vertical-align:middle;
width:125px; max-height:90px; padding:5px; overflow:hidden;
text-align:center; font-size:11px;
background:none; color:black; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
margin-bottom:10px;
text-align:center; font-size:9px; text-transform:uppercase;
}
/* COULEUR TITRE SUJET DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:#F4D100; /* MODIFIABLE */
}

Instructions :
Placez le lien de votre image [image.png] dans le cadre indiqué
(template / css) problème disposition catégorie et forums IMGDESC

Le bloc de l'image descriptive demeurera effectivement. Vous pouvez toutefois modifier sa couleur ou le doter d'un arrière plan [background:url(image.png);] grâce à la class .boxDESC via votre partie CSS.
Revenir en haut Aller en bas
diluvienne
(template / css) problème disposition catégorie et forums Empty Ven 5 Juil - 16:36
Bonjour,
non ne vous inquiétez pas, c'est bien moi qui ait bidouillé à partir d'un de vos codes en libre service, d'où le crédit à la fin du template. Tout marche superbement bien, j'ai juste oublié d'ajouter l'image pour la statut du forum (nouveau / verrouillé etc), j'ai donc ajouté l'attribut en question ("FORUM_FOLDER_IMG") dans le template, seulement voilà, tout se décale vers la gauche, même en ayant remanier la largeur du bloc de description... Je ne comprends pas, est-ce que ça viendrait des margin ou padding ?

Voilà ce que j'ai : https://i.imgur.com/HuMW3tn.png
Revenir en haut Aller en bas
Skaemp
(template / css) problème disposition catégorie et forums Empty Ven 5 Juil - 21:40
Template :
Code:
    <table width="800px" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom">
    <!-- BEGIN switch_user_logged_in -->
    <span class="gensmall">{LAST_VISIT_DATE}<br />
    {CURRENT_TIME}<br />
    </span>
    <!-- END switch_user_logged_in -->
    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom"><!-- BEGIN switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
    <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
    <!-- END switch_user_logged_in -->
    <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
    </tr>
    </table>
 
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>
    <!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
   
    <!-- BEGIN forumrow -->
    <div class="FRM"><img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="boxFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="descFRM">{catrow.forumrow.FORUM_DESC}</div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="boxDESC"></div><div class="lmsgFRM"><div class="nbFRM">{catrow.forumrow.TOPICS} sujets  - {catrow.forumrow.POSTS} messages</div>{catrow.forumrow.LAST_POST}</div></div>
    <!-- END forumrow -->
   
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
 
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

Partie CSS :
Code:
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:10px auto;
width:800px; padding:10px 0; 
background:#F4D100; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0 auto; padding-left:10px;
text-align:left; font-size:20px; text-transform:lowercase; letter-spacing:3px; font-family:Times New Roman;
color:white; /* MODIFIABLE */
}
/* BLOC FORUM */
.FRM {
margin:0 auto 10px; width:800px;
text-align:center; font-family:Arial;
}
/* ICÔNES FORUM */
.imgFRM {
display:inline-block; vertical-align:middle; margin-right:10px;
width:45px; height:130px;
}
/* BLOC TITRE / DESCRIPTION / SOUS-FORUMS */
.boxFRM {
display:inline-block; vertical-align:middle;
width:445px; height:130px; text-align:left;
}
/* BLOC TITRE FORUM */
.tleFRM {
height:15px;
text-align:left; font-size:12px; font-weight:bold; text-transform:uppercase;
background:none; /* MODIFIABLE */
}
/* TITRE FORUM */
.tleFRM a {
color:#F4D100; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
.descFRM {
margin:5px 0;
width:440px; height:90px; padding-right:5px; overflow-y:auto;
text-align:justify; font-size:11px; line-height:15px;
background:none; color:black; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.sfFRM {
width:445px; height:15px; overflow:hidden;
text-align:left; font-size:12px; font-weight:bold; text-transform:lowercase;
background:none; color:#F4D100; /* MODIFIABLE */
}
/* LIENS SOUS-FORUMS */
.sfFRM a {
color:#F4D100; /* MODIFIABLE */
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
.boxDESC {
margin:0 15px; display:inline-block; vertical-align:middle;
width:130px; height:100px;
background:#191919; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.descFRM img {
position:absolute; margin-left:460px; margin-top:-5px;
width:130px; height:100px;
}
/* BLOC DERNIER MESSAGE & STATISTIQUES FORUM */
.lmsgFRM {
display:inline-block; vertical-align:middle;
width:125px; max-height:90px; padding:5px; overflow:hidden;
text-align:center; font-size:11px;
background:none; color:black; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
margin-bottom:10px;
text-align:center; font-size:9px; text-transform:uppercase;
}
/* COULEUR TITRE SUJET DERNIER MESSAGE FORUM */
.lmsgFRM a {
color:#F4D100; /* MODIFIABLE */

La taille des icônes du forum est actuellement établie à 45*130. Si vous désirez des icônes plus larges, vous devrez réduire le width des class .boxFRM, .descFRM & .sfFRM en conséquence. Il vous faudra également modifier le margin-left appliqué à l'image descriptive via .descFRM img.
Revenir en haut Aller en bas
diluvienne
(template / css) problème disposition catégorie et forums Empty Mar 9 Juil - 14:55
Tour marche très bien, merci beaucoup pour votre aide !
Revenir en haut Aller en bas
Contenu sponsorisé
(template / css) problème disposition catégorie et forums Empty
Revenir en haut Aller en bas
Page 1 sur 1
Vous ne pouvez pas répondre aux sujets dans ce forum