Restructuration de l'index_Box

[BiKinou]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 31/07/2020
Lien du forum : https://bikinoutest.forumactif.com/

Description du problème

Bonjour à tous,

Grâce à l'aide Kheino, j'ai réussi à créer un index_Box qui tient un peu près la route et maintenant ce que j'aimerai c'est qu'il soit bien solide sur ses bases

1° Vérifier que  mon template est un peu près correct. Template complet.

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="cadrage caté">
<div class="caté">
<div class="titrecaté">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
          <table class="forum" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="99%"><div class="forumgauche">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td rowspan="2" class="iconeforum" align="center" valign="middle">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </td>
                    <td align="left" valign="middle">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </span>
                    </td>
                  </tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                 <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
                  <tr>
                    <td valign="middle">
                      <div class="descforum">
                        {catrow.forumrow.FORUM_DESC}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              </td>
              <td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg">
<img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" />
</div>
</div>
</div>
</td>
</tr></table>
</td>            
          <tr>
              <td align="left" valign="middle">
                 <div class="ssforum">
        <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <span class="ovssforum">Voir les sous-forum</span>
 </div>
</td>
<td></td>
</tr><td></td></tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

Le CSS

Code:

/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/  
/**CATÉGORIES**/
/*Cadrage*/
.cadrecaté {
border: 2px solid #402203;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f;
margin-bottom: 15px;
padding: 2px 4px 0px 3px;
}
.caté {
margin: 15px;
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
text-align: center;
}
/*Titre de catégorie*/
.titrecaté h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 0px;
margin-right: 5%;
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color:  #402203 ;  
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecaté h2:first-letter{
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 50px papyrus;
}
/*Titre au survol*/
.titrecaté h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Cadrage1*/
.forum{
margin: 50px 0px 30px 0px;
}
/* Messages et sujets*/
.Trait {
height: 2px;
background-color: #38263e;
width: 500px;
margin: 0 auto;
position: relative;
top: 5px;
}
.dermess {
padding: 10px;
text-transform: uppercase;
text-align: center;
width: 230px;
font-size: 10px;
height:55px;
}
.dermess a:hover {
color: #312516;
font: bold 15px papyrus;
text-align: center;
}
.forummess {
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
padding: 10px;
color: white;
width: 200px;
margin-left: 250px;
margin-top: -60px;
text-align: center;
font: 12px Papyrus;
}
/*Image NouveAnVer*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #0d5938;
padding: 5px;
}
/*Titre de forum*/
a.forumlink {
display: block;
text-align: left;
color: #402203!important;
font: bold 20px papyrus;
text-shadow: 2px 2px 1px #0d5938;
text-decoration: none!important;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
a.forumlink:hover {
color: #003a00!important;
letter-spacing: 5px;
}
a.forumlink:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 26px papyrus;
}
/*Description*/
.descforum {
position: relative;
float: left;
width: 400px;
height: 206px;
border: 2px solid #747253;
margin: 0px -10px 0px -10px;
overflow: hidden;
}
.forum_desc {
position: absolute;
width: 396px;
height: 205px;
background-color: #000000;
color: #0d5938;
opacity: 0;
overflow: auto;
padding: 2px;
overflow: auto;
text-align: justify;
top: 0px;
left: 0px;
transition: 0.5s;
}
/*Apparition&image de la description de forum*/
.descforum:hover .forum_desc {
opacity: 0.8;
}
.descforum_img {
position: absolute;
width: 400px;
height: 206px;
top: 0px;
left: 0px;
}  
/**FIN FORUM**/

/**SOUS FORUM**/
.sforum {
position: relative;
z-index: 3;
display: block;
height: 0;
margin-bottom: -1px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
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;  
}
.ovssforum {
position: relative;
z-index: 3;
display: block;
float: right;
width: 140px;  
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
margin: 0px 30px -1px 0px;
padding: 2px 0px 6px 0px;
font: bold 13px papyrus;
color: #402203;
border-radius: 0px 0px 10px 10px #0d5938;
box-shadow: 0px 0px 5px 2px #0d5938;
font: bold 13px papyrus;
text-align: center;  
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-o-border-radius: 0px 0px 10px 10px;
}
.ssforum:hover  .sforum {
height: 60px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
color: #402203;
margin-bottom: -1px;
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;
border-radius: 15px 15px 15px 15px #0d5938;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-o-border-radius: 0px 0px 15px 15px;
}
.ssforum a {
color: #402203 !important;
font: bold 13px papyrus;
margin-left: 5px;
}
.ssforum a:hover {
color: #402203 !important;
}
/**FIN SOUS FORUM**/

