Sujets similaires

Sujet: Problème de catégorie Sam 08 Nov 2014, 11:11

Voilà mon problème est que je n'ai pas refait du codage depuis longtemps et j'ai perdu le fil X.X J'aurais besoin d'aide là dessus...

voilà, j'ai préparé des catégories qui devrait ressembler à ceci:

https://2img.net/r/hpimg11/pics/304138Sanstitre1.png

résultats, je me retrouve avec ceci:

https://2img.net/r/hpimg11/pics/495402181.png
https://2img.net/r/hpimg11/pics/769405482.png

en clair l'anarchie totale X.X si une âme charitable pourrait m'aider et m’éclaircir.
je précise aussi qu'il y à un code d'onglet qui va avec.

HTML:

Code:: <div class="image_texte">
</div>
<div class="texte">
essaie sur le long de l'image
</div>

CSS:

Code:: .onglet {
   background-color: #f3f3f3;
   border-radius: 20px 20px 20px 20px;
   color: #4682b4;
   font-family: Georgia;
  text-transform: uppercase;
   display: inline-block; /* pour qu'ils se mettent à côté*/
   margin: 5px;
   padding: 5px;
}

.conteneur{
   width: 892px;
  height: 220px;
border-radius: 10px;
  background: #ffffff;
  box-shadow: #a94b4b 1px 1px 10px;
}

.titre_forum{
   width: 227px;
  height: 27px;
border-radius: 10px;
  background: #a94b4b;
  box-shadow: #000000 0px 0px 10px;
font-family: "Aparajita";
color: #ffffff;
text-transform: uppercase;
font-size: 25px;
text-align: center;
position: relative;
float: left;
top: -230px;
left: 30px;
}

.fond {
  width: 866px;
  height: 181px;
  background: #e4e0df;
  position: relative;
  float: left;
  top: -220px;
  left: 13px;
}

.image_info{
   width: 110px;
  height: 170px;
  background: #a94b4b;
border: 2px solid #a94b4b;
position: absolute;
float: left;
top: 38px;
left: 26px;
}

.sous_titre{
   width: 156px;
  height: 29px;
border-radius: 10px;
  background: #ffffff;
  box-shadow: #000000 0px 0px 10px;
font-family: "Aparajita";
color: #a94b4b;
text-transform: uppercase;
font-size: 25px;
text-align: center;
position: relative;
float: left;
top: -390px;
left: 150px;
}
.statistiques_background{
   width: 160px;
  height: 105px;
  background: #ffffff;
  box-shadow: #000000 0px 0px 10px;
  border-radius: 10px;
position: absolute;
float: left;
top: 90px;
left: 156px;
}

.statistiques{
   width: 156px;
  height: 87px;
  background: #a94b4b;
  color: #ffffff;
text-transform: uppercase;
font-size: 10px;
text-align: center;
position: relative;
float: left;
top: -335px;
left: -6px;
}

.image_texte{
   width: 500px;
  height: 80px;
  background: #a94b4b;
border: 2px solid #a94b4b;
position: absolute;
float: left;
top: 38px;
left: 340px;
}
.texte_background{
   width: 505px;
  height: 87px;
text-align: center;
position: relative;
float: left;
top: -311px;
left: 20px;
}
.texte{
   width: 156px;
  height: 87px;
  color: #a94b4b;
text-transform: uppercase;
font-size: 10px;
text-align: center;
position: absolute;
float: left;
top: 130px;
left: 340px;
}

Template:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
   <td valign="bottom">
   
   <span class="gensmall">{LAST_VISIT_DATE}<br />
   {CURRENT_TIME}<br />
   </span>
   
   <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
   
   <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
   <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
   
   <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
  </tr>
</table>
<div id="conteneur_onglets">
  <div class="onglet">Chazam</div>
  <div class="onglet">Je manque de créativité</div>
</div>
<div id="conteneur_categories"><div class="categorie"><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>
  
  
  <tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>
  
  
  <div class="conteneur"></div>
