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 : -36%
Aspirateur balai sans fil Dyson V8 Origin
Voir le deal
254.99 €

    Fiche de liens

    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.

    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.
    • Revenir en haut
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    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
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    Mer 26 Déc 2018 - 18:49

    Coucou c'est pour dire que ma demande est toujours d'actualité
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 25Messages : 209

    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>
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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.
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 25Messages : 209

    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 !
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    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
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 25Messages : 209

    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>
    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    Lun 21 Jan 2019 - 21:16

    Merci Iguolta c'est parfait, c'est magnifique. Encore merci.
    • Revenir en haut
    Iguolta
    Iguolta
    MasculinAge : 25Messages : 209

    Lun 21 Jan 2019 - 21:23

    Content que ça te plaise ! :)
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 16:33