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 :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 ...
Voir le deal
499 €

    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
    katia06
    katia06
    FémininAge : 54Messages : 203

    Mar 29 Jan 2013 - 20:00

    J'aimerais si possible avoir juste le panneau d'accueil que vous présentez au début du forum test, es qu'il est possible d'avoir le code
    merci d'avance et encore bravo
    biz



    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Mar 29 Jan 2013 - 20:30

    Merci ^^
    giannismoll7
    giannismoll7
    MasculinAge : 29Messages : 62

    Mar 29 Jan 2013 - 22:21

    Sparrow-style a écrit: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.


    Pour voir le contenu du tutoriel merci de poster un message à la suite !





    merci :)
    katia06
    katia06
    FémininAge : 54Messages : 203

    Mer 30 Jan 2013 - 10:18

    merci pour vos explications, mais celui qui m'interresse c'est celui qui est en tout premier, voir capture

    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 5 2013-014

    es possible d'avoir le code et les explications, car je connais peu le codage

    encore merci pour votre aide et vos superbes partages



    Amera
    Amera
    FémininAge : 31Messages : 67

    Mer 30 Jan 2013 - 21:36

    Merci beaucoup !



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 5 734690sign1
    Moriarty
    Moriarty
    FémininAge : 28Messages : 85

    Jeu 31 Jan 2013 - 12:26

    Merci !
    Arthuragon
    Arthuragon
    MasculinAge : 26Messages : 61

    Jeu 31 Jan 2013 - 20:33

    Lutipilipi
    xmina
    xmina
    FémininAge : 27Messages : 12

    Dim 3 Fév 2013 - 2:49

    mercii
    Crumaga
    Crumaga
    MasculinAge : 28Messages : 14

    Mar 5 Fév 2013 - 12:23

    Merci ! :)
    Ahleya
    Ahleya
    FémininAge : 29Messages : 23

    Mer 6 Fév 2013 - 16:20

    J'adore ham3
    Merci du partage =D



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 5 Asign
    Cydae
    Cydae
    FémininAge : 31Messages : 99

    Jeu 7 Fév 2013 - 19:17

    Merci pour les codes, cette PA est superbe!
    ♦ Mari-Jane
    ♦ Mari-Jane
    FémininAge : 31Messages : 39

    Sam 9 Fév 2013 - 23:32

    Merci Very Happy
    Flower_*
    Flower_*
    FémininAge : 29Messages : 605

    Dim 10 Fév 2013 - 11:51

    Comme d'habitude, c'est magnifique :love:
    Jona'
    Jona'
    MasculinAge : 25Messages : 65

    Dim 10 Fév 2013 - 14:05

    Voyons voir Very Happy
    Merci ^^



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 5 292891SIGNATUREIrumaNekoGirl
    warning.sign
    warning.sign
    FémininAge : 33Messages : 58

    Lun 11 Fév 2013 - 17:15

    merci Very Happy
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Mar 12 Fév 2013 - 15:15

    Captain tes codes sont toujours aussi bien réalisé j'adoooore *O* Et merci de nous les faire partager <3
    Eques
    Eques
    MasculinAge : 27Messages : 109

    Mar 12 Fév 2013 - 18:03

    merci !
    bianca ~♥~
    bianca ~♥~
    FémininAge : 55Messages : 111

    Mar 12 Fév 2013 - 21:41

    Merci,c'est très pratique :)



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 5 Coco_c11
    Synny
    Synny
    FémininAge : 22Messages : 55

    Mer 13 Fév 2013 - 15:46

    J'aime beaucoup cette P.A .
    People Are Strange
    People Are Strange
    FémininAge : 37Messages : 29

    Mer 13 Fév 2013 - 19:00

    merci *o*
    Darth Bogus
    Darth Bogus
    MasculinAge : 34Messages : 46

    Jeu 14 Fév 2013 - 18:46

    thank
    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Ven 15 Fév 2013 - 14:48

    merci
    Eerie Ange's
    Eerie Ange's
    FémininAge : 22Messages : 166

    Sam 16 Fév 2013 - 16:34

    Merci
    Seiden.
    Seiden.
    MasculinAge : 30Messages : 70

    Sam 16 Fév 2013 - 18:07

    Je vais tester celle ci... Merci pour tes codes!
    Pwaar
    Pwaar
    FémininAge : 29Messages : 107

    Dim 17 Fév 2013 - 17:27

    Très sympa, merci du partage **
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:47