Crise d'adolescence dans les catégories

2 participants

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

En cours Crise d'adolescence dans les catégories

Message par Cheeralex Jeu 21 Fév 2013 - 15:57

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 Siffleur

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 Interrog

Par avance, merci Hi

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


Dernière édition par Cheeralex le Sam 23 Fév 2013 - 15:14, édité 1 fois
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Ven 22 Fév 2013 - 9:57

Hi

petit up pour ce sujet Smile

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

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Sam 23 Fév 2013 - 13:37

Up siouplé aidez moi
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Sam 23 Fév 2013 - 23:46

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Dim 24 Fév 2013 - 9:55

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 Arrow

Tout se déforme... Incompréhensible !!
Spoiler:
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Dim 24 Fév 2013 - 11:17

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Dim 24 Fév 2013 - 15:37

Merci beaucoup Smile
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% Smile

Merci beaucoup ♥
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Lun 25 Fév 2013 - 11:46

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Lun 25 Fév 2013 - 13:13

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

Merci beaucoup ♥
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Lun 25 Fév 2013 - 13:17

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Lun 25 Fév 2013 - 13:21

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

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Lun 25 Fév 2013 - 18:03

Voilà les images !

138*120
Crise d'adolescence dans les catégories 913470ongletDBforum

219*120
Crise d'adolescence dans les catégories 139105derniermessDB

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

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Mar 26 Fév 2013 - 19:19

Bonsoir,

petit up pour faire remonter le sujet ::moitimide::

merci Hi
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Mer 27 Fév 2013 - 20:02

Hello Smile

Un nouveau petit up pour faire remonter Embarassed

Hi
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Jeu 28 Fév 2013 - 20:10

Hi

petit up Smile
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Ven 1 Mar 2013 - 3:19

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Ven 1 Mar 2013 - 7:40

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 Arrow

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

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

index_box:

css:

merci par avance Hi
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Ven 1 Mar 2013 - 8:22

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Ven 1 Mar 2013 - 10:39

Super, c'est mieux comme ça Smile
Arf, j'avais mal compris pour les class à modifier, je pensais devoir rajouter une div pour englober Arrow
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? Smile

merci beaucoup

Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Sam 2 Mar 2013 - 12:03

Hey,

Petit up pour remonter le sujet Hi
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Sam 2 Mar 2013 - 14:51

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
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Sam 2 Mar 2013 - 22:21

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

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

En cours Re: Crise d'adolescence dans les catégories

Message par SoraNoHime Dim 3 Mar 2013 - 8:52

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

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

En cours Re: Crise d'adolescence dans les catégories

Message par Cheeralex Dim 3 Mar 2013 - 11:17

Bonjour Sora Smile
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 Smile



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

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex 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