Ven 15 Déc - 19:00 | |
|
Sam 16 Déc - 2:15 | Bonjour,
En l'état actuel de la structure, vous ne pouvez obtenir un tel résultat - le débordement du bloc descriptif étant vigoureusement contrôlé.
Une modification est cependant évidemment possible pour peu que vous m'indiquiez vos préférences quant au placement des sous-forums - pour lesquels un nouvel espace devra être dédié, et votre désir de conserver le mouvement de l'image à son survol - l'application d'un effet d'opacité en remplacement pourrait-il vous convenir ? |
|
Dim 17 Déc - 0:27 | Merci beaucoup pour la réponse rapide ! J'avoue ne pas avoir réfléchi aux placements des ss forums, je pensais que le tout n'était pas cumulable. Pour le coup, je m'imaginais les rajouter à la manuellement avec les "liens importants" L'image de description peut être facilement retiré ou mise en opacité. Quant aux ss-forums, je dirais en dessous du cadre de description? Ou en hover du dernier message ou de la description ? Ou à côté des liens importants ? Sincèrement, faites selon votre choix car comme dit plus haut, je ne pensais pas que cela était possible et c'est vraiment un plus.
Encore un énorme merci ! |
|
Dim 17 Déc - 2:45 | 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> <div class="mdlCAT"><!-- END tablehead -->
<!-- BEGIN cathead --> <div class="topCAT"></div> <!-- END cathead --> <!-- BEGIN forumrow --> <div class="blocFRM"><div class="tleFRM"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="FRM"><div id="descFRM">{catrow.forumrow.FORUM_DESC}</div><div id="avaFRM"><!-- BEGIN avatar --><div class="avaFRM">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!-- END avatar --></div><div class="boxLKS"></div><div class="boxFRM"><div class="lmsgFRM"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /><div>{catrow.forumrow.LAST_POST}</div></div><div class="nbFRM">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div></div><div class="sfFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></div> <!-- END forumrow --> <!-- BEGIN catfoot --> <!-- END catfoot --> <!-- BEGIN tablefoot --> </div> <!-- END tablefoot --><!-- END catrow --> Partie CSS : - Code:
-
/* BLOC TITRE CATEGORIE */ .tleCAT { margin:10px auto 0; width:800px; padding:20px 0; text-align:center; border-radius:35px 35px 0 0; background:white; /* MODIFIABLE */ } /* TITRE CATEGORIE */ .tleCAT h2{ margin:0; font-size:32px; text-transform:uppercase; font-family:Arial; color:black; /* MODIFIABLE */ } /* CONTENU CATEGORIE */ .mdlCAT { margin:auto; margin-bottom:5px; width:800px; padding:15px 0 10px; border-radius:0 0 35px 35px; background:#575760; /* MODIFIABLE */ } /* BLOC FORUM */ .blocFRM { margin:auto; width:800px; text-align:center; } /* TITRE FORUM */ .tleFRM a{ color:black !important; /* MODIFIABLE */ transition:all 0.45s linear; -webkit-transition:all 0.45s linear; } /* BORDURE TITRE FORUM */ .tleFRM { margin:auto; margin-bottom:10px; width:750px; padding-bottom:5px; font-family:Arial; text-align:left; font-size:18px; text-transform:uppercase; letter-spacing:5px; border-bottom:5px dotted black; /* MODIFIABLE */ transition:all 0.45s linear; -webkit-transition:all 0.45s linear; } /* SURVOL TITRE FORUM */ .tleFRM:hover a{ color:#A9A9AD !important; /* MODIFIABLE */ } /* BORDURE SURVOL TITRE FORUM */ .tleFRM:hover { width:715px; padding-left:35px; border-color:#A9A9AD; /* MODIFIABLE */ } /* BLOC DESCRIPTION / AVATAR DERNIER POSTEUR / LIENS IMPORTANTS / DERNIER MESSAGE / NOMBRE SUJETS & MESSAGES / SOUS-FORUMS */ .FRM { margin:auto; margin-bottom:15px; width:755px; } /* BLOC DESCRIPTION FORUM */ #descFRM { display:inline-block; vertical-align:top; width:400px; height:100px; overflow:hidden; background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */ } /* DESCRIPTION FORUM */ .descFRM { width:390px !important; height:90px !important; padding:5px !important; overflow:auto !important; font-size:10px; text-align:justify; } /* IMAGE DESCRIPTIVE FORUM */ #descFRM img { position:absolute; z-index:5; margin-left:-200px; width:400px; height:100px; transition:all .65s linear; -webkit-transition:all .65s linear; } #descFRM:hover img { height:0; } /* BLOC AVATAR DERNIER POSTEUR */ #avaFRM { display:inline-block; vertical-align:top; margin:0 10px; width:50px; height:90px; border:5px solid; background:#CCC; border-color:rgba(250,250,250,0.3); /* MODIFIABLE */ } /* AVATAR DERNIER POSTEUR */ .avaFRM { width:50px; height:90px; overflow:hidden; } .avaFRM img { width:60px; } /* BLOC LIENS IMPORTANTS */ .boxLKS { display:inline-block; vertical-align:top; margin-right:10px; width:115px; height:100px; background:rgba(250,250,250,0.5); /* MODIFIABLE */ } .lksFRM { position:absolute; z-index:5; margin-left:480px; width:105px; height:90px; padding:5px; overflow-y:auto; overflow-x:hidden; text-align:center; text-transform:uppercase; font-size:11px; } /* LIENS IMPORTANTS */ .lksFRM a { display:block; padding:2px 0; background:white; color:black; /* MODIFIABLE */ } /* BLOC ICÔNES FORUM / DERNIER MESSAGE FORUM / NOMBRE SUJETS & MESSAGES */ .boxFRM { display:inline-block; vertical-align:top; width:150px; } /* BLOC ICÔNES FORUM / DERNIER MESSAGE FORUM */ .lmsgFRM { margin-bottom:5px; width:150px; height:75px; } /* ICÔNES FORUM */ .imgFRM{ width:150px; height:75px; } /* DERNIER MESSAGE FORUM */ .lmsgFRM div{ position:absolute; margin-top:-75px; width:150px; height:60px; padding-top:15px; text-align:center; font-size:10px; background-color:rgba(250,250,250,0.9); color:black; /* MODIFIABLE */ opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease; } .FRM:hover .lmsgFRM div { opacity:1; } /* NOMBRE SUJETS & MESSAGES FORUM */ .nbFRM { width:150px; height:17px; padding-top:3px; overflow:hidden; text-transform:uppercase; font-size:10px; letter-spacing:-1px; background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */ } /* BLOC SOUS-FORUMS */ .sfFRM { margin:10px auto 0; width:755px; height:auto; font-size:10px; text-align:center; line-height:normal; background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */ } /* LIENS SOUS-FORUMS */ .sfFRM a{ display:inline-block; padding:3px 0; line-height:normal; text-transform:uppercase; color:black !important; /* MODIFIABLE */ } /* SURVOL LIEN SOUS-FORUM */ .sfFRM a:hover { color:#212121 !important; /* MODIFIABLE */ } Instructions : - Code:
-
<!-- LIENS IMPORTANTS --><div class="lksFRM"><!-- I --><a href="..." target="_blank">lien</a><!-- II --><a href="..." target="_blank">lien</a><!-- III --><a href="..." target="_blank">lien</a></div> <!-- DESCRIPTION --><div class="descFRM">Texte descriptif</div> |
|
Dim 17 Déc - 20:41 | C'est génial ! Merci beaucoup ! |
|