Portail : Problème d'agencement et de code

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

Résolu Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 14:34

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

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 Embarassed 

Merci d'avance de votre aide.

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

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Matriochka le Mar 9 Juil 2013 - 21:07

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;

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:13

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

avant



après



Dernière édition par Morry le Mar 9 Juil 2013 - 21:18, édité 1 fois

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Matriochka le Mar 9 Juil 2013 - 21:15

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:20

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

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Matriochka le Mar 9 Juil 2013 - 21:22

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:25

Je vais essayé de ce pas merci !

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:32

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 scratch

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Matriochka le Mar 9 Juil 2013 - 21:33

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:36

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

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Matriochka le Mar 9 Juil 2013 - 21:40

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

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

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:44

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é Rolling Eyes 

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Morry le Mar 9 Juil 2013 - 21:54

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

Problème résolu en tout cas

Un grand merci pour ton aide ! I love you 

Morry
Nouveau membre

Messages : 18
Inscrit(e) le : 08/12/2011

http://larosepourpre.forumactif.fr/
Morry a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Portail : Problème d'agencement et de code

Message par Matriochka le Mer 10 Juil 2013 - 9:34

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 résolu
  • 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 Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka 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