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.


    Demande de Caly

    Partagez
    avatar
    Caly.s
    FémininAge : 18Messages : 13

    le Lun 10 Avr 2017 - 17:15

    Ma demande



    Bonjour, cela fait un plus d'un/deux mois que j'essaie de reproduire et de modifier un codage sans parvenir à mes fins, donc je me réfère à vous pour ça, car je pense que la, je n'ai pas les qualifications requises. Merci beaucoup ♥


    Schéma(s) et Eléments


    http://www.ohmydollz.com/?p=fiche&pseudo=ellanamistic
    Sur cette page, vers la fin il y a un intitulé "Récapitulatif des pièces" et juste en dessous on voit trois icônes de projet. Au survol de ces icônes, un texte différent apparaît.
    C'est le codage des éléments sous cet intitulé que j'aimerais.
    Lorsque j'ai essayé de le faire moi-même, les codages apparaissaient en mode HTML mais ma page restait vide, j'ai tout essayé donc je sèche vraiment...


    Ressources


    Rien de précis, je fais moi même mes blocs et mes designs.


    Autres précisions ?


    Sur la page, il y a trois icônes, serait-il possible que vous le fassiez pour 8 car j'ai 8 choses à mettre dans ces cases.

    avatar
    Onyx
    FémininAge : 23Messages : 2883

    le Lun 10 Avr 2017 - 20:07

    Salut!

    Alors je vais simplement te donner un truc de base et te laisse jouer avec pour obtenir ce que tu veux :

    HTML
    Code:
    <div class="bloc_onglet_total">
      <span class="un_onglet" id="un_onglet1">Titre 1</span>
      <span class="un_onglet" id="un_onglet2">Titre 2</span>
      <span class="un_onglet" id="un_onglet3">Titre 3</span>
      <span class="un_onglet" id="un_onglet4">Titre 4</span>
      <span class="un_onglet" id="un_onglet5">Titre 5</span>
      <span class="un_onglet" id="un_onglet6">Titre 6</span>
      <span class="un_onglet" id="un_onglet7">Titre 7</span>
      <span class="un_onglet" id="un_onglet8">Titre 8</span>
      <div class="un_contenu" id="un_contenu1">Contenu 1</div>
      <div class="un_contenu" id="un_contenu2">Contenu 2</div>
      <div class="un_contenu" id="un_contenu3">Contenu 3</div>
      <div class="un_contenu" id="un_contenu4">Contenu 4</div>
      <div class="un_contenu" id="un_contenu5">Contenu 5</div>
      <div class="un_contenu" id="un_contenu6">Contenu 6</div>
      <div class="un_contenu" id="un_contenu7">Contenu 7</div>
      <div class="un_contenu" id="un_contenu8">Contenu 8</div>
    </div>

    CSS
    Code:
    /*Bloc qui contient tout*/
    .bloc_onglet_total {
      width: 851px;
      height: 227px;
      position: relative;
      text-align: center;
    }

    /*Bloc de 1 onglet*/
    .un_onglet {
      display: inline-block;
      width: 100px;
      margin-right: 5px;
      height: 20px;
      background: #000;
      border: 1px solid #353535;
      font-family: ;
      font-size: ;
      color: ;
    }
    .un_onglet:nth-last-of-type(1) {
      margin-right: 0px;
    }

    /*Bloc de 1 Contenu*/
    .un_contenu {
      position: absolute;
      top: 27px;
      left: 0px;
      width: 849px;
      height: 200px;
      background: #000;
      border: 1px solid #353535;
      font-family: ;
      font-size: ;
      color: ;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    /*Fait apparaître les onglets*/
    #un_onglet1:hover ~ #un_contenu1,
    #un_contenu1:hover,
    #un_onglet2:hover ~ #un_contenu2,
    #un_contenu2:hover,
    #un_onglet3:hover ~ #un_contenu3,
    #un_contenu3:hover,
    #un_onglet4:hover ~ #un_contenu4,
    #un_contenu4:hover,
    #un_onglet5:hover ~ #un_contenu5,
    #un_contenu5:hover,
    #un_onglet6:hover ~ #un_contenu6,
    #un_contenu6:hover,
    #un_onglet7:hover ~ #un_contenu7,
    #un_contenu7:hover,
    #un_onglet8:hover ~ #un_contenu8,
    #un_contenu8:hover {
      -webkit-transform: scale(1);
      transform: scale(1);
    }



    avatar
    Onyx
    FémininAge : 23Messages : 2883

    le Ven 21 Avr 2017 - 19:13

    Salut! Tu as vu mon message? Ça fonctionne?



    Contenu sponsorisé


      La date/heure actuelle est Lun 1 Mai 2017 - 2:21