AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Difficultés à mettre mes catégories en ligne.

    Yovoed
    Yovoed
    FémininAge : 19Messages : 55

    le Jeu 20 Juin 2019 - 14:05

    Bonjour :)

    Je vous écris après plusieurs heures d'arrachage de cheveux.
    J'aimerais mettre mes catégories en ligne comme affichées sur cette maquette, mais je n'arrive pas à mettre mes deux catégories dans la même div avec forumactif pour pouvoir les positionner les unes à côté des autres.

    Spoiler:
    Difficultés à mettre mes catégories en ligne. 5d432784f18f7a64ec35d5c96c266cdc

    Voici mon bout de code :

    Code:
    <!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->

        <div class="wrapper container-1" style="margin-bottom: 0">
            <div class="ligne w-6 opacity-40"></div>
            <div class="title-line opacity-40">{catrow.tablehead.L_FORUM}</div>
        </div>
    <!-- END tablehead -->

          <!-- BEGIN forumrow -->
        <ul class="container-1 wrapper list_forums">

            <script type="text/javascript" src="http://myk-vapor.forumactif.com/11566.js"></script>
            <script type="text/javascript" src="http://myk-vapor.forumactif.com/12980.js"></script>
     
                <li class="cat-box block_category w-6">
                    <h2 class="category"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h2>
                   
                    <div class="wrapper">
                        <div class="img-cat">
                            <figure class="chart" data-percent="100">
                                <svg width="200" height="200">
                                    <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
                                </svg>
                                <div class="inner">
                                </div>
                                <div class="more-cat more">
                                </div>
                                <div class="plus-click"></div>
                            </figure>
           
                            <div class="container-descr gray-bg" style="width: 0px; display: none;">
                                <div class="bordure-fine gray-bg opacity-81">
                                    {catrow.forumrow.FORUM_DESC}
                                </div>
                                <span class="blue-txt"><i class="far fa-sticky-note"></i> {catrow.forumrow.TOPICS}   <i class="far fa-save"></i>
                                    {catrow.forumrow.POSTS}</span>
           
                            </div>
           
                        </div>
                        <div class="caption-lieux opacity-47">
                            <h4>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</h4>
                        </div>
                    </div>
                    <div class="wrapper">
                        <div class="avatar-cat"></div>
                        <div class="captions-cat">
                            <h3 class="blue-txt title-caption">{catrow.forumrow.LAST_POST}</h3>
                            <span class="date opacity-40">20 avril 2019. 14:50</span>
                        </div>
                    </div>
                </li>
            </ul>
                    <!-- END forumrow -->
        <!-- BEGIN catfoot -->
       
        <!-- END catfoot -->

    <!-- BEGIN tablefoot -->

        <br clear="all" /></div>
        <!-- END tablefoot --><!-- END catrow -->

    Ca m'a l'air d'être un soucis avec les balises ou autre, mais je n'en suis pas sûre.

    De plus, j'aimerai avoir cet effet décalé comme indiqué dans la maquette que je pourrai sans doute gérer avec un nth-child.

    Vous pouvez voir l'avancée sur notre forum-test.

    Si quelqu'un pourrait m'assister, ça serait super gentil ;;
    Merci d'avance !
    Yukiji
    Yukiji
    MasculinAge : 18Messages : 115

    le Jeu 20 Juin 2019 - 19:04

    Coucou ! Tu as essayé de mettre un conteneur à toutes catégories et de lui appliquer un display flex ? Comme ça tes éléments s'aligneraient et quand un des sous-forums ferait toute la place, il y aurait le retour en ligne.

    Sinon super design, je suis vraiment fan du style ! Ça fait rafraichissant de voir des thèmes comme ça sous forumactif.



    (c) sygea
    Yovoed
    Yovoed
    FémininAge : 19Messages : 55

    le Jeu 20 Juin 2019 - 22:30

    Bonjour /0/

    Oui, bien sûr ~
    Mais justement, c'est ça le problème. Je n'arrive pas à mettre mes deux divisions dans la même div avec les templates de forumactif.

    Le container flex contient bien mon premier forum, mais le second ne reste pas dans ce container. Et je n'arrive pas à comprendre pourquoi.

    On s'en sort très bien avec le code en général, on peut faire ce que l'on veut. Mais là, c'est vraiment Forumactif qui nous bloque.

    Merci beaucoup pour les compliments ça fait plaisir ! ♥
    Onyx
    Onyx
    FémininAge : 25Messages : 3284

    le Ven 21 Juin 2019 - 4:41

    Salut!

    Chaque catégorie est une liste (ul) qui contient des forums (1 forum = 1 élément de liste, donc 1 li).

    Catrow, c'est 1 ligne de catégorie. Donc si on fait quelque chose qui l'entoure, on entoure toutes les catégories, mais tout ce qu'il y a à l'intérieur, c'est pour 1 seule catégorie et cela se répète pour chaque catégorie.

    Tablehead, c'est ton en-tête de catégorie, donc c'est là que tu as le titre de la catégorie et c'est aussi là que tu dois ouvrir ta liste (ul) qui contient les forums.

    Tablefoot, c'est ton pied de catégorie, donc c'est là que tu dois fermer la liste (/ul).

    Forumrow, c'est un forum, donc un élément de liste. Il faut donc ouvrir l'élément au début (li) et le refermer à la fin (/li). (Il y a plusieurs forumrow qui se répètent entre le tablehead et le tablefoot).

    Cela donne ceci :
    Code:
    <!-- BEGIN catrow -->  <!-- Début de la section de 1 catégorie -->

      <!-- BEGIN tablehead -->  <!-- Début du bloc d'en-tête de 1 catégorie -->

        <div class="wrapper container-1" style="margin-bottom: 0">
            <div class="ligne w-6 opacity-40"></div>
            <div class="title-line opacity-40">{catrow.tablehead.L_FORUM}</div>
        </div>

      <ul class="container-1 wrapper list_forums">  <!-- Ceci doit contenir tous les forums de la catégorie, donc on l'ouvre dans l'en-tête et on le referme dans le pied -->

      <!-- END tablehead -->  <!-- Fin du bloc d'en-tête de 1 catégorie -->

          <!-- BEGIN forumrow -->  <!-- Début de 1 forum -->
     
                <li class="cat-box block_category w-6">
                    <h2 class="category"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h2>
                   
                    <div class="wrapper">
                        <div class="img-cat">
                            <figure class="chart" data-percent="100">
                                <svg width="200" height="200">
                                    <circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
                                </svg>
                                <div class="inner">
                                </div>
                                <div class="more-cat more">
                                </div>
                                <div class="plus-click"></div>
                            </figure>
           
                            <div class="container-descr gray-bg" style="width: 0px; display: none;">
                                <div class="bordure-fine gray-bg opacity-81">
                                    {catrow.forumrow.FORUM_DESC}
                                </div>
                                <span class="blue-txt"><i class="far fa-sticky-note"></i> {catrow.forumrow.TOPICS}  <i class="far fa-save"></i>
                                    {catrow.forumrow.POSTS}</span>
           
                            </div>
           
                        </div>
                        <div class="caption-lieux opacity-47">
                            <h4>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</h4>
                        </div>
                    </div>
                    <div class="wrapper">
                        <div class="avatar-cat"></div>
                        <div class="captions-cat">
                            <h3 class="blue-txt title-caption">{catrow.forumrow.LAST_POST}</h3>
                            <span class="date opacity-40">20 avril 2019. 14:50</span>
                        </div>
                    </div>
                </li>
           

      <!-- END forumrow -->  <!-- Fin de 1 forum -->

      <!-- BEGIN catfoot --><!-- END catfoot -->

      <!-- BEGIN tablefoot -->  <!-- Début du bloc du pied de 1 catégorie -->
      </ul>  <!-- On referme la liste -->
      <br clear="all" /></div>
      <!-- END tablefoot -->  <!-- Fin du bloc du pied de 1 catégorie -->

    <!-- END catrow -->  <!-- Fin de la section de 1 catégorie -->

    <script type="text/javascript" src="http://myk-vapor.forumactif.com/11566.js"></script>
    <script type="text/javascript" src="http://myk-vapor.forumactif.com/12980.js"></script>

    Ensuite, il te suffit de mettre un display flex à ta liste (ul), de déterminer la larger de tes (li) genre 45% et voilà le travail.

    Pour t'assurer de décaler le 2e forum, il suffit de ceci dans le CSS :
    Code:
    /*Forums pairs dans une catégorie*/
    .list_forums .block_category:nth-child(even) {
      margin-top: 20px;
    }



    Yovoed
    Yovoed
    FémininAge : 19Messages : 55

    le Mer 26 Juin 2019 - 21:40

    Ça fonctionne merci beaucoup !
    Tellement rapide et bien expliqué ~

    On vous fait plein de bisous avec l'équipe.
    luv ♥
    Contenu sponsorisé


      La date/heure actuelle est Dim 21 Juil 2019 - 2:11