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 à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    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
    Selfura
    Selfura
    MasculinAge : 32Messages : 54

    Jeu 21 Mar 2013 - 10:51

    Merci du Partage =)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 7 1420386819-sign-deathrock
    Daph
    Daph
    FémininAge : 30Messages : 67

    Sam 23 Mar 2013 - 6:07

    Merci beaucoup Very Happy



    Jill Schubert
    Jill Schubert
    FémininAge : 31Messages : 86

    Sam 23 Mar 2013 - 6:47

    J'adoore les couleurs! Very Happy Cimer :)



    "Stuffs from your friends? And what did they say?
    _That I should stay far from you."

    Catherine Stark & Jacqueline Kirk
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Sam 23 Mar 2013 - 11:01

    Comme toujours, j'ai hâte de voir cela, un grand merci!
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Sam 23 Mar 2013 - 11:18

    Coucou o/

    Merci pour ce tuto Ossan Wink

    Taktiik.

    Skyleen
    Skyleen
    FémininAge : 31Messages : 476

    Sam 23 Mar 2013 - 14:14

    Merci beaucoup à toi pour ce tuto *o*



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Imari
    Imari
    FémininAge : 40Messages : 68

    Sam 23 Mar 2013 - 17:38

    Merci pour ce code ♥



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 7 2mzbax4
    Aepique
    Aepique
    FémininAge : 32Messages : 14

    Dim 24 Mar 2013 - 13:25

    merci pour ce tuto



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 7 937136signature
    Crystal Isiliur
    Crystal Isiliur
    FémininAge : 27Messages : 16

    Lun 25 Mar 2013 - 20:24

    Merci
    SweetiePie
    SweetiePie
    FémininAge : 29Messages : 12

    Lun 25 Mar 2013 - 20:43

    Merci !
    Mahora
    Mahora
    FémininAge : 38Messages : 16

    Mar 26 Mar 2013 - 16:35

    Merci pour ce tuto l'effat à l'air vraiment sympa



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 7 Signs_14
    Jimmy Hariwin
    Jimmy Hariwin
    MasculinAge : 31Messages : 3

    Mar 26 Mar 2013 - 21:48

    Très doué ^^
    V.Child
    V.Child
    FémininAge : 28Messages : 126

    Ven 29 Mar 2013 - 22:22

    Merci du partage ^^
    Etax
    Etax
    MasculinAge : 26Messages : 168

    Sam 30 Mar 2013 - 8:56

    Merci.
    Ema Skye
    Ema Skye
    FémininAge : 25Messages : 134

    Sam 30 Mar 2013 - 11:26

    Elle est jolie, merci !
    athenais
    athenais
    FémininAge : 36Messages : 98

    Sam 30 Mar 2013 - 14:43

    Merci ♥
    Emma-Iseult
    Emma-Iseult
    FémininAge : 27Messages : 44

    Sam 30 Mar 2013 - 16:12

    Super beau, merci !
    Brodette
    Brodette
    FémininAge : 26Messages : 119

    Lun 1 Avr 2013 - 0:15

    Merci beaucoup ^^
    En tout cas, sur le forum test le rendu est très très très beau
    Aida Silphy
    Aida Silphy
    FémininAge : 27Messages : 35

    Lun 1 Avr 2013 - 11:47

    Merci
    Nahana Pinlane
    Nahana Pinlane
    FémininAge : 23Messages : 46

    Lun 1 Avr 2013 - 20:59

    Merci Very Happy
    Lust Caution
    Lust Caution
    FémininAge : 29Messages : 79

    Mar 2 Avr 2013 - 3:04

    Merci !
    Matris
    Matris
    MasculinAge : 24Messages : 58

    Mar 2 Avr 2013 - 17:25

    Merci^^



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 7 Sansti10
    Mélodie Chantante
    Mélodie Chantante
    FémininAge : 23Messages : 15

    Mer 3 Avr 2013 - 16:33

    C'est magnifique , merci du partage ! :)
    Téoz
    Téoz
    FémininAge : 35Messages : 38

    Jeu 4 Avr 2013 - 14:00

    Merci pour le tuto :p
    Bleufi
    Bleufi
    FémininAge : 28Messages : 311

    Jeu 4 Avr 2013 - 18:39

    Merci :)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 7 875686Asuna
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:50