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 :
Cartes Pokémon : la prochaine extension Pokémon sera EV6.5 Fable ...
Voir le deal

    {Taktiik} - Présentation et Contenu des Régions - Codage

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 10 Mar 2013 - 17:03

    Rappel du premier message :

    Commande
    Type de document voulu : Fiche de prédéfini, ça peut s'apparenter à une fiche personnage aussi.
    Adresse du forum : http://ryoma-naruto.forumactif.com/
    Description des éléments : Actuellement, la présentation et le contenu des régions sont organisés de cette façon. https://2img.net/r/hpimg11/pics/636683actuellement.png

    C'est donc en voulant compléter les parties vides que je me suis rendu compte que le rendu serait totalement désorganisé et pas pratique. Le travail a pour principal but de pouvoir trouver l'information rapidement et que ça ne pique pas aux yeux. Voici un premier schéma, le plus modeste. https://2img.net/r/hpimg11/pics/3784121eredemande.png
    Il s'agît donc de faire un codage qui s'inscrit dans un sujet et qui permettent de structurer. Là où il est écrit NOM doit pouvoir faire apparaître un cadre avec les informations adéquates. Par exemple si je survole le nom d'un lieu, je dois voir apparaître un cadre me donnant ses coordonnées, ses défenses, etc...

    Mais la 1ere demande est peut être un peu brouillon. je donne donc un 2e modèle, plus complexe à réaliser je pense. https://2img.net/r/hpimg11/pics/3242682edemande.png
    Ici, on prévoit un espace dans lequel les informations s'afficheraient.

    L'une ou l'autre me conviendrait, voir même un autre solution si quelqu'un a d'autres idées ou de l'expérience dans ce genre de besoin. Le côté esthétique ne passe qu'en second plan.

    Couleurs ou tons : Quand il sera terminé, le code s'inscrira dans ce thème http://nevergiveup.jeuxvideoforum.com/forum Il faudrait que les couleurs utilisées restent dans ce ton. Mais je répète que le côté esthétique est secondaire.
    Images : Le codage doit me permettre d'insérer une image 600*300 dans un cadre réservé.
    Autres précisions : pas pour l'instant


    Dernière édition par Ryoma le Mar 2 Avr 2013 - 22:52, édité 2 fois
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 31 Mar 2013 - 15:50

    Coucou o/

    Voilà ce que j'ai obtenu et j'ai bien galéré parce qu'en faite, c'est un système onglet par truc, enfin bref la galère.
    Lien du forum test

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 31 Mar 2013 - 17:27

    Génial, c'est fonctionnel. C'est exactement ce qu'il me fallait ^^ Reste que les derniers détails maintenant.
    • Sais-tu réaliser des images à la place des thèmes descriptions, lieux, ressources et bestiaires ou faut-il que je passe commande chez les graphistes ?
    • Peut-on insérer une image de base dans le contenu quand on a encore cliqué sur aucun onglet ? Car là ça affiche plein de "description" partout.
    • Peut-on changer la police de Nom de la Région ? Quelque chose qui ressemble à l'écriture présente sur ces avatars serait possible ? ( https://2img.net/r/ihimizer/img845/6100/matredujeu.png )
    • Quand je vais commencer à remplir le contenu pour toutes les régions, j'aurais surement besoin de quelqu'un pour coder le contenu, pour faire une belle mise en page, je pourrais venir vers toi ?


    Merci beaucoup ^^
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 31 Mar 2013 - 17:42

    Coucou \0/

    J'ai lutté et je l'ai vaincu la bête finalement è_é !

    ♦ Je vais te le faire tant qu'on y est, c'est pas grand chose, tu as une police de préférence ?
    ♦ Oui c'est possible, je t'ai mis plein de "description" pour te montrer que c'était par défaut ^^ L'image devra par contre avoir pour dimensions : 370* 246
    ♦ C'est possible aussi, je vais chercher laquelle conviendrais (j'en mettrais plusieurs tu choisiras)
    ♦ Oui, tout du moins, tout dépend ce que tu veux faire des ces contenus. Si ce n'est qu'un titre, une image, un texte, tu peux aussi t'aider du cursus :) Mais ce n'est pas un problème pour moi Wink !

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 31 Mar 2013 - 18:33

    • De préférence la police de la bannière (http://nevergiveup.jeuxvideoforum.com/forum#targetqeel1) ou celle des vava que je t'ai linké plus haut. Sinon quelque chose qui ressemble fera bien l'affaire.
    • Faisons un essai avec cette image, il faudra faire attention à ce que les boutons soient en accord avec elle. https://2img.net/r/hpimg11/pics/352192Sanstitre.png
    • Merci.
    • Il faudra que je teste et je serais fixer quand j'aurais rempli pour la première région.
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 31 Mar 2013 - 19:20

    Coucou coucou \0/

    Alors j'ai modifier la police du titre, j'en ai trouvé une pas mal mais je sais pas si tu peux la voir :o
    Ensuite, pour les images, j'ai pas réussi à faire des trucs sensationnels parce que j'ai pas d'idée >.<

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 31 Mar 2013 - 19:44

    Coucou coucou et coucou (je vais gagner tu vas voir >-<)
    • Le bouton Description ne fonctionne pas.
    • Je pense qu'il serait mieux d'inverser le rouge et le beige (rouge pour les bouton et beige pour la description)
    • Je trouve que l'image rend bien ^^
    • Est-ce qu'on ne peut pas faire plus grand pour le nom de la région ?
    • Puis il me restera à tester (il faudra me donner les codages) pour voir si ça fonctionne bien ^^
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 31 Mar 2013 - 20:09

    Aloha, coucou, hola, hello, Hallo \0/ !

    ♦ Ouaip j'l'ai pas encore mis effectif xD Je le met tout de suite
    ♦ Ce sera fait après avoir mis le bouton description

    ♦ Ouaip, j'aggrandis la taille tout de suite.

    Dès que ceci sera fait, tu me dis si ça te va et j'te file les codes Wink

    Taktiik.

    EDIT : Voilà c'terminé, si c'est bon j'te file le code

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 31 Mar 2013 - 20:56

    Ça marche ! Je veux bien le code pour faire un essai ^^
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 31 Mar 2013 - 21:39

    Coucou \0/

    Alors voici les codes :


    Par contre, le HTML est pas vraiment lisible du fait que si tu sautes une ligne, ca saute une ligne dans le post :s
    Le CSS est aussi très long du fait des 3 systèmes onglets !

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 31 Mar 2013 - 22:07

    Voilà ce que j'obtiens (le changement d'image en haut, c'est normal ^^) Mon plus gros problème est que les boutons ne remplissent pas les cases et que lorsqueje clique sur contenu ça dépasse sur le côté droit.
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Dim 31 Mar 2013 - 22:11

    Coucou \0/

    Tu ne m'a pas donné d'adresse Razz
    Difficile de voir :/

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 31 Mar 2013 - 22:17

    Ralala c'est pas de ma faute, c'est à cause de Toy Story 3 ! ^^

    https://2img.net/r/hpimg11/pics/699830Sanstitre1.png
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Lun 1 Avr 2013 - 11:16

    Coucou \0. !

    Pourrais-tu me copier le code que tu as mis :O ?
    Je vois pas trop d'où ça peut venir, tu pourrais me donner un lien de page pour que je puisse voir directement s'il te plait ^^" ?

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Lun 1 Avr 2013 - 11:28

    J'ai trouvé le problème ^^ je n'avais tout simplement pas supprimer le css de l'ancienne version, du coup il y avait conflit entre les deux codes. Maintenant le seul problème, c'est que l'espace image est trop grand, il va falloir que je modifie toutes mes images qui sont devenues du coup trop petites. Je fais un essai pour une région et je te tiens au courant.
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Lun 1 Avr 2013 - 11:30

    Oki, tiens moi au courant je reste à ta disposition Wink !

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Lun 1 Avr 2013 - 12:17

    • Peut-on laisser plus de places aux boutons lieux1, lieux 2, etc… car quand je modifie le nom, tout se décale et ça me limite beaucoup trop en nombre de caractères.
    • Peut-on faire en sorte que le tout fasse 600xp de large tout de même ? Car modifier toutes mes images va être un travail monstrueux et je n’ai pas toutes les images en version originale ?
    • Voici un schéma de ce dont j’aurais besoin pour le contenu. https://2img.net/r/hpimg15/pics/548013codagepourlesrgions.png


    Merci beaucoup.
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Lun 1 Avr 2013 - 12:40

    Aloha =)

    ♦ J'ai rajouté de la place sur le forum test, à toi de me dire si ça te va comme ceci (Sinon donnes-moi les noms les plus longs et je veillerais à ajuster selon eux)
    ♦ Le tout fait maintenant 600px de large =)
    ♦ Je m'y met tout de suite

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Lun 1 Avr 2013 - 13:39

    J'ai bien vérifié la taille de mes images. Elles font bien 600px. Est-ce que les boutons descriptions etc... n'auraient pas déformé ton tableau pour le rendre plus large ?
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Lun 1 Avr 2013 - 13:53

    Coucou o/

    Non c'était moi qui avait fait tout beugé, t'inquiète j'ai réglé le problème Wink
    Je m'attaque à ton schéma.

    Taktiik.

    EDIT :

    Voilà, je te propose de remplacer le CSS que je t'ai donné par celui-ci :



    Et je te propose aussi de modifier ton HTML par celui-ci (plus lisible hourra !)


    Testes-moi tout ça et dis moi ce qu'il en est :)
    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Lun 1 Avr 2013 - 15:09

    Je suis en train de tester mais je trouve justement que le code est bien dur à lire maintenant.

    EDIT : Tout va bien tant que le contenu est plus petit que la case. Mais dès que le menu déroulant apparait, voici ce que ça donne. https://2img.net/r/hpimg11/pics/739750Sanstitre.png Le souci c'est que je vais forcément dépasser car il y a beaucoup d'informations à remplir.
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Lun 1 Avr 2013 - 16:05

    Aloha o/

    Oui j'ai mis trop grand en faite, mea culpa ^^"
    Dans ton CSS tu as :
    Code:

    .Contenu_info
    {
      float: left;
      overflow: auto;
      width: 200px;
      height: 100px;
      margin: 5px;
    }

    Remplaces par :
    Code:

    .Contenu_info
    {
      float: left;
      overflow: auto;
      width: 190px;
      height: 100px;
      margin: 5px;
      margin-left: 7px;
    }

    Le soucis sera normalement réglé Wink

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Lun 1 Avr 2013 - 16:40

    Je te donne mon html pour que tu puisses tester toi-même, mais le changement de css n'a rien modifié.

    Code:
    <div class="Regiontitle">Plages d'Hinata</div> <table class="Regionsheet" align="center" cellspacing="0" cellpadding="0"> <tr> <td colspan="3" valign="top" align="center"> <img src="http://img15.hostingpics.net/pics/973059plagesdhinata.png" alt="Image de NOMREGION" /> </td> </tr>  <tr> <td colspan="3" valign="top" align="center"> <table class="RegionSteps" cellspacing="0" cellpadding="0"> <tr> <td valign="top" colspan="2" align="left"> <div class="Description"  tabindex="0"><img src="http://imageshack.us/a/img694/9635/descriptionpe.png" alt="DESCRIPTIONIMG" />

    <div class="description_contenu1"><div class="description_contenu">Au Sud, les plages de la région d’Hinata sont les plus chaudes et les plus ensoleillées. Le sable fin se mélange à l’océan dans un ronronnement apaisant. La région ne souffre pas de son exclusion à peine cachée du reste du pays. La zone est peu peuplée, certainement due à la présente de la forêt d’Oba dans les environs. Il y fait bon vivre si on sait se contenter de peu. Et cette sobriété n’attire personne, les combats sont loin car il n’y a aucun enjeu. La guerre sonne comme un écho lointain, un mirage irréaliste qui n’a jamais existé. Aucune peuplade n’est connue là-bas car aucune d’entre elles n’est restée assez longtemps pour y laisser son emprunte. Les maisons sont rares et les hameaux inexistants.

    </div></div> </td>  <td width="70%" rowspan="4" valign="top" align="center"> <div class="RegionBlocks_contenu1"> <img src="http://img11.hostingpics.net/pics/785941Sanstitre1.png" style="margin-top: 5px;" /> </div> </td> </tr>  <tr> <td valign="top" align="center"> <div class="Lieux"><img src="http://imageshack.us/a/img713/3339/lieux.png" alt="LIEUXIMG" />

    </div> </td>  <td valign="top" align="center"> <div class="onglets"><div id="Lieuxfocus"><div class="Lieux_onglet1" tabindex="0">Lieux 1<div class="Lieux_contenu1"><div class="Lieux_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div><div class="Lieux_onglet2" tabindex="0">Lieux 2<div class="Lieux_contenu2"><div class="Lieux_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  <div class="Lieux_onglet3" tabindex="0">Lieux 3<div class="Lieux_contenu3"><div class="Lieux_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  <div class="Lieux_onglet4" tabindex="0">Lieux 4<div class="Lieux_contenu4"><div class="Lieux_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  </div></div> </td> </tr>  <tr> <td valign="top" align="center"> <div class="Ressources"><img src="http://imageshack.us/a/img203/4764/ressourcesw.png" alt="RESSOURCEIMG" />

    </div> </td>  <td valign="top" align="center"> <div class="onglets"><div id="Resoufocus"><div class="Resou_onglet1" tabindex="0">Ressource 1<div class="Resou_contenu1"><div class="Resou_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div><div class="Resou_onglet2" tabindex="0">Ressource 2<div class="Resou_contenu2"><div class="Resou_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  <div class="Resou_onglet3" tabindex="0">Ressource 3<div class="Resou_contenu3"><div class="Resou_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  <div class="Resou_onglet4" tabindex="0">Ressource 4<div class="Resou_contenu4"><div class="Resou_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  </div></div> </td> </tr>  <tr> <td valign="top" align="center"> <div class="Bestiaire"><img src="http://imageshack.us/a/img94/3595/bestiairew.png" alt="BESTIAIREIMG" />

    </div> </td>  <td valign="top" align="center"> <div class="onglets"><div id="Bestfocus"><div class="Best_onglet1" tabindex="0">Méduse Géante<div class="Best_contenu1"><div class="Best_contenu"><img class="imgcontenu" src="http://img15.hostingpics.net/pics/201181mdusegante.png" alt="IMG3" /> <div class="Contenu_info">[b]Dés de rencontre :[/b] 1 à 20
    [b]Nombre d'individus à la fois :[/b] 3 à 12
    [b]Ingrédients laissés :[/b] Matière urticante (61 à 90) - Perle (91 à 100)</div>
    [b]Description :[/b] Vivant dans les eaux chaudes, les méduses géantes mesurent entre 1 à 2 mètres de long. Elles sont attirées par le chakra et leur piqûre peut rendre n'importe qui inconscient.
    [b]Statistiques :[/b]50 HP - Att 1 - Def 1
    [b]Capacités spéciales et comportement :[/b] Passive si le chakra n'est pas utilisé - Arrive directement au corps à corps si l'ennemi utilise du chakra - Utilise piqûre urticante qui fait perdre -30 MP. La cible tombe inconsciente si elle arrive en dessous de 0 MP. </div> </div></div><div class="Best_onglet2" tabindex="0">Bestiaire 2<div class="Best_contenu2"><div class="Best_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  <div class="Best_onglet3" tabindex="0">Bestiaire 3<div class="Best_contenu3"><div class="Best_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  <div class="Best_onglet4" tabindex="0">Bestiaire 4<div class="Best_contenu4"><div class="Best_contenu"><img class="imgcontenu" src="" alt="IMG3" /> <div class="Contenu_info">Informations du jeu</div>

    Description :</div> </div></div>  </div></div> </td> </tr> </table> </td> </tr> </table>
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Lun 1 Avr 2013 - 18:36

    Coucou =)

    Je n'avais pas assez retiré de largeur, tu remplaces la même chose par ceci :
    Code:
    .Contenu_info
    {
      float: left;
      overflow: auto;
      width: 190px;
      height: 100px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    Tout fonctionnera normalement, ... Normalement xD

    Taktiik.

    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Mar 2 Avr 2013 - 22:49

    Le codage a fait l'unanimité parmi le staff. Nous nous empressons de nous en servir pour créer le contenu. Je te remercie au nom de la communauté de joueurs de notre forum. Tu as été d'une grande aide ^^
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Mar 2 Avr 2013 - 23:31

    Bonsoir ^^

    J'ai vu qu'il y avait le petit symbole fini ^^

    Merci de l'avoir mis Wink

    *archive donc :)*

    Taktak, merci pour ton aide Wink
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Mai 2024 - 19:58