/**ELEMENTS IMPORTANTS**/
/* index losange-img right */
/* losange-overall parent fantome */
.indexloright {
height: 150px;
width: 150ox;
display: block;
position: absolute;
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 15px;
margin-left: 100px;  
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 150px;
width: 150px;
display: block;
position: absolute;
background: darkgrey;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
width: 150px;
height: 150px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 130px;
height: 130px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/* fin index losange-img right */

/**FIN DERNIER MESSAGE**/
/*_____ FIN INDEX BOX_____*/

2 ° M'aider à restructurer la partie "forum" C'est elle qui me pose vraiment problème car n'est mise en place correctement (icônes des images du forum (nouveau, verrouillé ...), mon losange ... etc

Code:

<!-- BEGIN forumrow -->
          <table class="forum" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="99%"><div class="forumgauche">
                <table border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td rowspan="2" class="iconeforum" align="center" valign="middle">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </td>
                    <td align="left" valign="middle">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </span>
                    </td>
                  </tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                 <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
                  <tr>
                    <td valign="middle">
                      <div class="descforum">
                        {catrow.forumrow.FORUM_DESC}
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
              </td>
              <td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg">
<img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" />
</div>
</div>
</div>
</td>
</tr></table>
</td>            
          <tr>
              <td align="left" valign="middle">
                 <div class="ssforum">
        <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <span class="ovssforum">Voir les sous-forum</span>
 </div>
</td>
<td></td>
</tr><td></td></tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

Merci pour vôtre aide

[kheino]

Bonjour BiKinou,

Le html est un peu mieux sructuré, mais,
normalement, si tu fermes une ligne, tu ne peux pas en html balancer des 'div' entre les balises '/tr' et 'tr', si tes blocs-div doivent se mettre sur une autre ligne, dans la logique dûn tableau-html elle doivent aussi entrer dans une nouvelle colonne, ref:

Code:

</tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                 <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
                  <tr>

De plus, vois la dernière dic qui est mal éditée avec un espace du dernier guillement ", ainsi que, évite les majuscules dans les noms de sélecteur.

Ici tu fermes une colonne 'td' sans fermer la ligne 'tr':

Code:

</td>            
          <tr>
              <td align="left" valign="middle">
                 <div class="ssforum">

Bref, c'est rédhibitoire à une bonne structure et donc pas étonnant que tu aies des incohérences, de plus ce n'est QUE ce qui m'a sauté aux yeux, je n'ai pas cherché dans le détail.

Si tu fais déjà un tableau-parent, le plus juste est d'incorporer des tableaux-enfants qui peuvent aussi être parents de sous-tableaux. C'est ce qui est le plus stable en matière d'architecture, il faut alors juste bien suivre.
Un tip : fais un schéma de ta structure comme un plan d'architecture (avec les étages, les fenêtres, etc).

Bref, html à corriger (comme tu m'as dit que tu voulais recoder comme il y a 4 ans).

Quant au css, c'est comme s'il y avait un autre CSS parce que je n'ai pas le même rendu que sur ton forum-test:
- Les icônes de gauche (9h sur une montre, celles de nouveaux, pas et verrouillés messages) sont sur TON forum sont en dehors du cadre de la description (colonne 'td' du milieu sur 2 lignes 'tr') alors que chez moi elles sont dedans.
- Le losange est mal placé, mais chez toi il est carrément hors cadre DU forum.
Quelle largeur de forum as-tu?
Y a-t-il des feuilles de style-css hébergées ? (tes précédents code comportaient au début des balises 'link')

[BiKinou]

bonjour Kheino,
J'ai viré hier soir 'link' car c'était pour la police que je ne mets pas, celui que je mets actuellement c'est le Papyrus et le times New roman

Actuellement je suis au début avec mes icônes de forums car j'aimerai qu'elles soient indépendantes du cadre de description.

Et réfléchit en même temps à comment remettre le nowrap pour aligner mon dernier message; sujets (calligraphie et écrits)

Mon idée serait

table forum
en-dessous
table icône/description forum
avoir une colonne pour l’icône
Une autre pour la description

table description ou tr description
le cadre coulissant
les messages, sujets/nbre de message

[kheino]

Corrige ton code et fais comme je te l'ai suggéré, procède sur la base d'un schéma d'architecture.
(Ne viens pas à nouveau avec tout à la fois).

Si tu veux les icônes hors-cadre de la description, c'est qu'il faut un autre tableau dans la colonne-td parent, donc le 1er tableau (table).

2) Ne parle pas de tr, tr est une balise-ligne qui implique une colonne (qui elle peut contenir un tableau complet (table, tr, td et leur fermeture respective):

Code:

<table> tabeau-parent principal
<tr>
<td>

<table> tableau-enfant + -parent
<tr><td>
contenu
</tr></td>
<tr><td>
<table><tr><td> tableau-enfant
contenu
</td></tr></table> fermeture  tableau-enfant
</td></tr>
</table> fermeture tableau enfant-parent

ETC

</td>
</tr>
</table> fermeture tableau-parent principal

Ne t'occupe que de ça dans un premier temps !
Les coulissants etc, ce sont des effets-css que tu peux travailler ensuite, une fois que ta structure est posée et stable.
C'est parce que tu fais tout en même temps que tu mélanges tout et que rien ne fonctionne.

EDIT : QUELLE LARGEUR DU FORUM AS-TU ???
QUEL AUTRE CSS AD-TU COMME POUR LES IMAGES ET LE FOND DES DESCRIPTIONS EN NOIR???
Comment t'aider si on n'a pas tout les éléments ? Si des codes css de ces éléments sont mal fichus, nous n'aurons jamais le même rendu. Ce que tu mets dans la description du forum en code influe aussi sur le reste!
bigre! et dire que la patiences est absente de l'équation de mes qualités!
là je ne vais pas m'éterniser si c'est pour en arriver au même point que les 2 précédents sujets.

Voici ce que ça donne chez moi juste avec le " bien placé, ainsi: le class="trait" (<--en miniscule corrigé aussi dans le css)

Spoiler:

[BiKinou]

C'est que je te dis je suis entrain de refaire ce passage là

Code:

<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
                    <td rowspan="2" class="iconeforum" align="center" valign="middle">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </td>
                    <td align="left" valign="middle">
                      <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                          {catrow.forumrow.FORUM_NAME}
                        </a>
                      </span>
                    </td>
                  </tr>
                <div class="dermess"> {catrow.forumrow.LAST_POST} </div>
                 <div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
                <div class="Trait "></div>
  

Le début de mon  template que j'ai vérifié pour m'assurer son bon fonctionnement

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="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->

Pour le passage où je suis, j'essaie de faire un tableau ensuite une fois que celui-ci sera en place, je poursuivrais avec  sur ma description.

1er tableau : icone
2éme tableau : nom forum
3ème tableau : messages, sujets/messages

Là c'est mon CSS où j'en suis actuellement

Code:

/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
border: #402203 2px solid ;
background: #b8a27f url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
margin-bottom: 50px;
padding: 5px 15px 5px 14px;
}
.cat {
margin: 15px;
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
text-align: center;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 10px 0px 20px 10px;  
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color:  #402203 ;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter{
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 50px papyrus;
}
/*Titre au survol*/
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Fond forum*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow:  #0d5938 0px 0px 5px 2px;
padding: 10px;
margin: 15px 0px 20px 10px;  
}

