création d'un cadre et remplissage

[So-Mush]

Bonjour,

Je vais essayé d'être la plus précise possible ^^'

Déjà pour commencer voici un exemple de catégorie de mon forum:


Comme vous pouvez le voir l'index est constitué d'un icone et deux 2 colonnes (l'une ou l'on voit les titres et les description des forums et l'autre ou l'on peut voir les derniers messages postés dans le nombre de sujet ainsi que le dernier posteur+date+heure....)

Ma requête est la suivante:
J'aimerais pouvoir créer un cadre qui partirait de la gauche l'icone pour se terminer à la droite de la dernière colonne (grossièrement parlant un cadre qui engloberait la largeur de tout les éléments d'une "ligne" si je puis dire)
Et avec se cadre avoir également un remplissage couleur complet de la ligne et pas comme maintenant ou l'on voit une démarcation entre les trois partie.

Je vous ai imagé à peu près mon idée:

le cadre que je demande est représenté en rouge
Pour le remplissage vous pourrez voir qu'il n'y a plus de traits gris entre chaque parties


J'espère que ça a été compréhensible ^^

Je vous remercie par avance,

Cordialement !

[SoraNoHime]

Bonsoir,

pouvez-vous me fournir votre template index_box ?

Cordialement.

[So-Mush]

Le voici

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="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">
         <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

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

[SoraNoHime]

En fait, il suffit de replacer ces cellules (Images et description) dans un tableau qui sera placé dans le tableau original ^^

Repérez ceci

Code:

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

et modifier le ainsi :

Code:

          <!-- 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"><table width="100%"><tr>
          <td 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>

puis ceci :

Code:

                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50"><table><tr><td>
    <div class="stats"><span class="gensmall">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span></div></td></tr>
                <tr><td><div class="dermessage"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td></tr></table>

que vous remplacez par :

Code:

                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td></tr></table>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50"><table><tr><td>
    <div class="stats"><span class="gensmall">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span></div></td></tr>
                <tr><td><div class="dermessage"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td></tr></table>

Mais comme nous n'avons plus qu'une cellule dans notre tableau d'origine, il nous faut retirer le colspan dans la barre de titre :

Repérez ceci presque au début du template :

Code:

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

Et remplacez le par ceci :

Code:

      <th nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

Enregistrez et publiez. Cordialement.

[So-Mush]

Je l'ai refait deux fois et j'ai eu le résultats suivant:
- il y a bien eu une fusion d'arrière plan l'icone et la partie description du forum
- pas de fusion d'arrière plan pour la troisième colonne
- la troisième colonne est devenue plus large
- pas de cadre


Voilà un sreen du résultat:


Et voilà le template modifié si vous voulez vérifier que j'ai bien tout respecter (on ne sait jamais il est tard ):

Voilà le code modifié

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 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"><table width="100%"><tr>
          <td 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">
            <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

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

Cordialement

[SoraNoHime]

Remplacez déjà votre template par celui-ci

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 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" colspan="2"><table width="100%" class="enclave"><tr>
          <td 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">
            <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

                </span>
            </table>
            <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 over" align="center" valign="middle" height="50"><table><tr><td>
    <div class="stats"><span class="gensmall">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span></div></td></tr>
                <tr><td><div style="width:150px;"><div class="dermessage"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></div></td></tr></table>
          </td></tr></table>
            </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 -->

Comme vous l'avez dit il est tard ^^, je n'avais pas saisi toutes les info de votre demande.

insérez ensuite dans votre css :

Code:

.enclave {
background-color: #ff0000;
border : 1px solid #00ff00;
}

Personnaliser le fond et le cadre par la css.

Ai-je bien tout saisi cette fois ?

Cordialement.

[So-Mush]

Yeah c'est presque parfait
J'ai juste trois petits soucis et c'est nickel

mon image inséré dans la droite de l'en tête catégorie grâce à ce code

Code:

th.secondarytitle {
    background: url("http://i23.servimg.com/u/f23/15/43/77/74/58293010.png") no-repeat scroll center top black;
    background-position: right;
    height: 15px;
    width: 46px;
    background-color: #5C3F3A;
}

est maintenant centré, et mon titre de la dernière colonne "derniers messages" l'a rejoint.



Et le dernier souci c'est dans la dernière colonne:


Comme vous pouvez le voir au niveau de la flèche verte, les titres trop longs ne sont plus arrêtés ils continuent et dépassent.

Sinon tout le reste me convient très bien ^^

[SoraNoHime]

Malheureusement, je ne vois pas les images ce soir, je bugue. Pouvez-vous me fournir un lien direct , celui de votre profil est erronée.

Cordialement.

[So-Mush]

Oui c'est mon forum officiel que j'ai mis dans mon profil,
Je suis en train de tout mettre en place sur mon forum test:

Code:

http://fakefo.dieuxdustade.org/forum

Voilà ^^

[SoraNoHime]

pour le premier problème, repérez ceci :

Code:

          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" colspan="2"><table width="100%" class="enclave">

remplacez le par :

Code:

          <td class="{catrow.forumrow.INC_CLASS}" valign="middle" colspan="2"><table width="100%" class="enclave">

Pour le second, je ne vois pas les titres des messages sur votre forum. JE ne peux donc vérifier. Par contre c'est étrange car je n'ai pas toucé cette partie, juste intégré le tableau du tour.

cela vient peut-être du centrage, si cela ne convient pas en enlevant le align="center", supprimer aussi le valign="middle" pour tester.

Cordialement.

[So-Mush]

J'ai effectué la première manip il n'y a pas eu de changement :no
Par contre la suite je pense que je verrais demain car là... mes yeux se ferment ^^'

Bonne soirée ou nuit ou journée je ne sais pas trop quoi dire dans le cas présent
Cordialement

[SoraNoHime]

Quand je teste, je n'ai pas les problèmes décrits.

Pourriez-vous me fournir votre css complète, que je vérifie.

Cordialement.

[So-Mush]

Bonjour !

J'ai enlevé valign="middle" comme vous mem l'avez dis, les textes ne semblent plus dépasser sur le côté

Voilà ma feuille de style

Code:

body
{
background-repeat: repeat-x;

}
{
background-attachment:scroll;
background-color: #000000;
background-image: none;
}


#page-body
{
background-color: url(http://i29.servimg.com/u/f29/15/39/27/83/middle11.png); /*FOND ENTRE LE CADRE ET LE FORUM*/
background-repeat: no-repeat;
background-position : top center ;
}

/*Cadre du forum*/
#page-body
{
background-color: none;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: 0px 0px 0px #a1b6c5;
-moz-box-shadow: 0px 0px 0px #a1b6c5;
border: 0px solid #000000;
padding-top: 60px;
margin-top: 8px;
margin-bottom: 20px;
}

.navig {
position: absolute;
top: 0px;
width: 100%;
background-image: url("http://i23.servimg.com/u/f23/15/43/77/74/68289810.png");
background-repeat: repeat-x;
height: 40px;
border-bottom: 3px solid #1A0F0F;
left: 0px;
right: 0px;
}

a:hover
{
text-decoration: underline overline !important; /* lignes  au dessus et en dessous du menu*/
}


.bodyline{
background-image: url(http://i29.servimg.com/u/f29/15/39/27/83/middle11.png);
background-repeat: repeat-y;
background-position : top center ;
}

.forumline
{
max-width: 990px;
margin: auto;
background-image: url(none); /*FOND DES CATÉGORIES*/;
background-position: center;
background-repeat: repeat-y repeat-x;
background-color: #5C3F3A;
padding-left: 15px; /*espace entre les bloc et le cadre de l'index*/
padding-right: 15px; /*espace entre les bloc et le cadre de l'index*/
padding-bottom: 15px; /*espace entre les bloc et le cadre de l'index*/
padding-top: 8px; /*espace entre les bloc et le cadre de l'index*/
-moz-border-radius: 11px;
border-radius: 5px;
margin-bottom: 20px;
border-radius: 30px;
}

table
{
max-width: 890px;
margin: auto;
}

.row1, .row2, .row3, .row3Right
{
-moz-border-radius: 5px;
border-radius: 5px;
padding4px;
border: none !important;
}


.cattitle
{
margin-left: 20px;
font-variant: small-caps;
}


/*espacement entre les lettres des écritures das sous catégories*/
a.forumlink
{
letter-spacing: 2px;
font-variant: small-caps;
}

a.forumlink:hover
{
text-decoration: none !important;
}

 a:hover{text-decoration: none !important;}          /* barre liens */
    a {text-decoration: none !important;}        /* barre liens */
    a:link {text-decoration: none;}        /* barre liens */
    a:visited {text-decoration: none;}        /* barre liens */

.catHead
{
border: none !important;
}

.catBottom
{
border: none !important;
}

.code
{
border: 2px inset #8dbcdd;
padding: 5px;
background-color: none;
color: #000000;
}

.quote
{
background-color: #1A0F0F;
border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #000000;
color: #635A5A;
padding: 4px;
}

.spoiler_closed
{
background-color: #1A0F0F;
border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #000000;
}



.spoiler_content
{
background-color: #1A0F0F;
border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #000000;
color: #635A5A;
padding: 4px;
}


.postbody
{
text-align: justify;
padding: 3px;
font-size: 11px;
line-height: 16px;
}


/*image pied de page */
#page-footer
{
background-image: url(http://i29.servimg.com/u/f29/15/39/27/83/footer11.jpg);
background-repeat: no-repeat;
background-position: center;
width: 1120px;
height: 223px;
margin-bottom: -18px;
}



a.forumlink {
text-align: center;
text-decoration: none !important;
background-color: /*Fond du Cadre*/;
border-bottom: 2px double /*Bas du Cadre*/;
border-top: 2px double /*Haut du Cadre*/;
border-right: 5px solid /*Cadre Droit*/;
border-left: 5px solid /*Cadre Gauche*/;
-moz-border-radius: 8px;
display:block;

}

a.forumlink:hover {
text-align: center;
text-decoration: none !important;
background-color: /*Fond du Cadre*/;
border-bottom:2px double #/*Cadre Bas avec la Souris*/;
border-top: 2px double /*Haut du cadre avec la Souris*/;
border-right: 5px solid /*Cadre Droit avec la Souris*/;
border-left: 5px solid /*Cadre Gauche avec la Souris*/;
-moz-border-radius: 6px;
display:block;
}



#i_logo {
    position: center;
    }

.mainmenu{
height: 0px;
      background-color: #1A0F0F;
      border: 2px solid #ffffff;
      -moz-border-radius-topleft: 0px;
      -moz-border-radius-topright: 0px;
      -webkit-border-top-right-radius: 0px;
      -webkit-border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-top-left-radius: 0px;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      padding: 10px;
      font-family: Verdana,Arial;
     
    }

    .mainmenu:hover {
    height: 0px;
    background-color: #524444 ;
    border: 2px solid #ffffff;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 10px;
    font-family: Verdana,Arial;
   
    }

   
 .onglet{
      color: #ffffff;          /* couleur texte onglet */
      font-size: 13px;   
      font-family: Verdana,Arial;
      display:inline-block;
      margin-left:10px;            /* marge gauche entre chaque onglet */
      padding:3px;
      border:2px solid #fff;              /* bordure onglet */
      -moz-border-radius: 10px 10px 0px 0px;      /* arrondi les onglets */
      -webkit-border-radius: 10px 10px 0px 0px;
      border-radius: 10px 10px 0px 0px;
      cursor:pointer;
    }

    .onglet_0{
      background:#1A0F0F;          /* couleur font onglet */
      border-bottom:2px solid #8F8A7B;        /* couleur bordure bas onglet */
    }

    .onglet_1{
      background:#5C3F3A;      /* couleur onglet selectionné */
      border-bottom:2px solid #524444;      /* bordure bas onglet selectionné */
    }

    .contenu_onglet{
      background-color:#5C3F3A;
      border: 2px solid #ffffff;
      -moz-border-radius: 10px;      /* arrondi les bordures cadre */
      -webkit-border-radius: 10px;
      border-radius: 10px;
      margin-top: -2px;
      padding:7px;
      display:none;
      width: 885px;;        /* largeur du tableau */
      height: 225px;        /* hauteur du tableau */
    }

    .my_modified_table{
      width: 80%;
      margin-left: 10%;
    margin-right: 10%;
    margin-top: 5px !important;
    font-family: Verdana;
    }

    .my_forum_name{
      display:none;
    }
    .my_img{
    width: 10%;
    margin-left: 50px;
    }
    .my_disc{
    width: 70%;
    text-align:center;
    font-size: 13px;
    }
    .my_stats{

    width: 20%;
    text-align:center;
    }

    .myfoo_title{
      text-align:center;
      width: 100%;
      -moz-border-radius: 6px;
      border: 1px solid #EAEAEA;

    }
    .my_title{
      text-align:center;
      font-size: 14px;
    font-family: Arial;
    }

    .my_cat_body{
    border: 1px solid #EEE;
    -moz-border-radius: 3px;

    }

    .my_cat ul{
    margin:0;
    padding: 0;
    width: 800px !important;
    }
    .my_cat li{
    margin-left: 2px;
    }
    .my_cat_style{
    border-top: 1px #666 solid;
    border-left: 1px #666 solid;
    border-right: 1px #666 solid;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    text-align:center;
    font-size: 11px;
    padding-left:10px;
    padding-right:10px;
    display:inline;
    background-color: #EAEAEA;
    width: 200px;
    font-family: Arial;
    font-weight: bold;

    }
    .my_cat a{
    text-decoration: none !important;
    color: #000;
    }

/* pour aligner le nombre de message et reponse à droite */
span.foruminfo { text-align: right; display: block; font-size:10; }


/* pied de page mentions légales*/
#page-footer a
{
font-size: 10px;
text-decoration: none !important;
}


/*avatar centré */
div.infos_posteur{
  width:150px;
  margin:auto;
  text-align:center;
  background-color:#1A0F0F;
  border : 0px  white; /*dashed code bord pointillés*/
-moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
    -moz-border-radius-bottomright: 25px;
  }


/*index messages postés dans sujets*/
.foruminfo {
  float: right;
}


/* titre index */
.secondarytitle, .secondarytitle h2{
color: #ffffff;
font-size: 40px;
font-variant: small-caps;
text-shadow: 0px 0px 0px #C3C3C3;
text-align: left;
font-family:kalinga ;
text-shadow: 1px 1px 2px ;
padding-top: 10px
}

/* image en tête catégorie */
th.secondarytitle {
    background: url("http://i23.servimg.com/u/f23/15/43/77/74/58293010.png") no-repeat scroll center top black;
    background-position: right;
    height: 15px;
    width: 46px;
    background-color: #5C3F3A;
}



th
{
color:  ;
font-variant: small-caps;
text-shadow: 1px 1px 2px ;
font-size: 12px;
font-family:kalinga ;
}

/*déco colonne 3*/
    .stats{
      background-color: #8F8989;
      padding: 3px;
      text-align: center;}


/*déco colonne 3*/
    .dermessage{
      background-color: #8F8989;
border: 1px dashed #ffffff;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-bottomright: 12px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top-left-radius: 12px;
  padding: 3px;
  text-align: center;}
   

.enclave {
background-color: #1A0F0F;
border : 1px solid #ffffff;
}

Cordialement !

Edit: en regardant dans ma feuille de style css je me suis rendue compte que lorsque j’enlevai le code de mon image d'en tête donc celui ci:

Code:



th.secondarytitle {
    background: url("http://i23.servimg.com/u/f23/15/43/77/74/58293010.png") no-repeat scroll center top black;
    background-position: right;
    height: 15px;
    width: 46px;
    background-color: #5C3F3A;
}

le titre de la troisième colonne été sa place
Mais je voudrais bien garder mon image d'en tête à l'endroit ou elle se trouvait (donc à droite de la colonne)
Il n'y a pas un autre code qui me permettrait de la replacer à cet endroit ?
J'ai essayé via la gestion des images des PA de placer l'image dans "Image du fond des titres" le problème c'est que l'image se répète en hauteur et en largeur sur toute l'en tête (donc les deux colonnes)
de cette façon:

[SoraNoHime]

En laissant sur votre dernière manipulation, essayez ainsi dans votre css :

Code:


 secondarytitle {
background-repeat : no-repeat;
}

[So-Mush]

Nan ça reste tel qu'il est :no

[SoraNoHime]

Normal, j'ai oublié le .

Code:

 .secondarytitle {
background-repeat : no-repeat;
}

Essayons ceci, c'est ce qu'on utilise pour l'insertion d'images dans la barre de titre :

Code:

/*Titre des catégories*/
.secondarytitle{
background-image: url('lien de votre image'); /*votre image*/
background-repeat: no-repeat;
background-position:left bottom;
text-align: left;
height: hauteurpx; /*hauteur de l'image*/
width: largeurpx;} /*largeur de l'image*/

.secondarytitle h2 {
padding-left : largeurpx; /*Largeur de décalage, pour situer où doit commencer le titre et pas empiéter sur l'image*/
}

N'oubliez pas d'enlever votre image dans celles de la gestion d'images.

Dites moi si c'est mieux.

[So-Mush]

Ah bin moi je n'ai pas vue qu'il manqué ce point non plus ^^'

Alors j'ai essayé ce que vous m'avais donné en rajoutant toutes les parties voilà le code changé:

Code:

    /*Titre des catégories*/
        .secondarytitle{
        background-image: url('http://i23.servimg.com/u/f23/15/43/77/74/58293010.png'); /*votre image*/
        background-repeat: no-repeat;
        background-position: right bottom;
        text-align: left;
        height: 48px; /*hauteur de l'image*/
        width: 131px;} /*largeur de l'image*/

        .secondarytitle h2 {
        padding-right : 550px; /*Largeur de décalage, pour situer où doit commencer le titre et pas empiéter sur l'image*/

  }

Et... voilà le résultaaaaats


Problème réglé Merci beaucouuuuuuuuuuuuup

J'ai juste une question avant de clôturer le sujet,
Est ce que en fonction de la formes des écrans des personnes (rectangulaires pour les pc portables et parfois carré pour les pc classiques) et des résolutions d'écran, le décalage de 550 pixel que j'ai fait avec ce code peut ne pas être le même (donc est ce que ça peut ne plus être aligné) ?

Code:

 .secondarytitle h2 {
        padding-right : 550px; /*Largeur de décalage, pour situer où doit commencer le titre et pas empiéter sur l'image*/


[SoraNoHime]

Normalement, ce décalage se fait par rapport à votre image, donc à moins qu'elle ne soit réduite ou agrandie par les fonctions de zomm des navigateurs, elle gardera sa taille, et donc le décalage ne peut en patir, vu qu'il est là juste pour éviter que le titre n'apparaissent sur l'image.

Le tout devrait toujours donc être aligné, normalement.

Si vous avez des doutes, je vous invite à faire quelques tests ^^.

Cordialement.

[So-Mush]

D'accord
Je vous remercie pour toute cette précieuse aide et les derniers renseignements

Cordialement !