Déformation d'éléments du forum suite à l'instauration d'un code bannière.

3 participants

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

Résolu Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par Mephistofelis Jeu 22 Mar 2012 - 20:32

Bonsoir à tous les membres de forumactif, et merci à ceux ou celles s'hasardant à abandonner un peu de leur temps pour accéder à ma requête.

Je suis Fondatrice d'un forum en PhpBB2; Monsterevolution.

Récemment, j'ai installé un code permettant à la bannière du forum de prendre toute la largueur du cadre du site, en suivant le tutoriel suivant : ici.
Merci à Sen Hime au passage. ;3

Tout est absolument parfait, outre certains détails bien embêtants.
J'ai essayé de corriger le souci moi-même, mais étant absolument ignoble en codage, j'ai finalement préféré laisser le code tel quel. Le problème n'est pas forcément impressionnant, mais dérangeant. Il s'agit de déformations visant certains sujets ainsi que la boîte de messagerie.

Voici les images.

messagerie :

sujet:

La plupart des sujets demeurent normaux. Néanmoins, vous remarquerez avec le screen ci-dessus qu'un simple détail (ici, le tableau), suffit à tout dérégler.

Ci-contre, le code CSS :

Code:

.forumline, #emptyidcc,  .bodyline, .bodylinewidth, #page-body
{
width: 750px;
padding: 0px;
}

La feuille CSS en entière :

Code:


.bodyline{ -moz-border-radius: 20px;}


textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

a {
font-variant: small-caps;
}




.bodyline {
-moz-border-radius:20px;
}

.forumline{
background-color: #9f9e93;
-moz-border-radius: 6px ;
border: 2px #80838c solid;
}


a.forumlink{
-moz-border-radius: 7px 7px 7px 7px;
background-color: #CCCCCC;
border-bottom: 5px double #888585;
color:f0f9ee;
font-family: sans-serif;
font-size: 12px;
font-weight: lighter;
letter-spacing: 1px;
display:block;
text-align: center;
}


td.row1{ background-image: url("http://img11.hostingpics.net/pics/509670sablefond.jpg");}
td.row2{ background-image: url("http://img11.hostingpics.net/pics/509670sablefond.jpg");}

td.row3{ background-image: url("http://img11.hostingpics.net/pics/509670sablefond.jpg");}
td.row4{ background-image: url("http://img11.hostingpics.net/pics/509670sablefond.jpg");}

.bodyline { background-image: url("http://img11.hostingpics.net/pics/509670sablefond.jpg"); }




/* SUPRIMER MARGE DU HAUT ET DU BAS */

.bodyline {
border-width : 8px;
border-color: #000000;
border-style: simple;
}
body{
margin-top: -10px;
margin-bottom: -10px;
}

.bodyline {
border-bottom: none;
}



.pointille {
border-style : dotted ;
}



