Crise d'adolescence dans les catégories

[Cheeralex]

Bonjour à tous,

Je rencontre actuellement un soucis avec mon codage pour mes catégories. Le plus gros est fait cependant, pour les petites modifications qui sont essentielles à l'esthétique, je n'y arrive pas. Rien ne me répond ou alors, ça part dans tous les sens. A s'arracher la tignasse

Voici un lien qui vous emmène directement jusqu'au forum test, où les catégories sont en cours de codage.
http://dolb-test.forumactif.org/ - le forum est une version phbb2

Pour vous expliquer en quelques lignes. J'ai mis un haut de catégorie ainsi qu'un footer. Cependant, lorsque je touche au body c'est plus difficile parce que parfois il se coupe et j'aimerais qu'il se repète à chaque forum, hors parfois ça part dans tous les sens. Voici quelques images pour expliquer au mieux.

Spoiler:

Spoiler:

Le bidouillage de mon template et css est peut-être mauvais, où j'ai fais une erreur quelque part? J'espère avoir une aide charitable qui m'explique ce que j'ai fais de mal, oublié ou autre. J'aimerais comprendre

Par avance, merci

Mon css:

Code:

/* CORPS DES CATÉGORIES */

/*Titres des liens forums*/
a.forumlink {
        color: black;
        font-family: 'Cinzel', serif;
        font-size: 20px;
        width:850px;
        align: center;
}


/*descriptions*/
div.description{  /* La div ayant pour class 'description' */
  background-color:#; /* On lui donne une couleur de fond */
  -moz-border-radius: 5px; /* Réglage des arrondis des coins pour mozilla */
  -webkit-border-radius: 5px; /* Réglage des arrondis des coins pour chrome et safari */
  border-radius:5px; /* réglage des arrondis des coins */
  border:1px solid white;
  width:400px;
  min-height:40px; /* La hauteur minimum */
  overflow: auto;
  font-size:12px;
  text-align:justify;
  text-indent:6px; /* La première ligne du bloc sera décallée de 6px vers la droite */
  padding:4px;
  margin:4px;
  color:white;
  margin-left: 100px
  }

/*sous-forum*/
.sousforum{
width: 450px;
min-heigth: 50px;
background-color: white;
font-variant: small-caps ;
color:black;
margin-left: 80px;
}

/*---Informations messages---*/
.nbrmess{
  margin-right:270px;
}

