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 : -40%
Tefal Ingenio Emotion – Batterie de cuisine 10 ...
Voir le deal
59.99 €

    (ONYX) Signature codée à onglets

    .Aelya.
    .Aelya.
    FémininAge : 30Messages : 2162

    Mer 24 Sep 2014 - 19:35

    Rappel du premier message :

    Ma demande



    Bonjouur, cela fait longtemps que je voudrais une petite signa' codée, donc je me lance!

    Schéma(s) et Eléments
    Schémas :
    Spoiler:
    Tailles des éléments : Taille comme sur le schéma je pense.
    Version de votre forum : PHPBB2


    Ressources
    L'image du fond :
    Spoiler:

    La typo s'appelle "Bellerose" et les 2 codes couleur sont : #fe285a & #c8254b.


    Autres précisions ?
    Un grand merci ! =D


    Dernière édition par Madii-x le Ven 26 Sep 2014 - 19:29, édité 1 fois




    (ONYX) Signature codée à onglets - Page 3 1E4PE
    .Aelya.
    .Aelya.
    FémininAge : 30Messages : 2162

    Sam 27 Sep 2014 - 20:52

    Ok ! Alors voilà la partie du code :

    Code:
    <div id="contenu_ongletii_3eme" class="contenu_ongletii">
            <div class="inside_3">
              <img src="http://img15.hostingpics.net/pics/968364Sanstitre1.png" alt=" " class="imgii" />
              <div class="textii">
                Moi c'est Madii (Madison). Je suis une jeune fille de 20 ans et je suis Belge :3 Je pratique l'infographie depuis environ 6 ans, et j'ai un ptit diplôme technique en plus du Bac :) Je travaille principalement sur Photoshop CC et parfois sur Illustrator CC. Je sais faire un peu de tout, mais mon style de prédilection est basé sur les mangas x) Je suis graphiste sur 2 forums, ainsi qu'admin sur un et fondatrice d'un petit dernier :3. Voili voilou, biiises !
              </div>
              <div align="right" class="linksii">
                <a href="http://graphic-wild.forumgratuit.be/u1" target="_blank">Profil</a>
                <a href="http://madiix.jimdo.com/" target="_blank">Site</a>
                <a href="http://graphic-wild.forumgratuit.be/privmsg?mode=post&u=1" target="_blank">MP</a>
              </div>

    Est-ce que tu sais me le modifier comme tu as dit, et me renvoyer le code ? :p Donc crédit en gris clair à droite, et les 3 liens à gauche en dessous de l'image x)




    (ONYX) Signature codée à onglets - Page 3 1E4PE
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 27 Sep 2014 - 22:13

    Ca t'irais comme ça : http://t-alzufen.forumactif.org/h9-test (J'ai l'impression de voler le taff à Onyx vu que c'est son code, donc me remercie pas, remercie là elle hein :v)

    Si oui, utilise ça :

    Code:
    <div id="contenu_ongletii_3eme" class="contenu_ongletii">
            <div class="inside_3">
              <img src="http://img15.hostingpics.net/pics/968364Sanstitre1.png" alt=" " class="imgii" />
              <div class="textii">
                Moi c'est Madii (Madison). Je suis une jeune fille de 20 ans et je suis Belge :3 Je pratique l'infographie depuis environ 6 ans, et j'ai un ptit diplôme technique en plus du Bac <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /> Je travaille principalement sur Photoshop CC et parfois sur Illustrator CC. Je sais faire un peu de tout, mais mon style de prédilection est basé sur les mangas x) Je suis graphiste sur 2 forums, ainsi qu'admin sur un et fondatrice d'un petit dernier :3. Voili voilou, biiises !
              </div>
              <div align="left" class="linksii">
              <a href="http://graphic-wild.forumgratuit.be/u1" target="_blank">Profil</a>
                <a href="http://madiix.jimdo.com/" target="_blank">Site</a>
                  <a href="http://graphic-wild.forumgratuit.be/privmsg?mode=post&u=1" target="_blank">MP</a>
                <span style="float: right;"><a href="http://never-utopia.com">Never-Utopia</a></span>
              </div>
            </div>
    </div>

    Et dans le css, il va te falloir mettre ceci :
    Code:
    /*Image dans contenu onglet MOI*/
    .imgii {
      float: left;
      height: 170px;
      border: 1px solid #fe285a;
      margin-right: 10px;
    }

    /*Liens dans contenu onglet MOI en bas*/
    .linksii a {
      display: inline-block;
      color: #fe285a;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none!important;
      margin-right: 20px;
      margin-bottom: -8px;
    }
    .linksii span a{
    color: grey;
    }
    /*Liens au survol dans contenu onglet MOI en bas*/
    .linksii a:hover {
      color: #7a162d;
      font-size: 14px;
    }
    .linksii span a:hover{
    color: black;
    }



    .Aelya.
    .Aelya.
    FémininAge : 30Messages : 2162

    Dim 28 Sep 2014 - 13:55

    Merci c'est fait! :) Dernière petite chose, est-il possible de déplacer les 3 liens pour qu'ils soient vraiment centrés en dessous de l'image ?




    (ONYX) Signature codée à onglets - Page 3 1E4PE
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Dim 28 Sep 2014 - 14:18

    Essaye avec ce CSS là :

    Code:
    /*Fond par HTML*/
    body {
      margin: 0px;
    }

    /*Tableau qui entoure la sign*/
    .signii {
      border: 1px solid #fe285a;
      width: 502px;
      height: 218px;
    }
     
    /*Onglets*/
    .ongletii {
      background: #fe285a;
      height: 20px;
      font-size: 16px;
      color: white;
      font-family: abel;
      text-transform: uppercase;
      text-align: center;
      border-bottom: 1px solid #fe285a;
    }
    /*Onglet au survol*/
    .ongletii_0:hover {
      cursor: pointer;
    }
    /*Onglet actif*/
    .ongletii_1 {
      background: #c8254b;
    }
     
    /*Contenu des onglets*/
    .contenu_ongletii {
      background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
      display: none;
      font-family: abel;
      color: #fe285a;
      font-size: 14px;
    }
     
    /*Contenu onglet SIGNATURE*/
    .inside_1 {
      height: 200px;
    }

    /*Contenu onglet CADEAUX*/
    .inside_2 {
      overflow: auto;
      height: 200px;
    }

    /*Contenu onglet MOI*/
    .inside_3 {
      padding: 9px;
      padding-right: 0px;
      height: 182px;
      position: relative;
    }

    /*Image dans contenu onglet MOI*/
    .imgii {
      float: left;
      height: 170px;
      border: 1px solid #fe285a;
      margin-right: 10px;
    }
     
    /*Texte dans contenu onglet MOI*/
    .textii {
      height: 172px;
      padding-right: 10px;
      text-align: justify;
      overflow: auto;
    }

    .linksii {
    width: 465px;
    position: absolute;
    right: 0;
    }
     
    /*Liens dans contenu onglet MOI en bas*/
    .linksii a {
      display: inline-block;
      color: #fe285a;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none!important;
      margin-right: 20px;
      margin-bottom: -8px;
    }
    .linksii span a{
    color: grey;
    }
    /*Liens au survol dans contenu onglet MOI en bas*/
    .linksii a:hover {
      color: #7a162d;
      font-size: 14px;
    }
    .linksii span a:hover{
    color: black;
    }



    .Aelya.
    .Aelya.
    FémininAge : 30Messages : 2162

    Dim 28 Sep 2014 - 16:45

    Voilà c'est nickel, merci ! :)




    (ONYX) Signature codée à onglets - Page 3 1E4PE
    Contenu sponsorisé


      La date/heure actuelle est Ven 3 Mai 2024 - 5:46