Portail : Problème d'agencement et de code

[Morry]

Bonjour,

J'ai un gros souci avec mon portail et cela fait 2 jours que je suis dessus, je viens donc vous demandez de l'aide !

Forum : http://larosepourpre.forumactif.fr/
Version : Phpbb2
Status : Fondatrice
Modification des templates : Oui
CSS personnalisé : Oui
Navigateur : Firefox


Voici mon problème :



Je n'arrive pas à centrer le tout
La largeur des colonnes 1 et 3 ne sont pas les mêmes, J'ai pourtant essayé de modifier en allant dans les "options générales du portail" en changeant la taille que se soit en % ou en px mais rien n'y fait cela ne bouge pas d'un poil !

J'ai modifier mes templates pour l'apparence du forum en général (index_box) et je pense que mes images reviennent sur le portail (enfin l'image du centre)

Template de l'index_box

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

<!---------------- Début ajout  --------------------->
<div id="table_head"></div>
<!---------------- Fin ajout  --------------------->

<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="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table>

<!---------------- Début ajout  --------------------->
<div id="table_foot"></div>
<!---------------- Fin ajout  --------------------->

<!-- END tablefoot -->
<!-- END catrow -->

j'ai aussi rajouté du css pour justement l'apparence du portail
Css dans sa globalité

Code:

body{background-repeat:no-repeat;background-position:center top;background-color:#FFFFFF}
.navbar{background-color:transparent;}


/*barre de navigation*/
#navig
{
  width: 950px;
  margin: auto;
  text-align: center;
}
#navigation
{
  position: fixed;
z-index: 999;
}
#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: #324880;
  border-bottom: 4px solid #9C46DB;
  border-top: 4px solid #9C46DB;
  margin-top: -10px;
  margin-left: -10px;
  padding: 5px;
}
a.mainmenu {
  margin: 0px;
  font-size: 15px;
}

table.bodylinewidth
{
position: relative;
top: 150px;
}

/*enlever le faq*/
 a.mainmenu[href="/faq"] {display:none;}

/*avatar dernier message*/
.mini_ava {
  float: center;
}
.mini_ava img {
  width: 30px;
  height: 30px;
  margin: 0 1px;
  border-radius: 10px;
  transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
}
.mini_ava img:hover
{
  width: 80px;
   height: 80px;
}



/*test accordeon*/
#accueil
{
width: 880px;
height: 400px;
overflow: hidden;
background: url(http://i39.servimg.com/u/f39/12/45/28/87/fondro10.jpg) center no-repeat;
border: 3px solid #272727;
}
#page1
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #555555;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page1:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #777777;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #9b9b9b;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #bababa;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #dcdcdc;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}

.contenu_page
{
width: 100%;
height: 400px;
}
.page_titre
{
display: inline-block;
height: 40px;
width: 400px;
color: #ffffff;
margin-left: -180px;
text-align: center;
font-size: 24px;
font-family: arial black;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #5f5f5f;
-webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.contenu
{
width: 0px;
height: 0px;
background-color: white;
overflow: hidden;
padding: 6px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
#page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
{
width: 650px;
height: 380px;
margin-left: -180px;
background-color: white;
overflow: none;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}


/*fond des catégorie*/
.forumline
{
background-color: transparent;
background-image: url(http://i34.servimg.com/u/f34/18/38/45/42/centre15.png);
background-repeat: repeat-y;
padding-left: 50px;
padding-right: 50px;
border: none;
}

#table_head
{
width: 1000px;
height: 138px;
background-color: transparent;
background-image: url(http://i34.servimg.com/u/f34/18/38/45/42/haut212.png);
background-repeat: no-repeat;
}

#table_foot
{
width: 1000px;
height: 86px;
background-color: transparent;
background-image: url(http://i34.servimg.com/u/f34/18/38/45/42/bas212.png);
background-repeat: no-repeat;
}


/*centrer portail */
.module.mod_news .content img {
  max-width: 300px;
}

J'ai essayé de modifier l'index_body en mettant à la place de

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

mettre

Code:

<table class="forumlineportail" width="100%" border="0" cellspacing="1" cellpadding="0">

mais rien y fait. (l'index_body à été modifier au niveau du qui est en ligne en rajoutant les mêmes div que pour l'index_box. Je ne sais pas si je dois vous donné le template ?)

Autre problème lié au portail : Dès que je met une image dans la 2e colonne, elle augmente la taille de la colonne ce qui m'embête aussi car cela me déforme encore plus le portail. J'ai bien essayé la commande

Code:

.module.mod_news .content img {
  max-width: 300px;
}

Mais encore une fois rien ne change.

J'aimerais refaire le même portail que dans mon ancien forum mais qui est en version phpBB3 (http://w-i-p.forumactif.com/)

J’espère avoir étais claire dans mes explications  

Merci d'avance de votre aide.

ps: les templates viewtopic_body - viewforum_body - overall_header ont été modifier

[Matriochka]

Bonsoir,

Dans un premier temps, je te conseillerai de supprimer les padding que tu as ajouté dans le CSS sur l’élément forumline.

Il semblerait que le background que tu aies mis (toujours sur forumline) cause un souci de décalage :
retire-le et remplace background:tranparent; par background:#324880;

[Morry]

Merci c'est déjà plus correctement centrer pour le portail par contre ça me fait le même sur le forum en lui même ce qui n'est pas jolie du tout et donc pas possible ...  

avant



après

[Matriochka]

Ce problème est dû à l’image trop large, réduis-la et tu devrais retrouver la même taille pour les deux colonnes

[Morry]

Désolé je viens d'éditer le deuxième poste. En changeant de background il me modifie les images de mes catégories

[Matriochka]

Le problème, c’est que si tu appliques ton image sur forumline, ça s’appliquera partout sur le forume t tu auras le problème partout.

la solution ce serait plutôt de changer l’identifiant dans index_box, ajouter par exemple :

Code:

id="forumlinebg"

comme ça tu appliques ton background sur #forumlinebg plutôt que sur .forumline, ça évitera les incidents sur les autres pages ^^

[Morry]

Je vais essayé de ce pas merci !

[Morry]

Super c'est déjà nettement mieux pour le portail et le forum ne bouge pas ! Par contre je vais devoir re-modifier les templates que j'ai modifier comme le viewtopic_body - viewforum_body ....

Maintenant me reste encore le souci des largeur des colonnes 1 et 3 du portail qui ne sont toujours pas de la même largeur

[Matriochka]

Tu as lu plus haut :

Ce problème est dû à l’image trop large, réduis-la et tu devrais retrouver la même taille pour les deux colonnes

[Morry]

Heuu non vue que mes images ne sont plus appliquer sur le portail il me semble donc le problème ne vient pas de là

En modifier l'id par

Code:

id="forumlinebg"

j'ai aussi modifier mon Css

Code:

.forumlinebg
{
background-color: transparant;
background-image: url(http://i34.servimg.com/u/f34/18/38/45/42/centre15.png);
background-repeat: repeat-y;
padding-left: 50px;
padding-right: 50px;
border: none;
}

voici le portail maintenant

[Matriochka]

Je parle du screen du jeu que tu as mis au milieu

Et attention, si tu as mis id il faut mettre # dans le css à la place du point

[Morry]

Ha oui l'image je l'avais déjà rétrécie je vais encore essayé de faire plus petit

Je me suis mal exprimer sur l'id oups ! Je n'ai pas rajouté la commande

Code:

        id="forumlinebg"

J'ai juste modifier

Code:

<table class="forumlinebg" width="100%" border="0" cellspacing="1" cellpadding="0">

Désolé  

[Morry]

Je pensais qu'avec la commande

Code:

.module.mod_news .content img {
  max-width: 300px;
}

Que je pouvais bloquer la taille de l'image sur les news mais elle n'as pas l'air de marché en tout cas erf je vais devoir faire des screen plus petits mais ce n'est qu'un détail   

Problème résolu en tout cas

Un grand merci pour ton aide !  

[Matriochka]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif