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 :
Carte Fnac+ Jackpot avec 30€ offerts sur le ...
Voir le deal
19.99 €

    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 17:54

    Rappel du premier message :

    Salut salut x)

    Voici donc une nouvelle PA à remplir ensuite par vos soins, sous forme d'onglets latéraux mais dont le contenu s'affiche en cliquant avec l'emploi du "focus" en pseudo-class CSS (pour ceux à qui ça parle^^).
    Un petit aperçu tout d'abord :

    Lien Forum Test

    Il s'agit de la troisième PA, celle ayant une image manga et en titre "Welcome + What's up ?".

    Information importante : j'ai voulu ici utiliser le "focus" en alternative au "target" pour créer un effet au clic, et non au survol. Que ça vous parle ou non peu importe, sachez juste qu'il y a un "défaut" avec l'utilisation du focus, c'est que lorsqu'on clique aille ça l'enlève. Du coup, lorsque vous êtes sur le contenu de l'un des onglets et que vous cliquez sur la page, que ce soit à l'intérieur ou à l'extérieur, vous revenez sur le contenu par défaut. Je vous rassure cependant si vous comptez mettre des liens dans vos contenus, même si le fait de cliquer ramène au contenu par défaut le lien fonctionnera quand même.
    Sachez le cependant avant de l'utiliser.


    Installation HTML

    Allez dans "Affichage" > Page d'accueil > Généralités, puis affichez le code html suivant :

    Code:
    <div id="pafocus_head"></div><div id="pafocus_body"><div id="pafocus"><div class="pafocus_onglet1" tabindex="0">Titre 1<div class="pafocus_contenu1"><div class="pafocus_contenu">Contenu 1</div>
    </div></div><div class="pafocus_onglet2" tabindex="0">Titre 2<div class="pafocus_contenu2"><div class="pafocus_contenu">Contenu 2</div>
    </div></div>  <div class="pafocus_onglet3" tabindex="0">Titre 3<div class="pafocus_contenu3"><div class="pafocus_contenu">Contenu 3</div>
    </div></div><div class="pafocus_contenu4"><div class="pafocus_contenu">Contenu défaut</div></div>
    </div>
    </div><div id="pafocus_foot"></div>


    Installation CSS

    Pour la mettre en forme, allez dans votre feuille CSS pour y mettre le css ci-dessous :

    Code:
    /* PA ONGLETS LATERAUX ONCLIC EN FOCUS */

    #pafocus_head
    {
      width: 980px;
      height: 151px;
      background: url(#) no-repeat;
    }
    #pafocus_body
    {
      width: 980px;
      height: 340px;
      background: url(#) no-repeat;
    }
    #pafocus_foot
    {
      width: 980px;
      height: 109px;
      background: url(#) no-repeat;
    }

    #pafocus
    {
      padding-top: 20px;
      padding-bottom: 20px;
      text-align: right;
    }
    .pafocus_onglet1
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 10px;
      background: #d39b69;
      border: 1px solid #cf6f1d;
      box-shadow: 0px 0px 4px #493b32;
      -moz-box-shadow: 0px 0px 4px #493b32;
      -o-box-shadow: 0px 0px 4px #493b32;
      -htm-box-shadow: 0px 0px 4px #493b32;
      -webkit-box-shadow: 0px 0px 4px #493b32;
      font-weight: bold;
      color: #473d36;
      text-shadow: 1px 1px 0px #f0b27e;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_onglet2
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      margin-bottom: 10px;
      background: #f1f0eb;
      border: 1px solid #d0d0cc;
      box-shadow: 0px 0px 4px #605750;
      -moz-box-shadow: 0px 0px 4px #605750;
      -o-box-shadow: 0px 0px 4px #605750;
      -htm-box-shadow: 0px 0px 4px #605750;
      -webkit-box-shadow: 0px 0px 4px #605750;
      font-weight: bold;
      color: #ba7b42;
      text-shadow: 1px 1px 0px #d4d3cf;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_onglet3
    {
      width: 150px;
      height: 20px;
      padding: 4px;
      margin-left: 0;
      background: #625c51;
      border: 1px solid #423328;
      box-shadow: 0px 0px 4px #3a372d;
      -moz-box-shadow: 0px 0px 4px #3a372d;
      -o-box-shadow: 0px 0px 4px #3a372d;
      -htm-box-shadow: 0px 0px 4px #3a372d;
      -webkit-box-shadow: 0px 0px 4px #3a372d;
      font-weight: bold;
      color: #d1d1cc;
      text-shadow: 1px 1px 0px #736f68;
      text-align: center;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_onglet1:hover, .pafocus_onglet2:hover, .pafocus_onglet3:hover
    {
      margin-left: 20px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_contenu1
    {
      position: absolute;
      z-index: 1;
      width: 700px;
      height: 340px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -40px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .pafocus_contenu2
    {
      position: absolute;
      z-index: 2;
      width: 700px;
      height: 340px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -80px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .pafocus_contenu3
    {
      position: absolute;
      z-index: 3;
      width: 700px;
      height: 340px;
      overflow: auto;
      margin-left: 200px;
      margin-top: -120px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
    }
    .pafocus_contenu4
    {
      position: absolute;
      z-index: 4;
      width: 700px;
      height: 340px;
      overflow: auto;
      margin-left: 204px;
      margin-top: -133px;
      background: #e6e6e6;
      border: 1px  solid #f5f4ee;
      box-shadow: 0px 0px 4px #38342d;
      -moz-box-shadow: 0px 0px 4px #38342d;
      -o-box-shadow: 0px 0px 4px #38342d;
      -htm-box-shadow: 0px 0px 4px #38342d;
      -webkit-box-shadow: 0px 0px 4px #38342d;
    }
    .pafocus_contenu
    {
      padding: 4px;
      color: #74685d;
      font-size: 11px;
      text-shadow: 1px 1px 0px #f7f6f0;
      text-align: justify;
      font-weight: normal;
    }
    .pafocus_onglet1:hover .pafocus_contenu1, .pafocus_onglet2:hover .pafocus_contenu2,
    .pafocus_onglet3:hover .pafocus_contenu3
    {
      margin-left: 180px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .pafocus_onglet1:focus .pafocus_contenu1, .pafocus_onglet2:focus .pafocus_contenu2,
    .pafocus_onglet3:focus .pafocus_contenu3
    {
      z-index: 10;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
    }


    Personnalisation

    Pensez surtout à changer les images d'en-tête, de corps et de pieds de PA ! Celles-ci étaient pour le commande d'un forum, donc je les ai retirées du css afin que vous puissiez mettre les votre. Mettez l'adresse de vos images à la place des # présents dans le css, entre parenthèses.
    - #pafocus_head = image d'en-tête
    - #pafocus_body = image de corps qui se répète
    - #pafocus_foot = image de pieds
    Attention aux tailles ! Vous pouvez voir que les blocs possèdent une largeur et pour certains une hauteur. N'oubliez pas de les modifier si votre image ne possède pas cette taille. La hauteur et la largeur des blocs doivent correspondre aux images.
    Si vous ne voulez pas vous embêter avec trois images pour faire votre bloc, enlevez les blocs #pafocus_head et #pafocus_foot pour ne garder que le corps (#pafocus_body) et mettez-lui une couleur de fond, bordures, ombres etc...
    Pour le reste, il s'agit essentiellement de couleur, y compris pour les petits onglets.

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:50, édité 1 fois



    sign
    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Lun 18 Fév 2013 - 17:21

    Merci ^^
    Tempo
    Tempo
    MasculinAge : 32Messages : 22

    Mar 19 Fév 2013 - 21:28

    Merci, c'est cool.
    Tamashi
    Tamashi
    MasculinAge : 29Messages : 57

    Mer 20 Fév 2013 - 3:47

    merci
    Themadlea
    Themadlea
    FémininAge : 26Messages : 7

    Jeu 21 Fév 2013 - 17:42

    Waah,comment c'est trop la classe,merci pour ce beau tuto *^*
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 36Messages : 215

    Dim 24 Fév 2013 - 16:29

    Un gros merci !!



    ....
    Draigon
    Draigon
    MasculinAge : 27Messages : 20

    Dim 24 Fév 2013 - 23:32

    Merci
    LickingBoot
    LickingBoot
    FémininAge : 25Messages : 503

    Dim 24 Fév 2013 - 23:42

    Merci



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 557826ilovedoudousign
    avatar
    TATACARO13
    FémininAge : 49Messages : 80

    Lun 25 Fév 2013 - 18:58

    merci



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 967953logodusite

    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 381658signatureBAU
    Lysa-Elaye
    Lysa-Elaye
    FémininMessages : 20

    Mar 26 Fév 2013 - 1:38

    Merci beaucoup :)
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Lun 4 Mar 2013 - 11:38

    Merci pour cette PA, je vais la tester!
    A trés vite!
    Tchii!
    SeshiroLoint
    SeshiroLoint
    MasculinAge : 31Messages : 11

    Ven 8 Mar 2013 - 18:21

    Merci !
    miss69
    miss69
    FémininAge : 40Messages : 40

    Lun 11 Mar 2013 - 18:22

    Bonjour,

    J'aime beaucoup le rendu donc j'aimerai bien voir ce que cela donne et si j'utilise, je n'oublierai pas le crédit.
    Little_Choups
    Little_Choups
    FémininAge : 41Messages : 12

    Mar 12 Mar 2013 - 23:46

    Superbe ! Merci beaucoup =)
    StrongerEmpire
    StrongerEmpire
    MasculinAge : 30Messages : 21

    Mer 13 Mar 2013 - 4:19

    merci



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 GbwQm
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 32Messages : 76

    Mer 13 Mar 2013 - 10:23

    merci pour l'astuce =)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 Bannol1xj5
    gohan59750
    gohan59750
    MasculinAge : 30Messages : 148

    Ven 15 Mar 2013 - 17:57

    Merci



    Scavenger
    Scavenger
    MasculinAge : 31Messages : 1501

    Ven 15 Mar 2013 - 18:55

    Moi je veux voir le tuto. >.<
    Merci bien



    Beaummont
    Beaummont
    FémininAge : 37Messages : 19

    Ven 15 Mar 2013 - 21:43

    Merci beaucoup!



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 Irisfff1
    Luke McAlister
    Luke McAlister
    MasculinAge : 26Messages : 45

    Ven 15 Mar 2013 - 21:57

    Encore un fois un grand merci à toi ! Very Happy
    Anonymous
    Invité

    Sam 16 Mar 2013 - 2:36

    Merci (:
    Vani
    Vani
    FémininAge : 40Messages : 154

    Lun 18 Mar 2013 - 18:09

    Ca fait chouette comme ça. ^^
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Lun 18 Mar 2013 - 18:27

    Thanks!



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 707828SignArthur2
    Linn
    Linn
    FémininAge : 23Messages : 24

    Mar 19 Mar 2013 - 16:11

    C'est superbe merci !:)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 6 763787neverulinn
    Ryuu
    Ryuu
    FémininAge : 30Messages : 61

    Mer 20 Mar 2013 - 11:12

    Merci <3



    Spitfire
    Spitfire
    FémininAge : 30Messages : 55

    Mer 20 Mar 2013 - 22:42

    Merci ! Je suis curieuse de voir comment c'est construit !
    Contenu sponsorisé


      La date/heure actuelle est Ven 4 Oct 2024 - 7:15