[Aide Codage] Liste des sous-forums en colonne

[Oxa]

Coucou mes amis tambouilleurs

Alors voici mon soucis :

Sur mon forum, j'ai les sous-forums en lien que j'ai ajouté un à un dans la description de mes catégories.
MAIS dans ma new version, j'ai "élargie" le forum pour qu'il prenne tout l'espace. Il y a donc de la place vide entre ma description et la partie "dernier message etc". Et dans ce vide, je souhaiterais y mettre mes sous forum, mais sans devoir faire moi même les liens. Seulement ça me les pose en ligne, sans retour à la ligne. En colonne ça me les pose en continu en dépassant du cadre, ou alors ça me squize ce qui dépasse. En gros, j'aimerais qu'ils soient en colonne de 3/4 sous-forums, et après ça passe à la suite.

Mon CSS : (désolée si c'est un peu le bazar, comme je reprends le codage de ZP actuel qui n'est pas fait par moi et que je bidouille par dessus, possible que ce soit un tantinet le bordel )

Code:

body {
  width:1400px;
  height: auto;
 background: url(https://zupimages.net/up/19/38/ihtc.png) top left no-repeat #FEF6EA;
}

#page-body {
margin-top: 300px;
}



.lien_bann{
  display: block;
  width:100%;
  height:400px;
}

/** info diverses**/

.minitxt{
  font-size: 12px;
}
a .minitxt {
   text-decoration:none !important;
}

mark {
  background-color:#7f0101;
  color:#ffffff;
  border-radius: 10px;
  border: 1px solid #fef7ee;
}
mark:hover {
  opacity: 0.6;
}

a[href^="/u"]{
  text-decoration: none !important;
}

    /*Fait disparaître la colonne des widgets*/
    #left {
      display: none;
    }
    /*Personnaliser le contenu des derniers sujets*/
    #derniers_sujets {
    width: ;
    }

/** fin info diverses **/


/* Cadre d'accueil */

.date {
  color: #747474;
  font-size: 12px;
}

.liennews{
  color: #8c1c1c;
   font-size: 12px;
  text-decoration: none;
  font-style: italic;
}

