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.


    PA onglets, infobulle

    Partagez
    avatar
    Pillonis
    MasculinAge : 21Messages : 11

    le Ven 14 Nov 2014 - 11:14

    Bonjour je propose mon premier code de PA (réalisé grâce à never-utopia o/). Il n'est pas parfait alors ce serait plus un "bout" de PA x)

    Infobulle, Onglet : Aperçu 1 - Aperçu 2


    Page d'accueil
    Code:
       <div id="pa"><div id="accueil1">
          <div id="accueil2">
            <div id="accueil3">
              <div id="accueil4">
                <div class="onglets">
                  <table>
                    <tr>
                      <td>
                        <a href="#">
                        <img class="staff" width="100" heigth="100" src="http://bastian.blog.lemonde.fr/files/vide.jpg" />
                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat ante a nulla efficitur, quis
                        lobortis neque mattis. Cras varius lobortis ipsum, eget elementum elit.</span></a>
                      </td>
                      <td>
      <span class="onglet1">
     <a href="#accueil1">Accueil</a>
      </span>
      <span class="onglet2">
     <a href="#accueil2">Contexte</a>
      </span>
      <span class="onglet3">
     <a href="#accueil3">Informations</a>
      </span>
      <span class="onglet4">
     <a href="#accueil4">Partenariats</a>
      </span>
      </td>
                      <td>
                        <a href="#">
                          <img class="staff" width="100" heigth="100" src="http://bastian.blog.lemonde.fr/files/vide.jpg" />
                          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat ante a nulla efficitur,
                          quis lobortis neque mattis. Cras varius lobortis ipsum, eget elementum elit.</span>
                        </a>
                      </td>
                    </tr>
                  </table>
                </div>
                <div id="contenu">
                  <div class="entete_contenu">Message qui sera toujours affiché</div>
                  <div id="contenu1">
                    <div class="info_accueil">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat ante a nulla
                    efficitur, quis lobortis neque mattis. Cras varius lobortis ipsum, eget elementum elit mattis malesuada. Mauris et
                    quam ut felis aliquet varius non quis mi. Quisque eu ultrices tortor, sed gravida magna. Nullam lorem lacus,
                    lacinia ac porta nec, lacinia vel arcu. Nam eu efficitur augue. Maecenas sit amet est vitae lectus rutrum imperdiet
                    a sed felis.</div>
                  </div>
                  <div id="contenu2">
                    <div class="info_accueil">Curabitur ultrices diam ac malesuada pulvinar. Aliquam lectus nisl, porttitor id mollis
                    nec, facilisis quis leo. Aliquam tincidunt, elit vel tincidunt suscipit, mi nisi volutpat orci, vel dignissim
                    turpis mi vitae quam. Mauris dignissim vel orci at molestie. Vivamus imperdiet iaculis ligula at tincidunt. Morbi
                    ac sodales enim, et sollicitudin nisi. Sed convallis gravida gravida. Integer orci felis, consectetur fringilla
                    tempor convallis, aliquam a risus. Aenean sem diam, fermentum sed nibh eget, posuere hendrerit velit. Curabitur
                    pretium justo sed feugiat euismod. Duis aliquam lacinia malesuada. Nam nec nisl id enim lobortis mattis.</div>
                  </div>
                  <div id="contenu3">
                    <div class="info_accueil">Fusce vel massa enim. Nullam luctus congue ante, vel placerat lacus vulputate a. Aliquam
                    viverra felis ut dignissim lobortis. Integer semper consectetur eleifend. Praesent non est et mi vestibulum
                    elementum nec eget purus. Praesent varius nunc et dui dictum, semper egestas purus ultrices. Aenean vel odio vitae
                    nulla vestibulum euismod vitae et erat. Vivamus commodo justo sit amet purus mattis lobortis. Ut eu lobortis ex.
                    Maecenas non bibendum dolor, a aliquet est.</div>
                  </div>
                  <div id="contenu4">
                    <div class="info_accueil">Nulla tristique lectus risus, non iaculis eros tempor non. Nam sed sapien ultricies leo
                    ultricies ultricies quis quis erat. Aenean a velit scelerisque mi varius accumsan sed id lacus. Nam vestibulum
                    lorem sit amet ligula dignissim cursus. Mauris sed blandit magna. Nam commodo dui elit, vel pharetra lectus
                    tristique id. Quisque suscipit lobortis mi, eget fermentum metus molestie non. Mauris suscipit auctor ipsum, et
                    luctus nisi vestibulum sed. Donec pellentesque turpis mauris, posuere varius neque feugiat non. Vestibulum massa
                    sem, vulputate ornare lacus feugiat, molestie varius nisl. Aliquam suscipit erat blandit ligula ultrices convallis.
                    Curabitur fermentum, metus id rhoncus interdum, arcu dui pulvinar enim, eget molestie tortor neque ut metus. Donec
                    in ante eleifend mauris tincidunt gravida at id nibh. Ut nec posuere ipsum, sit amet tempus magna. Sed tempus
                    consequat augue, ac suscipit orci mattis nec.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div></div>

    CSS
    Code:
    /*Onglets*/
    #pa .ongls{
    margin: auto;
    }
    #pa .ongl1, #pa .ongl2, #pa .ongl3, #pa .ongl4
    {
    display: block;
    width: 80px;
    height: 18px;
    background-color: #6B6B6B;
    border-radius: 10px;
    border-left: 3px solid black;
    border-right: 3px solid black;
    }
    #pa .ongl1:hover, #pa .ongl2:hover, #pa .ongl3:hover, #pa .ongl4:hover
    {
    background-color: #4D3009;
    border-left: 3px solid black;
    border-right: 3px solid black;
    }
    #pa .onglet1 a, #pa .onglet2 a, #pa .onglet3 a, #pa .onglet4 a
    {
    text-align: center;
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none;
    color: #e5fae4;
    font-size: 12px;
    }
    #pa .onglet1 a:hover, #pa .onglet2 a:hover, #pa .onglet3 a:hover, #pa .onglet4 a:hover
    {
    color: #446291;
    }

    /*Contenu*/
    #pa #contenu
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #6B6B6B;
    font-size: 11px;
    color: #3c506f;
    margin-right: 10px;
    margin-top: -35px;
    border-left: 7px solid black;
    border-right: 7px solid black;
    border-radius: 5%;
    margin: auto;
    }

    #pa #contenu1, #pa #contenu2, #pa #contenu3, #pa #contenu4
    {
    display: none;
    }

    #pa #accueil1:target #contenu1, #pa #accueil2:target #contenu2, #pa #accueil3:target #contenu3, #pa #accueil4:target #contenu4
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: auto;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    }
    #pa .entete_contenu {
    font-style: arial;
    padding: 10px 10px 0px 10px;
    text-align: center;
    color:#8A0808;
    letter-spacing: -.5px;
    font-size: 10px;
    }
    #pa .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    #pa img{
    display: block;
    border-left: 7px solid black;
    border-right: 7px solid black;
    }

    #pa img:hover{
    border-radius: 50%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    border-left: 7px solid black;
    border-right: 7px solid black;
    border-top: 3px solid #6B6B6B;
    border-bottom: 3px solid #6B6B6B;
    }

    #pa table {
    margin:auto;
    }

    /* Infobulle */
    #pa a{
    text-decoration:none;
    }

    #pa a:hover, a:focus{
    outline:none;
    }

    #pa a span{
    text-align: justify;
    color: #3c506f;
    width:90px;
    overflow: auto;
    font-size: 11px;
    position:absolute;
    padding:5px;
    margin:auto;
    opacity:0;
    /*transform*/
    -webkit-transform:scale(0) rotateZ(-12deg);
    transform:scale(0) rotateZ(-12deg);
    /*transition*/
    -webkit-transition:all .25s;
    transition:all .25s;
    }

    #pa a:hover span, #pa a:focus span{
    border-left: 7px solid black;
    border-right: 7px solid black;
    border-radius: 5%;
    background: #6B6B6B;
    opacity:1;
    /*transform*/
    -webkit-transform:scale(1) rotateZ(0);
    transform:scale(1) rotateZ(0);
    }

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Mar 21 Avr 2015 - 22:34

    Hello !
    Désolée du temps qui a été mis pour te répondre, mais on a eu comme qui dirait un soucis avec ta PA :hum: En fait rien qu'en testant ton code sans le lire il déforme la barre de navigation et l'affiche en colonne.

    Autre chose, le crédit vers Never-Utopia est obligatoire ! Avec ou sans ton pseudo c'est comme tu le désires (:.

    Ensuite ce n'est qu'un conseil mais si tu veux des remerciements ou des traces du passages des gens qui prendront ton code, il vaut mieux mettre les codes sous la balise
    Code:
    [hide][/hide]
    . Ce n'est qu'un conseil, ce n'est en aucun cas obligatoire et c'est à l'appréciation de celui qui poste !

    Et il y a aussi des préfixes utilisés qui n'ont plus lieu d'être et qui alourdissent le code (seul le webkit est nécessaire pour safari).

    Voilà, si tu voulais bien venir faire ces modifications pour que je puisse valider ton LS !
    Si jamais tu as des questions ou besoin d'aide n'hésite surtout pas, je ne suis pas un tyran (:


      La date/heure actuelle est Mer 20 Juin 2018 - 11:37