AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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


    Fiche de présentation baroque bleue

    Partagez
    Nephilime
    FémininAge : 21Messages : 147

    le Ven 28 Nov 2014 - 23:19

    Bonjour bonjour n'utopiens !

    Je vous présente cette fois une fiche de présentation élégante dans un style plutôt baroque. Vous pouvez avoir un aperçu ici

    Tout les éléments sont bien entendu modifiables dans les deux codes (c'est peut être plus facile dans celui comportant du CSS)
    Le "vous" du second cadre est un peu plus petit que sut l'aperçu et le fond marron au delà de la frise est celui du forum sur lequel elle a été postée.


    Un merci suffit à voir le code et l'utilisation est libre à la seule condition de ne pas enlever ni mon crédit à la fin ni celui de Never Utopia. j'en profite au passage pour remercier tout ceux ayant participé au cursus codage mais aussi posté des tutos ou répondu à mes question ; c'est grâce à vous si je progresse et ai pu faire ce petit LS !  Very Happy



    Dernière édition par Nephilime le Mer 11 Fév 2015 - 19:51, édité 3 fois
    sica3
    MasculinAge : 43Messages : 135

    le Sam 29 Nov 2014 - 0:50

    thank's
    Chocolakato
    FémininAge : 26Messages : 761

    le Sam 29 Nov 2014 - 16:40

    L'idée est sympathique !



    Thorn
    MasculinAge : 15Messages : 422

    le Sam 29 Nov 2014 - 19:18

    Merci !^^



    Halloween
    FémininAge : 22Messages : 9733

    le Ven 5 Déc 2014 - 22:56

    Hey !

    J'adore le rendu *-* Cependant j'aurai bien vu un CSS intégré au code, pour faciliter l'adaptation du texte par les membres qui s'y connaissent moins :/ Ce n'est pas bien compliqué et c'est du C/C, mais c'est toi qui vois ^^

    Petites choses cependant : attention pour les br, ils se font de cette manière :

    Code:
    <br />

    Et la balise center ne se fait plus comme je te l'ai expliqué ici. Et pour ma part, le texte de "Vous" est très gros, c'est volontaire ? Ca rend moins bien celà dit :O

    Encore merci du partage Nephi' et bravo pour ta persévérance, tes idées sont géniales donc continues *-*



    Je mets les voiles, que le vent te soit favorable matelot !
    Nephilime
    FémininAge : 21Messages : 147

    le Ven 5 Déc 2014 - 23:32

    Mh, pour le center j'avais complètement oublié tu as raison ! Mais dans ce cas comment est-ce que je peux conserver cet alignement sans augmenter mes marges intérieures qui élargiraient mon soulignement en pointillé ? :o

    Pour le "br" je change ça aussi demain mais si tu pouvais m'expliquer ce que ça change ce serait top ! (au pire je verrais bien en repostant ! ) et en effet le "Vous" est gros, j'éditerai ça aussi !

    Et pour la feuille css je t'aurais volontiers dis oui mais actuellement je suis juste incapable d'en faire, je ne comprends pas comment ça marche ni où l'intégrer >.>
    Onyx
    FémininAge : 23Messages : 2596

    le Ven 5 Déc 2014 - 23:55

    Salut ^^

    Pour le "br", si tu ne le mets pas comme Halloween, c'est comme si tu ouvrais une balise sans la fermer. Je pense que cela fonctionne quand même, mais c'est tout de même une erreur. En mettant un espace et un "/" après le "br", cela ferme la balise.


    Pour le CSS, je vais te montrer un exmple.
    Disons que j'ai ce carré :
    Je suis un carré!

    Code:
    <div style="background: darkred; border: 2px dashed #3C0000; padding: 5px; width: 200px; height: 80px; color: white; text-shadow: 1px 1px 2px #000000; margin: auto;">Je suis un carré!</div>


    Ce code est lourd et je veux l'alléger au maximum pour mes membres. Alors je vais le réduire. Pour cela, je vais donner une "class" à ma balise "div" et je vais aller mettre le CSS dans une feuille de CSS.

    Cela donnera le code suivant :
    Code:
    <div class="nom_de_la_class">Je suis un carré!</div>

    Et le CSS suivant, à mettre dans la feuille de style CSS dans les couleurs de l'onglet affichage du panneau d'administration :
    Code:
    .nom_de_la_class {
      background: darkred;
      border: 2px solid #3C0000;
      padding: 5px;
      width: 200px;
      height: 80px;
      color: white;
      text-shadow: 1px 1px 2px #000000;
      margin: auto;
    }



    Nephilime
    FémininAge : 21Messages : 147

    le Sam 6 Déc 2014 - 0:35

    Ok, je crois que j'ai pigé le truc, merci Onyx Very Happy
    Par contre il va falloir m'accorder un moment pour que je puisse faire ça parce qu'il va me falloir pas mal d'essais pour avancer autrement que tout doucement !

    PS : attendez vous à me retrouver dans les problèmes en codage dans les prochains jours XD
    Halloween
    FémininAge : 22Messages : 9733

    le Sam 6 Déc 2014 - 11:35

    Ce n'est pas vraiment de la feuille de CSS que je parlais Onyx x)

    En fait tu peux procéder de cette manière, mais du coup seuls les Admin pourront l'utiliser. L'idéal serait d'intégrer le CSS dans le message par le biais des balises :

    Code:
    <style></style>

    Tu as un exemple ici. En gros, tu ajoutes le CSS en début de message, et tu utilises les class comme si le CSS était externe. Comme ça tu embrouilles moins les gens et tout le monde peut s'en servir :)

    Si tu as besoin d'un coup de main n'hésites pas hein Wink



    Je mets les voiles, que le vent te soit favorable matelot !
    Nephilime
    FémininAge : 21Messages : 147

    le Sam 6 Déc 2014 - 13:34

    S.O.S, S.O.S, la section codage veut ma peau XD

    Mais OK, je vais essayer, ça a l'air casse-tête mais pas insurmontable !
    Hancok
    FémininAge : 32Messages : 851

    le Sam 6 Déc 2014 - 16:19

    Hello très jolie fiche bravo et merci du partage.





    Nephilime
    FémininAge : 21Messages : 147

    le Dim 7 Déc 2014 - 20:03

    C'est édité Hallo, finalement ce n'était pas si compliqué que ça :o
    J'ai donc mis les deux codes pour que les gens puissent sélectionner celui avec lequel ils sont le plus à l'aise !

    Le center a été viré et les "br" modifiés !
    Halloween
    FémininAge : 22Messages : 9733

    le Lun 8 Déc 2014 - 14:04

    @Nephilime a écrit:S.O.S, S.O.S, la section codage veut ma peau XD

    En même temps tu le sais maintenant, donc soit tu dois être maso, soit je suis pas si chiante que ça hein x)

    Merci pour les modifications ! Il reste cependant quelques coquilles : attention à tes espaces et à tes points virgules. Une div (ou un span) se construit de cette façon :

    Code:
    <span style="display: block; width: 370px; [...] padding-bottom: 8px;">

    Pas d'espace après le premier guillemet, un point virgule à la fin de chaque caractéristique y compris à la toute fin, avant le dernier guillemet. Et pas de "/" à la fin d'une div. Je t'ai relevé quelques exemples, mais il y en a plusieurs à modifier.

    Manque un point virgule :
    Code:
    <span style="display: block; width: 370px; font-family: 'Merienda One', cursive; font-size: 24px; color: #625656; letter-spacing: 3px; border-bottom: 5px dotted #342c2c; text-align: right; margin-left: auto; margin-right: auto; margin-top: 2px;  padding-bottom: 8px">

    Pas de slash :
    Code:
    <div style="height: 150px; width: 150px; margin-left: 37px; margin-top: 6px; font-weight: lighter; font-size: 11px; transform: rotate(-45deg);"/>

    Pas d'espace après un premier guillemet :
    Code:
    <span style=" color: #5d83b1; padding-top: -40px; padding-left: 200px; font-size: 10px;">

    Et comme pour tous les codes, il faut un lien vers NU (j'avais oublié de le préciser dans mon premier message, désolée).



    • Pour ton intégration du CSS :

    La plus grosse erreur : jamais de gros espaces entre les nom de class ! Jamais. Là tu as de la chance, ça fonctionne (va savoir pourquoi d'ailleurs :hum:) mais normalement elles doivent être séparées par un unique espace pour que ça fonctionne, donc :

    Code:
    .bloc_pcp {width: 500px; height: 905px; margin: auto; background: url(http://img15.hostingpics.net/pics/855310fond.jpg) center; overflow: hidden; text-align: left; border-radius: 30px 0 30px 0; border-top: 7px solid #3a6077; border-left: 2px solid #3a6077; border-right: 2px solid #3a6077;  border-bottom: 7px solid #3a6077;} .entete {display: block; width: 370px; font-family: 'Merienda One', cursive; font-size: 24px; color: #625656; letter-spacing: 3px; border-bottom: 5px dotted #342c2c; text-align: right; margin-left: auto; margin-right: auto; margin-top: 2px;  padding-bottom: 8px;} .losange_fond {height: 150px; width: 150px; float: left; background-color: #342c2c; border: 12px solid #3b5d78; margin-left: -30px; margin-top: 30px; transform: rotate(45deg);} .losange_txt {height: 150px; width: 150px; margin-left: 37px; margin-top: 6px; font-family: 'Merienda One', cursive; font-weight: lighter; font-size: 11px; transform: rotate(-45deg);} .eventail_bas {width: 170px; height: 240px; background-color: #342c2c; margin-left: 242px; margin-top; -7px; transform: rotate(-18deg);} .eventail_med {width: 170px; height: 240px; background-color: #625656; margin-left: 10px; transform: rotate(12deg);} .avatar { width: 150px; height: 240px; margin-left: 10px; background: url(http://img11.hostingpics.net/pics/50432862839110.jpg) top no-repeat; transform: rotate(8deg)} .monde {font-family: 'Merienda One', cursive; font-size: 15px; color: #625656; font-weight: lighter; letter-spacing: 2px; padding-left: 60px ; margin-top: 3px;} .citation {font-family: 'Merienda One', cursive; font-size: 11px; color: #625656; font-weight: lighter; letter-spacing: 2px; padding-left: 85px ; margin-top: -3px;} .hide {height: 460px; width: 444px; overflow: scroll; overflow-x: hidden} .cat_droite {font-family: 'Merienda One', cursive; font-size: 20px; color: #625656; text-shadow: 0 2px 0 2px #342c2c; letter-spacing: 3px; padding-left: 300px;}

    Par exemple. Je n'ai pas tout fait, c'était pour te donner une idée de l'animal. Comme tu le vois, ça fait pâté mais c'est comme ça que ça marche :/ De plus, toutes les caractéristiques doivent être réunies en début de message, dans le même "style", c'est une norme.

    Il te manque un point virgule à :
    Code:
     .hide {height: 460px; width: 444px; overflow: scroll; overflow-x: hidden}

    Je crois aussi qu'il y a quelques beugs : chez moi, il y a un unique ascenseur pour l'histoire, le caractère et le physique, c'est normal ? Ou du moins voulu ? Et le texte dépasse sur le fond en plume, tu as besoin d'aide pour mieux le placer ? De plus, le cadre "vous" sort de la présentation (cf si tu veux un aperçu) et le crédit se place sous le caractère :$

    Petite question : ici le texte du cadre "vous" est de taille normale, mais pas sur la fiche en HTML, c'est normal ? :hum:

    Merci pour tes premières modifications donc, mais il reste quelques petites choses à revoir (pour l'HTML ça devrait aller vite, et les beugs de ta fiche avec CSS viennent peut-être des espaces dans le "style").

    Si besoin n'hésites pas à demander de l'aide, je suis aussi là pour ça.

    Courage !



    Je mets les voiles, que le vent te soit favorable matelot !
    Halloween
    FémininAge : 22Messages : 9733

    le Sam 27 Déc 2014 - 23:43

    Nephi ? Toujours là ? :3



    Je mets les voiles, que le vent te soit favorable matelot !
    Nephilime
    FémininAge : 21Messages : 147

    le Mer 11 Fév 2015 - 19:52

    Après un temps infini, vraiment désolée Hallo, je pense que tout est bon !
    J'ai travaillé les codes sur un autre forum que NU pour dissocier ce qui était de l'affichage automatique et ce qui ne l'était pas, en espérant que cela convienne une bonne fois pour toute et merci pour tout Very Happy
    A-Lice
    FémininAge : 22Messages : 4939

    le Jeu 12 Fév 2015 - 13:31

    B'jour.

    Alors pour la fiche avec le CSS et le HTML séparés, c'est quasiment bon, il manque juste le lien pour le crédit. Tu as mis un span alors que pour le lien c'est cette balise :
    Code:
    <a href="Lien ici">Never-Utopia</a>

    En revanche pour le HTML seul, tu as fermé 2 balises div en trop. Une après le caractère, et une après le crédit (qui doit aussi changer de balise).

    Je te laisse modifier ça encore et après ce sera bon (:

    A-Lice
    FémininAge : 22Messages : 4939

    le Sam 18 Avr 2015 - 15:48

    En attente de nouvelles.

    The One Pandemonium
    FémininAge : 23Messages : 97

    le Jeu 14 Mai 2015 - 23:43

    Merci beaucoup du partage! C'est une jolie fiche.



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    Uxia
    FémininAge : 21Messages : 27

    le Sam 12 Mar 2016 - 17:22

    Merci beaucoup du partage ^^
    Kelalin
    FémininAge : 24Messages : 1403

    le Sam 12 Mar 2016 - 18:58

    Merci pour le partage :)
    Sky Angel
    FémininAge : 23Messages : 15

    le Lun 14 Mar 2016 - 2:32

    merci!
    Lyo Jen
    MasculinAge : 20Messages : 36

    le Lun 14 Mar 2016 - 22:59

    Merci !!! :3
    Lyo Jen
    MasculinAge : 20Messages : 36

    le Lun 14 Mar 2016 - 22:59

    Merci !!! :3
    Clémentine
    FémininAge : 24Messages : 200

    le Jeu 24 Mar 2016 - 17:39

    Merci ♥



    Edward Speleers
    FémininAge : 28Messages : 332

    le Jeu 31 Mar 2016 - 15:09

    fabuleux merci :)



    Contenu sponsorisé

    Aujourd'hui à 9:08


      La date/heure actuelle est Mar 6 Déc 2016 - 9:08