<div class="titre_forum">{catrow.tablehead.L_FORUM}</div>
<div class="fond"></div>
<div class="image_info"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="sous_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="statistiques_background"></div>
<div class="statistiques"><br>{catrow.forumrow.TOPICS}</br><br> {catrow.forumrow.POSTS}{L_LASTPOST}</div>
<div class="texte_background">{catrow.forumrow.FORUM_DESC}</div>
  
  
  

  
</table><img src="{SPACER}" alt="" height="5" width="1" /></div></div>

voici le lien du fofo: http://fftt.forumactif.org/forum

Sujet: Re: Problème de catégorie Dim 09 Nov 2014, 08:30

Hello,

Aoutch, pour une fois que je repasse sur le forum après tout ce temps, je regarde un peu les demandes, et tu arrives à faire un combo ni merci, ni s'il vous plait, ni au revoir :/ Si tu veux de l'aide, pense à faire preuve de politesse envers ceux à qui tu demandes ce service.

En ce qui concerne les problèmes de ton code...

Tout ce qui concerne l'apparence d'une catégorie (description, icone, statistiques) est dans cette partie :

Code:: <div class="conteneur"></div>
<div class="titre_forum">{catrow.tablehead.L_FORUM}</div>
<div class="fond"></div>
<div class="image_info"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="sous_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="statistiques_background"></div>
<div class="statistiques"><br>{catrow.forumrow.TOPICS}</br><br> {catrow.forumrow.POSTS}{L_LASTPOST}</div>
<div class="texte_background">{catrow.forumrow.FORUM_DESC}</div>

Là, à la première lecture, j'ai pas mal de problèmes à soulever.

Par exemple, le bloc avec la classe .conteneur en première ligne est vide, du coup il ne sert à rien. J'imagine qu'il était supposé contenir le reste, sauf qu'il a été fermé dès le départ, pourquoi ? Même remarque pour le bloc de classe .fond en troisième ligne.

Le souci également est que si j'en crois les CSS associés aux classes mentionnées dans le code HTML, beaucoup de blocs sont positionnés les uns par rapport aux autres... mais n'importe comment.

Par exemple, on ne peut pas positionner un bloc à la fois en position flottante et en position relative ! Du coup, lorsque je vois un float:left et un position:relative dans la même classe, je tique.

Au passage, la balise </br> n'existe pas :/

Au final, on ne comprend pas très bien comment est structuré le code, et le nom des classes n'aide pas trop. Quel bloc est sensé contenir l'autre ? Du coup, impossible de dépêtrer tout ça sans tout reprendre à zéro, ce que je te conseille donc de faire, notamment parce que si tu as écrit ce code, c'est que tu es la mieux placée pour savoir la logique utilisée, et si ce n'est pas toi qui l'as écrit, autant aller faire une nouvelle commande sur je ne sais quel forum :/

Sujet: Re: Problème de catégorie Dim 09 Nov 2014, 14:30

Bonsoir, je suis vraiment désolée pour les formules de politesse >< j'ai oublié de les mettre....

Je tien à m'excuser au niveau de mon code qui semble être complètement en désordre...
J'ai donc décidez de vous en faire un plan, histoire que vous compreniez de quoi il en est question 'o'

https://2img.net/r/hpimg15/pics/771477explication.png

