C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Système d'onglets simple et personnalisable
Lun 17 Sep 2018, 05:44 par heresy.

» Effet pour vos catégories
Sam 15 Sep 2018, 06:41 par Dynaste

» [RPG] Fiche personnage avec bannière latérale
Mar 11 Sep 2018, 15:29 par Rosalie Hale

» Signature codée avec onglets
Sam 01 Sep 2018, 16:11 par Plumeplume

» Mettre votre © Copyright dans le footer de votre forum
Mar 28 Aoû 2018, 12:13 par kaiton

» Sous-forums en retour à la ligne
Lun 27 Aoû 2018, 13:26 par sergiomarquina

» Effet pour vos sous-forums
Lun 27 Aoû 2018, 13:23 par sergiomarquina

» Trois colonnes avec effet Zoom
Lun 27 Aoû 2018, 08:40 par sergiomarquina


Partagez | 
 

Problème de catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://neko-folie.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 85



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://redcdn.net/hpimg11/pics/304138Sanstitre1.png

résultats, je me retrouve avec ceci:

https://redcdn.net/hpimg11/pics/495402181.png
https://redcdn.net/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">
        <!-- 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>
<div id="conteneur_onglets">
  <div class="onglet">Chazam</div>
  <div class="onglet">Je manque de créativité</div>
</div>
<div id="conteneur_categories"><!-- BEGIN catrow --><!-- BEGIN tablehead --><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>
  <!-- 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 -->
  <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>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <!-- END catfoot -->
  
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --></div></div><!-- END catrow -->

voici le lien du fofo: http://fftt.forumactif.org/forum
MessageSujet: Problème de catégorie   Sam 08 Nov 2014, 11:11
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



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



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème de catégorie   Dim 09 Nov 2014, 08:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neko-folie.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 85



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://redcdn.net/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://redcdn.net/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">
        <!-- 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>
<div id="conteneur_onglets">
  <div class="onglet">Chazam</div>
  <div class="onglet">Je manque de créativité</div>
</div>
<div id="conteneur_categories"><!-- BEGIN catrow --><!-- BEGIN tablehead --><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>
  <!-- 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 -->
  <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>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <!-- END catfoot -->
  
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --></div></div><!-- END catrow -->
MessageSujet: Re: Problème de catégorie   Dim 09 Nov 2014, 14:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



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.



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème de catégorie   Dim 09 Nov 2014, 18:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neko-folie.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 85



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://redcdn.net/hpimg4/pics/847439essaienouveau.png
MessageSujet: Re: Problème de catégorie   Dim 09 Nov 2014, 20:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



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.



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème de catégorie   Dim 09 Nov 2014, 21:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



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



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Problème de catégorie   Sam 15 Nov 2014, 10:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neko-folie.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 85



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://redcdn.net/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://redcdn.net/hpimg11/pics/417067decorticationcatgories.png

du coup si je pense avoir compris pour le conteneur rouge je vais mettre
Code:
<div class="catConteneur clearfix"> ... </div>
et dans les pointillé je mettrait A/B/C/D/E/F et du coup je pourrait utisé le left et top pour les positionné en float?
MessageSujet: Re: Problème de catégorie   Sam 30 Mai 2015, 10:24
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neko-folie.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 85



petit up : )
MessageSujet: Re: Problème de catégorie   Mer 03 Juin 2015, 03:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neko-folie.forumactif.org/
avatar
{ Membre }
{ Membre }

Féminin Messages : 85



re petit up
MessageSujet: Re: Problème de catégorie   Dim 07 Juin 2015, 07:28
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Hello

J'ai vu que tu avais posté sur Never Utopia. Smile

Du coup, le sujet reste ouvert ici ou pas ^^ ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème de catégorie   Jeu 11 Juin 2015, 05:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Pas de nouvelles, j'archive Smile


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Problème de catégorie   Jeu 03 Sep 2015, 16:23
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Problème de catégorie   
Revenir en haut Aller en bas
 

Problème de catégorie

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème de catégorie
» problème de catégorie (image sous la catégorie)
» Problème de catégorie ! Asse important.
» Problème de catégorie forum des barres d'outils
» [Résolu] Problème avec psg tv

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit