Bonjour à tous!
Je fais présentement quelques essais pour la mise en forme des catégories et des forums d'un RPG que je suis en train de construire. J'ai utilisé ce tuto qui a été créé par Halloween, j'ai changé les couleurs et les dimensions des images, mais un problème demeure...
J'aimerais que le forums sous divisé en plusieurs catégories, je l'ai assemblé de cette façon, mais tous les forums demeurent sous la même catégorie, comme vous pouvez le voir ici.
Comment est-ce que je dois faire pour que les forums qui sont dans chaque catégorie soient regroupés sous une barre?!
Le CSS est le suivant:
et le Template index_box a été modifié comme suit :
Merci à l'avance de votre aide!!
Je fais présentement quelques essais pour la mise en forme des catégories et des forums d'un RPG que je suis en train de construire. J'ai utilisé ce tuto qui a été créé par Halloween, j'ai changé les couleurs et les dimensions des images, mais un problème demeure...
J'aimerais que le forums sous divisé en plusieurs catégories, je l'ai assemblé de cette façon, mais tous les forums demeurent sous la même catégorie, comme vous pouvez le voir ici.
Comment est-ce que je dois faire pour que les forums qui sont dans chaque catégorie soient regroupés sous une barre?!
Le CSS est le suivant:
- Code:
/* ------------------------------------- CATEGORIES ------------------------------------- */
/*** MISE EN FORME TITRES CATEGORIES ***/
.cate_titre h2 {
text-align: center;
font-size: 32px;
font-family: 'UnifrakturCook', cursive;
color: #322923;
}
/*** MISE EN FORME DU CONTENU ***/
.ensemble_forum {
background-color: #7F95A2;
border-left: 3px solid #322923;
border-right: 3px solid #322923;
position: relative;
height: 150px;
}
.ensemble_forum1 {
border-radius: 25px 25px 0px 0px;
border-top: 3px solid #322923;
border-left: 3px solid #322923;
border-right: 3px solid #322923;
}
/*** ILLUSTRATION QUI SUIT LE TITRE DE CATEGORIE ***/
.illustration_cate {
border-radius: 25px 25px 0px 0px;
}
/*** MISE EN FORME NOM DU FORUM ***/
/* SIMPLE */
a.forumlink_name {
font-size: 30px;
font-family: 'UnifrakturCook', cursive;
text-align: center;
color: #28394D;
text-decoration: none !important;
position: absolute;
left: 1.5em;
margin-top: 20px;
}
/* EN HOVER */
a.forumlink_name:hover {
color: #28394D;
text-decoration: none !important;
text-shadow: 0px 2px 2px #28394D;
}
/*** MISE EN FORME DES STATISTIQUES ***/
/* SIMPLE */
.stats {
font-size: 14px;
position: absolute;
right: 5em;
font-family: 'Open Sans Condensed', sans-serif;
color: #28394D;
margin-top: 30px;
}
/* EN HOVER */
.stats:hover {
font-weight: bold;
}
/*** DESCRIPTION AU SURVOL DE L'IMAGE ***/
.description {
width: 500px;
height: 100px;
overflow: hidden;
position: absolute;
margin-top: 60px;
left: 2em;
background-color: #C3CBD5;
}
.description_img {
position: relative;
z-index: 2;
width: 500px;
height: 100px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description:hover .description_img {
margin-left: 500px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_desc {
position: relative;
z-index: 1;
width: 470px;
height: 70px;
margin-top: -100px;
text-align: justify;
font-size: 11px;
color: #446059;
padding: 15px;
overflow: auto;
background-color: #C3CBD5;
}
/*** MISE EN FORME DES SOUS-FORUM ***/
/* POSITIONNEMENT */
.sous_forum {
position: absolute;
margin-top: 39px;
right: 23em;
width: 150px;
height: 70px;
overflow: auto;
padding: 15px;
background-color: #C3CBD5;
font-family: 'Arial';
font-weight: bold;
font-size: 11px;
}
/* LIENS SIMPLES*/
.sous_forum a{
color: #446059;
}
/* LIENS AU SURVOL */
.sous_forum a:hover {
color: #769E95;
text-decoration: none !important;
}
/*** DERNIERS MESSAGES AU SURVOL DE L'IMAGE ***/
.derniers_news {
width: 200px;
height: 100px;
overflow: hidden;
position: absolute;
margin-top: 38px;
right: 2em;
background-color: #28394D;
}
.derniers_news_img {
position: relative;
z-index: 2;
width: 200px;
height: 120px;
margin-left: 0px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.derniers_news:hover .derniers_news_img {
margin-left: 500px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.derniers_news_description {
position: relative;
z-index: 1;
width: 170px;
height: 50px;
margin-top: -100px;
text-align: center;
font-size: 14px;
color: #D3D1D1;
padding: 15px;
overflow: auto;
background-color: #28394D;
font-family: 'Arial';
}
/* LIENS SIMPLES */
.derniers_news_description a {
color: #D3D1D1;
}
/* LIENS AU SURVOL */
.derniers_news_description a:hover {
color: #769E95;
text-decoration: none !important;
}
/* ------------------------------------- FIN CATEGORIES ------------------------------------- */
et le Template index_box a été modifié comme suit :
- Code:
<table width="100%" border="0" cellspacing="1" 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="cate_titre">{catrow.tablehead.L_FORUM}</div><div class="ensemble_forum1"><img src="http://zupimages.net/up/16/25/k82a.jpg" class="illustration_cate" />
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow --><div class="ensemble_forum">
<a class="forumlink_name" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="stats">Il y a {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</div>
{catrow.forumrow.FORUM_DESC}
<div class="sous_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
</script></div>
<div class="derniers_news"><div class="derniers_news_img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><div class="derniers_news_description">{catrow.forumrow.LAST_POST}</div></div>
<div style="clear: both;"></div></div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<div style="width: 100%; border-bottom: 3px solid #322923;"></div>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One|Lily+Script+One|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
Merci à l'avance de votre aide!!