J'ai donc suivis vos instructions au sujets des relatives et absolutes, et j'ai pus donc corrigée pas mal de choses :3 (même si je n'ai pas encore replacer correctement les éléments)
https://2img.net/r/hpimg15/pics/919895123456.png

Il me reste cependant des choses que je n'ai pas réussit à modifier comme le conteneur qui me le répété 2 fois autours des catégories, alors que je désire qu'elle entour globalement les deux en 1 conteneur et non 2. Mes statistiques sont écrit assez étrangement et elle ne suis pas le plan. Je ne sais pas quoi faire et enfin le nom de la catégories qui se répété alors deux fois alors que sur le plan elle est cancer se répéter qu'une fois (donc une à chaque onglet créer).

Voili voilou, j'espère vous avoir éclairer un peu plus sur mon problème et je vous en remercie encore pour le mal que vous vous donner pour moi.

Voici les codages des modifications:

HTML:

Code:: <div class="fond">
</div>
<div class="image_texte">
<img src="http://i59.servimg.com/u/f59/14/56/32/94/image11.png" />
</div>
<div class="texte">
essaie sur le long de l'image>
</div>
<div class="statistiques_background">
</div>

CSS:

Code:: .onglet {
   background-color: #f3f3f3;
   border-radius: 20px 20px 20px 20px;
   color: #4682b4;
   font-family: Georgia;
  text-transform: uppercase;
   display: inline-block; /* pour qu'ils se mettent à côté*/
   margin: 5px;
   padding: 5px;
}

.conteneur{
   width: 892px;
  height: 220px;
border-radius: 10px;
  background: #ffffff;
  box-shadow: #a94b4b 1px 1px 10px;
  position: relative;
  top: 50px;
}

.titre_forum{
   width: 227px;
  height: 27px;
border-radius: 10px;
  background: #a94b4b;
  box-shadow: #000000 0px 0px 10px;
font-family: "Aparajita";
color: #ffffff;
text-transform: uppercase;
font-size: 25px;
text-align: center;
position: relative;
top: -20px;
left: 30px;
z-index: 2;
}

.fond {
  width: 866px;
  height: 181px;
  background: #e4e0df;
  position: absolute;
  float: left;
  top: 20px;
  left: -10px;
}

.image_info{
   width: 110px;
  height: 170px;
  background: #a94b4b;
border: 2px solid #a94b4b;
position: relative;
top: 2px;
left: 20px;
z-index: 1;
}

.sous_titre{
   width: 156px;
  height: 29px;
border-radius: 10px;
  background: #ffffff;
  box-shadow: #000000 0px 0px 10px;
font-family: "Aparajita";
color: #a94b4b;
text-transform: uppercase;
font-size: 25px;
text-align: center;
position: relative;
top: -165px;
left: 155px;
z-index: 1;
}
.statistiques_background{
   width: 160px;
  height: 105px;
  background: #ffffff;
  box-shadow: #000000 0px 0px 10px;
  border-radius: 10px;
position: absolute;
float: left;
top: 266px;
left: 156px;
z-index: 1;
}

.statistiques{
   width: 156px;
  height: 87px;
  background: #a94b4b;
  color: #ffffff;
text-transform: uppercase;
font-size: 10px;
text-align: center;
position: relative;
top: 267px;
left: 150px;
z-index: 1;
}

.image_texte{
   width: 500px;
  height: 80px;
  background: #a94b4b;
border: 2px solid #a94b4b;
position: absolute;
float: left;
top: 38px;
left: 340px;
}
.texte_background{
   width: 505px;
  height: 87px;
text-align: center;
position: relative;
top: -311px;
left: 20px;
}
.texte{
   width: 156px;
  height: 87px;
  color: #a94b4b;
text-transform: uppercase;
font-size: 10px;
text-align: center;
position: absolute;
float: left;
top: 130px;
left: 340px;
}

TEMPLATE:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
   <td valign="bottom">
   
   <span class="gensmall">{LAST_VISIT_DATE}<br />
   {CURRENT_TIME}<br />
   </span>
   
   <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
   
   <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
   <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
   
   <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
  </tr>
</table>
<div id="conteneur_onglets">
  <div class="onglet">Chazam</div>
  <div class="onglet">Je manque de créativité</div>
</div>
<div id="conteneur_categories"><div class="categorie"><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>
  
  
  <tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>
  
  
  <div class="conteneur">
<div class="titre_forum">{catrow.tablehead.L_FORUM}</div>
<div class="image_info"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
<div class="sous_titre"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="statistiques">{catrow.forumrow.TOPICS} {catrow.forumrow.POSTS}{L_LASTPOST}</div>
<div class="texte_background">{catrow.forumrow.FORUM_DESC}</div></div>
  
  
  

  
</table><img src="{SPACER}" alt="" height="5" width="1" /></div></div>

Sujet: Re: Problème de catégorie Dim 09 Nov 2014, 18:23

Salut,

Hum, je sais que venant de moi ça sonnera bizarre, mais pourquoi te compliquer la vie avec le positionnement au lieu d'utiliser un tableau ?

Et surtout, quand je dis "reprendre le code de zéro" pourquoi tu te contentes de mettre de la rustine sur un code déjà déficient ? :/ Tu risques juste de t'y perdre encore plus et je ne vais pas te donner de code tout fait pour te sauver, ce n'est pas la politique de la maison (enfin, ça ne l'était pas quand j'étais là XD).

En plus, je vois toujours que, par exemple, la classe .fond a des propriétés float et position alors que je t'ai dit que les deux en même temps c'était pas possible. Soit tu positionnes (auquel cas tu utilises les propriétés position, ainsi que top/left/right/bottom), soit tu transformes le bloc en flottant. Il faut vraiment que tu tries toutes les classes liées à cette partie particulière de l'affichage (ça serait d'ailleurs mieux que de me donner tout en vrac, pour le coup avant de vérifier si l'histoire des onglets cloche, faudrait déjà avoir l'affichage d'une catégorie correct en lui même)

Sinon, si tu tiens à utiliser le positionnement des blocs, il va falloir raisonner un peu, par "conteneurs".

Regarde ton dessin et décortique le, on a :

Un conteneur principal (sans doute le bloc de classe .conteneur) qui contient...
1. Le titre d'un forum/d'une catégorie
2. Un autre conteneur qui contient...
  1. Un bloc contenant l'icone de forum
  2. Un bloc contenant le titre du forum et ses statistiques (un peu réduit pour un titre...)
  3. Un bloc contenant la description, etc

Pour placer le titre du forum, c'est le seul endroit où je vois qu'il serait utile d'utiliser du positionnement relatif/absolu :

Le conteneur principal doit être positionné en relatif (en virant toute indication top/left/bottom/right)
Le conteneur du titre doit être positionné en absolu, avec des valeurs top/left pour le placer par rapport aux bords du conteneur principal

Pour placer les blocs a, b et c côte à côte, tu peux utiliser soit un tableau, soit du positionnement flottant (Je déconseille le positionnement relatif/absolu dans ce cas là)

Ce qui veut dire que :

Le bloc conteneur de ces blocs là (inexistant dans ton code, à ajouter) doit être accompagné d'un clearfix pour éviter que les flottants que tu y mettras partent dans tous les sens. En gros, il faut qu'il dise aux flottants "je me finis ici, vous n'avez pas intérêt à dépasser". Apparemment ton forum dispose déjà d'une classe .clearfix donc tout ce que tu auras à faire c'est de rajouter cette classe à celle du conteneur.
Rappel : Si l'on souhaite appliquer deux classes différentes à un élément HTML, il suffit d'indiquer leurs noms respectifs en les séparant d'un espace :

Code:

<div class="classe1 classe2">...</div>
Chaque bloc a, b et c doit être déclaré et contenir les éléments correspondants. Et ce sont ces blocs a, b et c (affectés de classes à nommer comme tu l'entends, mais par principe j'utilise des noms de classe un peu plus descriptifs, style CatPartieIcone, CatPartieStats, CatPartieDesc, du coup on sait que c'est le CSS lié à l'affichage des catégories, et que chacun correspond à une partie dudit affichage) qui doivent être flottants (et surtout pas leur contenu !)

MAIS ! Le plus gros problème des flottants, c'est que même si les éléments sont par exemple tous en float:left, ils se mettront les uns à la suite des autres tant qu'il y a de l'espace disponible, sinon il y aura un saut de ligne visuel et ils se mettront l'un au dessous de l'autre. Il y a d'autres solutions au problème (genre le bloc contenant la description est un bloc normal avec une marge interne à gauche qui contient les deux flottants) mais pour le moment j'attends surtout de te voir décider de la méthode à suivre pour l'affichage des catégories, et reprendre le code en conséquence :/

Il serait d'ailleurs plus simple pour toi, plutôt que de devoir systématiquement retoucher le code du forum, d'essayer d'obtenir cette structure dans une page HTML à part. C'est comme ça que je faisais mes commandes, à une lointaine époque, d'abord construire une structure de démonstration, puis enfin l'adapter au forum.

Sujet: Re: Problème de catégorie Dim 09 Nov 2014, 20:56

Il y a une petite chose que je n'ai totalement compris. 'o'

J'ai compris un peu la structure que vous m'avez expliquez avec le conteneur principale qui dois être placer en position relative et le titre du forum en absolute avec les commandes left et top.
ainsi qu'il faut sois choisir absolute/relative ou sois float.
Mais je n'ai pas très bien compris le

Code:: <div class="classe1 classe2">...</div>

Exemple Je dois remplacer les classe 1 par le fond gris qui entoure A B C et ensuite pour la classe2 je mes tout ce qu'il y a dedans? et au niveau des ... Je dois mettre quoi exactement?

https://2img.net/r/hpimg4/pics/847439essaienouveau.png

Sujet: Re: Problème de catégorie Dim 09 Nov 2014, 21:10

Ben... le contexte est là pour ça :/ J'ai mis "rappel" à ce niveau là parce que je te disais de penser à mettre la classe clearfix pour le conteneur qui contiendra les éléments flottants. Sauf que je sais que la plupart des débutants vont me regarder avec des yeux ronds et me dire "Mais j'ai déjà une classe pour ce div, comment je fais pour mettre une classe en plus ?"

Bref, au final, j'essayais juste de te rappeler que tu devras écrire ton code comme ça :

Code:: <div class="catConteneur clearfix"> ... </div>

Mais c'est pas important pour le moment, c'est surtout que cette classe clearfix sera importante si tu préfères mettre des flottants plutôt qu'un tableau. Le problème des éléments flottants, c'est ça :

Je suis un élément flottant avec plein de texte dedans, coucou !

Et moi je suis juste le conteneur de l'élément flottant

Tu notes que l'élément flottant est bien à gauche et tout, mais il dépasse de son conteneur, et interfère également avec la suite du texte. Pour éviter ça, tu rajoutes un bout de code que j'ai la flemme d'expliquer (oui, bon, hein, j'explique bien assez de choses comme ça) ou tu utilises la magnifique classe .clearfix qu'on trouve de base dans le code source du forum parce que les développeurs pensent à tout (en tout cas, il est dans le code source du tien)

Je suis un élément flottant avec plein de texte dedans, coucou !

Et moi je suis juste le conteneur de l'élément flottant, mais cette fois j'ai la classe clearfix !

Et magie, le conteneur s'adapte au flottant.

Sujet: Re: Problème de catégorie Sam 15 Nov 2014, 10:51

Je crois que j'ai tué quelqu'un avec mes explications :/ Fichtre.

Bonsoir Christa! je suis désolée ne d'avoir donnée aucune nouvelle...j'ai eu des problèmes et j'ai eu pas mal de boulot pou pour année prépa....

j'ai suivis tes conseils et j'ai tous recommencer pour mes catégories pour mieux comprendre.
donc voici les nouvelles : https://2img.net/r/hpimg11/pics/726726nouvellecat.png

Et j'ai donc essayé de reprendre des base pour savoir se qui est ou... Je ne sais pas si je suis bien partie ou pas :

https://2img.net/r/hpimg11/pics/417067decorticationcatgories.png

du coup si je pense avoir compris pour le conteneur rouge je vais mettre