EDIT : 850 largeur forum
EDIT : Je n'ai qu'un seul CSS que je ne touche pas tant que je n'ai pas corrigé la partie où je suis rendue dans le template c'est sans doute pour ça que sur mon forum c'est pas correctement mis

[kheino]

Oui un seul css, mais tu as du html dans les descriptions, si?
Sinon., d'où viennent ce fond noir de la description et les images au-dessus?
Si c'est codé comme le template... c'est un TOUT, surtout avec autant de css pour l'un et l'autre.

[BiKinou]

Ah , oui, ça y est je comprends ce que tu me dis, tu parles bien de là où il y le champs de blé , la fille aux escarpins ? Désolé, j'avais occulté ce passage pour me concentrer sur la transformation du tableau
Oui, il y a un code qui doit être mis à chaque fois dans la description du forum, mais j'aimerai virer ce système là pour mettre mon coulissement de porte comme les sous-forum. bon pour le moment j'en suis pas là., je n'arrive à créer mon foutu tableau ... Zen ... Zen
EDIT : Voilà je pense que cette partie est OK niveau structurage (Oui, c'est vachement français :p)

Code:

<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table  border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" align="center" valign="middle">
<div class="iconeforum">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div></td>
<td align="left" valign="middle">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>   
</td>
<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="Trait "></div>
</tr></table>

Code:

<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="Trait "></div>
</tr></table>

Cette partie là, me pose toujours problème. Je n'arrive pas à l'aligner

Code:

<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="Trait "></div>
</tr></table>

[kheino]

Oui je parle de ceci. et je ne vois pas pour où d'autre tu pourrais passer puisque chaque description est différente, il n'y a que ces champs pour le faire, les effets dessus c'est du css, mais d'abord ce sont les codes html tels quels qui m'intéressent.

J'ai regardé un peu plus en détail ton code...
ABSOLUMENT NORMAL QUE RIEN NE VA !

- Tu as mis dans une class des plus importante "cadrage café" au lieu de "cadrecafé" comme dans le css (à ce propos, à éviter aussi l’accentuation, certains navigateurs ne digèrent pas ou mal)
- Des tr sont ouvertes sans avoir été refermées ou sans avoir refermer des td, etc...
- Deux div qui englobent tout l'index avec des tableaux mal fait dedans (pourquoi ne pas faire un tableau-parent pour tout l'index, avec son CSS au lieu du css des catégories? des raccourcis simplistes et très très instables)...

Bref, le codage demande de la rigueur, c'est un mécanisme d'horloge suisse et on ne fait pas du n'importe quoi.
Je pensais que ça tu l'avais compris et que tu avais vraiment corrigé ton template!
De plus je crains le css, car là aussi beaucoup d'erreurs vues auparavant, mais comme tu ne corriges pas au fur et à mesure, tout est borderline (pas bon en codage).

Je te dis d'y aller étape par étape sur les deux plan, html et css.
Ce que je fais, c'est que dans le template je suis sur le forum dans une fenêtre rapetissée et à côté dans l'éditeur de texte, j'ai le css, ainsi je peux suivre ensemble ma construction.
La seule chose que je laisse pour la fin, ce sont les effets (hover, shadow, etc).

Essaie de BIEN lire mes explications, je me donne vraiment de la peine de m'exprimer le plus clairement possible (et en français, qui n'est pas forcément ma 1ère langue).

[BiKinou]

Euh, j'ai viré mon cadrecaté. Et comme toi, j'ai deux fenêtres côte à côte pour retravailler

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="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>

Ca c'est mon  Catégorie
Du coup, je pause partie forum, je vais revoir mes catégories

[kheino]

Ah méééheuuu ! tu remets exactement la même FAUTE que décrite plus haut :

Code:

<div class="Trait "></div>

Tu ne vois pas que les guillemets de droite ne sont pas collés ?
Je t'ai dit de proscrire les majuscules en nom de sélecteur comme ton Trais (et dis aussi, à corriger direct dans le css).
Non non non, je suis juste sidérée par ce que tu fais, même si tu y mets de la bonne foi, j'ai l'impression de perdre mon temps!

Je vais te laisser continuer, peut-être qu'à un moment tu reprendras tout ce que j'ai essayé de t'expliquer et que tu pourras enfin avancer.

(Il y a plein de sites pour apprendre à coder et je les fréquente sans arrêt aussi, faut arrêter de faire du n'importe quoi, ou alors demande un forum clés en main, parce que je suis certaine que c'est le cas pour tous les templates, vu que l'index_box est un des plus simples à manier).

[BiKinou]

sorry, c'est l'automatisme ça, et j'ai corrigé.

Partie Catégorie : Revue et corrigée

Code:

<!-- BEGIN tablehead -->
<div class="cadrecat">
<div class="titrecat">
{catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->

J'ai viré le "cat" pour le regrouper avec cadrecat et le span me servant à rien après vérification sur le forum

Code:

/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
background: #b8a27f url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat; 
border: #402203 2px solid;
border-radius: 15px; 
margin: 15px 14px 50px 16px;
padding: 5px 15px 5px 14px;
text-align: center;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
border-radius: 5px;
background: #0d5938 url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat;
box-shadow: #0d5938 2px 2px 1px;
margin: 10px 0px 20px 10px; 
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color: #402203;
text-shadow: #fefdb1 0 2px 2px;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter {
color: #c40606;
text-shadow: #c0a583 2px 2px 2px;
font: bold 50px papyrus;
}
/*Titre au survol*/
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

[BiKinou]

Les catégories étant finies, je continue sur mon la forum
J'ai modifié ma structure que j'avais faite pour avoir ceci
table forum (englobant tout mes forums)
Table englobant  mon nom de forum, mes icônes et dernier message, sujets/messages

Code:

<!-- BEGIN forumrow -->
<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0">
<tr><div class="icone">
<td rowspan="2" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td></div>
<td align="left" valign="middle">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME} </a>
</span>
</td>
</tr>
<div class="dermess"> {catrow.forumrow.LAST_POST} </div>
<div class="forummess"> {catrow.forumrow.POSTS} Calligraphies | {catrow.forumrow.TOPICS} Ecrits</div>
<div class="trait"></div>
</table>
</div></td></tr>
</table>
<!-- END forumrow -->

Et j'ai toujours mon souci de la partie dernier message qui n'est pas alignée. J'ai retiré ma balise td car pour le moment, je n'arrive pas à mettre le nowrap, je connais son fonctionnement mais je n'ai jamais réussi à bien l'utiliser

Code:

/**FORUM**/
/*Fond forum*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: #0d5938 0px 0px 5px 2px;
padding: 10px;
margin: 15px 0px 20px 10px;  
}
/* Messages et sujets*/
.dermess {
padding: 10px;
text-transform: uppercase;
font: 12px papyrus;
text-align: center;
color:  #402203;
width: 230px;
height:55px;
}
.dermess a:hover {
color: #312516;
font: bold 15px papyrus;
text-align: center;
}
.forummess {
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
padding: 10px;
color: #312516;
width: 200px;
text-align: center;
font: 12px Papyrus;
}
.trait {
height: 2px;
background-color: #38263e;
width: 500px;
margin: 0 auto;
position: relative;
top: 5px;
}

[BiKinou]

Bonjour BiKinou,
De plus, vois la dernière dic qui est mal éditée avec un espace du dernier guillement ", ainsi que, évite les majuscules dans les noms de sélecteur.

Depuis le début que tu as écrit ce post, je lis un espèce et je comprenais rien. T'inquiète, il y a beaucoup de mot que je ne capte pas correctement. Là, mon mari m'a dit lessivé et j'ai compris décidé du coup , je lui ai dit , tu veux que je décide quoi ? et quand j'ai vu sa tête, je lui ai demandé de répéter ce qu'il avait dit

[kheino]

Bonjour, bonjour !

Eh oui, nous sommes tous passés par là, chercher chercher le code, jusqu'à épuisement. C'est alors le moment de se reposer.

En regardant sur ton forum-test, je vois que tu as soit remis un ancien html, soit avancé...
Comme il y a trop de codes plus haut, peux-tu donner le css et le template que tu as, là maintenant?

[BiKinou]

Bonjour Kheino,
oui bien sûr, je te redonne tout mon nouveau template et CSS. Là j'essaie, de mettre mes sous forum dans mon bloc description pas en-dessous. Je suis un vieux diesel, je dois lire et relire pour  pour mémoriser et que mon cerveau travaille dessus mdr.

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="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<table class="forum" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" class="iconeforum" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td align="left" valign="middle">
<div class="trait">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="messuj">
<span>{catrow.forumrow.POSTS} Calligraphies</span>
<span>{catrow.forumrow.TOPICS} Ecrits à l'encre</span>
</div>
<div class="dermess">{catrow.forumrow.LAST_POST}
</div>
</div>
</td>
</tr>
<tr>
<td valign="middle">
<div class="descforum">{catrow.forumrow.FORUM_DESC}
</div>
</td>
</tr>
</table>
</div>
</td>
<td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg">
<img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" />
</div>
</div>
</div>
</td>
</tr></table>
</td>            
<tr>
<td align="left" valign="middle">
<div class="ssforum">
<span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
 <span class="ovssforum">Voir les sous-forum</span>
 </div>
</td>
<td></td>
</tr><td></td></tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

CSS
1 - Pour le moment j'ai laissé mais deux cadres catégories mais je pense en retirer 1  une fois que j'aurai tout fini ou alors trouvé le bon code pour faire un effet 3D mais ça se sera qu'à la fin

2- Essayer de retrouver le bon code pour faire le système coulissant pour la description et les sous forums