/*|__________ DEBUT DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/

table.haut_cate{
  width:850px;
  height:130px;
  background-image:url('http://img15.hostingpics.net/pics/734822hautcatDBdesign1.png');
  background-repeat:no-repeat;
  margin:auto;
  }
 


 
div.milieu_cate{
  background-image:url('http://img15.hostingpics.net/pics/573860corpscatgorieDBmodelgraph.png');
  background-repeat:repeat-y;
  width:860px;
  margin-left:85px;
  }

table.forumline{
  background-color:transparent !important;
  border:0!important;
  }


table.forumline td.index_cate{
  background-color:transparent !important;
  }

table.bas_cate{
  width:850px;
  height:50px;
  background-image:url('http://img15.hostingpics.net/pics/924446bascategDBdesign1.png');
  background-repeat:no-repeat;
  margin-left:95px;
  }
/*|__________ FIN DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/



Mon template (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}<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="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table><div class="milieu_cate"><table class="forumline" width="850px" align="center" border="0" cellspacing="1" cellpadding="0">
         
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT} index_cate" 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} index_cate" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS} index_cate" 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 index_cate" 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>
                                  </h{catrow.forumrow.LEVEL}></td><td style="padding-left: 40px; text-align: right;" class="gensmall"><span class="nbrmess">{catrow.forumrow.POSTS} correspondances dans {catrow.forumrow.TOPICS} lettres.</span></td></tr></tbody></table>
                  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
                          <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </span>
      </td>
      
          <td class="row3 over index_cate" align="center" valign="middle" height="50" style="min-width:130px";>
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow index_cate" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table></div><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[Cheeralex]

petit up pour ce sujet

edit: autant pour moi, ça ne fait pas 24h... mes excuses

[Cheeralex]

Up siouplé

[SoraNoHime]

Bonsoir,

Je n'arrive pas bien à saisir, où se trouve la css correspondant à cette partie ?

Code:

<td class="row3 over index_cate" align="center" valign="middle" height="50" style="min-width:130px";>
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Car il vous faudrait ici pour éviter déjà la coupure, mettre un "height" minimum.

COrdialement.

[Cheeralex]

Bonjour et merci de votre réponse,

J'ai rajouté comme demandé, une div class qui englobe la partie citée et en mettant dans mon css un min-height, le soucis apparaît maintenant différemment. Je vous laisse juger par vous-même

Tout se déforme... Incompréhensible !!

Spoiler:

[SoraNoHime]

^^ Je vois bien un décalage mais pas une déformation. Je vais tester vos codes de mon coté. Quel est le niveau de structure et hiérarchie de votre forum, ainsi que sa largeur ?

[Cheeralex]

Merci beaucoup
Alors, c'est Séparer les catégories sur l'index : moyen!
Oui, 16, Oui, Non, Uniquement sur l'index racine et non. (pour les réponses en dessous xD)

Et la largeur du forum est de 70%

Merci beaucoup ♥

[SoraNoHime]

Pour votre problème de découpage, en fait vous utilisez une image toute faite, serait-il possible que vous puissiez découper cette image pour n'avoir que : la partie qui doit aller sous les icones de forum, la partie qui sera en dessous de chaque dernier sujet... Car sinon régler le tout en fonction des hauteurs et des largeurs de div vous créera toujours des problèmes, sachant qu'au moins la div des derniers sujets risque de déborder...

Pour le second décalage, je suis encore en train de tester.

[Cheeralex]

Donc, faire juste deux image différentes pour la case derniers sujet et l'autre à la place de l'îcone?
Parce que pour notre résultat, on souhaitait obtenir cela

Spoiler:

Donc, il est possible de placer l'image de gauche et l'image de droite, sans avoir une image complète?

Merci beaucoup ♥

[SoraNoHime]

Oui c'est tout à fait possible à réaliser, et même plus simple car dans ce cas, on utiliserait uniquement des div dans les td concernés, et un background général. Mais pour cela, il me faut les deux images afin que je règle bien le tout.

[Cheeralex]

Très bien, merci beacoup! Je vais demander à ma graphiste de modifier les images et on aura ça ce soir sans faute
Merci encore de votre aide et surtout, de nous sauver ♥

[Cheeralex]

Voilà les images !

138*120


219*120


Merci encore pour ton aide et si tu as des questions ou autres n'hésites pas. ♥

[Cheeralex]

Bonsoir,

petit up pour faire remonter le sujet

merci

[Cheeralex]

Hello

Un nouveau petit up pour faire remonter

[Cheeralex]

petit up

[SoraNoHime]

Toutes mes excuses pour le temps de ma réponse

Déjà dans votre template repérez :

Code:

<td class="{catrow.forumrow.INC_CLASS} index_cate" 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>

modifiez la class pour l'adapter à l'image : {catrow.forumrow.INC_CLASS} index_cate par icones_forum

puis ajoutez dans la css :

Code:

.icones_forum {background-image:url("lien de l'image");
width : 138px;
height : 120px;
background-repeat : no-repeat;
}

modifiez de meme à cet endroit :

Code:

                <td class="row3 over index_cate" align="center" valign="middle" height="50" style="min-width:130px";>
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
              </td>

row3 over index_cate par dersuj_forum et dans la css ajoutez :

Code:

.dersuj_forum {background-image:url("lien de l'image");
width : 138px;
height : 219px;
background-repeat : no-repeat;
}

Si vous avez compris la solution techniquement vous allez devoir faire de même pour la partie central, ou du moins lui mettre un background pour pousuivre la couleur.

S'il y a le moindre problème sur ces points déjà, n'hésitez pas à me fournir votre nouveau template et css. Ensuite nous verrons pour le décalage des titres

[Cheeralex]

Hello et merci de votre réponse ♥
Alors, j'ai bien essayé de faire ce que vous m'avez demandé, mais le résultat n'est pas terrible

http://dolb-test.forumactif.org/

je vous laisse mon template et css, je les ai peut-être mal placé

index_box:

css:

merci par avance

[SoraNoHime]

^^ En effet il me semble mal répartie, les images ne devrait pas etre à ces places là avec ce que je vous est donné. En fait vous avez mis des div, alors qu'il suffisait de changer les class du forum...

AVec ceci cela devrait aller encore mieux déjà :





Une fois que vous aurez vu cela, il faudra décaler la background des icones de sujets, je vous expliquerai, je veux déjà etre sure que c'est bien ce que vous recherchiez

[Cheeralex]

Super, c'est mieux comme ça
Arf, j'avais mal compris pour les class à modifier, je pensais devoir rajouter une div pour englober
Donc maintenant, comme vous dites, c'est l'icone sur la gauche qui est un peu mangé mais je suppose que ça peut se décaler avec le cadre du milieu et les sous-forum qui doivent empiéter?

merci beaucoup

[Cheeralex]

Hey,

Petit up pour remonter le sujet

[SoraNoHime]

Dans ce code :

Code:

            .icones_forum {background-image:url("http://img11.hostingpics.net/pics/913470ongletDBforum.png");
            width : 138px;
            height : 120px;
            background-repeat : no-repeat;
  background-position : center center;
            }

remplacez le

Code:

  background-position : center center;

par

Code:

  background-position : -20px center;

Est-ce mieux ? Je n'ai pas pu vérifier mon fow test a un peu de mal

[Cheeralex]

Non, cela ne change rien.
Est ce que le fait qu'on est codé déjà la catégorie et modifié le template ne joue pas ?

Merci ♥

[SoraNoHime]

Pas a ce niveau, tout doit maintenant se régler par la css vu que les class, et la structure du forum sont réglées dans le template.

.icones_forum {background-image:url("https://2img.net/r/hpimg11/pics/913470ongletDBforum.png");
width : 138px;
height : 120px;
background-repeat : no-repeat;
background-position : left center;
}

Essayez ceci plutot... Petite question, avez-vous uniquement mis le background de couleur comme je vous l'avez indiqué, soit dans la partie centrale des catégories, celle qui comprend la description ?

[Cheeralex]

Bonjour Sora
On a essayé beaucoup de choses ce matin, notamment votre changement mais ça n'a pas fontionné du coup.. On a tout recodé de A à Z et voici le résultat



Du coup, je pense que le problème est résolu, merci beaucoup pour votre aide et gentillesse