Mettre un fond derrière l'ensemble des champs des catégories

[mimi_*]

Bonjour,

J'aurai besoin de votre aide pour créer un fond global derrière l'ensemble des champs des catégories... Voici ce que j'ai codé jusqu'à maintenant :


Et voici ce que j'aimerai :


Un fond à l'arrière de tout ce que j'ai déjà codé et placé...
J'ai testé des choses mais ça ne marche pas et ça me transforme tout n'importe comment  

Je vous donne mon code template :

Code:

<!-- BEGIN forumrow -->
 
     <tr>
     
          <td valign="top">
                  <div class="img_news"><img align="center" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                </td>
                 
      <td valign="top">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>
                 
      <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">navigation</div><div class="les_sous_forums" color="#fccda4"><span class="gensmall"><div class="supvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.supvirg').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script><br/></div></span></div>
                </td>                 
               
                <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">last message</div><div class="headboxtitle2"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
                </td>
        </tr>   
 
   <!-- END forumrow -->

et le CSS au cas où :

Code:

.img_news {
margin-top:8px;
margin-left:18px;}

.statsmsg {
text-align:center;
background-color:#faeee6;
width:100%;}

.descy {
margin-left:18px;
margin-right:-25px;
width:350px;
margin-bottom:18px;
text-align:justify;}

.les_sous_forums {
border-right:1px solid #f4e0d3;
border-left:1px solid #f4e0d3;
width:100px;
padding-top:10px;
padding-left:15px;
height:auto;}

.headboxtitle2 {
margin-top:6px;
text-align:center;}

a.forumlink {
background-color:#e8cfbf;
width:100%;
  display:block;
padding-left:30px;
font-weight:normal;
font-family: georgia;
font-size: 16px;
font-style:italic;
letter-spacing: 0;
text-shadow: 1px 1px 0 #ffFFff;
text-transform:lowercase;
text-decoration: none;
color : #ac5b58;}

Vous remerciant d'avance pour votre aide ...  

[Matriochka]

Bonjour,

Alors je ne comprends pas très bien… Tu voudrais que chaque forum ait son propre cadre ?

Comme ceci :

[mimi_*]

Coucou,
Oui je voudrai qu'il y ait un seul et unique fond derrière mon image new/no new, titre description, sous forum, dernier message...
Et que ce fond soit répété à chaque différent forum
C'est assez compliqué à expliquer  

[Matriochka]

D'accord. Alors je n'ai pas testé, mais si tu mets un class ici :

Code:

<!-- BEGIN forumrow -->
 
    <tr class="allo">

Tu devrais pouvoir personnaliser dans le CSS avec :

Code:

tr.allo {}

[mimi_*]

Hum j'ai testé en mettant ce code CSS :

Code:

tr.allo {background-color:#faeee6;
border-left: 8px solid #f1e5eb;
border-right: 8px solid #f1e5eb;
-moz-border-radius: 30px;
border-radius: 30px;
margin-left:15px;
margin-right:15px;
margin-bottom:10px;}

et en faite maintenant le fond devient juste rose comme j'ai mi dans background... il n'y a pas la mise en forme tu sais ?

Ca fait ça :


Y a juste le fond qui change de couleur en faite le reste n'est pas pris en compte  

Et on peut pas créer une div ou quelque chose comme ça ?  

[Matriochka]

Je vois, c'est ce que je pensais…

Hmm pour la div, on ne peut pas le faire vu que là tu utilises un tableau (on peut pas faire table > div > tr > td…)

La solution, à la limite, même si c'est pas très très joli, ce serait de faire : div > table > tr > td… Je ne sais pas si tu me suis bien ?

[mimi_*]

Ah d'accord, je vois, je savais pas que l'on pouvait pas...
Et en faisant div > table... le résultat serait bon ? Pourquoi tu dis que ça serait pas très très joli ?  

Peut être que mon codage en général est pas si bon, il existe peut être une autre façon de faire plus simple qui permettrait de faire avec une div simple ?   Pas évident...  

[Matriochka]

Hmm attends je viens de réfléchir… Ce que je dis est bête. pas besoin de div si on met une table… peux-tu m'envoyer ton template complet je vais te montrer ?

[mimi_*]

Ah D'accord
Le voici :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td class="gensmall" align="right" valign="bottom">
         <center><!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> •
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • 
         <!-- END switch_user_logged_in -->
                          <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><br /><br /></center>
      </td>
   </tr>
</table>
 

<!-- BEGIN catrow -->

   <!-- BEGIN tablehead --><img src="">
      <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END tablehead -->

 
   <!-- BEGIN forumrow -->
 
     <tr class="allo">
     
          <td valign="top">
                  <div class="img_news"><img align="center" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                </td>
                 
      <td valign="top">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>
                 
      <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">navigation</div><div class="les_sous_forums" color="#fccda4"><span class="gensmall"><div class="supvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.supvirg').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script><br/></div></span></div>
                </td>                 
               
                <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">last message</div><div class="headboxtitle2"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
                </td>
        </tr>   
 
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
   </table> <br>
   <!-- END tablefoot -->
       
        <!-- END catrow --> 
 
 

[Matriochka]

Merci bien.

Alors, ce qu'on pourrait faire :

Code:

<!-- BEGIN tablehead --><img src="">
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">

Après ceci, ajoute :

Code:

<tr><td>

Ensuite, après :

Code:

<!-- BEGIN forumrow -->

Ajoute :

Code:

<table>

Ensuite, avant :

Code:

<!-- END forumrow -->

ajoute :

Code:

</table>

Même chose après :

Code:

<!-- BEGIN tablefoot -->

Ajoute :

Code:

</td></tr>

Une fois tous ces petits changements faits, on passe à la suite pour créer les blocs.

[mimi_*]

Voilà c'est fait
Désolé j'étais partie manger... je suis de retour

Voilà ce que ça donne après ces 1ers changements

[Matriochka]

Ici :

Code:

<td valign="top">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>

Renseigne la largeur de la cellule :

Code:

<td valign="top" width="50%">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>

J'ai mis 50% par exemple, à toi de changer avec ce que tu veux

[mimi_*]

Très bien voilà c'est fait j'ai mi 55%

Rendu :

[Matriochka]

En mettant un peu plus ça devrait le faire. Sinon il faut aussi renseigner la largeur pour ici :

Code:

<td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">last message</div><div class="headboxtitle2"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
                </td>

[mimi_*]

Voilà

[Matriochka]

On va faire un test :

Code:

<!-- BEGIN forumrow -->
 <table>
     <tr>

Ici, sur la table, mets la class de ton choix et essaye d'appliquer le CSS désiré pour créer les blocs

[mimi_*]

Ca fonctionne !!!!     Merci beaucoup beaucoup pour ton aide une nouvelle fois  



Avant de cloturer le sujet, j'aurai quelques questions à te demander pour finioler tout ça comme il faut
- Quel code CSS il faut mettre pour faire un arrondi de tel px en haut à droite par exemple ? car tu vois sur le cap écran la barre de fond de last message dépasse donc je voudrais appliquer un arrondi
- Dans le template, y a t il un code style "br" pour que chaque sous forum se mette à la ligne et pas l'un derrière l'autre...

Voilà merciii  

[Matriochka]

Ah super parce que j'étais pas très sûre de moi en voyant tes captures XD

Alors pour tes questions :
- pour l'arrondi on peut utiliser: border-radius:0px 0px 0px 0px; je t'explique => le premier zéro fait référence au bord haut gauche, ensuite les autres zéros, il faut les lire dans le sens des aiguilles d'une montre, donc le second c'est le bord haut droit, le 3ème bas droit et le 4ème bas gauche
si on veut appliquer un arrondi spécial sur le bord haut droit on doit utiliser : border-radius:50px 15px 50px 50px; => avec ça, tout sera arrondi à 50px sauf le bord haut droit

Dans le template, y a t il un code style "br" pour que chaque sous forum se mette à la ligne et pas l'un derrière l'autre...

Là par contre je ne comprends pas, tu aurais un exemple ?

[mimi_*]

D'accord merci beaucoup pour les arrondis

Pour la question concernant les sous forum, en faite moi pour qu'ils se mettent les uns en dessous des autres, j'ai été "à l'ancienne" dans Général > Catégories & forums et à chaque 2e,3e,4e... sous forum j'ai ajouté < br> devant le nom... mais problème, voilà ce que ça donne quand je vais dans un forum qui contient plusieurs sous forums :


Le 2e comme j'ai mi un < br> le fond fait très caca du coup x)
Donc je me demandais s'il existait un moyen via le template de faire un retour à la ligne comme ça, sans que ça fasse des trucs moches comme ça ^^ comme j'avais demandé pour les champs du profil pour le retour à la ligne tu m'avais dit de mettre un < br> à la fin des variables, je sais pas si là ça marche de la même façon...

[Matriochka]

Si je comprends bien, je pense que tu peux mettre les sauts de ligne juste avant :

Code:

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

[Neptunia]

Coucou ^^

Je m'incruste parce que ce qu'on obtient me rapproche énormément de ce que je souhaiterais faire.

Sinon pour la présentation des sous-fofos je pense avoir pigé.
Tu veux remplacer tes virgules par des sauts de ligne ?

<div class="supvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.supvirg').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>

il te suffit de remplacer le contenu entre tes guillemets (chaine vide) par ce que tu veux !

[mimi_*]

Merci beaucoup pour votre aide
Oui j'aurai du formuler plus simplement pour les sous forums, remplacer les virgules par des sauts de ligne c'était beaucoup plus simple à comprendre pour toi Charlotte je m'en excuse ^^
Merci donc pour l'astuce AoF-Neptune

Et mille fois merci à toi Charlotte pour cette patience avec moi que tu n'as pas perdu ^^  

[Matriochka]

Ah oui d'accord, je n'avais pas compris ça ainsi en effet ^^' merci pour l'apport d'info, Neptune

Tout est OK donc ? plus de questions à ce sujet ?

[mimi_*]

Yes tout est OK :)Merci mille fois pour ton aide !