Problème taille forum + fond sous-forum

[coco-chanel]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://heartless-love.forumgratuit.eu/

Description du problème

Bonjour à tous ! ou bonsoir. Alors voilà j'ai un petit problème concernant la taille de mon forum. Malgré que j'ai inscrit 45 % dans le panneau, il ne me le réduit quand même pas. Je sais que mon header est de taille 850 mais même quand je met une image plus petite, ça ne change rien. Aussi, les sous-forums. Le fond qui s'étend de tous les côtés au lieu de s'appliquer seulement au même fond que la description. Je ne sais pas si je m'explique convenablement.

Voici mon CSS :


Et mon template :


Merci beaucoup pour votre aide!

[MlleAlys]

Bonjour,

Pour éviter que la bannière n'élargisse le forum, vous pouvez ajouter le code suivant dans votre feuille de style :

Code:

#i_logo {
    max-width: 100%;
}

Ainsi, plus besoin de s'en soucier de ce côté là.

L'élément suivant qui me parait limiter la largeur de votre forum est le qeel, dont vous avez fixé la largeur à 770px via votre css. Pour l'éviter, localisez le code suivant dans votre feuille de style :

Code:

#QEEL {
    background: #fff;
    border: 2px solid #F2F2F2;
    margin: auto;
    padding: 5px;
    text-align: justify;
    width: 770px;
}

et changez width en max-width, ce qui donne :

Code:

#QEEL {
    background: #fff;
    border: 2px solid #F2F2F2;
    margin: auto;
    padding: 5px;
    text-align: justify;
    max-width: 770px;
}

Enfin, le dernier élément qui élargit votre forum est le cadre de la publicité, et là malheureusement pas moyen d'y remédier sans dépenser des crédits pour la retirer.
Quelque soit la taille de l'écran, la largeur minimale de votre forum sera de 748px.

Voilà pour ce qui est de la largeur de votre forum.

En ce qui concerne les histoires de fonds, je ne suis pas certaine d'avoir bien compris... Auriez vous un schéma, un montage de ce que vous voulez à la place de ce que vous avez ?

[coco-chanel]

Oh merci beaucoup ! tous vos codes marchent à merveille.

et pour ce qui est des sous-forums, j'ai réussi à tout mettre en ordre.

est-ce que je peux te demander comment faire pour mettre les liens des sous-forums automatiquement en majuscule ? en grandes majuscules et non en 'small-caps' ?
et aussi, dernière question lol, comment faire pour mettre l'écriture en retrait dans les sujets ?

merci bcp !

[MlleAlys]

Alors, on va simplifier un peu les choses pour que ce soit plus facile et plus rigoureux, ça évitera des problèmes d'affichage ^^

- remplacez 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} {CURRENT_TIME} </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>
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
        <!-- END switch_user_logged_in -->

        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>

      </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="30"><img src="{SPACER}" height="0" width="30" /></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}">{catrow.forumrow.FORUM_NAME}</a>
            </span>
        </h{catrow.forumrow.LEVEL}>

        <table width="100%" border="0" cellpadding="0" cellspacing="1">
          <tr>
            <td width="80%">
              <div class="description genmed">{catrow.forumrow.FORUM_DESC}</div>
            </td>
            <td>
              <div class="sousfo gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
              <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br/>')).removeAttr('id');</script>
            </td>
          </tr>
        </table>

        <div class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
        </div>

      </td>

      <td class="row3 over" align="center" valign="middle" height="50">
        <div class="gensmall">
          {catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages
          <!-- BEGIN avatar -->
          <div style="width: 50px;"></div>
          <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
          <!-- END avatar -->
          {catrow.forumrow.LAST_POST}
        </div>
      </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 -->

Puis remplacez votre css par celui-ci :

Code:

.description, .sousfo {
    background: #f2f2f2;
    height: 60px;
    overflow: auto;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #E2E2E2;
}
.description {
    margin-right: 15px;
}
.sousfo {
    text-transform: uppercase;
}

.lastpost-avatar img {
    width: auto;
    height: auto;
    max-height: 50px;
    max-width: 35px;
    margin: 5px;
}

- pas besoin de code supplémentaire dans la description des forums ^^
- la largeur des blocs est automatique, ici 80% de la largeur pour la description, et doc automatiquement les 20% restants pour les sous-forums. Pour modifier ce 80%, c'est dans le template qu'il faut le faire ^^
- les osus-forums sont automatiquement en majuscules grâce au css avec la ligne : text-transform: uppercase;
- pour modifier l'écart entre les deux blocs, modifiez dans le css la valeur de : margin-right: 15px;
- j'ai ajouté une petite bordure comme sur votre schéma, mais vous pouvez la retirer en supprimant la ligne du css : border: 1px solid #E2E2E2;

---

EDIT : on s'est croisé je crois, vous avez dû éditer le message pendant que je répondais, désolée ! J'ai édité mon code précédent pour mettre en majuscules et non petites majuscules.

Pour les retraits dans les sujets, je ne vois pas de quoi vous voulez parler....

[coco-chanel]

Tout compte fait, c'est très bien qu'on s'est croisées. Vos codes sont beaucoup plus propre et ça rend beaucoup mieux. Les miens étaient un peu fouillis ... merci beaucoup !!!!!!!
Pour les retraits dans les sujets, c'est un peu comme ça en fait :

https://i.servimg.com/u/f84/19/42/12/29/sans_t11.jpg

il y a un retrait (la ligne rouge) qui se fait automatiquement.

[MlleAlys]

Ajoutez dans votre feuille de style css :

Code:

.postbody {
    padding-left: 15px;
}

.postbody est le bloc qui contient les messages,
et les padding sont les marges intérieures.
Modifiez la valeur 15px pour une marge plus ou moins grande.

[coco-chanel]

C'est parfait ! Merci beaucoup pour votre aide.

[Chacha]

Bienvenue sur le forum de support de Forumactif Bonjour, 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.