.navig {
top: 0px;
width: 100%;
height:20px;
position: fixed;
z-index: 999;
left:0px;
background-color: #ffffff;
border: 3px solid #7d4343;}
a.mainmenu img{
display: none;
}



/*fond description*/
.descrip
{background-color: #ffffff;
text-align: justify;
border-right: 3px solid #e2e2e2;
padding: 5px;/*marge intérieure*/
margin-left : 3px;/*marge extérieure*/}
 
/*sous-forums*/
.sousforum
{padding: 5px;/*marge intérieure*/
margin: 2px;/*marge extérieure*/}
 
/*statistiques*/
.stats
{background-color: #ffffff;
padding: 5px;/*marge intérieure*/
margin: 2px;/*marge extérieure*/
border-left: 3px #e2e2e2 solid;
border-right: 3px #e2e2e2 solid;}
 
/*dernier message*/
.lastm
{background-color: #ffffff;
padding: 5px;/*marge intérieure*/
margin: 2px;/*marge extérieure*/
border-left: 3px #e2e2e2 solid;
border-right: 3px #e2e2e2 solid;}
 
/*Enlever soulignement*/
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
 
/*Lien forum*/
a.forumlink {
display : block;
text-align:center;
border : 0px solid #ffffff;
background-color: #ffffff;
margin-left:56px;}
 
/*Bordure espace*/
.forumline { padding-right: 9px;
padding-left : 9px;}
 
/*Titres catégories*/
.titrecat {
    background-color: transparent;
font-size:18px;
letter-spacing:5px;
font-family:palatino linotype;
margin:auto;
}



.infobulle{
position: relative;
z-index: 0;}
 
.infobulle:hover{
background-color: transparent;
z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #ebebeb;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #ebebeb;}
 
.infobulle span img{
border: 2px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px dotted #A52A2A;}






.bodyline{
border-left: solid 8px #7d4343 ;
border-right: solid 8px #7d4343 ;
 
-moz-box-shadow: 0px 0px 10px #000000;
  box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
}


tr.post span.gensmall { display: none; }

#cadre {border: 1px silver outset;width:150px;height:150px;}
#cadre h4 {text-align:center;font-size:1.2em;}
#cadre p {width:145px;font-size:.95em;text-align:justify;}



.forumline, #emptyidcc,  .bodyline, .bodylinewidth, #page-body
{
width: 750px;
padding: 0px;
}

La template Index-Box, ayant rajouté une partie pour un autre code. Visiblement là n'est pas le souci, mais on ne sait jamais. :3
Code:
<img src="http://img11.hostingpics.net/pics/799994nousommes.png" alt="" height="162" width="100%" />

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>
<img src="http://img11.hostingpics.net/pics/799994nousommes.png" alt="" height="162" width="100%" />
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"align="center">
<span class="titrecat">{catrow.tablehead.L_FORUM}</span> </th>

   <!-- 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="row1 over" colspan="3" valign="top" width="100%">
         <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}>
         </td></tr><tr>
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="top" width="5%" height="50">
        <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="75%" height="50">
    <div class="descrip"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
        <span class="gensmall" id="subforums">

            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
                        <div class="sousforum" style="text-align: center;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
 
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
</script>
 
 
        </span>
      </td>
      <td class="row3 over" align="center" valign="top" height="50">
        <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
<div class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span></div>
 
      </td>
      </td>
  </tr>
      </tr>
<tr><td colspan="2" height="1"class="espace"> </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 --></div>

Mes templates modifiés sont :
Index_Body.
Index_Box.
Overall_header.
Viewtopic_body.


Merci l'avoir lu et encore merci à ceux acceptant le défi !
Amicalement vôtre, Mephi ♥.


Dernière édition par Mephistofelis le Ven 23 Mar 2012 - 15:17, édité 1 fois
Mephistofelis

Mephistofelis
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 22/03/2012

http://monsterevolution.forumactif.com/
Mephistofelis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par Invité Ven 23 Mar 2012 - 4:43

Coucou,

afin de mieux voir votre problème pouvez vous ouvrir une section aux invités où le problème est visible en prenant soin de nous donner le lien de la section ouverte pour les invités le temps de résoudre le problème ?

Et du coup mais je ne pense pas que cela va réglé le problème au complet... Mais changer le premier code CSS que vous donner par celui-ci:
Code:
.forumline, #emptyidcc,  .bodyline, .bodylinewidth, #page-body
{
width: auto;
padding: 0px;
}
Anonymous

Invité
Invité


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

Résolu Re: Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par Mephistofelis Ven 23 Mar 2012 - 11:11

Bonjour, Webmestre_pro !

La section ouverte aux invités est désormais disponible; ici.

Chaque élément plus large que la rubrique à l'intérieur duquel il est mis en ligne (comme une image un peu trop volumineuse) ainsi que ceux n'étant pas soumis à une taille bien définie et s'agrandissant en fonction de la largeur du sujet (tel le tableau) déforment le site de cette manière. Je suppose qu'il est nécessaire de mettre les images en spoilers et accabler le tableau d'une largeur définie, mais le plus problématique dans l'histoire demeure la boîte de messagerie, visible dans l'un des spoilers de mon précédent message.

A vue d'oeil le problème vient du fait que le cadre du forum ne se déforme pas lorsqu'un élément imposant est posté dans un sujet, contrairement à d'habitude. Il est bloqué à 750px. Mais si je change cette fonction, la bannière prenant l'entier du cadre s'annule, et tout redevient comme avant, bordures de cadre entre bannière et fond, donc.

Au contraire, les sujets semblent ne plus avoir de largeur définie, permettant aux éléments comme le tableau de déformer à leur guise, ce qui n'arrivait pas avant.

Pour la boîte de messagerie, je n'ai malheureusement pas d’hypothèse.


J'ai installé votre code et...Onon xD.
Le site se déforme encore plus.
Résultats :

Spoiler:

En manipulant le code installé au début, j'ai tenté de supprimer certaines petites choses. En retirant tour à tour .bodyline et #page-body, le problème se résolve, sauf que le code s'annule et que le forum redevient comme avant.

En retirant .forumline, le souci reste le même, et la messagerie se déforme encore plus. Les messages y étant classés s'allongent, cette fois.

Rien ne change en supprimant les autres.

En espérant avoir pu aider un peu. :3

Mephistofelis

Mephistofelis
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 22/03/2012

http://monsterevolution.forumactif.com/
Mephistofelis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par Dr. Karlos Ven 23 Mar 2012 - 13:03

Bonjour,

Remplacez ce code CSS:
Code:
.forumline, #emptyidcc,  .bodyline, .bodylinewidth, #page-body{
width: 750px;
padding: 0px;
}
Par celui-ci:
Code:
.forumline, .bodyline, .bodylinewidth, #page-body {
width: 534px;
padding: 0px;
}
Le 534px correspond à la largeur réelle de votre cadre. Wink Les problèmes de messagerie devrait se résoudre aussi, votre code CSS donnait une trop grande largeur à beaucoup de cadres sur votre forum.


Pour le problème des images, insérez ce code à la suite de l'autre:
Code:
.forumline img, .three-col img{
max-width: 529px;
padding: 0px;
}
Toutes les images plus grandes que 529px seront redimensionnées à cette taille.


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par Mephistofelis Ven 23 Mar 2012 - 13:50

Bonjour, Dr. Karlos !

J'allais crier "Ô Sauveur !". Malheureusement pour moi, les problèmes persistent malgré tout. Mon forum continue ses caprices, mais nous finirons par l'avoir :3 !

Spoiler:

Mephistofelis

Mephistofelis
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 22/03/2012

http://monsterevolution.forumactif.com/
Mephistofelis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par missx Ven 23 Mar 2012 - 14:59

salut
en enlevant la ligne spécifiant la largeur dans ce css , ça devrai marcher
Code:
.forumline, #emptyidcc,  .bodyline, .bodylinewidth, #page-body
        {
        padding: 0px;
        }
A+
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

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

Résolu Re: Déformation d'éléments du forum suite à l'instauration d'un code bannière.

Message par Mephistofelis Ven 23 Mar 2012 - 15:16

Bonjour missx !

L'ennemi paraît vaincu, je peux finalement crier au sauveur. x)
Tout semble fonctionner, mon problème est ainsi résolu.

Merci à tous pour votre aide !
Et bonne continuation. ;3
Mephistofelis

Mephistofelis
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 22/03/2012

http://monsterevolution.forumactif.com/
Mephistofelis a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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