Image de fond des catégories

[Laakoh]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,

Je rencontre un problème de codage : je ne parviens pas à mettre une image derrière les box de catégories. Que ce soit par le CSS ou par les templates, impossibles d'ajouter un background pour compléter correctement le design... J'ai essayé plusieurs méthodes proposées ici, mais si j'ai pu changer chaque "box" je ne parviens toujours pas à leur ajouter un fond spécifique pour l'ensemble d'une catégorie.

Une copie de mon template "Index_box" :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<div class="cate_titre">{catrow.tablehead.L_FORUM}</div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
<div class="forum_double">
  <div class="forum">
    <div class="icone_forum">         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    <div class="sous_forum"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
    <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  <div class="description">{catrow.forumrow.FORUM_DESC}</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>
  </div></div>
        <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="https://i.ibb.co/zZCnwdR/cate-bas-fond2.png" /></td></tr></table><!-- END tablefoot --><!-- END catrow -->

Merci d'avance de votre aide !

[*Splash*]

Hi,
Ce code de 27 lignes est loin d'être le code de ton index_box

[Laakoh]

Bonjour,

Si si, c’est mon Index_box. (Pas Index_body)
La mise en page des catégories en « boites » fait que ce code à 27 lignes.

[*Splash*]

Voici l'index_box d'un forum phpBB 2 sans modification

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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
 <th nowrap="nowrap" width="50">{L_TOPICS}</th>
 <th nowrap="nowrap" width="50">{L_POSTS}</th>
 <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
 </tr>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
 <h{catrow.cathead.LEVEL} class="hierarchy">
 <span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 </h{catrow.cathead.LEVEL}>
 </td>
 <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
 </tr>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
 <!-- END inc -->
 <td class="{catrow.forumrow.INC_CLASS}" 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 class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
 </h{catrow.forumrow.LEVEL}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN ads -->
            <span class="AD_LastPA">
                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                <span class="AD_LastInfos">
                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                    {catrow.forumrow.ads.DATE}<br />
                    {catrow.forumrow.ads.LOCATION}
                </span>
            </span>
            <!-- END ads -->
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </tr>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
 <tr>
 <!-- BEGIN inc -->
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 <!-- END inc -->
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Ton code semble incomplet il me semble

[Laakoh]

Bonjour,

Merci pour ce code "neutre" !

La partie "barre de navigation" avec le log in est géré dans un autre template, donc elle n’apparaît pas dans celui-ci. J'ai retiré les balises "derniers messages, sujets sans réponses, etc..." donc ça retire aussi des lignes de codage.

Mais effectivement je n'ai rien entre certaines balises... J'ai du modifier pas mal de choses et y lier au CSS pour mettre en forme, peut-être que j'ai supprimé une donnée qui me permet d'avoir le fond des catégories ? Vu qu'actuellement il est en "transparent" ....

Mon CSS actuel pour cette partie :

Code:

/* CATEGORIES */
.cate_titre
{
  clear: both;
  margin-bottom: -20px;
  margin-top: 15px;
  background: url(https://i.ibb.co/j5ZhbLv/cate-haut-fond.png);
  background-repeat: no-repeat;
  border-top-radius: 20px;
}
.cate_titre h2
{
  text-align: center;
  font-size: 28px !important;
font-family: 'Playfair Display SC', serif;
  text-shadow: 1px 1px 0px #000000;
  color: #262d37;
  font-weight: normal;
}
.forum_double
{
  position: relative;
  float: left;
  z-index: 5;
  width: 400px;
  height: 180px;
  margin: 10px;
  margin-right: 10px;
  background: #2f3e4a;
  transform: rotate(2deg);
  transition: 500ms;
      background: url(https://i.ibb.co/Vqfpj4y/cate-fond.png);
  background-repeat: no-repeat;
  box-shadow: 0px 0px 10px #000000;
}
.forum_double:hover
{
  background: #a6988f;
  transition: 500ms;
}
.forum
{
  position: relative;
  z-index: 6;
  float: left;
  width: 400px;
  height: 180px;
  background: #262d37;
  transform: rotate(-2deg);
}
a.forumlink
{
  display: block;
  background: #181c21;
  text-align: center;
  padding: 2px 0;
}
.description
{
  height: 140px;
}
.illu_gauche, .illu_droite
{
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  padding: 2px;
  background: #d89130;
  margin: 15px 10px 0 -57px;
  border: 5px solid #181c21;
}
.illu_droite
{
  float: right;
  margin: 15px -57px 0 10px;
}
.description_texte
{
  height: 80px;
  overflow: auto;
  padding: 10px;
  font-size: 10px;
  text-align: justify;
  line-height: 11px;
  color: #646464;
}
.last_mess
{
  position: absolute;
  width: 400px;
  padding: 2px 0;
  text-align: center;
  background: #181c21;
  margin-top: 2px;
}
.icone_forum
{
  position: absolute;
  margin-left: 320px;
  margin-top: 120px;
}

Au cas où, voici le template "neutre" que j'avais au départ pour la mise en page, proposé par Okhmaka :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

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

 <!-- END tablehead -->
 <!-- BEGIN cathead -->


 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 

<div class="forum_double">
  <div class="forum">
    <div class="icone_forum"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    <div class="sous_forum"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
     <script type="text/javascript">
  jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
  </script>
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  <div class="description">{catrow.forumrow.FORUM_DESC}</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>
  </div></div>
  
        <!-- END forumrow -->
 <!-- BEGIN catfoot -->


 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->

[*Splash*]

Est-il possible d'avoir accès à ton forum en tant qu'invité ?

[Laakoh]

Bonjour,

Oui, j'ai ouvert l'accès exceptionnellement.

Je crois que le problème, c'est que le "fond" du forum est mis en page derrière les boites de catégories.
Ce qui fait que j'ai pu changer "forumline" avec l'image, mais elle apparaît derrière les boites.
J'ai tenté de créer une classe pour le fond des catégories, un bloc derrière les ensembles de box, mais ça ne fonctionne pas...

[*Splash*]

Ton image des catégories est bien présente dans ta CSS :

Code:

.cate_titre
{
  clear: both;
  margin-bottom: -20px;
  margin-top: 15px;
  background: url(https://i.ibb.co/j5ZhbLv/cate-haut-fond.png);
  background-repeat: no-repeat;
  border-top-radius: 20px;
}

Ou alors je ne comprends pas ce que tu cherches à obtenir

[Laakoh]

Bonjour,

Ca, c'est le fond de mes titres de catégorie dans mon codage.

Voilà ce que je cherche : mettre une texture à la place du blanc de l'image. Pour que les boites de forums soient prises dans un cadre plus grand.



Mais peut-être que je devrais seulement enlever l'effet "de survolage" au passage des forums pour parvenir à rétablir le fond correctement ?

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Laakoh]

Up, mon problème n'est toujours pas résolu

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.