3 - Trouver le bon code pour aligne dernier message

Voilà mes 3 objectifs actuels

Code:

/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
border: 2px solid #402203;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f;
margin-bottom: 15px;
padding: 2px 4px 0px 3px;
}
.cat {
border: 2px solid #402203;  
border-radius: 15px;
text-align: center;  
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
margin: 5px;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 0% 5% 0% 0%;
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color: #402203;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter  {
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 50px papyrus;
}
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Cadrage1*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #0d5938;
padding: 5px;
margin: 35px 0px 15px 0px;
}

.iconeforum img {
width: 120px;
height: 120px;
margin-right: 15px;
}
/*Trait*/
.trait a {
display: inline-block;
width: 500px;
color: #0d5938 !important;
margin-bottom: 5px;
border-bottom: 3px solid #0d5938;
}
/*Titre forum*/
a.forumlink {
display: block;
text-align: left;
color: #402203!important;
font: bold 25px papyrus ;
text-shadow: 2px 2px 1px #0d5938;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
a.forumlink:hover {
color: #003a00 !important;
letter-spacing: 5px;
}
a.forumlink:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 28px papyrus;
}
/*Messages&Sujets*/
.messuj span {
display: inline-block;
width: 200px;
height: 20px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;  
text-align: center;
font: 11px bold papyrus;
box-sizing: border-box;  
-webkit-box-sizing: border-box;        
margin-right: 4px;
padding-top: 4px;  
}
.dermess{
height: 70px;
width: 200px;
text-align: center;  
font: normal 11px papyrus;
text-transform: lowercase;
color: #402203;
margin: 5px 0px -10px -20px;  
}
.dermess a {
display: block;
font: normal 11px papyrus;
text-align: center;
text-transform: lowercase;  
color: #402203 !important;
border: 0px;  
margin-bottom: -10px;
}

.dermess a:hover {
text-decoration: none!important;
}
.dermess br{
display: none;
}
.dermess a br{
display: none;
}
/*Description*/
.descforum {
position: relative;
overflow: hidden;  
float: left;
width: 450px;
height: 200px;
border: 2px solid #747253;
margin: 0px -10px 15px -11px;
}
.forum_desc {
position: absolute;
width: 446px;
height: 199px;
background-color: #000000;
color: #0d5938;
opacity: 0;
overflow: auto;
padding: 2px;
text-align: justify;
top: 0px;
left: 0px;
transition: 0.5s;
}
/*Apparition&image de la description de forum*/
.descforum:hover .forum_desc {
opacity: 0.8;
}
.descforum_img {
position: absolute;
width: 450px;
height: 200px;
top: 0px;
left: 0px;
}
/**FIN FORUM**/

/**SOUS FORUM**/
 .sforum {
overflow: hidden;
position: relative;
z-index: 3;
display: block;
height: 0;
margin-bottom: -1px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
color: #b5b5b5;
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;
}
.ovssforum {
position: relative;
z-index: 3;
display: block;
float: right;
 width: 140px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
margin: 0px 30px -1px 0px;
padding: 2px 0px 6px 0px;
font: bold 13px papyrus;
color: #402203;
 border-radius: 0px 0px 10px 10px #0d5938;
 box-shadow: 0px 0px 5px 2px #0d5938;
font: bold 13px papyrus;
text-align: center;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-o-border-radius: 0px 0px 10px 10px;
}
.ssforum:hover  .sforum {
height: 60px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
color: #402203;
margin-bottom: -1px;
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;
border-radius: 15px #0d5938;
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
}
.ssforum a {
color: #402203 !important;
font: bold 13px papyrus;
margin-left: 5px;
}
.ssforum a:hover {
color: #402203 !important;
}
/**FIN SOUS FORUM**/