/* contour du FORUMS arrondi */
td.bodyline {
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
}
    /********** DÉBUT CATÉGORIES **********/
    /* Entoure chaque catégorie */
    .contour_cate {
      /* Sa largeur */
      width: 1390px;
      margin: auto;
      /* Couleur de fond */
      background-color: #FCEFDD;
      /* Espace entre chaque catégorie */
      margin-bottom: 20px;
    }

    /* Mise en place du titre de catégorie */
    .secondarytitle {
      width: 100%;
      text-align: center;
      /* Création du trait sous le titre */
      border-bottom: 3px solid #800202;
      box-shadow: 1px 0 #fbe3c3, -1px 0 #fbe3c3, 0 1px 2px grey;
    }

    /* Mise en forme du titre de catégorie */
    .secondarytitle h2 {
      /* Couleur */
      color: #800202;
      text-shadow: 1px 1px 2px grey;
      /* Police et taille */
      font-family: 'Neoteric', 'Kodchasan', sans-serif;
      font-size: 20pt;
    }

    /* Div invisible qui entour chque forum */
    .contour_forum {
      width: auto;
      /* Sa hauteur */
      height: 90px;
      padding: 5px;
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;
    }

    /* Mise en place du titre de forum */
    .nom_forum {
      width: 70%;
      margin: auto;
      margin-top: 10px;
    }

    /* Mise en forme de titre de forum */
    a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
      /* Retire le gras et le emt en italique */
      font-weight: normal;
      /* Couleur et taille */
      color: #800202;
      font-size: 15pt;
      /* Préparation pour l'effet au hover */
      letter-spacing: 0px;
      transition: all ease-in-out 300ms;
    }

    /* Titre de forum au passage de la souris */
    a.forumlink:hover {
      /* Couleur */
      /* On fait qu'il ne se sousligne pas */
      text-decoration: none !important;
      /* Effet */
      letter-spacing: 0.8px;
      transition: all ease-in-out 300ms;
      opacity: 0.6;
    }
    
    /* Positionnement de l'image nouveau/pas de nouveau message/verrouillé */
    .position_image {
      display: inline-block;
      vertical-align: top;
    }

    /* Positionnement de la description & liens vers les sous-forums */
    .position_description {
      /* Obligatoire pour mettre l'image en dehors du cadre */
      position: relative;
      display: inline-block;
      vertical-align: top;
      /* Taille du bloc */
      width: 400px;
      height: 120px;
      padding-top: 1px;
      /* La marge correspond à 20px + la largeur de l'image de description */
      margin-left: 155px;
      /* Couleur du texte puis  */
      color: #8A807F;
      background-color: #FCEFDD;
    }

    /* Positionnement de l'image de description par rapport à cette dernière */
    .position_description img {
      position: absolute;
      /* La valeur du top est à modifier selon la hauteur de l'image. Si la hauteur de l'image = la hauteur de la description, mettre top: 0px; Le left correspond à la taille de l'image + 10px de marge */
      top: 10px;
      left: -140px;
      width: 120px;
      height: auto;  
      /* Effet de transparence sur l'image. Ici elle st à 70% */
      opacity: 0.7;
      transition: all ease 1s;
  
    }

    /* Image de description au hover */
    .position_description img:hover {
      /* Effet: l'image passe à une opacité de 1 */
      opacity: 0.2;
      transition: all ease-in-out 500ms;
      width: 125px;
      height: auto;
    }

    /* Mise en forme du texte de description */
    .position_description p {
      /* Taille */
      width: 390px;
      height: 90px;
      padding: 5px;
      margin: auto;
      /* Couleur et alignement du texte */
      color: #590000;
      text-align: justify;

    }

    /* Mise en forme de la liste des sousforums */
    .liste_ss_forum {
   size : px;
     position: absolute;
   text-align: justify;
  vertical-align: top;
 
    }
    /* Mise en forme des liens de la liste */
    .liste_ss_forum a {
     display: inline-block;
     font-size: 10px;
  
      /* On retire le soulignement */
      text-decoration: none !important;
      /* Police taille puis couleur */
      font-family: 'Neoteric', 'Kodchasan', sans-serif;
      font-size: 11pt;
      color: #590000;
      /* Préparation de l'effet */
      letter-spacing: 0px;
      transition: all ease 1s;
    }

    /* Liens de la liste au passage de la souris */
    .liste_ss_forum a:hover {
      /* Pas de souslignement */
      text-decoration: none !important;
      /* Couleur */
      color: #8A807F;
      /* Effet */
      letter-spacing: 1px;
      transition: all ease 1s;
    }

    /* Positionnement et mise en forme du dernier message */
    .position_dernier_mess {
   position: relative;
      display: inline-block;
      vertical-align: top;
      /* Taille */
      width: 160px;
      height: 95px;
      padding: 5px;
      margin-left: 500px;
      /* Couleur du texte */
      color: #800202;
      text-align: center;
      /* Couleur de fond */
      background-color: #FCEFDD;
    }

    /* Mise en forme de X sujets - X messages */
    .nb_sujet_message {
      display: inline-block;
      /* Police et taille */
      font-family: 'arial';
      font-size: 10pt;
      margin-bottom: 10px;
    }

    /* Mise en forme du lien vers le dernier sujet */
    .position_dernier_mess .gensmall a,.position_dernier_mess .gensmall a:link, .position_dernier_mess .gensmall a:active, .position_dernier_mess .gensmall a:visited {
      /* Retirer le souslignement, couleur puis préparation de l'effet */
      text-decoration: none !important;
      color: #420101;
      letter-spacing: 0px;
  font-size: 8pt;
      transition: all ease 1s;
    }

    /* Mise en forme du lien vers le dernier sujet au passage de la souris */
    .position_dernier_mess .gensmall a:hover {
      /* Retirer le souslignement, couleur puis effet */
      text-decoration: none !important;

      letter-spacing: 1px;
     font-size: 9pt;
      transition: all ease 1500ms;
     opacity: 0.6;
    }
    /********** FIN CATÉGORIES **********/



/*Profil*/
.profilentier {
  background: #fce6c7;
  padding: 4px;  
  border: 1px solid #ffffff;
  border-radius: 10px;
}

.profilpseudo {
  text-align: center;
 text-decoration: none;
  font-size: 20px;
  
}

.posprofile, .username, .username-coloured {
  text-decoration: none;
}

.profilrang {
  text-align:center;
  font-family: neotic;
  text-transform: uppercase;
  border-radius: 10px;
}

.profilavatar {
  background: #fcf4e9;
  padding: 2px;
  border: 1px solid #ffffff;
  border-radius: 10px;
}

.profildescrp {
  text-align:justify;
  font-family: verdana;
  padding: 2px;
  background: #fcf4e9;
  border: 2px dotted #ffffff;
  border-radius: 10px;
}
/*Fin profil*/





/*message important*/
.fond-titre{
  text-align:justify;
  margin:auto;
  width:75%;
  padding:24px;
  background-color:#fbebd5;
  border:#2F0F1C solid 3px;
  box-shadow:0px 0px 5px black;
}

.titre-message{
  font-family: \'Dancing Script\', cursive;
  text-shadow:0px 0px 2px #2F0F1C;
  width:107%;
  font-size:30px;
  margin-left:-24px;
  text-align:center;
  background-color:#ffffff;
  border-bottom: 4px solid #2F0F1C;
}

