Image qui contourne la catégorie

[b2uty]

Bonsoir, je cherche comment pouvoir mettre des images qui contourne les catégories
comme ceci :

Spoiler:

Quelqu'un pourait m'aider a réussir à faire ça s'il vous plaît ?
Merci d'avance.

[Hell-eonore]

Bonjour,

Pouvez vous me fournir votre template index_box et les images que vous voulez mettre en haut et en bas svp ?

Cordialement.

[b2uty]

Bonjour,
Alors voici mon template :

Index_box

Code:


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


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



          </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="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"> </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}"><div align="left">{catrow.forumrow.FORUM_NAME}</div></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>
          <!-- BEGIN forum_link_no -->
         
          </td>
                <td class="row3 over" align="center" valign="middle" height="50"><table class="stats"><tr><td>
  <span class="gensmall">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span></td></tr>
                <tr><td><span class="gensmall">{catrow.forumrow.LAST_POST}</span></td></tr></table>
            </td>



          </td>
          <!-- END forum_link_no -->
          <!-- BEGIN forum_link -->
          <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
          <!-- END forum_link -->
      </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 -->


et les images :

Spoiler:

[Hell-eonore]

Bonjour,

Essayez comme ça avec le Template:

Retiré par la modération.

Et ajoutez cela au CSS:

Code:

    .secondarytitle {
    background-image: url('http://i46.servimg.com/u/f46/14/46/58/04/21738910.png');
    background-repeat: no-repeat;
    background-color: transparent;
    height: 119px;
    width: 992px;
    }
 
    .imgbas {
    background-image: url('http://i46.servimg.com/u/f46/14/46/58/04/21738911.png');
    background-repeat: no-repeat;
    background-color: transparent;
    height: 119px;
    width: 992px;
    }

Cordialement.

[b2uty]

Pour le template il me dit :

Erreur
La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.


il manque quelque choses je pense.

[Hell-eonore]

Oui, excusez moi,
Essayez en enlevant la dernière partie du Template:

Code:

<!-- END catrow -->

[b2uty]

non ça ne veut toujours pas, il m'écrit encore la meme choses.

[tupac]

Bonjour Hell-eonore

Si tu examines bien le template que tu as modifié en bas de celui-ci plusieurs lignes sont en double normalement ces lignes ne doivent pas être modifiés pour faire ce genre de chose.

Cordialement

[Hell-eonore]

Ah oui, effectivement, je n'avais pas vu qu'il se répétait merci beaucoup

Remplacez donc votre template par celui-la:

Retiré par la modération

Cordialement.

[Invité]

Bonjour,

Pour rappel:

L'aide apportée dans cette section doit être détaillée
Elle doit se faire pas par pas. Nous avons conscience qu'expliquer un code à un débutant peut-être complexe et fastidieux, mais détailler un code pourra profiter aux autres qui n'auront qu'à suivre l'explication en modifiant le code selon leurs goûts. De fait, les réponses fournissant un code complet à copier/coller (template et/ou CSS) sont interdites et pourront être sanctionnées.
Le but est bien de donner la marche à suivre pour obtenir le résultat, et non le résultat directement !

J'ai donc retiré les templates, merci de respecter cette règle à l'avenir.

Cordialement.

[b2uty]

J'avoue que sa m'aiderais de savoir comment on fait pour pouvoir modifier a ma guise.

Merci de m'aider à réaliser cette demande.

[tupac]

Bonjour

Je vous montre comment faire.
Donc dans votre template index_box repérer la partir suivante.

Code:

            <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>

et placer juste avant ce code,il nous permet de fixer l'image du haut.

Code:

      <div width="100%" class="img_haut"> </div>

Ensuite repérer cette partie en bas de template.

Code:

<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

puis placer juste avant la partie suivante pour fixer l'image du bas.

Code:

      <div width="100%" class="img_bas"> </div>

et pour finir dans votre feuille de style css placer les codes suivants.

Code:


.img_haut{background: url( ici image du haut);
  width: 992px; height: 119px;
}

.img_bas{background: url( ici image du bas );
  width: 992px; height: 119px;
}

[b2uty]

Waaa c'est parfait j'ai réussi.
Au début j'ai eu peur envoyant tout ces codes, mais ça ces bien passer.

Un grand,grand merci a tous pour votre aider ^^
Je met maintenant ce sujet résolu.
Encore merci XD