Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Les forum sur deux colonnes [html/css]

    Partagez
    MasculinAge : 31Message(s) : 31645

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 12 Fév - 12:54
    Rappel du premier message :

    Vos forum sur deux colonnes

    Bonjour à vous,

    Je vais vous présenter aujourd'hui un tuto' qui a été très attendu, et dont la technique a été très demandée dans les commandes de codage. Taktiik s'est chargé de vous aider avec mon accord, mais je viens vous présenter ce tutoriel de façon plus "officielle., en espérant qu'il vous aide.

    Tout d'abord, quelques éléments d'indication :

    ▬ pour installer l'ensemble de ce qui est proposé sur votre forum vous n'avez pas besoin de grosses connaissances en codage, je dirais même aucune. Par contre, pour le personnaliser de façon simple (changer les couleurs...) vous devez savoir reconnaitre les codes (donc identifier un code couleur, identifier le nom d'un élément, etc...).
    ▬ pour personnaliser et modifier ce code vous devez avoir des connaissances en codage, suffisamment pour quoi enlever, quoi laisser, à quoi correspond telle "class" etc...
    ▬ vous constaterez que le codage est déjà assez poussé, avec des effets fluides et modernes. Vous avez donc concrètement plusieurs tutoriels en un dans ce message x)

    Si la mise en forme des forum sur deux colonnes (autrement dit l'intitulé du message) ne vous parle pas, voici en application directe sur un forum ce que ça donnera :

    ▬ Lien forum test ▬

    Vous avez donc :
    ▬ les forum sur deux colonnes
    ▬ la description de la catégorie qui apparait progressivement au dessus de l'image l'illustrant à son survol
    ▬ les sous-forum apparaissant progressivement au survol de la languette "voir les sous-forum".

    Je vais donc proposer ce tutoriel en deux partie : la première donne directement les codes, où les placer et comment les modifier de façon simple, pour ceux qui sont pressés ou n'y connaissent pas grand chose en html/css ; la seconde partie s'adresse aux autres et vous permet de comprendre de façon plus technique comment il est possible de réaliser cette apparence sur vos forum.

    Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.

    Avantage de cette mise en forme : elle permet de diminuer grandement la longueur de votre forum. Si votre forum est court, il n'est guère utile de l'utiliser si ce n'est juste pour "le style" qui peut-être vous plait.
    Inconvénient : cette mise en forme est détestée par IE... Très mal interprétée, ça devient le bordel sur vos forum si le navigateur utilisé est IE, et malheureusement c'est encore beaucoup le cas, malgré les progrès qu'ils font, ils ne sont toujours pas suffisamment à la page.


    Les Codes

    Postez à la suite pour voir le contenu des trois messages du tutoriel.



    Et voilà !

    Il ne reste plus qu'à.... personnaliser Wink.

    Rappel : n'oubliez pas le crédit à Never-Utopia svp ! C'est important pour nous et pour que vous puissiez bénéficier de toutes les nouveautés pour vos forum à la pointe du css Wink

    Tutoriels suivants conseillés :
    - Coupler "forum en 2 colonnes" et "catégories en bloc"
    - Placer facilement des éléments dans un bloc (forum)


    Dernière édition par Sparrow-style le Dim 8 Déc - 11:12, édité 8 fois


    FémininAge : 26Message(s) : 133
    ClaryF
    le Sam 21 Juin - 9:12
    Merci x)
    MasculinAge : 21Message(s) : 4
    Raxh
    le Dim 22 Juin - 22:57
    Superbe, vous êtes vraiment géniaux !
    MasculinAge : 15Message(s) : 76
    Angel Tiger
    le Lun 23 Juin - 19:50
    thx
    MasculinAge : 29Message(s) : 23
    Snapforum
    le Mar 24 Juin - 11:16
    Merci beaucoup d'avance :)
    FémininAge : 26Message(s) : 486
    Shalyma
    le Mar 24 Juin - 20:48
    Merci (:



    Merci Marie Chérie pour le kit!
    FémininAge : 23Message(s) : 39
    alexee29
    le Jeu 26 Juin - 2:00
    Merci
    FémininAge : 26Message(s) : 117
    [W]endy
    le Jeu 26 Juin - 12:21
    Merci (:
    FémininAge : 23Message(s) : 81

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ayane Jun
    le Jeu 26 Juin - 16:29
    Je veux voir ! ♥
    FémininAge : 23Message(s) : 29
    Lucrécya
    le Jeu 26 Juin - 17:14
    Merchiiiiii ! ♥
    FémininAge : 17Message(s) : 11
    Tijuana
    le Jeu 26 Juin - 17:21
    Thanks you =D
    FémininAge : 21Message(s) : 180
    Saia
    le Jeu 26 Juin - 19:20
    Hanw merci exactement se que je cherchais *^*


    FémininAge : 71Message(s) : 41
    Pensées
    le Ven 27 Juin - 12:21
    Merci! ♥
    MasculinAge : 17Message(s) : 167

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    tamanegeek
    le Ven 27 Juin - 16:53
    Merci !
    FémininAge : 26Message(s) : 147
    Inoue Musaki
    le Sam 28 Juin - 0:09
    Merci pour le code ^^

    J'ai essayé de tout mettre en place, sans rien toucher, mais voilà ce que ça donne et je ne comprends pas pourquoi :/

    voilà un screen de ce que ça me fait :
    Spoiler:


    Si vous pouviez me dire ce que j'ai fait de mal, cela m'aiderais beaucoup, car j'adore comment son faite ses catégories
    FémininAge : 24Message(s) : 49
    DixieM.
    le Sam 28 Juin - 9:08
    Trop beau  :love: 
    Merci du partage !
    FémininAge : 25Message(s) : 305
    Eil'liathan Tyan'Lirulin
    le Sam 28 Juin - 15:50
    Re merci alors XD
    MasculinAge : 19Message(s) : 48

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    -Hikaru-
    le Sam 28 Juin - 16:55
    merci ^^
    FémininAge : 19Message(s) : 7
    Amaterasu.
    le Dim 29 Juin - 13:20
    Merci pour ce tutoriel ! :')
    FémininAge : 16Message(s) : 64
    Faucon
    le Dim 29 Juin - 18:25
    Thankk youuu ♥
    FémininAge : 23Message(s) : 576

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    6/10  (6/10)
    Guilde des Architectes:
    0/10  (0/10)
    Kathee
    le Lun 30 Juin - 23:52
    Yaaaaah Merci Sparrow !  :love: 


    Merciii Shoki !! :

    MasculinAge : 20Message(s) : 20
    Bennington'
    le Mar 1 Juil - 23:15
    Merci
    FémininAge : 19Message(s) : 43
    Luuny
    le Mer 2 Juil - 9:48
    Encore merci ! :)
    FémininAge : 25Message(s) : 25
    Anguis
    le Mer 2 Juil - 10:22
    Merci beaucoup ♥
    MasculinAge : 26Message(s) : 266

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Deadpoolio
    le Mer 2 Juil - 13:05
    Merci, mon cap'taine :)
    FémininAge : 32Message(s) : 29
    Crystal Shadow
    le Jeu 3 Juil - 13:57
    merci  Very Happy 
    Contenu sponsorisé
    Aujourd'hui à 0:10

      La date/heure actuelle est Mar 27 Sep - 0:10