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 du moment : -40%
-40% sur le Pack Gaming Mario PDP Manette filaire + ...
Voir le deal
29.99 €

    Simplification de la structure d'une PA à image de fond

    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Mer 2 Avr 2014 - 21:04

    Ma demande



       Bien le bonjour! Je viens vous solliciter pour m'aider à me simplifier la vie. Etant donné que je n'ai trouvé aucun tutoriel qui explique comment créer sa propre PA avec image de fond (ou je l'ai zappé??!!), et bien je viens vous demander directement une structure simplifié au niveau du codage pour la PA que j'ai l'habitude d'utiliser mais qui est juste monstrueuse au codage.

    Moi, j'ai l'habitude d'utiliser Photoshop et faire à l'ancienne avec le fameux "enregistrer par le web" une fois que l'on découpe son image, et d'utiliser la structure qu'il donne directement. C'est un carnage et juste horrible à manipuler sans y perdre les yeux.

    On m'avait parlé, pour simplifier la tâche, de faire une sorte de tableau ou je ne sais pas quoi, de diviser... C'est du chinois pour moi. Je suis plutôt du genre visuelle et il faut me parler lentement pour que je comprenne. Donc je m'en remet à vous en espérant que vous pourrez m'aider.


       Schéma(s) et Eléments

       Schémas : Il s'agit du schéma de ma PA actuelle de mon forum, soit, rendez-vous dans le lien qui vient : http://les4royaumes.forumperso.com/.

    Je pense néanmoins retirer la zone comportant mes logos de top-sites, personne n'y va donc ça sert à rien... loool (A la place j’agrandirais éventuellement la zone de texte de mon "climat actuel".)

    La présentation du staff et des personnages prédéfinis conserveront les infos-bulles. Et normalement, le texte qui se situe en haut de la PA "Guide du nouvel arrivant, Peuples, Castes...", c'est censé être des liens mais ici... ça en fonctionne pas. (Problème avec la réédition de ma PA qui me rajoute des balises sans que je le veuille et du coup, me plante certains trucs).

       Tailles des éléments : Pour les proportions, ce sont celle de l'image, à l'origine cela devait être la largeur du forum mais ici, il manque une marge... j'avais mal calculé. Honteux!

       Effets voulus : Là, de suite, j'ai pas de désir particulier.


       Ressources
       Je ne donne aucune image parce qu'en fait, je ne demande que la structure du codage, le squelette du "tableau". J'utilise une image de fond où je case donc les zones de textes (et je ne l'ai pas encore travaillé pour mon prochain design). Il me faudrait en gros, un squelette lambda qui me permettrait de comprendre comment caser les choses où il faut.

       Autres précisions ?
       Je remercie les courageux qui pourront pendre le temps de se pencher sur ma demande, ou même me donner des idées peut-être. Merci beaucoup.
       
    Anonymous
    Invité

    Sam 12 Avr 2014 - 12:08

    Hello,

    Je n'ai pas bien saisi, en gros on refait la même chose en supprimant les tops et en rendant tes liens cliquables ? Si tu as réussi à coder tout ça tu dois pouvoir le faire non ? Ca ressemble d'avantage à une demande d'aide qu'à une demande =O
    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Dim 13 Avr 2014 - 16:47

    Bonjour!

    Alors oui et non. Oui je souhaite rendre mes liens cliquables et supprimer mes tops mais disons que mon soucis est d'ordre structural. Je pense que cela sera plus clair si tu voies comment est faite ma PA:

    Voici le code actuel :
    Spoiler:


    Est-ce que tu voies le monstre? Je ne sais pas coder autrement et on va dire que maintenant, ça commence à me gonfler. loool (c'est trop laborieux). Notons cependant qu'ici, je donne pas le css associé mais c'est pour montrer la bête.

    C'est certes, une demande d'aide mais aussi du même coup, une demande de structure de PA. Je n'ai pas trouvé de sujet qui expliquait comment faire sa propre PA, seulement des copies de PA à personnaliser et aucune ne me convient. Donc c'est à la fois une aide et une demande.... Et je me suis dit que cette zone était la plus appropriée puisqu'il s'agit bien d'une demande de codage au final.



    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 30 Avr 2014 - 14:03

    Hello!
    J'aurais probablement une meilleure solution que ton tableau, mais je suis pas sûre que ce soit si "mieux" que ça, vu que tu dis que le tableau te gonfle, je sens que celui-ci encore plus!

    En réalité, je proposerais de créer une div principale de ta PA, qui aurait une hauteur et une largeur fiche, qui serait en position: relative et qui aurait comme background-image ton image de fond. Et ça c'est le plus simple.
    Parce que ensuite, dans cette div, tu vas mettre toutes tes autres div en position: absolute et à l'aide de top:, left:, right: ou/et bottom: (en général on utilise top ou bottom avec left ou right, pas les quatre en même temps. Je ne sais pas si on a un tuto sur le positionnement, désolée ^^") tu vas les positionner où tu veux au sein de ta div. Il faut alors comprendre que la position "top: 0, left: 0" de toutes les div à l'intérieur, serait le coin en haut à gauche de ta div principale.
    Rien qu'avec cette description, je suppose que tu comprends pourquoi le positionnement est laborieux: En plus de savoir la hauteur et largeur exacte de tes div internes, tu dois aussi trouver le bonne emplacement en pixels depuis les bords de ton div qui entoure le toute. Du coup, ça prend du temsp, et pas mal d'édition! Cependant, si après tu ne touches plus jamais les positions et tu ne changes plus jamais, alors il est facile de changer et de s'y retrouver. De plus, tu n'as pas de "td" vides à mettre pour des positionnement moins tabulaires, et il est facile de changer une div de place (il suffit de changer deux arguments dans le CSS).

    En somme, voici le code que tu aurais:
    HTML:
    Code:
    <div id="contour_PA">
       <div id="element_1_PA">Contenu</div>
       <div id="element_2_PA">Contenu</div>
       <div id="element_3_PA">Contenu</div>
    </div>
    (Si tu veux éviter d'avoir un id/une class pour chaque div, tu peux aussi mettre le positionnement (top/bottom/left/right) directement dans le la div avec style. Je le déconseille cependant, parce que c'est mauvais de mettre de la mise en forme dans le html directement, cependant, c'est utile cependant pour des div qui ont les mêmes caractéristiques, sauf pour leur positionnement! Cependant, un div peut avoir plusieurs class/id)

    CSS:
    Code:

    #contour_PA {
       width: 821px;
       height: 601px;
       background-image: url('URL_DE_lIMAGE_ENTIÈRE_ICI');
       position: relative;
    }

    #element_1_PA {
       position: absolute;
       width: 200px;
       heigth: 200px;
       top: 200px;
       left: 100px;
    }
    etc... Je ne mets pas tout, tu comprends l'idée Wink Les valeurs sont seulement indicatives, et je ne pense pas qu'elles reflètent la réalité de ta PA Wink

    En somme, cela te permet d'avoir une seule grande image en fond plutôt que plusieurs (bien que selon ce que je me rappelle tu peux aussi donner une image de fond unique à un tableau..) et tu peux tout positionner comme cela te chante. C'est cependant long Wink

    Je ne sais pas si c'est ce que tu cherches, cependant, je ne vois pas plus "simple". J'espère t'avoir un peu aidée tout de même! ^^"



    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Mer 30 Avr 2014 - 17:12

    Ho merci beaucoup! Je pense que même si c'est aussi long à faire, je pense que ça reste plus "simple" comme tu dis. Je vais tenter de faire comme tu me l'indiques, et on verra si cela me parait moins barbare que ce que j'ai l'habitude de faire. Dans tous les cas, je pense que c'est plus lisible que ce que je fais actuellement.

    Merci
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mer 30 Avr 2014 - 17:21

    Je t'en prie! Si tu as des question tu n'hésite pas à redemander ici ou par MP Wink



    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 15:17