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 liens

    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Mar 18 Sep 2018 - 9:34

    Ma demande



    Bonjour, je viens vers vous pour demander la création d'une fiche lien. J'ai essayer de la faire, mais comme je suis pas doué en codage et que cela à était une catastrophe, je fais appelle à vous car vous êtes des expert comparé à moi. Je vous remercie d'avance et je vous fais plein de bisous.


    Schéma(s) et Eléments


    Schémas : https://i.servimg.com/u/f64/19/51/10/79/fiche_10.jpg
    Tailles des éléments : En largeur pas plus de 500px
    Effets voulus : Comme sur le schéma. Sur la partie ou il y a les liens, je voudrais qu'il est un scroll barre pour que je puis ajouter des personnes. J'aimerais que la fiche soit en page HTLM.
    Version de votre forum : phpBB2


    Ressources


    Grande Icone : https://i.servimg.com/u/f64/19/51/10/79/1td10.jpg
    Petits icons : https://i.servimg.com/u/f64/19/51/10/79/vva210.jpg ||| https://i.servimg.com/u/f64/19/51/10/79/va110.jpg
    Fond : https://i.servimg.com/u/f64/19/51/10/79/cadern10.png


    Autres précisions ?


    Je voudrais juste que la fiche soit en page HTLM. La ou il y a marquer (sa fiche) il y aura un lien qui ramènera à la fiche du personnage.

    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Sam 6 Oct 2018 - 10:03

    Bonjour c'est pour dire que ma fiche lien est toujours d'actualité plein de calins et de bisous. Bonne journée a tous.
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Dim 14 Oct 2018 - 6:39

    Bonjour c'est pour dire que ma fiche lien est toujours d'actualité plein de calins et de bisous. Bonne journée a tous.
    Ayfoth
    Ayfoth
    MasculinAge : 29Messages : 1277

    le Dim 14 Oct 2018 - 20:37

    Coucou je vais essayer de te faire ca dans la semaine, bien que je sois un peu rouillé en codage ^^



    Fiche de liens  Oyl7
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Mar 6 Nov 2018 - 10:48

    Coucou désolé pour le retard. Je te remercie d'avance si tu peut la faire. Sinon, je passe pour dire que c'est toujours d'actualité. Merci d'avance plein de bisous et de câlin.
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Mer 26 Déc 2018 - 18:49

    Coucou c'est pour dire que ma demande est toujours d'actualité
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Sam 5 Jan 2019 - 21:17

    Coucou c'est pour dire que ma demande est toujours d'actualité, plein de bisous et de câlins.
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Ven 11 Jan 2019 - 19:43

    Coucou c'est pour dire que ma demande est toujours d'actualité, plein de bisous et de câlins.
    Iguolta
    Iguolta
    MasculinAge : 19Messages : 161

    le Sam 19 Jan 2019 - 22:32

    Bonsoir, voilà ce que je te propose :
    Code:
    <style>
    /** Fond et éléments principaux **/
    .fond_fl{
       background:url('https://i.servimg.com/u/f64/19/51/10/79/cadern10.png');
       background-size:500px 430px;
       width:500px;
       height:430px;
       font-family:'Arial';
       font-size:12px;
    }

    /** Taille et positions des pages **/
    .page1_fl, .page2_fl{
       width:45%;
       margin-left:4%;
       height:430px;
       float:left;
    }

    /** Les deux dates dans les coins du haut **/
    .date1_fl{
       margin-top:24px;
       margin-left:18px;
       text-align:left;
    }

    .date2_fl{
       margin-top:21px;
       margin-right:25px;
       text-align:right;
    }

    /** Images avec rotation **/
       .grande_image{
       width:90px;
       height:auto;
       transform:rotate(-20deg);
       margin-left:25px;
    }

    .mini_icone1, .mini_icone2{
       display:inline-block;
       width:55px;
       height:auto;
    }

    .mini_icone1{
       transform:rotate(25deg);
       margin-left:90px;
    }

    .mini_icone2{
       transform:rotate(-10deg);
    }

    /** Prénom, nom, âge et "(sa fiche)" **/
    div.info{
       position:relative;
       bottom:0px;
       left:20px;
       font-size:14px;
       text-align:center;
    }

    .fiche_fl{ /** On réduit ici un peu la position de "(sa fiche)" **/
       position:relative;
       bottom:4px;
    }

    /** Dispositions des images et des informations **/
       div.image, div.info, div.image1, div.image2{
       display:inline-block;
    }

    /** On ajoute un peu d'espace entre en cours et fini **/
    .fini_fl{
       margin-left:5%;
    }

    /** Fond bleu + texte blanc **/
    .cherche_fl, .en_cours_fl, .fini_fl, .personnage_fl{
       background-color:#40D4FC;
       color:white;
       font-weight:bold;
    }

    /** Blocs des éléments de droite **/
    .personnage_fl{
       width:91%;
       margin:10px 0 0 3px;
    }

    /** Texte pour NOM et PRENOM, rps **/
    .nom_fl{
       text-align:right;
       padding:5px 25px 5px 0;
    }

    .rps_fl{
       display:inline-block;
       width:20%;
         transform:translate(0,-25px);
         text-align:center;
    }


    /** Titre des éléments de la page de gauche **/
    .cherche_fl span, .en_cours_fl span, .fini_fl span{
       display:block;
       font-size:14px;
       text-align:center;
       padding:5px;
    }

    /** Éléments de la page de gauche **/
    .en_cours_fl, .fini_fl{
       display:inline-block;
       width:40%;
       margin:auto;
       margin-left:7%;
       margin-top:20px;
    }

    .cherche_fl{
       width:85%;
       margin:auto;
       margin-top:20px;
    }

    /** Texte avec scrollbar **/
    .texte_perso_fl, .texte_gauche_fl{
       background-color:white;
       color:black;
       font-weight:normal;
       display:inline-block;
       height:50px;
       overflow:auto;
    }

    .texte_perso_fl{
       width:75%;
       margin-bottom:2px;
    }

    .texte_gauche_fl{
       width:94%;
       margin:0 3% 2px 3%;
    }

    /** Scrollbar liste des personnages **/
    .liste_perso_fl{
       height:360px;
       overflow:auto;
    }
    </style>
    <div class="fond_fl">
       <!-- Partie de gauche -->
       <div class="page1_fl">
          <!-- 1ere date -->
          <div class="date1_fl">18/09/19</div>
                
          <div>
             <!-- L'image principale -->
             <div class="image">
                <img src="https://i.servimg.com/u/f64/19/51/10/79/1td10.jpg" class="grande_image" />
             </div>
                   
             <!-- Les informations du membre -->
             <div class="info">
                <span>Noah</span><br/>
                <span>Yoon</span><br />
                <span>22 ans</span><br /><br/>
                <span class="fiche_fl">(sa fiche)</span>
             </div>
          </div>

          <!-- Les deux petites images -->
          <div class="image1">
             <img src="https://i.servimg.com/u/f64/19/51/10/79/va110.jpg" class="mini_icone1"/>
          </div>
          <div class="image2">
             <img src="https://i.servimg.com/u/f64/19/51/10/79/vva210.jpg" class="mini_icone2"/>
          </div>
                

          <!-- Partis "je cherche ..." -->
          <div class="cherche_fl">
             <span>Je cherche ...</span>
             <div class="texte_gauche_fl">
                Texte avec scrollbar
             </div>
          </div>

          <div>
             <!-- Partis "En cours" -->
             <div class="en_cours_fl">
                <span>En cours</span>
                <div class="texte_gauche_fl">
                   Texte avec scrollbar
                </div>
             </div>

             <div class="fini_fl">
                <span>Fini</span>
                <div class="texte_gauche_fl">
                   Texte avec scrollbar
                </div>
             </div>
          </div>
       </div>

       <!-- Partie de droite -->
       <div class="page2_fl">
          <!-- 2e date -->
          <div class="date2_fl">19/09/19</div>

          <!-- Liste des personnages -->
          <div class="liste_perso_fl">
             <!-- 1er personnage -->
             <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">
                   Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
                </div>
             </div>

             <!-- 2e personnage -->
             <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
             </div>

             <!-- 3e personnage -->
             <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
             </div>

             <!-- 4e personnage -->
             <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
             </div>
          </div>
       </div>
    </div>
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Lun 21 Jan 2019 - 19:29

    Coucou Iguolta, j'adore la fiche, elle est parfaite par contre si ont rajoute un lien il y a pas le scrollbar pour que cela reste sur la même page. Tu pourrais le rajouter ? J'ai oublié de le mettre sur ma fiche schéma. Mais sinon c'est génial c'est exactement se que je voulais. Merci d'avoir pris la commande.
    Iguolta
    Iguolta
    MasculinAge : 19Messages : 161

    le Lun 21 Jan 2019 - 20:44

    Bonsoir ! :)
    Qu'entends-tu par liste de liens ? Ce sont les éléments disposées sur la 2eme page (voir cercle rouge de l'image) ? Si oui, il faut ajouter un 5e élément pour que la scrollbar apparaît, sinon c'était moi qui avait mal compris et je rectifierais ça !


    Bonne soirée !
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Lun 21 Jan 2019 - 20:55

    J'ai ajouté un cinquième élément mais cela ne marche pas sur la seconde page, la ou il y a les liens avec les personnes. Je mis prends peut-être mal, pour faire un rajout. Après certain caractère n’apparaisse pas correctement sur la fiche quand ont met du texte

    Fiche de liens  Exx10
    Iguolta
    Iguolta
    MasculinAge : 19Messages : 161

    le Lun 21 Jan 2019 - 21:04

    J'ai effectivement oublié de mettre une balise pour l'encodage. Pour le 5e élément, essaie donc avec ceci, je l'ai déjà inclus :
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    /** Fond et éléments principaux **/
    .fond_fl{
      background:url('https://i.servimg.com/u/f64/19/51/10/79/cadern10.png');
      background-size:500px 430px;
      width:500px;
      height:430px;
      font-family:'Arial';
      font-size:12px;
    }

    /** Taille et positions des pages **/
    .page1_fl, .page2_fl{
      width:45%;
      margin-left:4%;
      height:430px;
      float:left;
    }

    /** Les deux dates dans les coins du haut **/
    .date1_fl{
      margin-top:24px;
      margin-left:18px;
      text-align:left;
    }

    .date2_fl{
      margin-top:21px;
      margin-right:25px;
      text-align:right;
    }

    /** Images avec rotation **/
      .grande_image{
      width:90px;
      height:auto;
      transform:rotate(-20deg);
      margin-left:25px;
    }

    .mini_icone1, .mini_icone2{
      display:inline-block;
      width:55px;
      height:auto;
    }

    .mini_icone1{
      transform:rotate(25deg);
      margin-left:90px;
    }

    .mini_icone2{
      transform:rotate(-10deg);
    }

    /** Prénom, nom, âge et "(sa fiche)" **/
    div.info{
      position:relative;
      bottom:0px;
      left:20px;
      font-size:14px;
      text-align:center;
    }

    .fiche_fl{ /** On réduit ici un peu la position de "(sa fiche)" **/
      position:relative;
      bottom:4px;
    }

    /** Dispositions des images et des informations **/
      div.image, div.info, div.image1, div.image2{
      display:inline-block;
    }

    /** On ajoute un peu d'espace entre en cours et fini **/
    .fini_fl{
      margin-left:5%;
    }

    /** Fond bleu + texte blanc **/
    .cherche_fl, .en_cours_fl, .fini_fl, .personnage_fl{
      background-color:#40D4FC;
      color:white;
      font-weight:bold;
    }

    /** Blocs des éléments de droite **/
    .personnage_fl{
      width:91%;
      margin:10px 0 0 3px;
    }

    /** Texte pour NOM et PRENOM, rps **/
    .nom_fl{
      text-align:right;
      padding:5px 25px 5px 0;
    }

    .rps_fl{
      display:inline-block;
      width:20%;
        transform:translate(0,-25px);
        text-align:center;
    }


    /** Titre des éléments de la page de gauche **/
    .cherche_fl span, .en_cours_fl span, .fini_fl span{
      display:block;
      font-size:14px;
      text-align:center;
      padding:5px;
    }

    /** Éléments de la page de gauche **/
    .en_cours_fl, .fini_fl{
      display:inline-block;
      width:40%;
      margin:auto;
      margin-left:7%;
      margin-top:20px;
    }

    .cherche_fl{
      width:85%;
      margin:auto;
      margin-top:20px;
    }

    /** Texte avec scrollbar **/
    .texte_perso_fl, .texte_gauche_fl{
      background-color:white;
      color:black;
      font-weight:normal;
      display:inline-block;
      height:50px;
      overflow:auto;
    }

    .texte_perso_fl{
      width:75%;
      margin-bottom:2px;
    }

    .texte_gauche_fl{
      width:94%;
      margin:0 3% 2px 3%;
    }

    /** Scrollbar liste des personnages **/
    .liste_perso_fl{
      height:360px;
      overflow:auto;
    }
    </style>
    <div class="fond_fl">
      <!-- Partie de gauche -->
      <div class="page1_fl">
          <!-- 1ere date -->
          <div class="date1_fl">18/09/19</div>
               
          <div>
            <!-- L'image principale -->
            <div class="image">
                <img src="https://i.servimg.com/u/f64/19/51/10/79/1td10.jpg" class="grande_image" />
            </div>
                 
            <!-- Les informations du membre -->
            <div class="info">
                <span>Noah</span><br/>
                <span>Yoon</span><br />
                <span>22 ans</span><br /><br/>
                <span class="fiche_fl">(sa fiche)</span>
            </div>
          </div>

          <!-- Les deux petites images -->
          <div class="image1">
            <img src="https://i.servimg.com/u/f64/19/51/10/79/va110.jpg" class="mini_icone1"/>
          </div>
          <div class="image2">
            <img src="https://i.servimg.com/u/f64/19/51/10/79/vva210.jpg" class="mini_icone2"/>
          </div>
               

          <!-- Partis "je cherche ..." -->
          <div class="cherche_fl">
            <span>Je cherche ...</span>
            <div class="texte_gauche_fl">
                Texte avec scrollbar
            </div>
          </div>

          <div>
            <!-- Partis "En cours" -->
            <div class="en_cours_fl">
                <span>En cours</span>
                <div class="texte_gauche_fl">
                  Texte avec scrollbar
                </div>
            </div>

            <div class="fini_fl">
                <span>Fini</span>
                <div class="texte_gauche_fl">
                  Texte avec scrollbar
                </div>
            </div>
          </div>
      </div>

      <!-- Partie de droite -->
      <div class="page2_fl">
          <!-- 2e date -->
          <div class="date2_fl">19/09/19</div>

          <!-- Liste des personnages -->
          <div class="liste_perso_fl">
            <!-- 1er personnage -->
            <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">
                  Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.
                </div>
            </div>

            <!-- 2e personnage -->
            <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
            </div>

            <!-- 3e personnage -->
            <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
            </div>

            <!-- 4e personnage -->
            <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
            </div>

            <!-- 5e personnage -->
            <div class="personnage_fl">
                <div class="nom_fl">NOM et PRENOM</div>
                <div class="rps_fl">0 rps</div>
                <div class="texte_perso_fl">Texte avec scrollbar</div>
            </div>

            <!-- FIN -->
          </div>
      </div>
    </div>
    lala zhang
    lala zhang
    FémininAge : 28Messages : 369

    le Lun 21 Jan 2019 - 21:16

    Merci Iguolta c'est parfait, c'est magnifique. Encore merci.
    Iguolta
    Iguolta
    MasculinAge : 19Messages : 161

    le Lun 21 Jan 2019 - 21:23

    Content que ça te plaise ! :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Mai 2019 - 10:04