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 :
SSD interne Crucial BX500 2,5″ SATA – 500 ...
Voir le deal
29.99 €

    Signature d'Onyx avec les 4 onglets latéraux

    Nyotengu
    Nyotengu
    FémininAge : 30Messages : 85

    Mer 8 Mar 2017 - 19:25

    Bonjour à vous. J'ai une demande concernant une signature d'Onyx : Signature avec 4 onglets latéraux. Merci d'avance pour votre aide. Par contre, il me semble que une demande engendre une perte de point (PeaNUt's). Si c'est le cas pour ma demande je la retire.

    Tutoriel : https://www.never-utopia.com/t59769-signature-avec-4-onglets-lateraux

    Personnalisation : Changer l’orientation des onglets de verticale à horizontal. Possibilité de mettre une image des fonds différents dans le gros rectangle .

    Schéma :

    Signature d'Onyx avec les 4 onglets latéraux 1236

    Signature d'Onyx avec les 4 onglets latéraux Raxs


    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 16 Mar 2017 - 18:03

    Salut!

    Oui, la demande nécessite des peanut's et ces peanuts sont dépensés dès que tu postes un message, donc ils sont retirés de ton compte. Cependant, ce n'est que 10 peanuts, donc assez peu et facilement récupérable en postant des messages ailleurs.

    Juste comme cela, quel est le nom que tu souhaites pour les différents onglets?



    • Revenir en haut
    Nyotengu
    Nyotengu
    FémininAge : 30Messages : 85

    Lun 20 Mar 2017 - 9:06

    Merci de ta réponse. Oui, j'accepte de continuer ma demander. Je pensais que je perdrais bien plus que ça. Je te laisse mettre les noms de ton choix pour les onglets.


    Dernière édition par Nyotengu le Mar 21 Mar 2017 - 20:34, édité 1 fois
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 20 Mar 2017 - 17:50

    Salut!

    Alors voilà le code pour ce que tu veux:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Signature de NOM</title>
      <style type="text/css">
        /*Enlève les marges inutiles*/
        body {
        margin: 0px;
        }
       
        /*Liens*/
        a {
        color: #C3A7CF;
        text-decoration: none;
        }
        /*Liens survolés*/
        a:hover {
        color: #d2c3d9;
        }
         
        /*Corps de la signature*/
        .sign_onyx {
        width: 600px;
        height: 200px;
        margin: auto;
        background: #482d52;
        position: relative;
        color: #c4c4c4;
        font-family: 'Arial';
        font-size: 12px;
        z-index: 1;
        }
             
        /*Blocs qui contiennent les onglets et leur contenu*/
        .sign_onyx_bloc {
        position: absolute;
        width: 100px;
        height: 25px;
        overflow: hidden;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        }
        .sign_onyx_bloc:hover {
        width: 600px;
        height: 200px;
        }
       
       
        /*Bloc de base*/
        #sign_onyx_contenu_0 {
        background-image: url('URL IMAGE');
        }
       
        /*Bloc 1*/
        #sign_onyx_1 {
        left: 0px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 2*/
        #sign_onyx_2 {
        left: 100px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 3*/
        #sign_onyx_3 {
        left: 200px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 4*/
        #sign_onyx_4 {
        left: 300px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 5*/
        #sign_onyx_5 {
        left: 400px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 6*/
        #sign_onyx_6 {
        left: 500px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
       
        #sign_onyx_2:hover,
        #sign_onyx_3:hover,
        #sign_onyx_4:hover,
        #sign_onyx_5:hover,
        #sign_onyx_6:hover {
        left: 0px;
        }
     
        /*Onglets*/
        .sign_onyx_onglet {
        position: absolute;
        height: 16px;
        width: 92px;
        padding: 4px;
        padding-top: 5px;
        text-align: center;
        background: #86708E;
        z-index: 2;
        color: #ffffff;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        top: 0px;
        left: 0px;
        }
         
        /*Onglet de Avatars*/
        #sign_onyx_onglet_1 {
        top: 0px;
        left: 0px;
        }
        /*Onglet de Moi*/
        #sign_onyx_onglet_2 {
        top: 0px;
        left: 0px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
        /*Onglet de Signatures*/
        #sign_onyx_onglet_3 {
        top: 0px;
        left: 0px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
        /*Onglets de Autres*/
        #sign_onyx_onglet_4 {
        top: 0px;
        left: 0px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
        /*Onglets de Autres*/
        #sign_onyx_onglet_5 {
        top: 0px;
        left: 0px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
        /*Onglets de Autres*/
        #sign_onyx_onglet_6 {
        top: 0px;
        left: 0px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
       
        #sign_onyx_2:hover #sign_onyx_onglet_2 {
        left: 100px;
        }
        #sign_onyx_3:hover #sign_onyx_onglet_3 {
        left: 200px;
        }
        #sign_onyx_4:hover #sign_onyx_onglet_4 {
        left: 300px;
        }
        #sign_onyx_5:hover #sign_onyx_onglet_5 {
        left: 400px;
        }
        #sign_onyx_6:hover #sign_onyx_onglet_6 {
        left: 500px;
        }
         
        /*Chagement de couleur des onglets au survol*/
        .sign_onyx_bloc:hover .sign_onyx_onglet {
        background: #482d52;
        }
         
        /*Contenus*/
        .sign_onyx_contenu {
        position: absolute;
        width: 590px;
        height: 165px;
        padding: 5px;
        text-align: center;
        background: #482d52;
        }
         
        /*Contenu Avatars*/
        #sign_onyx_contenu_1 {
        top: 25px;
        left: 0px;
        }
        /*Contenu Moi*/
        #sign_onyx_contenu_2 {
        top: 25px;
        left: 0px;
        }
        /*Contenu Signatures*/
        #sign_onyx_contenu_3 {
        top: 25px;
        left: 0px;
        }
        /*Contenu Autres*/
        #sign_onyx_contenu_4 {
        top: 25px;
        left: 0px;
        }
        /*Contenu Autres*/
        #sign_onyx_contenu_5 {
        top: 25px;
        left: 0px;
        }
        /*Contenu Autres*/
        #sign_onyx_contenu_6 {
        top: 25px;
        left: 0px;
        }
         
        /*Contenu normal du début*/
        #sign_onyx_contenu_0 {
        top: 25px;
        left: 0px;
        }
         
        /*Ajout d'une barre de défilement dans les contenus*/
        .sign_onyx_contenu_in {
        overflow: auto;
        height: 165px;
        margin-right: -5px;
        padding-right: 5px;
        }
         
        /*Tableau des avatars*/
        .sign_onyx table {
        width: 380px;
        margin: auto;
        }
        /*Cellules pour le tableau des avatars*/
        .sign_onyx td {
        color: #c4c4c4;
        font-family: 'Arial';
        font-size: 12px;
        width: 170px;
        padding: 2px;
        padding-left: 5px;
        padding-right: 10px;
        }
         
        /*Image du bloc Moi*/
        .moi_image {
        float: left;
        width: 100px;
        height: 180px;
        margin-top: 5px;
        margin-left: 5px;
        }
        /*Nom du bloc Moi*/
        .moi_nom {
        float: left;
        display: block;
        width: 415px;
        line-height: 25px;
        font-family: 'Monotype Corsiva', cursive;
        font-size: 24px;
        color: white;
        margin-top: 5px;
        margin-left: 10px;
        margin-bottom: 10px;
        text-align: center;
        }
        /*Texte du bloc Moi*/
        .moi_texte {
        float: left;
        margin-left: 10px;
        padding-right: 5px;
        width: 415px;
        height: 145px;
        overflow: auto;
        text-align: justify;
        }
      </style> 
    </head>
    <body>
      <div class="sign_onyx">
       
       
        <div style="height: 160px;" id="sign_onyx_contenu_0" class="sign_onyx_contenu">
          <div class="sign_onyx_contenu_in">
            <br />
            <img alt="Signature de base" src="URL" />
          </div>
        </div>
       
       
        <div id="sign_onyx_1" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_1" class="sign_onyx_onglet">
            Avatars
          </div>
          <div id="sign_onyx_contenu_1" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              <table align="center" cellspacing="0" border="0">
                <tbody>
                 
                  <tr>
                    <td valign="center" align="center">
                      Merci à XXX pour cet avatar ♥
                    </td>
                    <td valign="center" align="center">
                      Merci à XXX pour cet avatar ♥
                    </td>
                  </tr>
                 
                  <tr>
                    <td valign="center" align="center">
                      <img src="URL" alt="Avatar" />
                    </td>
                    <td valign="center" align="center">
                      <img src="URL" alt="Avatar" />
                    </td>
                  </tr>
                 
                </tbody>
              </table>
            </div>
          </div>
        </div>
       
       
        <div id="sign_onyx_2" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_2" class="sign_onyx_onglet">
            Moi
          </div>
          <div id="sign_onyx_contenu_2" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              <img alt="Image" src="URL" class="moi_image" />
              <span class="moi_nom">NOM</span>
              <div class="moi_texte">
                Bla bla bla...
              </div>
            </div>
          </div>
        </div>
       
       
        <div id="sign_onyx_3" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_3" class="sign_onyx_onglet">
            Signatures
          </div>
          <div id="sign_onyx_contenu_3" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Merci à mon XXX pour cette signature ♥<br />
              <img src="URL" alt="Signature" /><br />
              <br />
              Merci à mon XXX pour cette signature ♥<br />
              <img src="URL" alt="Signature" />
            </div>
          </div>
        </div>
       
       
        <div id="sign_onyx_4" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_4" class="sign_onyx_onglet">
            Autres
          </div>
          <div id="sign_onyx_contenu_4" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Codage par <a target="_blank" href="http://www.never-utopia.com/u27">Onyx</a> de <a target="_blank" href="http://www.never-utopia.com/">Never-Utopia</a>.
              <br /><br />
              Bla bla bla.
            </div>
          </div>
        </div>
         
       
        <div id="sign_onyx_5" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_5" class="sign_onyx_onglet">
            Autres
          </div>
          <div id="sign_onyx_contenu_5" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu du 5e onglet bla bla bla.
            </div>
          </div>
        </div>
       
       
        <div id="sign_onyx_6" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_6" class="sign_onyx_onglet">
            Autres
          </div>
          <div id="sign_onyx_contenu_6" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu du 6e onglet bla bla bla.
            </div>
          </div>
        </div>
           
       
      </div>
    </body>
    </html>

    Pour changer l'image de background, c'est cette partie :
    Code:
        /*Bloc de base*/
        #sign_onyx_contenu_0 {
        background-image: url('URL IMAGE');
        }
       
        /*Bloc 1*/
        #sign_onyx_1 {
        left: 0px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 2*/
        #sign_onyx_2 {
        left: 100px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 3*/
        #sign_onyx_3 {
        left: 200px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 4*/
        #sign_onyx_4 {
        left: 300px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 5*/
        #sign_onyx_5 {
        left: 400px;
        top: 0px;
        background-image: url('URL IMAGE');
        }
        /*Bloc 6*/
        #sign_onyx_6 {
        left: 500px;
        top: 0px;
        background-image: url('URL IMAGE');
        }



    • Revenir en haut
    Nyotengu
    Nyotengu
    FémininAge : 30Messages : 85

    Mar 21 Mar 2017 - 20:36

    C'est parfait ! Je t'en remercie.
    • 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 - 22:46