Sujets similaires

Bonjouur !

Merci de lire mon sujet, ça fait un bout de temps que je cherche à changer mes catégories, en 2 colonnes.. j'ai suivi un tuto sur NU, et j'ai réussi à avoir les catégories en 2 colonnes..
Par contre je veux changer quelques détails qui ne me plaisent pas beaucoup !

Voilà ce que j'ai : https://2img.net/r/hpimg4/pics/697635cap.png
Et ce que j'aimerais avoir : https://2img.net/r/hpimg4/pics/357284cat.png
Le ruban c'est une image

Mon template Index_box:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>


<div class="cate_titre"><span class="catetitre_bloc"></span>
<span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>







<div class="forum_bloc">
<div class="forum">

<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>

<div class="forum_contenu">
{catrow.forumrow.FORUM_DESC}<br />

<div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
<td><span class="stats_lastpost">
<span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
<span class="lastpost">{catrow.forumrow.LAST_POST}</span>
</span></td>
</tr></table></div>

</div>

<div class="sous_forum">
<span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<span class="ouverture_sousforum">Voir les sous-forum</span>
</div>

</div>
</div>

La partie CSS :

Code:: /* MISE EN FORME DES CATEGORIES ET FORUMS */

.cate_titre
{
clear: both;
height: 100px;
margin-top: 50px;
}
.catetitre_bloc
{
position: relative;
z-index: 1;
display: block;
width: 90%;
height: 20px;
margin-left: auto;
margin-right : auto;
background-color: #a8a8a8;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-htm-transform: rotate(5deg);
}
.catetitre_content
{
position: absolute;
z-index: 2;
display: block;
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
text-align: center;
padding: 2px;
border-bottom: 3px dotted #191817;
}
.catetitre
{
color: #454545;
font-family: arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
}

.forum_bloc
{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: -30px;
}
.forum
{
float: left;
width: 460px;
height: 250px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
}
a.forumlink
{
position: relative;
z-index: 2;
display: block;
width: 100%;
color: #454545;
text-align: center;
font-family: arial;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #000000;
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;
}
a.forumlink:hover
{
letter-spacing: 4px;
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;
}
.forum_contenu
{
position: relative;
z-index: 1;
width: 98%;
height: 90%;
padding: 4px;
margin-left: auto;
margin-right: auto;
margin-top: -8px;
background-color: #d9d9d9;
border-left: 1px dotted #191817;
border-right: 1px dotted #191817;
border-bottom: 1px dotted #191817;
border-top: 5px solid #191817;
}
.description
{
display: block;
width: 400px;
margin: auto;
height: 100px;
overflow: hidden;
border: 2px solid #9c9c9c;
box-shadow: 1px 1px 1px #191817;
-moz-box-shadow: 1px 1px 1px #191817;
-htm-box-shadow: 1px 1px 1px #191817;
-webkit-box-shadow: 1px 1px 1px #191817;
-o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
position: absolute;
display: block;
width: 391px;
height: 91px;
overflow: auto;
background-color: #191817;
font-size: 10px;
color: #9c9c9c;
text-align: justify;
padding: 5px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
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_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
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;
}
.icone_stats
{
width: 300px;
margin: auto;
margin-top: -30px;
}
.stats_lastpost
{
display: block;
width: 160px;
height: 80px;
margin-left: 10px;
background-color: #c8c8c8;
border: 1px solid #b5b5b5;
padding: 5px;
text-align: center;
}
.stats
{
display: block;
margin-bottom: 5px;
border-bottom: 1px dotted #b5b5b5;
padding-bottom: 5px;
font-size: 10px;
color: #8f8f8f;
}
.lastpost
{
display: block;
font-size: 11px;
}
.sforum
{
position: relative;
z-index: 3;
display: block;
height: 0;
background: #191817;
color: #b5b5b5;
overflow: hidden;
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;
}
.ouverture_sousforum
{
position: relative;
z-index: 3;
display: block;
float: right;
width: 120px;
margin-right: 20px;
background: #191817;
color: #b5b5b5;
font-size: 11px;
text-align: center;
padding: 4px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
height: 50px;
background: #191817;
color: #b5b5b5;
padding: 4px;
overflow: auto;
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;
}
.sous_forum a
{
color: #b5b5b5 !important;
text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
color: #ffffff !important;
}

Merci beaucoup Very Happy

Bon bah... C'est parti !
Pour résumer il faut donc :
- changer de place l'image de new / no new / lock
- mettre la description des fora avec un scroll
- déplacer les stat de message (X messages dans X sujets) tout en bas.
- mettre dans une sorte de tableau le dernier message, et de l'autre côté les sous forums.