.titre-message span{
  font-size:14px;
  text-shadow:none;
  margin-top:-15px;
  position:absolute;
  letter-spacing:1px;}

.sous-titre-message{
  font-family: \'Dancing Script\', cursive;
  text-shadow:0px 0px 2px #2F0F1C;
  font-size:21px;
  margin-right:25px;
 ;
}
/*fin message*/

/*QEEL*/
.qeelcel {
border : 0px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -ô-border-radius:15px;
    -khtml-border-radius:15px;
    border-radius:15px;
padding : 5px;
  background-color: #fcefdd;
}

.qeel {
border : 0;
}

.position1 {
position : relative;
top : 8px;
background: #fef6ea;
}

.position2 {
position : relative;
top : 8px;
background: #fef6ea;
}
/*FIN QEEL*/

{
  text-decoration: none;
}

Ma template INDEX-BOX :

Code:

  <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 
 <td class="gensmall" align="left" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
                  <a class="gensmall" href="{U_SEARCH_NEW}"><img src="https://zupimages.net/up/19/38/rx4l.png" /><span class="minitxt">Voir les nouveaux messages</span></a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}"><img src="https://zupimages.net/up/19/38/rx4l.png" /><span class="minitxt">Voir ses messages</span></a><br />
 <!-- END switch_user_logged_in -->
 
 </td>
 </tr>
</table>
<br />
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <table class="contour_cate">
      <tr>
        <td>
          <div class="secondarytitle">
            {catrow.tablehead.L_FORUM}
          </div>
        </td>
      </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">&nbsp;</td>
      </tr>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <tr>
        <td>
          
          
          <div class="nom_forum">
            <h{catrow.forumrow.LEVEL} class="hierarchy">
              <span class="forumlink">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
              </span>
            </h{catrow.forumrow.LEVEL}>
          </div>
          
          
          <div class="contour_forum">
            
            <div class="position_image">
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
            
            <div class="position_description">
              <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            </div>
            
            <div class="liste_ss_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
              </div>
            
            <div class="position_dernier_mess">
              <span class="nb_sujet_message"><b>{catrow.forumrow.TOPICS}</b> sujets - <b>{catrow.forumrow.POSTS}</b> messages</span><br/>
              <span class="gensmall" style="font-size:11px;">{catrow.forumrow.LAST_POST}</span>
            </div>
            
          </div>
          
          
        </td>
      </tr>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Voilà mon joli bazar ! Merci par avance pour votre aide

[MävenRâleuse (Admin)]

Hello !

Allez c'est parti =)
Ton HTML est propre c'est, c'est cool

Par contre niveau CSS, aie aie aie :/
Allons-y petit à petit :
D'abord on va dire à ton "contour forum" de se mettre en flex avec une largeur à 100%;

Code:

.contour_forum {
    height: 90px;
    overflow: hidden;
    padding: 5px 20px;
    width: 100%;
    display: flex;
}

Ensuite, on va dire à ta première image de prendre sa place : ici on enlève le display inline-block et le vertical align

Code:

.position_image {
    flex: 0 0 80px;
}

Ensuite pareil pour la description : on enlève son display et on lui donne sa place :

Code:

.position_description {
    background-color: #FCEFDD;
    color: #8A807F;
    height: 120px;
    margin-left: 155px;
    padding-top: 1px;
    position: relative;
    flex: 0 0 400px;
}

Ensuite sur ta liste de sous-forum on va retirer tout le style qu'il y a et juste lui indiquer sa taille :

Code:

.liste_ss_forum {
    flex: 0 0 300px;
     padding: 0 15px;
}

Et pour les derniers sujet on retire tout l'inutile (display,position, vertical align, et surtout le margin left) et on lui donne sa place aussi :

Code:

.position_dernier_mess {
    background-color: #FCEFDD;
    color: #800202;
    height: 95px;
    padding: 5px;
    text-align: center;
    flex: 0 0 160px;
}

Et voilà :


Pour les largeurs, j'ai reprit les tiennes. Mais je te conseille vivement de tout mettre en %

[Oxa]

Aaah super ça fonctionne ! En gros il fallait mettre du flex sur toute la partie des catégories :O Je n'aurais jamais trouvé ça seule

Je vais essayer de tout mettre en % alors !

[MävenRâleuse (Admin)]

C'est ça il suffisait de mettre en flex et de mettre à chacun sa taille en retirant les marges

Ca marche, si tu as le moindre souci n'hésite pas

[PêpêcheMascotte]

Coucou @Oxa

Ce souci est-il réglé ?

[Oxa]

Coucou !

Oui désolée je l'ai dis sur le discord, mais je n'ai pas pensé à le signalé ici ! C'est tout good

Encore merci

[PêpêcheMascotte]

Impeccable

Je classe du coup ^^

(oui oui je suis prise d'une folie ménagère =) )

[Contenu sponsorisé]