/**ELEMENTS IMPORTANTS**/
/* Losange*/
.indexloright {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 40px;
margin-left: 25px;
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: darkgrey;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
height: 110px;
width: 110px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 90px;
height: 90px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/**FIN ELEMENTS IMPORTANTS**/
    /*_____ FIN INDEX BOX_____*/

EDIT : partie corrigée au niveau CSS
trait: j'ai retiré le font qui devait être à l'étage d'en-dessous pour la taille du titre du forum

[kheino]

Bonjour,

Le codage du template est toujours autant bourré d'erreurs (des contenus dans des tr pas refermées au juste endroit, sans colonne, etc).
L'éditeur du template ne te dira que s'il manque une fermeture, il ne te dira pas si tu as fait ton code juste ou non, càd, il compte les balises ouvertes et refermées, non la justesse de ces balises, exemple:
tu ouvres une tr (ligne) sans avoir mis une colonne (td) ouverte et refermée dans cette ligne, que tu refermes après y avoir placé une div (bloc), il dira que c'est juste, alors que dans la structure juste d'un tableau, une balise div, texte, span et/ou un autre tableau, se place TOUJOURS dans une colonne, comme le code de balises-tableau vide que je t'ai donné plus haut.
Placer un tableau dans une div est risqué surtout quand c'est en principal, les div sont lues différemment par les navigateurs, alors que les tableaux sont stables.
Tu refermes les 2 div des titres catégories en toute fin du template...
Etc, etc,

Bon, je te laisse voir, mais c'est voué à des affichages qui non seulement peuvent êtres différents d'un navigateur à un autre, et qui peuvent se déstructurer suite à une MÀJ de navigateur.

Sinon, peux-tu donner le contenu (le code uniquement) d'une description de forum.

[BiKinou]

Mon code template, je l'ai nettoyé en partie hier et je pense mettre mes catégories dans un tableau mais là pas facile de réfléchir avec les entreprises d'isolation à 1€ mdr

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="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<table class="forum" border="0" cellspacing="0" cellpadding="0">  
<tr>
  
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td rowspan="2" class="iconeforum" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td> <td align="left" valign="middle">
<div class="trait"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="messuj"><span>{catrow.forumrow.POSTS} Calligraphies</span><span>{catrow.forumrow.TOPICS} Ecrits à l'encre</span>
</div><div class="dermess">{catrow.forumrow.LAST_POST}</div></div></td>
</tr>
<tr><td valign="middle"><div class="descforum">{catrow.forumrow.FORUM_DESC}</div></td></tr>
</table></div></td>
 
<td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg"><img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" /></div>
</div></div>
</td></tr></table>
</td>  
  
<tr>
<td align="left" valign="middle">
<div class="ssforum"><span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
<span class="ovssforum">Voir les sous-forum</span></div>
</td></tr>

          
 </tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

description forum
Code partie CSS

Code:

/*Description*/
.forum1 {
overflow: hidden;
width: 400px;
height: 200px;
margin-top: -15px;
border: 1px solid #0d5938;
}
.forum_img {
position: relative;
z-index: 2;
width: 400px;
height: 200px;
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;
}
.forum1:hover .forum_img {
margin-left: 400px;
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;
}
.forumdesc {
position: relative;
overflow: auto; 
z-index: 1;
width: 400px;
height: 200px;
margin-top: -200px;
text-align: justify;
font: 12px papyrus;
color: #402203;
padding: 2px;
}

Code à mettre dans la description

Code:

<div class="forum1">
      
   <div class="forum_img">
        <img src="https://i.servimg.com/u/f14/15/30/06/17/forum210.png" /> 
   </div>
      
   <div class="forumdesc">
          La récolte du « quatrième thé, appelée Yonbancha,  s’était achevée tardivement cette année. A peine les dernières feuilles récoltées, que  de discrets flocons de neige envahirent les allées terreuses des champs de thé.  La Nature semblait s’endormir sous une délicate couverture de dentelle glacée Le fuyu, l’hiver arrivait comme un puissant samouraï Froid et rigoureux, il allait conquérir  toutes les contrées nord du pays Mais dans les entrailles de la terre, se préparait déjà sa prochaine venue. Elle demeurait très attendue Dans le calme, la sérénité du Fuyu. Une simple poussière Verte …. Verte comme le Jade       
   </div>
</div>
<div style="clear: both;">
</div>

J'ai viré l'opacité pour les porte coulissantes

[BiKinou]

Après l'achat d'une perruque. Mon Index-box arrive vers la fin de sa restructuration. Le losange/Kanji en dehors de sa couleur et nickel et mis à sa sa place. Il me reste plus qu'à régler le problème de mon dernier message.

Template

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="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<table class="forum" border="0" cellspacing="0" cellpadding="0">  
<tr>  
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td rowspan="2" class="iconeforum" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td> <td align="left" valign="middle">
<div class="trait"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="messuj"><span>{catrow.forumrow.POSTS} Calligraphies</span><span>{catrow.forumrow.TOPICS} Ecrits à l'encre</span>
</div><div class="dermess">{catrow.forumrow.LAST_POST}</div></div></td>
</tr>
<tr>
<td valign="middle">{catrow.forumrow.FORUM_DESC}</td>
</tr>
</table></div></td>
<td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg"><img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" /></div>
</div></div>
</td></tr></table>
</td>    
<tr>
<td align="left" valign="middle">
<div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</td></tr>        
</tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

CSS

Code:

/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
border: 2px solid #402203;
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f;
margin-bottom: 15px;
padding: 2px 4px 0px 3px;
}
.cat {
border: 2px solid #402203; 
border-radius: 15px;
text-align: center; 
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
margin: 5px;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 0% 5% 0% 0%;
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color: #402203;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter  {
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 50px papyrus;
}
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Cadrage1*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #0d5938;
padding: 1px;
margin: 35px 0px 5px 15px;
}
.iconeforum img {
width: 120px;
height: 120px;
margin: 60px 15px auto;
}
/*Trait*/
.trait a {
display: inline-block;
width: 450px;
color: #0d5938 !important;
margin-bottom: 5px;
border-bottom: 3px solid #0d5938;
}
/*Titre forum*/
a.forumlink {
display: block;
text-align: left;
color: #402203!important;
font: bold 25px papyrus ;
text-shadow: 2px 2px 1px #0d5938;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
a.forumlink:hover {
color: #003a00!important;
letter-spacing: 5px;
}
a.forumlink:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 28px papyrus;
}
/*Messages&Sujets*/
.messuj span {
display: inline-block;
width: 200px;
height: 30px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938; 
text-align: center;
font: bold 12px papyrus;
box-sizing: border-box; 
-webkit-box-sizing: border-box;       
margin-right: 4px;
padding-top: 4px; 
}
.messuj span:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 14px papyrus;
}
.dermess {
height: 70px;
width: 200px;
text-align: center; 
font: normal 11px papyrus;
text-transform: lowercase;
color: #402203;
}
.dermess a {
display: block;
font: normal 12px papyrus;
text-align: center;
text-transform: lowercase; 
color: #402203!important;
border: 0px; 
margin-bottom: -10px;
}
.dermess a:hover {
text-decoration: none!important;
}
.dermess br{
display: none;
}
.dermess a br{
display: none;
}
/*Description*/
.forum1 {
overflow: hidden;
width: 400px;
height: 200px;
margin-top: -15px;
border: 1px solid #0d5938;
}
.forum_img {
position: relative;
z-index: 2;
width: 400px;
height: 200px;
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;
}
.forum1:hover .forum_img {
margin-left: 400px;
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;
}
.forumdesc {
position: relative;
overflow: auto; 
z-index: 1;
width: 400px;
height: 200px;
margin-top: -200px;
text-align: justify;
font: 12px papyrus;
color: #402203;
padding: 1px;
}
/**FIN FORUM**/