Allez c'est parti !

1/ Changer de place l'image de new / no new / lock.
Pour cela, nous allons utiliser la propriété css "position". Je t'invite à consulter sur internet le fonctionnement de "position : absolute;"
Une fois que c'est fait, le principe est simple : nous allons positionner l'image de new / no new /lock en ABSOLU par rapport au bloc contenant tout ton sous forum.

L'image des new / no new / lock :

Code:: <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" />

Le block contenant ton sous forum à chaque fois :

Code:: <div class="forum">

</div>

Donc, dans le css, nous allons rajouter pour le conteneur "position: relative" et pour le positionné "position : absolute;"
/ ! \ Dans ton css, on peut voir que ta div "forum_contenu" est positionné en "relative"... Ca voudrait dire que l'image se mettrait par rapport à ce block là. Or ce n'est pas ce qu'on veut. Il faut donc déplacer le code de l'image, de manière à ce que le block qui l'entoure soit bien celui par rapport au quel je veux le positionner.
Ensuite, nous placerons l'image à 0 du haut (top) et à 0 de la gauche (left). Bien entendue, tu peux jouer un peu avec ces nombres pour obtenir l'effet désiré, sachant que tu peux mettre des valeurs négatives si besoin ! Wink

En pratique cela donne donc :

Code:: <div class="forum">
   <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /> 
   <span class="forumlink">
   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
   </span>

   <div class="forum_contenu">
   {catrow.forumrow.FORUM_DESC}<br />

   <div class="icone_stats"><table><tr>
      <td><span class="stats_lastpost">
      <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
      <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
      </span></td>
      </tr></table></div>

   </div>

   <div class="sous_forum">
   <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
   <span class="ouverture_sousforum">Voir les sous-forum</span>
   </div>

</div>

Code:: .forum
{
float: left;
width: 460px;
height: 250px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
positon : relative;

.icone {
position: absolute;
left: 0px;
top: 0px;
}

2 / Mettre la description des fora avec un scroll

Pour mettre un scroll, c'est très simple... Il suffit de mettre ta description dans une div, ensuite cette div il faut lui mettre des dimensions maximales. Une fois que cela est fait, il faut rajouter le petit code "overflow : auto;" qui va créer ta barre de scroll si besoin !

Tu as donc (je ne met que la partie du code concernée, pour que tu puisses mieux repérer les changements) :

Code:: <div class="forum_contenu">
   <div class="description_forum">{catrow.forumrow.FORUM_DESC}</div> 

   <div class="icone_stats"><table><tr>
      <td><span class="stats_lastpost">
      <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
      <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
      </span></td>
      </tr></table>
   </div>

   </div>

Au niveau du css, il faut rajouter :

Code:: div.description_forum {
height: 100px; /* valeur à modifier*/
overflow : auto; /* pour le scroll*/
}

Allez je fais une petite pause, dis moi déjà si cela marche Wink

Bonsoiir,

Merci énormément pour l'aide, c'est très gentil ! Alors j'ai tout suivi et ça marche pour le moment, le bouton est bien placé, ainsi que la description avec scroll Smile

Il y'a des décalages énormes par contre... les forums sont un en dessous de l'autre, ils ne sont plus alignés 2 par 2. Mais je crois qu'avec le reste ça s'arrangera, je crois :p

Mais en gros jusque là ça marche !! Smile

Tu pourrais me donner le lien de ton forum s'il te plait ? Par ce que comme ça me permet de voir où sont les bugs ^^

Voilà mon forum test :

En regardant ton code, tu n'as pas mis le CSS pour l'icone au bon endroit ^^
En effet, tu as mis le code que t'avais donné dans "icone_stat" au lieu de .icone

Code:: .icone {
position: absolute;
left: 0px;
top: 0px;
}

Si tu n'as pas encore de propriétés pour .icone, il faut juste copier mon code et l'ajouter Wink

Si ceci ne règle pas ton bug, trouve dans ton css :

Code:: .forum
{
float: left;
width: 460px;
height: 250px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 50px;
}

Et remplace le "width: 460px;" par "width: 450px;"

Coucouu,

Ah oui j'avais pas fais attention à la classe :/ C'est corrigé !
Après quelques bidouillage j'ai réussi à avoir ça :
Mon CSS actuel :

Merci Very Happy

Coucouu, c'est bon j'ai réussi à avoir ce que je voulais Smile

Sujet résolu ! Merci encore à toi Nihil Smack Smack

[résolu]Catégories en deux colonnes

[résolu]Catégories en deux colonnes

Sujets similaires

Sujets similaires

Partenaires Or