AccueilRechercherS'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 :
ASOS : Livraison Premier à 8 €/an
8 €
Voir le deal

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

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

    le 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
    avatar
    Sheldon.C
    MasculinAge : 87Messages : 22

    le Dim 16 Déc 2012 - 13:25

    Merci :)
    Killae Adams
    Killae Adams
    FémininAge : 20Messages : 114

    le Dim 16 Déc 2012 - 13:45

    Merci ^^
    Artémis Walker
    Artémis Walker
    FémininAge : 24Messages : 54

    le Dim 16 Déc 2012 - 14:20

    Merci pour le tutoriel



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 Neveru10
    Zarwins
    Zarwins
    FémininAge : 24Messages : 155

    le Mar 18 Déc 2012 - 4:38

    Un grand merci <3



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 121217030106243656
    Ryu-Kin
    Ryu-Kin
    FémininAge : 33Messages : 125

    le Ven 21 Déc 2012 - 16:30

    Merci beaucoup !!!
    Minishiro
    Minishiro
    FémininAge : 24Messages : 288

    le Sam 22 Déc 2012 - 2:23

    Merci! :)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 WvHxu
    avatar
    KanyeWest
    MasculinAge : 29Messages : 137

    le Sam 22 Déc 2012 - 17:46

    mercii
    Kasshad
    Kasshad
    MasculinAge : 30Messages : 317

    le Sam 22 Déc 2012 - 22:06

    Tant qu'à faire x)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 Prateb
    Suika
    Suika
    FémininAge : 25Messages : 30

    le Lun 24 Déc 2012 - 17:56

    Trop beau *-* merci beaucoup!
    I.P
    I.P
    FémininAge : 27Messages : 19

    le Jeu 27 Déc 2012 - 14:23

    Merci merci merciiii!!!! Razz
    Shiryuu
    Shiryuu
    MasculinAge : 24Messages : 105

    le Jeu 27 Déc 2012 - 18:29

    Merci beaucoup, très agréable à regarder !





    [img][/img]

    Nayero
    Nayero
    MasculinAge : 24Messages : 39

    le Jeu 27 Déc 2012 - 23:37

    merci



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 Nayero10
    Lou Black
    Lou Black
    FémininAge : 23Messages : 7

    le Lun 31 Déc 2012 - 18:17

    Merci !
    SO'
    SO'
    MasculinAge : 21Messages : 23

    le Lun 31 Déc 2012 - 18:20

    Merci !!!!!!!!
    Cky
    Cky
    MasculinAge : 25Messages : 40

    le Lun 31 Déc 2012 - 23:12

    Exactement ce que je cherchais ! Merci beaucoup !!Very Happy
    Heine
    Heine
    MasculinAge : 25Messages : 169

    le Mar 1 Jan 2013 - 18:47

    J'aime ! **

    Merci et bravo ! o/



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 110407104459204818
    Ohani
    Ohani
    FémininAge : 33Messages : 43

    le Ven 4 Jan 2013 - 6:38

    Merci ^^



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 Signizt
    Cortisalia
    Cortisalia
    FémininAge : 28Messages : 89

    le Ven 4 Jan 2013 - 12:06

    La pa est tout simplement sublime ! Hâte de voir comment elle va rendre sur mon fow ! ♥ Merci ! :)
    Perle
    Perle
    FémininAge : 23Messages : 32

    le Ven 4 Jan 2013 - 21:39

    merci
    Laombre
    Laombre
    FémininAge : 24Messages : 18

    le Sam 5 Jan 2013 - 10:26

    Merci. Wink
    La ptite voix
    La ptite voix
    FémininAge : 27Messages : 99

    le Sam 5 Jan 2013 - 13:16

    merciiii
    sébastien
    sébastien
    MasculinAge : 37Messages : 642

    le Dim 6 Jan 2013 - 14:02

    merci



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 Signat10
    Alaplaya1
    Alaplaya1
    FémininAge : 28Messages : 18

    le Lun 7 Jan 2013 - 21:12

    Merci Very Happy !
    Neko Mimi
    Neko Mimi
    FémininAge : 30Messages : 165

    le Mar 8 Jan 2013 - 13:59

    Merci beaucoup **



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 Tumblr_me5uxaCZuJ1qj73e2o1_500
    Natsuo Tanacka
    Natsuo Tanacka
    MasculinAge : 23Messages : 104

    le Mer 9 Jan 2013 - 23:22

    merci



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 3 1374548104043439500
    Contenu sponsorisé


      La date/heure actuelle est Sam 8 Aoû 2020 - 4:21