création d'un cadre et remplissage

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 2:51

Bonjour,

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

Déjà pour commencer voici un exemple de catégorie de mon forum:
création d'un cadre et remplissage Sc10

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
création d'un cadre et remplissage Spooky13

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

Je vous remercie par avance,

Cordialement !


Dernière édition par Freak-M le Dim 12 Juin 2011 - 17:52, édité 1 fois
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 3:02

Bonsoir,

pouvez-vous me fournir votre template index_box ?

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 3:04

Le voici Very Happy

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

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 3:15

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 3:46

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:
création d'un cadre et remplissage Sans_t13

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

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 Smile
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 3:55

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 4:18

Yeah c'est presque parfait Very Happy
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.

création d'un cadre et remplissage Sans_t14

Et le dernier souci c'est dans la dernière colonne:
création d'un cadre et remplissage Sans_t15

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 ^^
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 4:20

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 4:32

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à ^^
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 4:42

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 4:53

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 Razz
Cordialement
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 12:52

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 13:39

Bonjour !

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

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 Smile
Mais je voudrais bien garder mon image d'en tête à l'endroit ou elle se trouvait (donc à droite de la colonne) Confused
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:
création d'un cadre et remplissage Sans_t16
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 16:42

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

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 16:51

Nan ça reste tel qu'il est :no
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 17:04

Embarassed 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.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 17:35

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 Very Happy
création d'un cadre et remplissage Sans_t17

Problème réglé cheers Merci beaucouuuuuuuuuuuuup I love you

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*/
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par SoraNoHime Dim 12 Juin 2011 - 17:48

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: création d'un cadre et remplissage

Message par So-Mush Dim 12 Juin 2011 - 17:52

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

Cordialement !
So-Mush

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum