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 :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

    Codage pour Fiche De Contexte/ Règlement

    Argimpasa
    Argimpasa
    FémininAge : 33Messages : 100

    Sam 23 Juil 2016 - 23:37

    Ma demande



    Bien le bonsoir, ou le bonjour,
    Je viens passer une demande de libre-service pour une fiche de contexte qui servira aussi pour le règlement et mes annexes.
    J'ai déjà un peu farfouillé dans le libre-service et rien ne me convenait réellement.
    Je viens donc solliciter votre aide. Merci d'avance!


    Schéma(s) et Eléments
    Schémas : https://2img.net/h/oi66.tinypic.com/2ir5aqd.jpg
    Tailles des éléments : Je ne vais pas être bien utile sur ce point mais je dirais de voir le schéma. Si jamais les proportions ne sont pas adaptées, je bidouillerais. Modifier une taille m'est accessible.
    Effets voulus : Alors les effets voulus sont :
    -Un effet d'ombre pour l'image et les cadres.
    -Une légère superposition des Titres Secondaires (sur le schéma : Sous-titre de fiche) sur le cadre.
    -Si possible un effet de "changement de couleur" quand on passe la souris dessus.
    -Un cadre autour de la fiche.
    -Les deux barres décoratives sous le titre.


    Ressources
    Aucune ressource nécessaire.

    Autres précisions ?
    Alors pour les couleurs et les images, je n'ai pas de préférence. Je compte faire plusieurs essais sur mon forum Very Happy
    Merci

    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 0:27

    Coucou, je veux bien m'occuper de ta commande, mais j'aurais avant quelques questions :aww:
    Je n'ai pas bien compris, quel changement de couleur sur quel élément veux-tu au passage de la souris ?
    Argimpasa
    Argimpasa
    FémininAge : 33Messages : 100

    Dim 24 Juil 2016 - 0:30

    Coucou^^
    Alors merci de ton aide.

    Comme je pense avoir du mal à l'expliquer par écrit, je vais te montrer directement par mon forum qui est ICI
    Quand tu passes la souris sur un titre de forum (exemple Amplificateur Cérébral), le titre s'allonge mais change aussi de couleur par rapport à celle initiale. C'est l'effet que je voudrais.

    J'espère avoir été plus clair :s
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 1:26

    Tu l'as été, voilà ce que ça donne (très beau forum, au passage) :

    Spoiler:

    J'ai simplifié au maximum pour que ce soit plus facile à remplir et utilisé la police de ton forum. Est-ce que ça te convient ?


    Dernière édition par Azel le Sam 30 Juil 2016 - 1:31, édité 1 fois
    Argimpasa
    Argimpasa
    FémininAge : 33Messages : 100

    Dim 24 Juil 2016 - 1:37

    Merci (pour l'aide et le compliment :p )

    C'est juste parfait *o*
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 1:44

    De rien :)

    Voici les codes :

    Dans le sujet :
    Code:
    <center>
     <fiche>    <fimg style="background-image: url(http://img15.hostingpics.net/pics/285979image367.png);"></fimg>    <ftitre>Titre</ftitre>    <flignes></flignes>    <fzone><fstitre>Sous-titre de la fiche</fstitre>Les siluriformes forment un ordre regroupant les poissons-chats et les silures, il compte environ le quart des espèces de poissons d'eau douce. Ils sont nommés poissons-chats en référence à leurs barbillons, qui ressemblent aux moustaches d'un chat. Malgré leur nom commun, tous les poissons-chats ne sont pas pourvus de barbillons, les caractéristiques qui classent un poisson dans l'ordre des siluriformes sont, en fait, certaines caractéristiques du crâne et de la vessie natatoire.</fzone>    <fzone><fstitre>Sous-titre de la fiche</fstitre>Le terme escargot est un nom vernaculaire qui en français désigne des gastéropodes à coquille, généralement terrestres et appelés aussi des colimaçons, par opposition aux limaces. Ce sont tous des mollusques, quelle que soit leur taille (certains mesurent à peine 2 millimètres) ou leur forme. 40 % des mollusques étant des escargots terrestres1, certains escargots toutefois sont des espèces aquatiques, plutôt d'eau douce : Basommatophora tels les limnées ou les planorbes, souvent appelés « escargots nettoyeurs » par les amateurs d'aquariophilie.</fzone><cred>made by Azel</cred></fiche>
     </center>

    Dans la fiche CSS :
    Code:
    /* CODAGE DU CONTEXTE/REGELEMENT */
      
      fiche                             /* La fiche */
    {
      display: block;
      width: 500px;
      border: 3px solid #352c25;
      padding: 15px 0px 15px;
      background-color: #524f3e;
    }
      
      fimg                            /* L'image avec fond changeable directement dans le code HTML */
    {
      display: block;
      height: 150px;
      width: 450px;
      box-shadow: 0px 0px 8px black;
    }
      
      ftitre                         /* Le titre */
    {
      display: block;
      text-align: center;
      font-family: Lobster;
      font-size: 50px;
      color: #efe8be;
      font-style: italic;
      margin-top: 20px;
      margin-bottom: 20px;
    }

      flignes                      /* Les lignes de séparation */
    {
      display: block;
      border-top: 3px solid #352c25;
      border-bottom: 3px solid #352c25;
      width: 460px;
      height: 3px;
    }
      
      fstitre                    /* Le sous-titre */
    {
      display: block;
      font-family: Lobster;
      font-size: 20px;
      color: #efe8be;
      font-style: italic;
      text-align: right;
      margin-top: -17px;
      -htm-transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -webkit-transition: 1s;
      transition: 1s;
    }
      
      fstitre:hover            /* Le sous-titre au passage de la souris */
    {
      letter-spacing: 1px;
      color: #fff;
      -htm-transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -webkit-transition: 1s;
      transition: 1s;
    }
      
      fzone                    /* Les zones de texte */
    {
      display: block;
      width: 448px;
      padding: 1px 6px 6px;
      background-color: #7e7965;
      text-align: justify;
      font-family: Arial;
      font-size: 11px;
      margin-top: 60px;
      box-shadow: 0px 0px 8px black;
    }
      
    cred
    {
      display: block;
      font-size: 10px;
      color: #efe8be;
      text-align: center;
      letter-spacing: -1px;
      width: 100%;
      margin-bottom: -12px;
      margin-top: 12px;
      }

    N'hésite pas si tu as des questions ! :)
    Argimpasa
    Argimpasa
    FémininAge : 33Messages : 100

    Dim 24 Juil 2016 - 1:51

    Alors juste une :

    Si je veux réutiliser la fiche et la modifier un peu (rajouter un paragraphe par exemple), est-ce que la modification va se faire sur toutes les fiches postées sur le forum?
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 1:56

    Pour rajouter un paragraphe, il te suffit de copier/coller les balises
    Code:
    <fzone>...</fzone>
    avec ce qu'il y a dedans. Ce changement s'effectue dans le code HTML qui est propre à chaque message, donc tu n'en changeras qu'un à la fois.

    En modifiant la fiche CSS, oui cela modifiera toutes les fiches, sauf si tu personnalises depuis le code HTML comme ceci :
    Code:
    <balise style="exemple: paramètres;"></balise>

    OU en ajoutant à la place du ' style="..." ' une ID, comme ceci : ' id="ID" ', et dans ce cas dans la fiche CSS tu devras écrire ceci (tout ce que tu écriras sera propre aux balises avec cette ID) :
    Code:
    #ID
    {
     changements à apporter: ex;
    }

    J'espère avoir été claire :)
    Argimpasa
    Argimpasa
    FémininAge : 33Messages : 100

    Dim 24 Juil 2016 - 2:04

    C'est parfait. Encore une fois, merci.
    Azel
    Azel
    FémininAge : 26Messages : 42

    Dim 24 Juil 2016 - 2:14

    Pas de problème.
    Argimpasa
    Argimpasa
    FémininAge : 33Messages : 100

    Dim 24 Juil 2016 - 2:41

    Problème résolue comme une grande. Message édité Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 21:13