AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

    Forums sur deux colonnes, personnalisation de l'extrême

    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Mar 10 Fév 2015 - 14:52

    Bonjour !

    Suite à une crise de nouveau(x) thème(s), réorganisations, et une surcharge de catégories, je me suis lancée dans l'aventure forums sur deux colonnes, en suivant ce tutoriel.
    Premièrement youhou, il est super et je ne crois pas avoir fait trop de bêtises, merci Okhmhaka =)

    Maintenant, comme il est dit que ce tutoriel englobe en fait plusieurs tutoriels en un (les effets de textes, les descriptions ninjas, et l'onglet sous-forums), je me retrouve avec un truc canon, le bon concept, la bonne disposition, mais le tout qui prend trop de place (il me faut composer avec des anti-roulettes. Oui Nel', si un jour tu vois ce message, je te vise ><).

    Du coup, il faudrait modifier beaucoup de choses, et en free-style, je me connais, tout va planter. Voir exploser. J'aurai donc besoin de vos lumières et de vos directives si vous le voulez bien ^^

    Comme je vais demander beaucoup de choses, dites-moi s'il vaut mieux déplacer ce sujet dans "commandes" plutôt que "personnalisation".

    D'avance merci pour votre aide !

    Je commence avec une question importante : est-il possible d’appliquer ce code seulement à certaines catégories ?
    J’aimerais les garder pour tout ce qui est « espace hors rédaction de RP ». C’est-à-dire Côté Forum, Côté RP, Zone de Staff, et tout en bas, Hors-Jeu et Pierre Bottero. Pour l’instant du moins, il est possible qu’émergent de nouvelles catégories et j’aimerais savoir leur appliquer cette « structure sur deux colonnes ».
    Tandis que les autres (Nord, Sud, Est, Terre) resteraient en version classique, sagement sur leur ligne.

    Départ :
    Voici le résultat actuel : http://legraphcmal.forumactif.org/
    (si besoin, j'ajoute l'image en spoiler, avec un semblant d'explication pour ne pas avoir à jongler entre les onglets).
    Comme vous pouvez le voir, j'ai du planter quelque part parce que certaines choses ne sont plus centrées TT Mais bon... j'aurais essayé !
    Spoiler:

    Niveau personnalisation de catégories :
    (Je passe directement en liste sinon bonjour le pavé...)
    • Centrer le titre de la catégorie (elle me semble décalée à gauche et je ne sais pas pourquoi. Ce qui me contrarie xD)
    • Peut-être, en lieu et place du long rectangle sur lequel repose ledit titre, un effet plus triangle inversé (comme pour la bannière là où il est écrit « la quête continue »).
    • J’aime bien le soulignage en pointillés, mais eux aussi, j’aimerais qu’ils soient centrés.


    Au niveau des « blocs » eux-mêmes :
    • J’aimerai qu’ils soient moins hauts. De la taille normale comme sur cet autre fow test du même forum : http://ewietest.forumactif.org/
      En fait, que le bloc ait la même hauteur que l’icône New/NoNew, avec juste un petit espace en dessous pour les liens des sous-forums. Parce qu’actuellement, au lieu de gagner 50% de place, j’ai l’impression d’en prendre encore plus =/
    • Que le cadre intérieur « sujet/message/dernier message, soit placé tout en haut à droite du bloc pour prendre le moins de place possible, et ainsi libérer l’espace pour la description du forum à sa place habituelle, à côté de l’icône New/NoNew.
    • Et du coup que la description soit toujours visible, et pas seulement quand on passe dessus ^^



    Je pense avoir fait le tour...
    Si quelqu'un se sent de guider une quiche en codage pour accomplir cet exploit, je lui en serais très reconnaissante =)

    Bonne journée !
    Elwing


    Dernière édition par Elwing le Ven 17 Avr 2015 - 10:49, édité 1 fois
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Ven 13 Fév 2015 - 10:46

    Pitit Up ^^
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Ven 13 Fév 2015 - 12:38

    Salut !
    Heu oui, je crois que ta demande serait plus une commande qu'un simple besoin d'aide... Mais autant commencer quand même x)
    Alors oui c'est possible d'appliquer ce code seulement à certaines catégories mais ça implique plusieurs contraintes ! Comme on peut désigner telle catégorie par son ordre d'apparition sur la page (par exemple: première catégorie) cette apparence en deux colonnes n'existera que sur la page d'accueil, je veux dire que si tu es dans un forum puis que tu cliques sur le lien de la catégorie dans laquelle tu es (là par exemple http://legraphcmal.forumactif.org/c1-cote-forum) l'affichage sera "normal", à moins qu'on ne fasse l'inverse et que l'affichage normal soit celui en deux colonnes... Question de choix donc !
    Deuxième containte: le HTML doit être le même pour les deux types de catégories, donc on passe uniquement par le CSS pour les différencier. (ça c'est parce que dans le template index_body les catégories ne sont marquées qu'une fois, et un bout de javascript gère leur répétition. Du coup on ne peut utiliser qu'une seule structure HTML)


    bon sinon, pour commencer à te modifier ces catégories...

    -pour la hauteur, dans ton CSS à forum_contenu tu peux remplacer le height:90%; par 60% par exemple, ça va déjà réduire pas mal !

    -tu peux aussi faire un tour dans le template index_box et juste après ça tu peux enlever un br (ça va faire un peu remonter l'image de news/no news/lock et le cadre à sa droite)
    Code:
    <div class="forum_contenu">
      <br />
      <br />
      <br />

    -Dans le CSS à icone_stats tu peux mettre une width:100%; c'est la div qui contient l'icone news/no news/lock et le cadre des statistiques, du coup en la mettant aussi large que le forum on va pouvoir espacer l'icone et le cadre.

    -Pour écarter le cadre de l'icone, dans stats_lastpost{ tu peux remplacer le "margin-left:10px par 145px;

    -Ensuite, heu j'ai pas trop compris ce que tu voulais faire des sous-forums ? garder l'onglet ouvrant ou simplement les mettre en liste, ou encore en ligne ?

    -Je ne vois pas non plus la description... Est-ce que tu pourrais en mettre une à l'un des forums ? Sinon il doit être possible de la mettre dans l'onglet contenant actuellement les sous-forums, en changeant son titre bien sûr !

    -Pour que les titres de catégories soient dans un triangle vers le bas, il faudrait que tu fasses une image de ligne avec le triangle, ce serait le plus simple, comme celle qu'il y a sur la bannière, on pourra l'utiliser comme image de fond du titre de cat. Mais du coup est-ce que tu veux conserver les pointillés ? tu peux aussi les inclure dans ton image pour qu'ils suivent la forme du triangle...

    -Et enfin, je crois qu'il va y avoir besoin de ton template et de ton CSS pour continuer !


    Heu, voilà...



    Alumine
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Sam 14 Fév 2015 - 15:34

    Bonjour Alumine, et un double merci : pour ta réponse d'abord et ensuite et surtout pour avoir parlé une langue que je comprends !!
    Du coup j'ai compris ce que j'ai fait, pourquoi je l'ai fait... et ça m'a permis d'avancer un peu toute seule =)

    Quand j'ai vu mon pavé, je me disais bien aussi que ça prenait des allures de commande >< Mais j'aimerais vraiment être capable de le refaire toute seule à l'avenir et donc de comprendre le processus plutôt que de ne faire que copier/coller. Sinon je dépenserai vite tous mes peaNUt's x')

    Dans l'ordre : - OK pour appliquer ça seulement à certaines catégories, du coup c'est soit touuuut partout sur deux colonnes (comme maintenant), soit uniquement sur certaines catégories, mais je serais contrainte et forcée d'avoir deux belles colonnes en page d'accueil et la version classique dans le lien de "juste cette catégorie", c'est ça ? Pas moyen d'avoir l'affichage 2 colonnes en page d'accueil pour CATE1 en page d'accueil ET en "tout seul", et en même temps l'affichage classique pour CATE2 en page d'accueil qui reste classique en "tout seul". Est-ce que j'ai tout suivi ou je me suis paumée quelque part ?

    -pour la hauteur, dans ton CSS à forum_contenu tu peux remplacer le height:90%; par 60% par exemple, ça va déjà réduire pas mal !

    -tu peux aussi faire un tour dans le template index_box et juste après ça tu peux enlever un br (ça va faire un peu remonter l'image de news/no news/lock et le cadre à sa droite)

    Code:

        <div class="forum_contenu">
          <br />
          <br />
          <br />

    -Dans le CSS à icone_stats tu peux mettre une width:100%; c'est la div qui contient l'icône news/no news/lock et le cadre des statistiques, du coup en la mettant aussi large que le forum on va pouvoir espacer l'icône et le cadre.

    -Pour écarter le cadre de l'icône, dans stats_lastpost{ tu peux remplacer le "margin-left:10px par 145px;

    -> J'ai tout fait, merci beaucoup ^^ Chose curieuse, peut-être, je n'avais qu'un seul
    Code:
    <br />
    là où tu m'as dit dans index_box. Je l'ai zigouillé et ça va bien =) Et en oubliant d'appliquer le code au titre de la catégorie Archives, j'ai vu que l'icône New/nonew était tellement remontée qu'elle sortait carrément de son cadre X_X Du coup je me dis qu'au besoin, y a peut-être un truc à faire avec le titre des catégories pour jouer sur cette variable.


    Après avoir bien fait tout ce que tu m'as dit, j'ai bidouillé d'autres trucs (je me suis faites quelques frayeurs, mais... bon ça va j'ai survécu x)). En fait je me suis rendu compte que même en poussant bien le cadre des stats de l'icône new/nonew/lock, il n'y avait pas assez de place pour ajouter une description entre.
    Contrariée, je me suis demandé pourquoi, et j'ai remarqué que les deux forums côte à côte n'étaient pas aussi larges qu'un seul forum en disposition "classique" de largeur 70%.

    Forte d'une bourde où, en agrandissant le "width" de .forum, je les ai vu partir à la ligne, j'ai vaguement compris que .forum_bloc était l'espace où se baladaient les forums, et .forum, les forums eux-mêmes. Et qu'en agrandissant le second je sortais du cadre du premier, ce qui expliquait qu'ils se barrent en dessous TT
    J'ai donc agrandi le width de .forum_bloc PUIS de .forum.
    Je ne suis pas certaine d'être parfaitement centrée, mais au moins il y a davantage d'espace entre l'icône et les "trucstats".
    En tout cas, j'ai compris pourquoi le tuto disait d'éviter de toucher aux tailles parce que cela impliquait de modifier d'autres choses ^^"""

    J'en ai aussi profité pour changer quelques couleurs pour me familiariser avec les différents éléments.

    Ensuite je trouvais l'espace sous chaque forum trop grand, donc j'ai pu les rétrécir un peu avec margin-bottom de .forum. J'ai aussi compris que le chiffre affiché (ici "15px") ne correspondait pas à ce que je voyais, mais qu'il correspondait à l'espace entre le bandeau des sous-forums ouvert et le forum du dessous TT

    Ce qui m'emmène à :
    -Ensuite, heu j'ai pas trop compris ce que tu voulais faire des sous-forums ? garder l'onglet ouvrant ou simplement les mettre en liste, ou encore en ligne ?


    En fait, j'aimerais sucrer ce bandeau ouvrant, et que les sous-forums s'affichent en ligne à l'endroit habituel (c'est-à-dire sous les descriptions de forum, elles-mêmes entre l'icône New/NoNew et le cadre des stats).

    -Je ne vois pas non plus la description... Est-ce que tu pourrais en mettre une à l'un des forums ? Sinon il doit être possible de la mettre dans l'onglet contenant actuellement les sous-forums, en changeant son titre bien sûr !

    J'en ai ajouté une ! "Décrets Impériaux" fait l'objet de tous les test ^^" Alors, j'ai tenté d'enlever l'image sous la description, pensant que tout rentrerait dans l'ordre et ce ne fut pas du tout le cas U_u Ma description est apparue un peu n'importe où, mordant mon icône, en mode je fais ma vie de description ninja et je t'embête misérable mortelle. J'ai donc remis l'image.
    Le but étant de me venger en l'enlevant et en remettant la description à sa place initiale (entre l'icône et les stats).

    -Pour que les titres de catégories soient dans un triangle vers le bas, il faudrait que tu fasses une image de ligne avec le triangle, ce serait le plus simple, comme celle qu'il y a sur la bannière, on pourra l'utiliser comme image de fond du titre de cat. Mais du coup est-ce que tu veux conserver les pointillés ? tu peux aussi les inclure dans ton image pour qu'ils suivent la forme du triangle...

    Yep, j'y avais pensé, mais je ne suis pas sûre de savoir mettre une image en guise de titre de catégorie Oo Cela dit, ça doit se trouver et je vais suivre ton conseil... Et j'ai enlevé les pointillés pour l'instant :)

    D'autant qu'un problème persiste : le titre des catégories refuse catégoriquement de se centrer. J'ai bien tenté d'appliquer un "position: center;" un peu partout où je voyais écrits cate et titre, mais il s'en fiche complètement.



    En résumé, voilà où j'en suis pour l'instant : http://legraphcmal.forumactif.org/


    -Et enfin, je crois qu'il va y avoir besoin de ton template et de ton CSS pour continuer !

    Je te donne ça de suite =)

    CSS (je crois qu'il y a des morceaux obsolètes, qui ne sert à rien de laisser mais je n'ai pas encore fait le ménage):
    Code:
    /* MISE EN FORME DES CATEGORIES ET FORUMS */

        .cate_titre
        {
          clear: both;
          height: 100px;
          margin-top: 50px;
        }
        .catetitre_bloc
        {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 20px;
        margin-left: auto;
        margin-right : auto;
        background-color: #C8965D;
       
        }
        .catetitre_content
    {
    position: absolute;
    z-index: 2;
    display: block;
    width: 950px;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
    }

        .catetitre
        {
        color: #454545;
        font-family: arial;
        font-size: 26px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0px #000000;
        }

        .forum_bloc
        {
          width: 1120px;
          margin-left: auto;
          margin-right: auto;
          margin-top: -30px;
        }
        .forum
        {
        float: left;
        width: 550px;
        height: 250px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 15px;
        }
        a.forumlink
        {
          position: relative;
          z-index: 2;
          display: block;
          width: 100%;
          color: #454545;
          text-align: center;
        font-family: arial;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0px #000000;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        a.forumlink:hover
        {
          letter-spacing: 4px;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .forum_contenu
        {
          position: relative;
          z-index: 1;
          width: 98%;
          height: 55%;
          padding: 4px;
          margin-left: auto;
          margin-right: auto;
          margin-top: -8px;
          background-color: #A88F5F;
          border-left: 1px dotted #191817;
          border-right: 1px dotted #191817;
          border-bottom: 1px dotted #191817;
          border-top: 5px solid #191817;
        }
        .description
        {
          display: block;
          width: 400px;
          margin: auto;
          height: 100px;
          overflow: hidden;
          border: 2px solid #9c9c9c;
          box-shadow: 1px 1px 1px #191817;
          -moz-box-shadow: 1px 1px 1px #191817;
          -htm-box-shadow: 1px 1px 1px #191817;
          -webkit-box-shadow: 1px 1px 1px #191817;
          -o-box-shadow: 1px 1px 1px #191817;
        }
        .description_contenu
        {
          position: absolute;
          display: block;
          width: 391px;
          height: 91px;
          overflow: auto;
          background-color: #191817;
          font-size: 10px;
          color: #9c9c9c;
          text-align: justify;
          padding: 5px;
          opacity: 0;
          -moz-opacity: 0;
          -khtml-opacity: 0;
          filter: alpha(opacity=0);
          transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .description_contenu:hover
        {
          opacity: 0.8;
          -moz-opacity: 0.8;
          -khtml-opacity: 0.8;
          filter: alpha(opacity=80);
          transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .icone_stats
        {
          width: 100%;
          margin: auto;
          margin-top: -30px;
        }
        .stats_lastpost
        {
          display: block;
          width: 160px;
          height: 80px;
          margin-left: 250px;
          background-color: #CDB986;
          border: 1px solid #191817;
          padding: 5px;
          text-align: center;
        }
        .stats
        {
          display: block;
          margin-bottom: 5px;
          border-bottom: 1px dotted #b5b5b5;
          padding-bottom: 5px;
          font-size: 10px;
          color: #FFFDED;
        }
        .lastpost
        {
          display: block;
          font-size: 11px;
        }
        .sforum
        {
          position: relative;
          z-index: 3;
          display: block;
          height: 0;
            background: #191817;
          color: #b5b5b5;
          overflow: hidden;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .ouverture_sousforum
        {
          position: relative;
          z-index: 3;
          display: block;
          float: right;
          width: 120px;
          margin-right: 20px;
          background: #191817;
          color: #b5b5b5;
          font-size: 11px;
          text-align: center;
          padding: 4px;
          -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        }
        .sous_forum:hover .sforum
        {
          height: 50px;
          background: #191817;
          color: #b5b5b5;
          padding: 4px;
          overflow: auto;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .sous_forum a
        {
          color: #b5b5b5 !important;
          text-shadow: 1px 1px 0px #000000;
        }
        .sous_forum a:hover
        {
          color: #ffffff !important;
        }



    /* LIENS */

    a
    {
    font-variant : small-caps;
     text-decoration : none !important;
    }
    a:hover
    {
    font-variant : normal;
    text-shadow : 0px 0px 2px #ffffff;
      text-decoration : none !important;
          }


    /* BARRE DE NAVIGATION */

     
    a.mainmenu
    {
    text-shadow : 0px 0px 1px #ffffff;
    font-variant : small-caps;
    font-size : 10px;
    color: #ffffff ;
    text-decoration: none;
     
          }
            .navig {
            position: absolute;
            top: 0px;
      left: 0px;
      right: 0px;
            width: 100%;
    }
       

    a.mainmenu:hover
    {
    text-shadow : 0px 0px 10px #ffffff;
    font-variant : normal;
    }




    /* LIENS */

    a
    {
    font-variant : small-caps;
     text-decoration : none !important;
    }
    a:hover
    {
    font-variant : normal;
    text-shadow : 0px 0px 2px #ffffff;
      text-decoration : none !important;
          }


    /* BARRE DE NAVIGATION */

     
    a.mainmenu
    {
    text-shadow : 0px 0px 1px #ffffff;
    font-variant : small-caps;
    font-size : 10px;
    color: #ffffff ;
    text-decoration: none;
     
          }
            .navig {
            position: absolute;
            top: 0px;
      left: 0px;
      right: 0px;
            width: 100%;
    }
       

    a.mainmenu:hover
    {
    text-shadow : 0px 0px 10px #ffffff;
    font-variant : normal;
    }



    /* BORDURES FORUM */

    .forumline
    {
    background-color : #532C3C;
    padding : 10px;
    -moz-border-radius-bottomright : 15px;
    -moz-border-radius-bottomleft : 15px;
    -moz-border-radius-topright : 15px;
    -moz-border-radius-topleft : 15px;
    -moz-box-shadow : 0px 0px 10px #CDB986;
    box-shadow : 0px 0px 10px #CDB986;
    }



    /* TITRES DES FORUMS ne s'applique que si le template a été modifié ( dispo en C/C sur mon forum ) */


    .titreforum
    {
    letter-spacing : 4px;
    margin-right : 30px;
    margin-left : 30px;
    border-bottom : 2px solid #ffffff;
    font-variant : small-caps;
    -moz-border-radius : 9px;
    font-size : 15px;
    color : #ffffff;
    text-shadow : 0px 0px 5px #ffffff;
    text-align : right;
    }


    .titreforum:hover
    {
    font-variant : normal;
    }

    /* DESCRIPTIONS DES FORUMS ne s'applique que si le template & les descriptions ont été modifiés ( dispo en C/C sur mon forum )  */

    .desc
    {
    background-image : URL('http://img4.hostingpics.net/pics/372138fondtitrecateslategrey.jpg');
    -moz-border-radius : 15px;
    text-align : right;
    padding : 5px;
    color : #ffffff;
    margin-left : 30px;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    font-variant : small-caps;
    margin-right : 30px;
    }

    a.desclink
    {
    background-color : #4f91ba;
    -moz-border-radius : 15px;
    text-decoration : none !important;
    color : #ffffff;
    font-variant : normal;
    font-size : 9px;
    padding : 3px;
    }

    a.desclink:hover
    {
    font-variant : normal;
    }


    /* POSTS */

    tr.post td
    {
    padding-left: 20px;
    padding-right : 20px;
    }

    u
    {
    border-bottom : 1px solid #ffffff;
    text-shadow : 0px 0px 5px #ffffff;
    -moz-border-radius : 9px;
    text-decoration : none !important;
    }

    spoiler .spoiler_closed_hidden, .spoiler .spoiler_content
    {
    padding-left: 30px;
    color : black;
    background-color : #88accf;

    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;
     border-left: 2px #ffffff solid;
    -moz-border-radius: 15px;
    }

    .quote
    {
    padding-left: 30px;
    color : black;
    background-color : #88accf;
    background-image : URL('http://s2.noelshack.com/uploads/images/13866645766743_quote.png');
    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;

    }

    .code
    {
    font-family : Courier;
    padding-left: 30px;
    color : black;
    background-color : #96aec5;
    background-image : URL('http://s2.noelshack.com/uploads/images/7115060982744_code.png');
    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;
     border-left: 2px #ffffff solid;
    -moz-border-radius: 15px;
    }




    /* BOUTONS ET CHAMPS DE TEXTES */

    input.post, textarea.post, select
    {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    border : 1px solid #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }

     select:hover
    {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }

    input
     {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    border : 1px solid #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }
    input:hover
     {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    font-variant : small-caps;
    padding: 3px;
    -moz-border-radius : 15px;
    }

       

           

            body {
      margin-top: 30px;
          background-image:url(http://img4.hostingpics.net/pics/53372553283A.png);
      background-size: 100% auto;
                background-attachment: repeat
                                    }
         

    .postdetails.poster-profile a img
    {
    margin: auto;
    display: block;

    }

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

        <div class="cate_titre"><span class="catetitre_bloc"></span>
          <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>

        <!-- END tablehead -->
        <!-- BEGIN cathead -->


        <!-- END cathead -->
        <!-- BEGIN forumrow -->
       

        <div class="forum_bloc">
        <div class="forum">
         
          <span class="forumlink">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
          </span>
         
          <div class="forum_contenu">
            {catrow.forumrow.FORUM_DESC}
           
            <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
              <td><span class="stats_lastpost">
                <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
                <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
                </span></td>
              </tr></table></div>
           
          </div>
         
          <div class="sous_forum">
            <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <span class="ouverture_sousforum">Voir les sous-forum</span>
          </div>
         
        </div>
        </div>


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

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

        <!-- END tablefoot --><!-- END catrow -->


    Encore merci pour toutes tes explications !
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Dim 15 Fév 2015 - 17:54

    Olééé ! Bon, je vais essayer de répondre dans l'ordre ^^'

    -En fait peut-être me suis-je trompée, ça se trouve en javascript il y aurait un moyen... Ça a dû être déjà dit quelque part sur NU, je vais chercher ! Sinon t'as bien compris

    -Effectivement le titre de catégorie influe sur ce qu'il y a au-dessous; et s'il n'est pas centré c'est à cause de la structure. Le truc entre accolades désigne ton titre de catégorie. Il est dans une div du nom de cate_titre, dans laquelle il y a aussi un autre truc, le catetitre_bloc, qui sert à faire la ligne beige en-dessous du titre. Si tu mets une image à la place, tu peux l'enlever, et par la même occasion le CSS qui le concerne. Heu donc le titre de cat est dans catetitre_content, lui-même dans cate_titre, donc actuellement le titre n'est pas centré puisque catetitre_content est moins large que cate_titre, donc elle se cale toute seule à gauche !
    Code:
        <div class="cate_titre"><span class="catetitre_bloc"></span>
          <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span>
        </div>
    bon du coup dans le CSS à .cate_titre il faut rajouter width:100%; du coup cette div va se mettre à la même taille que .forumbloc, ce qui nous arrange. Ensuite à .catetitre_content il faut changer position:absolute; par position:relative; et à width:920px il faut mettre 100% aussi. Bon du coup on a automatisé le titre de catégorie, il s'adaptera à ce qu'on fera sur le reste !

    -effectivement lesforums sont en "float:left", c'est-à-dire qu'ils vont essayer de se mettre en ligne calés sur la gauche, mais que s'il n'y a pas la place, retour à la ligne (un peu comme du texte en fait...) Sinon de ce côté-là je crois que ce que tu as fait est bon !

    -OK maintenant on sucre l'onglet et on déplace les sous forums !
    Code:

          <div class="sous_forum">
            <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <span class="ouverture_sousforum">Voir les sous-forum</span>
          </div>
    voilà ça c'est l'endroit où sont les sous forums ! {catrow.forumrow.L_LINKS} ça c'est le texte des liens {catrow.forumrow.LINKS}et ça c'est le texte des liens. Autour donc c'est l'onglet... On ne va garder que le span class="sforum" et virer le reste, puisqu'il ne nous intéresse pas (le CSS affilié aussi !)
    Donc il nous reste ça:
    Code:
    <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
    Il faut le placer dans le bloc du forum, en-dessous des trucs d'au-dessus, donc ici entre le /span et le /td de la fin.
    Code:
            <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
              <td><span class="stats_lastpost">
                <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
                <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
                </span></td>
              </tr></table></div>
    ce qui donne ça:
    Code:
            <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
              <td><span class="stats_lastpost">
                <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
                <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
                </span>
                <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
              </td>
              </tr></table></div>
    Voilà, les sous-forums devraient avoir bougé, on verra ensuite s'il faut retravailler le CSS qui les concerne.

    -Maintenant, la description ! bon alors c'est ça: {catrow.forumrow.FORUM_DESC} (ligne 42)
    Actuellement elle est dans forum_contenu mais un peu toute seule. Or on veut la mettre entre l'image et le cadre de droite, eux-même entourés par .stats_lastpost Du coup il te suffit de la déplacer juste après ça:
    Code:
     <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
    ce qui donne ça:
    Code:
            <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
              <td><span class="stats_lastpost">
                <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
                {catrow.forumrow.FORUM_DESC}
                <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
                </span>
                <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
              </td>
              </tr></table></div>

    Bon sauf que ta description est toujours un peu large... dans .description essaye avec width: 250px; et dans .description_contenu avec width:240px;

    -ensuite pour les titres de catégorie, pas la peine de passer par une image différente pour chaque catégorie, il suffit de faire le "fond" et de mettre le titre de la cat par-dessus, pas besoin de s'embêter donc ! On va utiliser une propriété CSS qui permet de mettre une image de fond, comme ça (dans cate_titre tu peux rajouter ça: ) background-image:url(ADRESSE DE TON IMAGE); et aussi background-size: cover; et il faudra éventuellement ajuster le height:100px; pour voir ton image en entier.

    Voilà voilà... Heu sinon pour l'autre type de catégorie je suppose que tu peux te débrouiller, il faudra juste utiliser les mêmes class que plus haut, et surtout s'en occuper quand les premières seront terminées x) Sinon je pense que tu peux envisager quelque chose un peu comme sur ce forum: http://la-foret-de-laube.forumactif.fr/ mais avec le titre du forum à l'extérieur du bloc. D'ailleurs le cadre de droite et l'image de gauche ont l'air d'être du même format ^^







    Alumine
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Lun 16 Fév 2015 - 14:15

    ... ah oui effectivement, pour centrer ce titre, un "center" ne suffisait pas ^^" J'ai un peu de mal à comprendre cette histoire de position : absolute ou relative. Absolute c'est qui ne bouge pas quoi qu'il arrive, c'est ça ? Et "relative" je me dis que c'est ce qui se réfère à quelque chose mais... quoi ? Comment savoir qu'il va se référer à ce qu'on veut ?

    Aouch. Il s'est passé un truc bizarre -> http://legraphcmal.forumactif.org/ J'ai pas fait gaffe, du coup je ne sais pas si ça s'est produit quand j'ai modifié le CSS pour centrer les titres de catégories, où si ça s'est déclenché après les modifs pour les sous-forums : Le premier titre de catégorie est impecc, les suivants sont décalés vers le bas, et les derniers mènent une rébellion en se collant à droite X_X Pourquoi ??

    Le CSS au moment du problème :
    Code:
    /* MISE EN FORME DES CATEGORIES ET FORUMS */

        .cate_titre
        {
          clear: both;
          height: 100px;
          margin-top: 50px;
      width: 100%;
        }
        .catetitre_bloc
        {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 20px;
        margin-left: auto;
        margin-right : auto;
        background-color: #C8965D;
       
        }
        .catetitre_content
    {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
    }

        .catetitre
        {
        color: #454545;
        font-family: arial;
        font-size: 26px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0px #000000;
        }

        .forum_bloc
        {
          width: 1120px;
          margin-left: auto;
          margin-right: auto;
          margin-top: -30px;
        }
        .forum
        {
        float: left;
        width: 550px;
        height: 250px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 15px;
        }
        a.forumlink
        {
          position: relative;
          z-index: 2;
          display: block;
          width: 100%;
          color: #454545;
          text-align: center;
        font-family: arial;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 1px 1px 0px #000000;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        a.forumlink:hover
        {
          letter-spacing: 4px;
            transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .forum_contenu
        {
          position: relative;
          z-index: 1;
          width: 98%;
          height: 55%;
          padding: 4px;
          margin-left: auto;
          margin-right: auto;
          margin-top: -8px;
          background-color: #A88F5F;
          border-left: 1px dotted #191817;
          border-right: 1px dotted #191817;
          border-bottom: 1px dotted #191817;
          border-top: 5px solid #191817;
        }
        .description
        {
          display: block;
          width: 400px;
          margin: auto;
          height: 100px;
          overflow: hidden;
          border: 2px solid #9c9c9c;
          box-shadow: 1px 1px 1px #191817;
          -moz-box-shadow: 1px 1px 1px #191817;
          -htm-box-shadow: 1px 1px 1px #191817;
          -webkit-box-shadow: 1px 1px 1px #191817;
          -o-box-shadow: 1px 1px 1px #191817;
        }
        .description_contenu
        {
          position: absolute;
          display: block;
          width: 391px;
          height: 91px;
          overflow: auto;
          background-color: #191817;
          font-size: 10px;
          color: #9c9c9c;
          text-align: justify;
          padding: 5px;
          opacity: 0;
          -moz-opacity: 0;
          -khtml-opacity: 0;
          filter: alpha(opacity=0);
          transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .description_contenu:hover
        {
          opacity: 0.8;
          -moz-opacity: 0.8;
          -khtml-opacity: 0.8;
          filter: alpha(opacity=80);
          transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
        .icone_stats
        {
          width: 100%;
          margin: auto;
          margin-top: -30px;
        }
        .stats_lastpost
        {
          display: block;
          width: 160px;
          height: 80px;
          margin-left: 250px;
          background-color: #CDB986;
          border: 1px solid #191817;
          padding: 5px;
          text-align: center;
        }
        .stats
        {
          display: block;
          margin-bottom: 5px;
          border-bottom: 1px dotted #b5b5b5;
          padding-bottom: 5px;
          font-size: 10px;
          color: #FFFDED;
        }
        .lastpost
        {
          display: block;
          font-size: 11px;
        }
       


    /* LIENS */

    a
    {
    font-variant : small-caps;
     text-decoration : none !important;
    }
    a:hover
    {
    font-variant : normal;
    text-shadow : 0px 0px 2px #ffffff;
      text-decoration : none !important;
          }


    /* BARRE DE NAVIGATION */

     
    a.mainmenu
    {
    text-shadow : 0px 0px 1px #ffffff;
    font-variant : small-caps;
    font-size : 10px;
    color: #ffffff ;
    text-decoration: none;
     
          }
            .navig {
            position: absolute;
            top: 0px;
      left: 0px;
      right: 0px;
            width: 100%;
    }
       

    a.mainmenu:hover
    {
    text-shadow : 0px 0px 10px #ffffff;
    font-variant : normal;
    }




    /* LIENS */

    a
    {
    font-variant : small-caps;
     text-decoration : none !important;
    }
    a:hover
    {
    font-variant : normal;
    text-shadow : 0px 0px 2px #ffffff;
      text-decoration : none !important;
          }


    /* BARRE DE NAVIGATION */

     
    a.mainmenu
    {
    text-shadow : 0px 0px 1px #ffffff;
    font-variant : small-caps;
    font-size : 10px;
    color: #ffffff ;
    text-decoration: none;
     
          }
            .navig {
            position: absolute;
            top: 0px;
      left: 0px;
      right: 0px;
            width: 100%;
    }
       

    a.mainmenu:hover
    {
    text-shadow : 0px 0px 10px #ffffff;
    font-variant : normal;
    }



    /* BORDURES FORUM */

    .forumline
    {
    background-color : #532C3C;
    padding : 10px;
    -moz-border-radius-bottomright : 15px;
    -moz-border-radius-bottomleft : 15px;
    -moz-border-radius-topright : 15px;
    -moz-border-radius-topleft : 15px;
    -moz-box-shadow : 0px 0px 10px #CDB986;
    box-shadow : 0px 0px 10px #CDB986;
    }



    /* TITRES DES FORUMS ne s'applique que si le template a été modifié ( dispo en C/C sur mon forum ) */


    .titreforum
    {
    letter-spacing : 4px;
    margin-right : 30px;
    margin-left : 30px;
    border-bottom : 2px solid #ffffff;
    font-variant : small-caps;
    -moz-border-radius : 9px;
    font-size : 15px;
    color : #ffffff;
    text-shadow : 0px 0px 5px #ffffff;
    text-align : right;
    }


    .titreforum:hover
    {
    font-variant : normal;
    }

    /* DESCRIPTIONS DES FORUMS ne s'applique que si le template & les descriptions ont été modifiés ( dispo en C/C sur mon forum )  */

    .desc
    {
    background-image : URL('http://img4.hostingpics.net/pics/372138fondtitrecateslategrey.jpg');
    -moz-border-radius : 15px;
    text-align : right;
    padding : 5px;
    color : #ffffff;
    margin-left : 30px;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    font-variant : small-caps;
    margin-right : 30px;
    }

    a.desclink
    {
    background-color : #4f91ba;
    -moz-border-radius : 15px;
    text-decoration : none !important;
    color : #ffffff;
    font-variant : normal;
    font-size : 9px;
    padding : 3px;
    }

    a.desclink:hover
    {
    font-variant : normal;
    }


    /* POSTS */

    tr.post td
    {
    padding-left: 20px;
    padding-right : 20px;
    }

    u
    {
    border-bottom : 1px solid #ffffff;
    text-shadow : 0px 0px 5px #ffffff;
    -moz-border-radius : 9px;
    text-decoration : none !important;
    }

    spoiler .spoiler_closed_hidden, .spoiler .spoiler_content
    {
    padding-left: 30px;
    color : black;
    background-color : #88accf;

    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;
     border-left: 2px #ffffff solid;
    -moz-border-radius: 15px;
    }

    .quote
    {
    padding-left: 30px;
    color : black;
    background-color : #88accf;
    background-image : URL('http://s2.noelshack.com/uploads/images/13866645766743_quote.png');
    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;

    }

    .code
    {
    font-family : Courier;
    padding-left: 30px;
    color : black;
    background-color : #96aec5;
    background-image : URL('http://s2.noelshack.com/uploads/images/7115060982744_code.png');
    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;
     border-left: 2px #ffffff solid;
    -moz-border-radius: 15px;
    }




    /* BOUTONS ET CHAMPS DE TEXTES */

    input.post, textarea.post, select
    {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    border : 1px solid #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }

     select:hover
    {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }

    input
     {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    border : 1px solid #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }
    input:hover
     {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    font-variant : small-caps;
    padding: 3px;
    -moz-border-radius : 15px;
    }

       

           

            body {
      margin-top: 30px;
          background-image:url(http://img11.hostingpics.net/pics/76557439293e.png);
      background-size: 100% auto;
                background-attachment: fixed
                                    }
         

    .postdetails.poster-profile a img
    {
    margin: auto;
    display: block;

    }

    Et index_box aussi pendant le problème :
    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 -->

        <div class="cate_titre"><span class="catetitre_bloc"></span>
          <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>

        <!-- END tablehead -->
        <!-- BEGIN cathead -->


        <!-- END cathead -->
        <!-- BEGIN forumrow -->
       

        <div class="forum_bloc">
        <div class="forum">
         
          <span class="forumlink">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
          </span>
         
          <div class="forum_contenu">
            {catrow.forumrow.FORUM_DESC}
           
            <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
              <td><span class="stats_lastpost">
                <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
                <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
                </span><span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></td>
              </tr></table></div>
           
          </div>
         
         
               
         
         
        </div>
        </div>


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

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

        <!-- END tablefoot --><!-- END catrow -->

    J'ai planté un truc ?


    Mama mia ! J'ai fait la manip pour déplacer la description et... icône et cadre de stats sont remontés brusquemment Oo J'ai compris les pourquoi des
    dont tu me parlais au début (tu sais, là où je n'en avais qu'un, que j'ai supprimé U_u). Et bien j'en ai remis deux x')

    Bon, CSS ça commence à rentrer mais les templates c'est le flou total. Je comprends pas pourquoi, j'ai bien mis le truc FORUM_DESC là où tu m'as dit, j'ai vérifié, et la description s'est positionnée DANS le cadre des stats. J'ai changé les valeurs demandées, ça ne l'a pas convaincu de se placer à sa place normale.
    Du coup j'ai remis FORUM_DESC à sa précédente place et j'ai bidouillé le CSS de .description... quoi que je fasse il s'en moque. Au passage j'ai enlevé plein de trucs qui me paraissait correspondre à l'ancienne description avec image, texte caché etc, et je n'ai gardé que ça :
    Code:
    .description
        {
          display: block;
          width: 250px;
          margin: auto;
          height: 100px;
              }
        .description_contenu
        {
          position: absolute;
          display: block;
          width: 240px;
          height: 91px;
          font-size: 10px;
          color: #9c9c9c;
          text-align: justify;
          }

    Ça va, je n'ai pas squizzé un truc important ?

    Heu sinon pour l'autre type de catégorie je suppose que tu peux te débrouiller, il faudra juste utiliser les mêmes class que plus haut, et surtout s'en occuper quand les premières seront terminées x)
    Trop de codes dans les yeux, je me suis perdue : de quoi ? Quel autre type de catégorie ?

    En résumé : [list][*]description récalcitrante.
    [*]une partie des titres de catégories font de la résistance.

    Désolée, je crois que cette fois j'ai un peu perdu pied Sad
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Dim 22 Fév 2015 - 19:13

    Apparemment je suis tenue de relancer tous les 6 jours pour dire que je suis toujours en vie et le sujet d'actualité. Donc voilà !
    J'en profite pour dire que j'ai l'image pour les titres de catégories, et que je vais probablement l'essayer ce soir :) J'éditerai si ça plante x)

    EDIT : en mettant une image derrière le titre de catégorie, j'ai pensé que je pouvais peut-être enlever sans problème du CSS ceci :
    Code:
        .catetitre_bloc
        {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 20px;
        margin-left: auto;
        margin-right : auto;
        background-color: #C8965D;
       
        }

    Et... et bien ça a recentré tous les titres xD Du coup, c'est déjà un problème de réglé ^^ Je poursuis les test demain ou dans la semaine pour ajuster l'espace entre l'image et les forums.

    EDIT du 24/02 : il y a un peu de mieux, au moins la description est au bon endroit :) Seul indécrottable problème maintenant, l'icône New/NoNew/Lock et le cadre des stats se sont décalés vers le bas, visiblement vexés qu'on leur impose une description visible.
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Mer 4 Mar 2015 - 22:19

    Hello, désolée de mon retard, les concours ont eu raison de moi =/

    Heu du coup ton problème vient du template; on peut voir que l'icône news etc et le cadre de stats sont dans la même div, qui est horizontale, et que la description est toute seule à part, au-dessus. Du coup il faut créer une cellule de tableau (les petits "td") pour la mettre dedans, entre les deux autres, ce qui donne ça:

    Code:
                <div class="icone_stats"><table><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
                  <td>{catrow.forumrow.FORUM_DESC}</td>
                  <td><span class="stats_lastpost">
                    <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
                    <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
                    </span>
                    <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
                  </td>
                  </tr></table></div>


    Ca devrait alors fonctionner même pour les forums où tu n'as pas de description !
    Ah et bien joué pour les titres avec les images ! désolée de pas avoir pu t'aider ^^'



    Alumine
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Jeu 5 Mar 2015 - 11:49

    Pas de souci, priorité aux concours !
    Et comme ça j'ai pu bidouiller toute seule :)

    YESSSS ! Merci, je vois enfin la description à la bonne place, je désespérais de la discipliner celle-là x) J'ajusterai sa taille et sa position exacte plus tard, maintenant que je sais le faire :p

    On voit le bout, pfiou !
    Un dernier petit effort et je crois que ce sera tout bon -> nouvelle excentricité, les sous-forums (uniquement ceux où il y a une description) se sont fait la malle sur la droite, et ont éjecté les stats... Pourquoi ce refus de coopérer quand tout rentre dans l'ordre ? http://legraphcmal.forumactif.org/
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Ven 13 Mar 2015 - 19:07

    Up pour ne pas être "en attente de relance", je suis vivante U_u

    EDIT du 22 Mars 2015 : Toujours là !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 2 Avr 2015 - 4:33

    Salut!

    Je viens aux nouvelles pour voir si c'est toujours d'actualité ^^

    PS: Si tu pouvais nous redonner ton CSS et ton Template après toutes ces modifications pour qu'on puisse voir comment aider, ce serait super Wink



    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Jeu 2 Avr 2015 - 11:23

    Bonjour ! Et pardon, j'ai un peu traîné avant de upper, je voulais faire le maximum toute seule avant de relancer ^^

    Alors ! Ne m'en sortant plus avec le problème de placement des descriptions qui faisait tout bouger, j'ai changé de tutoriel =)
    J'ai tenté ces deux là, pour la facilité de placer les éléments avec les margin, je galérais moins :

    - Coupler sur deux colonnes et cate en bloc
    - Placer les éléments facilement dans un bloc


    Du coup... J'ai d'autres petits problèmes (moindre) mais comme ils ne touchent plus le même tutoriel, je me demande si je dois poster une nouvelle demande ?


    En attendant, voici le CSS demandé :
    Code:
    /* MISE EN FORME DES CATEGORIES ET FORUMS */

        .cate_head
        {
          clear: both;
          width: 1250px;
          margin: auto;
          height: 117px;
          background: url(http://img11.hostingpics.net/pics/905852cateheadess.png);
        }
        .cate_body
        {
          width: 1250px;
          margin: auto;
          background: url(http://img11.hostingpics.net/pics/932730catebodytransparent.png) repeat-y;
        }
        .cate_foot
        {
          width: 1250px;
          height: 49px;
          margin: auto;
          background: url(http://img11.hostingpics.net/pics/736301catafoottransparent.png);
        }

    .titre_cate
    {
      position: absolute;
      width: 1250px;
      text-align: center;
      margin-top: 27px;
    }

    .titre_cate h2
    {
      font-size : 24px;
      text-transform: uppercase;
      font-family: Morpheus;
      text-decoration: none !important;
      color: #792A22;
    }

      .forum_bloc
    {
      width: 1200px;
      margin: auto;

    }

    .forum
    {
      float: left;
      width: 580px;
      height: 150px;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 20px;
      background: #CFE3E0;
      background-image: url(http://img15.hostingpics.net/pics/146300fondfowess4.jpg);
      padding: 4px;
      border-top: solid 5px #4C362B;
      border-bottom: solid 1px #4C362B;
      border-left: solid 1px #4C362B;
      border-right: solid 1px #4C362B;
      border-radius: 50px 5px 50px 5px;
    }

            .forumlink
        {
          position: absolute;
          width: 580px;
          height: 12px;
          text-decoration: none !important;
          font-size: 20px;
          font-family: arial;
          color: black;
          margin-top : -22px;
          text-align: center;
      text-shadow : 0px 0px 1px black;
          }


        .forum_icone
        {
          position: absolute;
          width: 110px;
          height: 110px;
          background: #765D4D;
      background-image: url(http://img11.hostingpics.net/pics/949623nonewesss.jpg);
          border-radius: 100px;
      border: solid 1px #4C362B;
        }
        .forum_description
        {
          position: absolute;
          overflow: auto;
          width: 297px;
          height: 100px;
        font-size: 11px;
      text-align: justify;
        color: #3B2D40;
      margin-left: 120px;
      margin-top: 10px;
            border-radius: 5px 5px 5px 5px;
      padding: 4px;
        }
        .sous_forum
        {
          position: absolute;
          overflow: auto;
          width: 575px;
          height: 28px;
            margin-top: 122px;
      border-radius : 0 0 50px 5px;
        text-align: center;
        }
        .forum_stats
        {
          position: absolute;
          width: 150px;
          height: 20px;
        font-size: 10px;
      text-align: center;
      color: black;
          background: #EAD5AA;
      opacity: 0.5;
      border-top: dotted 1px darkgrey;
      border-left: dotted 1px darkgrey;
      border-right: dotted 1px darkgrey;
      border-radius: 0 5px 0 0;
      margin-top: 10px
      margin-left: 430px;
        }
        .dernier_mess
        {
          position: absolute;
          overflow: auto;
          width: 150px;
          height: 70px;
      text-align: center;
      font-size: 11px;
          background: #EAD5AA;
      opacity: 0.5;
      border-bottom: dotted 1px darkgrey;
      border-left: dotted 1px darkgrey;
      border-right: dotted 1px darkgrey;
      margin-left: 430px;
      margin-top: 30px;
      border-radius: 0 0 25px 0;
        }
       


    /* BARRE DE NAVIGATION */
     
                  .navig {
            position: absolute;
            top: 0px;
      left: 0px;
      right: 0px;
            width: 100%;
    }
       


    /* BORDURES FORUM */

    .forumline
    {
        background-color : #532C3C;
    padding : 10px;
    -moz-border-radius-bottomright : 15px;
    -moz-border-radius-bottomleft : 15px;
    -moz-border-radius-topright : 15px;
    -moz-border-radius-topleft : 15px;
    -moz-box-shadow : 0px 0px 10px #CDB986;
    box-shadow : 0px 0px 10px #CDB986;
    }



    /* POSTS */

    tr.post td
    {
    padding-left: 20px;
    padding-right : 20px;
    }


    spoiler .spoiler_closed_hidden, .spoiler .spoiler_content
    {
    padding-left: 30px;
    color : black;
    background-color : #88accf;

    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;
     border-left: 2px #ffffff solid;
    -moz-border-radius: 15px;
    }

    .quote
    {
    padding-left: 30px;
    color : black;
    background-color : #88accf;
    background-image : URL('http://s2.noelshack.com/uploads/images/13866645766743_quote.png');
    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;

    }

    .code
    {
    font-family : Courier;
    padding-left: 30px;
    color : black;
    background-color : #96aec5;
    background-image : URL('http://s2.noelshack.com/uploads/images/7115060982744_code.png');
    background-repeat : no-repeat;
    padding-top : 7px;
    padding-bottom : 7px;
    background-position : left;
     border-left: 2px #ffffff solid;
    -moz-border-radius: 15px;
    }




    /* BOUTONS ET CHAMPS DE TEXTES */

    input.post, textarea.post, select
    {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    border : 1px solid #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }

     select:hover
    {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }

    input
     {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    font-variant : normal;
    border : 1px solid #ffffff;
    padding: 3px;
    -moz-border-radius : 15px;
    }
    input:hover
     {
    color : #7E5835;
    text-shadow : 0px 0px 5px #ffffff;
    font-size : 12px;
    -moz-box-shadow : 0px 0px 10px #ffffff;
    font-variant : small-caps;
    padding: 3px;
    -moz-border-radius : 15px;
    }

     /* LIENS */
           
            a:hover{text-decoration: none !important;}
            a {text-decoration: none !important;}
            a:link {text-decoration: none;}
            a:visited {text-decoration: none;}

           

            body {
      margin-top: 30px;
          background-image:url(http://img11.hostingpics.net/pics/76557439293e.png);
      background-size: 100% auto;
                background-attachment: fixed
                                    }
         

    .postdetails.poster-profile a img
    {
    margin: auto;
    display: block;

    }


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

    <div class="cate_head"><div class="titre_cate">{catrow.tablehead.L_FORUM}</div></div>
    <div class="cate_body">
          <span style="display: block; height: 1px; clear: both;"></span>

        <!-- END tablehead -->
        <!-- BEGIN cathead -->

        <!-- END cathead -->
        <!-- BEGIN forumrow -->
       

    <div class="forum_bloc">

          <div class="forum">
           
            <!-- titre du forum -->
            <div class="forumlink"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
           
            <!-- icone des messages -->
            <div class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
           
            <!-- description -->
            <div class="forum_description">{catrow.forumrow.FORUM_DESC}</div>
           
            <!-- sous forum -->
            <div class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
           
            <!-- stats -->
            <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS}</span><span class="stats2">{catrow.forumrow.POSTS}</span></div>
           
            <!-- dernier message -->
            <div class="dernier_mess">{catrow.forumrow.LAST_POST}</div> 
         
          </div>
     
    </div>




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

        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
    <span style="display: block; height: 1px; clear: both;"></span>
    </div>
    <div class="cate_foot"></div>

        <!-- END tablefoot --><!-- END catrow -->



    Voilà, et comme nouveaux petits soucis, j'ai : l'affichage des stats, juste deux chiffres au lieu de "x messages et y sujets". Et le titre des catégories qui refuse obstinément de prendre la couleur indiqué dans le CSS et lui préfère celle dans le panneau "couleur" et "couleur du lien".

    Vous savez tout, je crois ! Donc dites-moi si j'ouvre une nouvelle demande ou si on continue ici :)

    A bientôt !
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Jeu 9 Avr 2015 - 15:37

    Up ! :)

    Rappel des petits problèmes : - l'affichage des stats, juste deux chiffres au lieu de "x messages et y sujets".
    - Et le titre des catégories qui refuse obstinément de prendre la couleur indiqué dans le CSS et lui préfère celle dans le panneau "couleur" et "couleur du lien".

    Nouveau : - J'ai utilisé catehead/body/foot et je n'arrive pas à accorder le catefoot correctement avec le body TT J'ai voulu mettre un joli arrondi en bas du foot et on voit la démarcation. J'en suis au stade des essais pour ces "habillages" de catégories et j'aimerais bien savoir comment bidouiller pour supprimer la moche démarcation.

    D'avance merci à qui m'aidera ^^
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Dim 12 Avr 2015 - 15:34

    Salut,

    Si tu regardes dans ton codes, {catrow.forumrow.TOPICS} correspond au nombre de sujets et {catrow.forumrow.POSTS} au nombre de messages. Il te suffit de rajouter le mot après

    Exemple :

    Code:
            <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS}</span><span class="stats2">{catrow.forumrow.POSTS}</span></div>

    Se transformant en :

    Code:
            <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS} sujets ;</span><span class="stats2">{catrow.forumrow.POSTS} messages</span></div>

    Pour la couleur obstinée, tu as tenté le !important ? (infos ici)

    Et je ne comprends pas ton dernier problème. On peut avoir une capture d'écran avec l'élément entouré ?



     
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Lun 13 Avr 2015 - 20:09

    Ah oui, beaucoup mieux avec le texte, en effet ^^ Merci !

    Pour la couleur du titre du forum j'ai ajouté le !important à "color : black" comme ceci :
    Code:

    .forumlink
        {
          position: absolute;
          width: 500px;
          height: 12px;
          text-decoration: none !important;
          font-size: 20px;
          font-family: arial;
          color: black !important;
          margin-top : -22px;
          text-align: center;
      text-shadow : 0px 0px 1px black;
          }

    Mais ce cher titre n'en a rien à secouer, c'est un rebelle !

    Pour l'autre problème, j'avais enlevé l'habillage du coup, alors je le remet :
    Spoiler:

    Voilà, au niveau de l'encadré rouge, on voit le passage de catebody à catefoot, alors que j'ai utilisé une texture qui se répète TT (ce n'est pas la texture définitive, c'est juste un essais). J'aimerais qu'on ne voit pas cette démarcation avec le futur habillage. Y a-t-il une technique pour arnaquer l'apparence ? Sinon je pense à gommer/flouter le haut de catefoot pour adoucir la transition. Mais dans l'absolu je voudrais quand même voir si la transition est possible sans gommage.

    Tu sais tout ! :) Merci encore pour ta réponse.
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Lun 13 Avr 2015 - 20:55

    Ce n'est pas forumlink mais ce passage de ton CSS en fait :)

    Code:
    .titre_cate h2
    {
      font-size : 24px;
      text-transform: uppercase;
      font-family: Morpheus;
      text-decoration: none !important;
      color: #792A22;
    }

    Pour la transition, il va falloir passer par le graphisme. Tu n'as qu'à mettre en haut de l'image de catefoot quelques pixels qui correspondent à catebody puis faire la transition via un masque d'écrêtage en dégradé =)



     
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Mar 14 Avr 2015 - 10:15

    Mmmm, lorsque je change .titre_cate h2, ça change la couleur du titre de la catégorie "côté forum", or, je veux changer la couleur du titre des forums (décrets impériaux, la vigie, début de voyage, etc). Dans forumlink ces titres veulent bien prendre une ombre, une taille, une police, tout sauf la couleur demandée dans le CSS !

    Dac, merci pour l'explication, j'espérais ne pas passer par le graphisme X_X En tout cas, pas aux masques d’écrêtages, je ne sais pas ce que c'est x') Mais ce n'est pas grave, je vais faire autrement, de toute façon ce ne sont que des essais ^^

    Merci pour ton aide, reste plus que cette vilaine couleur de titre de forum qui n'en fait qu'à sa tête...
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Ven 17 Avr 2015 - 10:02

    Up pour dire que je suis toujours vivante ^^
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 17 Avr 2015 - 10:21

    Salut !

    Pour changer les liens des forum c'est avec ceci :

    Code:
    .forumlink a
    {
    color: #ffffff !important;
    }

    J'ai mis une couleur là par exemple. Le "important" doit être mis car sinon les liens gardent les couleurs données dans la page des couleurs pour tout les liens de page^^

    J'ai pris le topic un peu en cours donc j'espère que je ne me suis pas trompé sur ce que tu voulais :hum:



    sign
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Ven 17 Avr 2015 - 10:49

    C'est par-fait ! Non non tu ne t'es pas trompé, c'est exactement ça ! =D Je m'acharnais sur ce pauvre forumlink tout seul alors qu'il fallait jouer avec forumlin a ><"

    Merci beaucoup, cette demande est officiellement terminée, j'édite de ce clic ^^
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 19:57