/**SOUS FORUM**/
.sous-forum {
margin: -5px auto 15px;
width: 400px;
box-sizing: border-box;
bottom: -20px;
min-height: 20px;
padding: 0 10px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 15px #0d5938; 
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
}
.sous-forum a {
font: bold 10px papyrus;
margin-right: 10px;
line-height: 18px;
text-transform: lowercase;
color: #402203!important;
letter-spacing: 1px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-htm-transition: 0.3s;
-webkit-transition: 0.3s;
}
.sous-forum a:hover {
color: #402203!important;
font: bold 15px papyrus;
text-transform: uppercase; 
}
/**FIN SOUS FORUM**/

/**ELEMENTS IMPORTANTS**/
/* Losange*/
.indexloright {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 40px;
margin-left: 25px;
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: #0d5938;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
height: 110px;
width: 110px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 90px;
height: 90px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/**FIN ELEMENTS IMPORTANTS**/
    /*_____ FIN INDEX BOX_____*/


[kheino]

Bonjour bonjour,

Copier coller template et CSS (sans autre CSS personnalisé) :

Le souci, c'est que chez moi, je ne vois pas du tout ce que je vois sur ton forum-test, donc je n'ai plus rien à dire ou à faire sur ce code qui reste plein d'erreurs surtout au niveau du template.
Sur Chromium, c'est encore pire :

Spoiler:

EDIT : chez moi le spoiler des sous-forum ne fonctionne pas, ni le hover des images de la description, code que tu m'avais donné.

[BiKinou]

Bonjour,
je te redonne mon template et mon CSS. Là c'est mon Index-body qui provoque des erreurs car j'ai  noms identiques ... Je ne sais pas trop, je cherche d'où viens mon erreur de ce côté là.

Mon CSS

Code:

/* pas de soulignement de liens */
a{text-decoration:none  !important;
}
a:link {text-decoration:none !important;
}
a:visited {text-decoration:none !important;
}
a:hover {text-decoration:none !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
display: none;
}

/*_____INDEX BOX_____*/
/**CATÉGORIES**/
/*Cadrage*/
.cadrecat {
border: 2px solid #402203;
border-radius: 15px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #b8a27f;
margin-bottom: 15px;
padding: 2px 4px 0px 3px;
}
.cat {
border: 2px solid #402203;  
border-radius: 15px;
text-align: center;  
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #a88c77;
padding: 5px 15px 5px 14px;
margin: 5px;
}
/*Titre de catégorie*/
.titrecat h2 {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 5px;
box-shadow: 2px 2px 1px #0d5938;
margin: 0% 5% 0% 0%;
padding: 10px 115px 0px 115px;
font: bold 28px Papyrus;
color: #402203;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
.titrecat h2:first-letter  {
color: #c40606;
text-shadow: 2px 2px 2px #c0a583;
font: bold 40px papyrus;
}
.titrecat h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
/**FIN DES CATÉGORIES**/

/**FORUM**/
/*Cadrage1*/
.forumgauche {
position: relative;
background: #0d5938 url(https://i.servimg.com/u/f14/15/30/06/17/essai_13.png) repeat;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #0d5938;
padding: 1px;
margin: 35px 0px 5px 15px;
}
.iconeforum img {
width: 120px;
height: 120px;
margin: 60px 15px auto;
}
/*Trait*/
.trait a {
display: inline-block;
width: 450px;
margin-bottom: 5px;
border-bottom: 3px solid #0d5938;
}
/*Titre forum*/
a.forumlink {
display: block;
text-align: left;
color: #402203!important;
font: bold 25px papyrus ;
text-shadow: 2px 2px 1px #0d5938;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
a.forumlink:hover {
color: #003a00!important;
letter-spacing: 5px;
}
a.forumlink:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 28px papyrus;
}
/*Messages&Sujets*/
.messuj span {
display: inline-block;
width: 200px;
height: 30px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;  
text-align: center;
color: #402203;
font: bold 12px papyrus;
box-sizing: border-box;  
-webkit-box-sizing: border-box;
border: 1px solid #0d5938;  
margin-right: 2px;
padding-top: 4px;  
}
.messuj span:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 14px papyrus;
}
.last_mess {
padding: 2px;
text-align: center;
font: bold 40px papyrus;
 color: #402203!important;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;  
}

/*Description*/
.blocforum {
position: relative;
overflow: auto;  
z-index: 1;
width: 400px;
height: 200px;
margin-top: -200px;
text-align: justify;
font: 12px papyrus;
color: #402203;
padding: 1px;
}
.entourage {
overflow: hidden;
width: 400px;
height: 200px;
margin-top: 15px;
border: 1px solid #0d5938;
}
.forumimg {
position: relative;
z-index: 2;
width: 400px;
height: 200px;
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;
}
.forum:hover .forumimg {
margin-left: 400px;
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;
}
/**FIN FORUM**/

/**SOUS FORUM**/
.sous-forum {
margin: -5px auto 15px;
width: 400px;
box-sizing: border-box;
bottom: -20px;
min-height: 20px;
padding: 0 10px;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 15px #0d5938;  
-webkit-border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-o-border-radius: 15px 15px 15px 15px;
}
.sous-forum a {
font: bold 10px papyrus;
margin-right: 10px;
line-height: 18px;
text-transform: lowercase;
color: #402203!important;
letter-spacing: 1px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-htm-transition: 0.3s;
-webkit-transition: 0.3s;
}
.sous-forum a:hover {
color: #402203!important;
font: bold 15px papyrus;
text-transform: uppercase;  
}
.sous-forum a:first-letter{
color: #c40606;
text-shadow: 2px #c0a583;
font: bold 14px papyrus;
}
/**FIN SOUS FORUM**/

/**ELEMENTS IMPORTANTS**/
/* Losange*/
.indexloright {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: transparent;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-right: 40px;
margin-left: 25px;
}
/* losange-img physique container-child n parent */
.indeximglo {
height: 110px;
width: 110px;
display: block;
position: absolute;
background: #769c8d;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* container-child img */
.indexloimg {
height: 110px;
width: 110px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* just img */
.indexloimg img{
width: 90px;
height: 90px;
display: block;
position: absolute;
text-align: center;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
/**FIN ELEMENTS IMPORTANTS**/
 /*_____ FIN INDEX BOX_____*/

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="cadrecat">
<div class="cat">
<div class="titrecat">
<span>{catrow.tablehead.L_FORUM}</span>
</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<table class="forum" border="0" cellspacing="0" cellpadding="0">  
<tr>  
<td width="99%"><div class="forumgauche">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td rowspan="2" class="iconeforum" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td> <td align="left" valign="middle">
<div class="trait"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="messuj"><span>{catrow.forumrow.POSTS} Calligraphies</span><span>{catrow.forumrow.TOPICS} Ecrits à l'encre</span>
</div><div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
<script type="text/javascript"> jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');
</script> </td>
</tr>
<tr>
<td valign="middle">{catrow.forumrow.FORUM_DESC}</td>
</tr>
</table></div></td>
<td rowspan="2" align="right" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<div class="indexloright">
<div class="indeximglo">
<div class="indexloimg"><img src="https://i.servimg.com/u/f25/20/23/52/33/img-lo10.png" title="imgloleft" alt="lookatit" /></div>
</div></div>
</td></tr></table>
</td>  
<tr>
<td align="left" valign="middle">
<div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</td></tr>        
</tr>
</table>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->

Code à mettre dans la description des forums ou sous forums

Code:

<div class="forum">
        
 <div class="forumimg">
     <img src="https://i.servimg.com/u/f14/15/30/06/17/forum210.png" />    
 </div>
        
 <div class="blocforum">
      Prenez le temps de vous présenter puis enfilez vos chaussons pour  vous détendre avec un petit peu de thé. Bienvenue sur gishikino        
 </div>
</div>
<div style="clear: both;">
</div>

[kheino]

Bon, le hover de l'image sur la description = OK
Les descriptions ont pris une taille plus 'normale'
Les sous-forums il n'y a que les liens

Et le code est toujours pas bon, attends-toi à avoir beaucoup de membres qui ne verront pas ce que tu vois selon leur navigateur, mais aussi à partir d'un OS Linux comme moi et à partir d'un apple...
Dommage.

[BiKinou]

Les sous-forum c'est bien où moi normalement j'ai mis "render", "template" ? Normalement j'ai mis un simple hover pour faire l'effet grossissant.
Par contre là, je ne sais pas comment faire pour rendre compatible avec les autres navigateurs

[kheino]

Par contre là,  je ne sais pas comment faire pour rendre compatible avec les autres navigateurs

Peut-être en ayant avant tout un codage html JUSTE et le reste, c'est par un css qui s'adapte au mieux avec les autres navigateurs.

Le souci, c'est que, comme je l'ai déjà mentionné, tout les templates sont certainement codés de la même façon, TA façon, ainsi que tout le css.
C'est pourquoi je ne vois pas la même chose que toi.

Si tu étais venue avec un simple schéma de ce que tu voulais, nous aurions pu alors t'aider avec un bon codage de base, mais faire du rafistolage sur ce que tu as déjà fait, c'est difficile et c'est très instable, surtout que tu n'as cessé de venir avec tes modifs template+css, sans corriger, sans attendre et surtout sans prendre en compte les erreurs qui ont même été corrigées par endroit, résultat, un genre de chaos.

[BiKinou]

Bon, je laisse tomber. J'arrive pas à voir les erreurs que tu me dis. Pfff, après 4 ans d'absence, je suis plus du tout dans le coup et je n'y arrive plus.

[kheino]

Ce n'est pas ça du tout.
Tu veux trop en faire d'un coup avant de réapprendre les bases et là il y a pleins de tutos sur le net, tous très probants.

Comme je te l'ai dit, c'est difficile de construire sur du mité, je ne sais pas pour les autres, en ce qui me concerne, j'aide volontiers à réaliser un élément ou une structure, mais je n'ai pas le temps de réaliser des tutos entiers.
Tout ce que je peux te dire, c'est que dans le codage, on peut tricher un peu, mais pas avec la structure.