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 à ne pas rater :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G Double SIM à 599€
599 €
Voir le deal

    (Praecursator) Fiche de Présentation onglets

    Litonya
    Litonya
    FémininAge : 23Messages : 149

    Sam 3 Sep 2016 - 14: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 : 23Messages : 149

    Sam 10 Sep 2016 - 10:48

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

    Ven 23 Sep 2016 - 0: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 : 23Messages : 149

    Sam 24 Sep 2016 - 10:42

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

    Sam 8 Oct 2016 - 15:45

    Avant édit:

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

    Mar 25 Oct 2016 - 11: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 : 22Messages : 77

    Ven 28 Oct 2016 - 0: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 : 22Messages : 77

    Ven 28 Oct 2016 - 2: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 : 23Messages : 149

    Ven 28 Oct 2016 - 12: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 : 22Messages : 77

    Ven 28 Oct 2016 - 18: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 : 23Messages : 149

    Ven 28 Oct 2016 - 18: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 : 22Messages : 77

    Sam 29 Oct 2016 - 17: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 : 23Messages : 149

    Dim 30 Oct 2016 - 13:15

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

    Mer 2 Nov 2016 - 19: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 : 23Messages : 149

    Sam 5 Nov 2016 - 19: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 : 22Messages : 77

    Sam 5 Nov 2016 - 20: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 : 22Messages : 77

    Dim 6 Nov 2016 - 10: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 : 23Messages : 149

    Mer 9 Nov 2016 - 14:39

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

    Sam 19 Nov 2016 - 7:48

    Salut!

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



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

    Sam 26 Nov 2016 - 11: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 2016 - 21: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 : 22Messages : 77

    Jeu 8 Déc 2016 - 21:54

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

    Mer 21 Déc 2016 - 0:49

    Salut!

    @Litonya, tu as vu mon message?



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

    Sam 31 Déc 2016 - 23: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 Dim 24 Nov 2024 - 21:32