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 imagée

    Partagez
    Nephilime
    FémininAge : 21Messages : 147

    le Ven 16 Jan 2015 - 20:04



    Bonsoir amis n'utopiens !

    Je vous présente une fiche de présentation un peu plus sophistiquée que d'ordinaire sans pour autant faire trop lourd à mon sens. Les images de droite transite pour laisser apparaître le texte.

    Voici un petit apperçu : initialement puis au survol de d'une image de droite.

    Les codes permettant la transition venant d'Okhmhaka (que je remercie vraiment chaleureusement Very Happy ) seul y figure le crédit de NU que vous êtres bien évidemment priés de ne pas retirer.
    Les images de droite font 370*185px, celle de gauche fait 178*559px et celle du haut fait 550*112px.


    Voici donc la partie CSS à ajouter à la feuille de codage :
    Code:
    /* ------------------------------- CODES CSS fiches ------------------------------------- */

    .bloc_pcp
    {
      width: 550px;
      height: 675px;
      margin: auto;
      background-color: #2e2e2c;
      border: 2px solid #202020;
      border-bottom: none;
      color: #101010;
    }
    .bloc_pcp .entete_pres
    {
      width: 550px;
      height: 102px;
      text-align: center;
      padding-top: 10px;
      background: url('http://img15.hostingpics.net/pics/972122Sanstitre.jpg'); /*Image du haut*/
      border-bottom: 2px solid #202020;
     
    }
    .bloc_pcp .colonne_gauche
    {
      width: 172px;
      height: 553px;
      float: left;
      background: url('http://img15.hostingpics.net/pics/887715Sanstitre2.jpg'); /*Image de gauche*/
      padding: 3px;
      border-right: 2px solid #202020;
      border-bottom: 2px solid #202020;
    }
    .bloc_pcp .colg_text
    {
      width: 166px;
      height: 520px;
      overflow: auto;
      overflow-x: hidden
    }
    .bloc_pcp .police
    {
      font-family: Berkshire Swash;
      font-size: 14px;
      letter-spacing: 2px;
    }
    .bloc_pcp .cate
    {
      width: 370px;
      height: 185px;
      overflow: hidden;
      background-color: #a3a3a3;
      border-bottom: 2px solid #202020;
    }
    .bloc_pcp .cate_img
    {
      position: relative;
      z-index: 2;
      width: 370px;
      height: 185px;
      margin-left: 0px;
      -webkit-transition: all ease 2s;
      transition: all ease 2s;
    }
    .bloc_pcp .cate:hover .cate_img
    {
      margin-left: 400px;
      -webkit-transition: all ease 2s;
      transition: all ease 2s;
    }
    .bloc_pcp .cate_description
    {
      position: relative;
      z-index: 1;
      width: 370px;
      height: 185px;
      margin-top: -185px;
      text-align: left;
      font-size: 11px;
      color: #555555;
      padding: 3px;
      overflow: auto;
    }

    /* ---------------------------- FIN CODES FICHES ------------------------- */


    Et la partie HTML à copier dans vos sujets de présentation :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css' />
       <div class="bloc_pcp"><div class="entete_pres"> <br/><span style="font-size: 23px; font-family: Berkshire Swash; letter-spacing: 2px;">[Nom du personnage]</span>

       "citation"</div><div class="colonne_gauche"><div class="colg_text">
       <span class="police">Prénom: </span>


       <span class="police">Nom:</span>


       <span class="police">Date de naissance:</span>


       <span class="police">Clan:</span>


       <span class="police">Rang:</span>


       <span class="police">Arme:</span>


       <span class="police">Signe particulier:</span> </div><a href="http://www.never-utopia.com/" target="_blank"><span style="font-size: 11px;"> |Never Utopia|</span></a></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/836909Sanstitre3.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Physique </span>

       texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/115164Sanstitre4.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Caractère </span>

       texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/353049Sanstitre5.jpg" /></div><div class="cate_description"><br />  <span class="police"> Histoire </span>

       texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div>
       </div>


    Dernière édition par Nephilime le Ven 16 Jan 2015 - 23:56, édité 2 fois
    Halloween
    FémininAge : 22Messages : 9733

    le Ven 16 Jan 2015 - 20:12

    Hey !

    Actuellement je ne trie plus des LS en attendant ce qui se dit côté staff, mais ce serait bien de ne pas oublier les sujets précédents (ici). C'est très aimable de proposer un code en LS, mais c'est à toi de te tenir au sujet et de corriger ton code, pas à moi Wink

    Merci :)



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

    le Ven 16 Jan 2015 - 20:28

    Je n'attendais pas que tu le fasses à ma place Hallo, j'ai même déjà entamé ça sur un forum test mais je cherche la solution à différents décalages entre prévisualisation et affichage mais aussi ce qui appartient au forum et ce qui appartient au codage, et surtout j'attends la motivation pour me pencher sur cette fichue fiche Very Happy
    Mais ne t'inquiète pas, ce sera fait
    The One Pandemonium
    FémininAge : 23Messages : 97

    le Jeu 14 Mai 2015 - 23:53

    J'adore l'idée! Merci :hug2:



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Sam 5 Mar 2016 - 11:34

    Les images d'aperçu ainsi que dans les codes ne s'affichent plus, il faut les réhéberger. (Sinon j'ai corrigé les petites erreurs de code).

    Merci de ne pas poster à la suite pour que les correcteurs puissent voir ce message.

    De plus ce LS étant à corriger, cela peut impliquer qu'il ne fonctionne plus ou mal, il n'est donc pas dans votre intérêt de l'utiliser ou poster des remerciements.



    Onyx
    FémininAge : 23Messages : 2596

    le Dim 2 Oct 2016 - 21:18

    N'ayant pas eu de retour, j'ai procédé aux modifications et je valide.



    En ligne
    Kelalin
    FémininAge : 24Messages : 1403

    le Dim 2 Oct 2016 - 22:01

    Merci pour le partage !
    Contenu sponsorisé

    Aujourd'hui à 22:49


      La date/heure actuelle est Mar 6 Déc 2016 - 22:49