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.

-39%
Le deal à ne pas rater :
Pack Home Cinéma Magnat Monitor : Ampli DENON AVR-X2800H, Enceinte ...
1190 € 1950 €
Voir le deal

    (Praecursator) Fiche de Présentation onglets

    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Sam 3 Sep - 12:27

    Bonjour Invité !
    Travaillant sur un projet qui me tient à coeur, je désirerais une fiche de présentation pour mon forum !
    Merci d'avance aux gentils codeurs qui viendront !!

    Ma demande



    Donc donc donc, j'aimerais rapidement une formulaire de présentation à onglet qui aurait une partie rpg et l'autre irl mais les schémas en disent plus !

    Schéma(s) et Eléments
    Schémas :
    https://2img.net/r/hpimg4/pics/499705pres2.png
    Lui c'est l'onglet rpg
    https://2img.net/r/hpimg4/pics/143445pres1.png
    Lui, l'onglet hrpg.
    Tailles des éléments : La taille que ça vous prendra, je ne serais pas vraiment dire pour ça :/
    Effets voulus : Alors déjà il faudrait des overflow pour chaque case, pour les onglets ce serait au survol ou au clique de la souris ( à vous de choisir) et enfin, l'onglet où on se trouve doit être opaque et l'autre moins. Et enfin, un titre au dessus de chaque case (j'ai oublié de le mettre dans le schéma) et un titre au dessus de la fiche pour mettre le nom de la personne.

    Ressources
    Je n'en ai pas et il ne devrait pas y en avoir ^^

    Autres précisions ?
    Un grand grand grand merci d'avance à vous ^^
    (Ps : c'est un formulaire qui devra apparaître dans une balise code pour que les membres puissent copier ce code et le coller dans leurs présentation. J'espère que ce sera faisable sinon n'hésitez pas à me proposer des solutions ^^) Merci d'avance encore une fois !
    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Sam 10 Sep - 8:48

    Un petit up !
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 22 Sep - 22:56

    Salut!

    C'est toujours d'actualité? Merci de donner de tes nouvelles dans les 10 prochains jours si tu ne veux pas que le sujet soit archivé ^^



    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Sam 24 Sep - 8:42

    Oui toujours d'actu !
    • Revenir en haut
    Yukimura Esuki
    Yukimura Esuki
    MasculinAge : 28Messages : 131

    Sam 8 Oct - 13:45

    Avant édit:

    Edit pour dire que le sujet n'est plus d'actualité.
    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Mar 25 Oct - 9:30

    Yukimura Esuki a écrit:
    Avant édit:

    Edit pour dire que le sujet n'est plus d'actualité.

    Je reprends enfin mon projet après une très très trèèèèèès longue absence donc je relance mon sujet.
    Merci d'avance ^^
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Jeu 27 Oct - 22:01

    Je vais tenter...
    Je promet rien, mais je bais tenter XD.
    Est ce que tu pourrais juste l'indiquer la largeur et le longueur de la fiche stp Wink
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Ven 28 Oct - 0:32

    Tu peux suivre l'avance de ta fiche ici :
    Sa prends longtemps, j'ai mis 2h30 à coder ce petit bout de code alors sois patient =D

    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Ven 28 Oct - 10:11

    Coucou !
    Merci beaucoup de prendre ma demande en charge ^^
    Ne t'inquiète pas, prends ton temps ^^ Comme on dit il vaut mieux lent mais bien fait que rapide mais mal fait ^^
    Pour la largeur, celle que tu as déjà mit me convient tout à fait. La longueur c'est pareille ^^
    Merci encore :p
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Ven 28 Oct - 16:02

    Reuh !
    Parfait que sa te convienne !
    Une question : Cela te dérangé que les rectangles de l'onglet RPG ne soit pas visible si le curseur n'est pas sur "RPG ?"

    Tu as une préférence de police ? De taille ? Bref, tu veux me donner des petites indications ou j'ai carte blanche ?
    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Ven 28 Oct - 16:56

    Non ça ne me dérange pas ^^ Je pense que ma demande est déjà très dur donc je ne vais pas en rajouté !
    Tu as carte blanche Very Happy
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Sam 29 Oct - 15:29

    Reuh !

    J'aurais besoin de ton avis pour les boutons RPG et IRL, réactualisé le lien Wink. Cette taille te convient ? Plus grand ?
    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Dim 30 Oct - 12:15

    Hey ! Oui tout me convient ^^
    Merci beaucoup de ta rapidité ^^
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Mer 2 Nov - 18:27

    J'ai tout fini !
    Tu peux admirer le résultat ici :



    Des problèmes ?
    Des questions ?
    Tout est bon ?

    Tu veux que je te donne un code expliqué ou pas ?
    Ne prends pas tout de suite ce code, il est pas complet :)
    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Sam 5 Nov - 18:59

    Coucou !
    Tout d'Abors merci beaucoup a toi pour cette fiche !
    Comme tu me l'avais dit, il faut rester sur l'onglet pour voir le contenu. C'est un peu penible avec ma tablette mais c'est pas grave ^^ par contre les contenus sont très décalés vers la droite. Je sais pas si c'est normal ^^
    Merci encore !
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Sam 5 Nov - 19:11

    oups fufu ^^'
    normalment c'est réglé ^^'

    j'ai un problème avec le code je te l'envois quand c'est bon :)
    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Dim 6 Nov - 9:37

    Voici ton code !

    Code:

    <!DOCTYPE html>
    <html lang="fr">
    <head>
       <meta charset="utf-8" />
       <title>Fiche à Onglet</title>
       <style type=« text/css">
    #Encadrement{
      width: 805px;
      height: 140px;
      background-image: url('');
      position: relative;
      border-radius : 5px;
      border: solid 4px black;
      z-index: 1;
      transition-property: height;
      transition-duration: 0.5s;
      }
    #Encadrement:hover{
      background: white;
      height: 1205px;
      }

    }

    section{
      position: absolute;
    }

    #RPG{
      width: 400px;
      height: 140px;
      float: left;
      opacity: 1;
      font-size: 30px;
      border-bottom: solid 2px;
      border-right: solid 2px;
      background-image:url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
    }

    #RPG:hover{
      background : #d2d2d2;
    }

    #IRL{
      width: 403px;
      height: 140px;
      float: left;
      font-size: 30px;
      opacity: 1;
      border-bottom: solid 2px;
    background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg');
      text-align: center;
    }

    #IRL:hover{
      background: #d2d2d2;
    }
    /*Ne touche à rien à partir d'ici, les carré sont à modifier dans le html*/

    .menu ul li {
        display: block;
        position: relative;
        float: left;
      }
     
      .menu li ul {
        display: none;
        min-width: 150px;
      }

      .menu ul li a:hover {
        background: #999;
      }
      .menu li:hover ul {
        /* Ici l’affichage du sous-menu */
        display: block;
        position: absolute;
      }
      .menu li:hover li {
        float: none;
      }

    .Credit{
    font-size: 8px;
    margin-left: 720px;
    }

    #NomPersonnage{
    text-align: center;
    font-size: 40px;
    position: relative;
    z-index: 26;
    color: #191970;
    font-family: 'Slabo 27px', serif;
    transition-property: letter-spacing;
    transition-duration: 1s;
    }

    #NomPersonnage:hover{
    letter-spacing: 3px; 
    }
       </style>
    </head>
    <body>
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">

    <div id="NomPersonnage">
      <i>Nom du Personnage</i>
    </div> 
    <div id="Encadrement"> <!--Rectangle Background-->

    <div id="RPGInfo">
    <article id="RPG">
    <h2 style="display: inline-block;"><nav role="navigation" class="menu">
      <ul>
        <li><a href="#0" style="position: absolute; left: 110px; top: -40px; text-decoration: none; text-align: center; color: black;font-weight: lighter; width: 100%; font-family: 'Times';color: black; height: 100%; margin: 0; padding: 0; text-align: center;">RPG</a>
          <ul>
            <li><div style="position: relative; height: 300px; width: 780px; background-color: #d2d2d2; left:-70px; top:80px; border: solid 2px; font-size: 18px; overflow: auto;">Texte 1</div></li>
            <li><div style="position: relative; height: 300px; width: 500px; background-color: #d2d2d2; top: 100px; left: -70px; font-size: 18px; border: solid 2px; overflow: auto;">Texte 2</div></li>
            <li><div style="position: relative; height: 300px; width: 260px; background-color: #d2d2d2; top: -204px; left:450px; border: solid 2px; font-size: 18px; overflow: auto;">Texte 3</div></li>
            <li><div style="position: relative; height: 180px; width: 780px; background-color: #d2d2d2; top: -190px; left: -70px; font-size: 18px; border: solid 2px; overflow: auto;">Texte 4</div></li>
            <li><div style="position: relative; height: 190px; width: 780px; background-color: #d2d2d2; top: -180px; left: -70px; font-size: 18px; border: solid 2px; overflow: auto;">Texte 5</div></li>
        </li>
      </ul>
    </nav>
      </h2>
     
    </article>
      </div>

    <div id="IRLInfo">
    <article id="IRL">

    <h2 style="display: inline-block;"><nav role="navigation" class="menu">
      <ul>
        <li><a href="#0" style="position: absolute; left: -30px; top: -40px; text-decoration: none; text-align: center; color: black;font-weight: lighter; width: 100%; font-family: 'Times';color: black; height: 100%; margin: 0; padding: 0; text-align: center;">IRL</a>
          <ul>
            <li><div style="position: relative; height: 550px; width: 780px; background-color: #d2d2d2; left:-655px; top:80px; border: solid 2px; font-size: 18px; text-align: left; overflow: auto; ">Texte 1</div></li>
            <li><div style="position: relative; height: 300px; width: 780px; background-color: #d2d2d2; left:-655px; top: 100px; border: solid 2px; font-size: 18px; text-align: left; overflow: auto; ">Texte 2</div></li>
            <li><div style="position: relative; height: 130px; width: 780px; background-color: #d2d2d2; left:-655px; top: 120px; border: solid 2px; font-size: 18px; text-align: left; overflow: auto;" >Texte 3</div></li>
          </ul>
        </li>
      </ul>
    </nav>
      </h2>
      </div>
     
    </article>
    </div> 

    <div class="Credit">
    Nin, Prae, Élu et Chroma 
    </div>
    </div>
    </body>
    </html>
    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Mer 9 Nov - 13:39

    Merci beaucoup ! Je teste tous ça ^^
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 19 Nov - 6:48

    Salut!

    Est-ce que cela a été testé? Cela fonctionne? Merci de donner des nouvelles ^^



    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Sam 26 Nov - 10:28

    Bonjour le code ne marche pas, je n'ai pas le système d'onglet :/ devais je le mettre quelque part en particulier ?
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 8 Déc - 20:30

    Salut!

    Le code est à mettre dans une page html pour qu'il fonctionne. Je pense que Prae n'a pas réfléchi au fait que les membres n'ont pas tous accès à un hébergeur de page html avant de faire son code u_u

    Du coup, j'ai retouché un peu le code, voilà ce qui est à mettre dans la feuille de CSS de ton forum :
    Code:
    .Encadrement{
      margin: auto;
      width: 806px;
      background-image: url('');
      position: relative;
      border-radius : 5px;
      border: solid 4px black;
      z-index: 1;
      transition-property: height;
      transition-duration: 0.5s;
      -webkit-transition-property: height;
      -webkit-transition-duration: 0.5s;
      position: relative;
    }
    .prez_title {
        width: 400px;
        height: 140px;
        line-height: 140px;
        vertical-align: middle;
        text-decoration: none;
        text-align: center;
        color: black;
        font-weight: lighter;
        font-family: 'Times';
        color: black;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 30px;
    }
    .info_rpg,
    .info_irl {
        width: 806px;
        overflow: hidden;
        max-height: 0px;
        transition: 1s;
        -webkit-transition: 1s;
        }
    .RPG:hover ~ .info_rpg,
    .info_rpg:hover,
    .IRL:hover ~ .info_irl,
    .info_irl:hover {
        max-height: 1220px;
    }
    .prez_section {
        background-color: #d2d2d2;
        margin: auto;
        margin-top: 10px;
        border: solid 2px;
        font-size: 18px;
        overflow: auto;
    }

    .RPG {
      width: 401px;
      height: 140px;
      float: left;
      opacity: 1;
      font-size: 30px;
      border-bottom: solid 2px;
      border-right: solid 2px;
      background: url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
    }

    .RPG:hover {
      background : #d2d2d2;
    }

    .IRL{
      width: 403px;
      height: 140px;
      float: left;
      font-size: 30px;
      opacity: 1;
      border-bottom: solid 2px;
      background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg');
      text-align: center;
    }

    .IRL:hover{
      background: #d2d2d2;
    }

    .Credit{
    margin-top: 15px;
    font-size: 8px;
    text-align: right;
    padding-right: 5px;
    padding-bottom: 5px;
    }

    .NomPersonnage{
    margin: auto;
    width: 805px;
    text-align: center;
    font-size: 40px;
    position: relative;
    z-index: 26;
    color: #191970;
    font-family: 'Slabo 27px', serif;
    transition-property: letter-spacing;
    transition-duration: 1s;
    }

    .NomPersonnage:hover{
    letter-spacing: 3px; 
    }

    Et ce qui est à mettre dans les messages où le formulaire de présentation doit être :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet" /><div class="NomPersonnage"><i>Nom du Personnage</i></div><div class="Encadrement"><div class="RPG"><div class="prez_title">RPG</div></div><div class="IRL"><div class="prez_title">IRL</div></div><div  style="clear: both;"></div><div class="info_rpg"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 300px; width: 780px;">Texte 1</div><div class="prez_section" style="height: 300px; width: 500px; float: left; margin-left: 10px;">Texte 2</div><div class="prez_section" style="height: 300px; width: 268px; float: left; margin-left: 10px;">Texte 3</div><div style="clear: both; margin-bottom: 10px;"></div><div class="prez_section" style="height: 180px; width: 780px;">Texte 4</div><div class="prez_section" style="height: 190px; width: 780px;">Texte 5</div><div class="Credit">Onyx, Nin, Prae, Élu et Chroma</div></div><div class="info_irl"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 550px; width: 780px;">Texte 1</div><div class="prez_section" style="height: 300px; width: 780px;">Texte 2</div><div class="prez_section" style="height: 130px; width: 780px;">Texte 3</div><div class="Credit">Onyx, Nin, Prae, Élu et Chroma</div></div></div>



    • Revenir en haut
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Jeu 8 Déc - 20:54

    Merde désolé !
    Je n'avais pas vu les notifs ^^
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 20 Déc - 23:49

    Salut!

    @Litonya, tu as vu mon message?



    • Revenir en haut
    Litonya
    Litonya
    FémininAge : 22Messages : 149

    Sam 31 Déc - 22:02

    Oui merci beaucoup !!
    Je croyais avoir répondu pour tant x'c
    Merci encore :p
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 20 Mai - 17:06