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.

-43%
Le deal à ne pas rater :
SAMSUNG 990 PRO – SSD Interne avec dissipateur 1 To à 84,99€
84.99 € 149.99 €
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
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Jeu 10 Jan 2013 - 8:40

    Je sui véritablement fan de votre travail et admirative du temps passé pour nous offrir tout ça !
    Canard
    Canard
    FémininAge : 26Messages : 25

    Jeu 10 Jan 2013 - 22:42

    Merci. (:



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 4 186080pingouiiin
    Eria
    Eria
    FémininAge : 25Messages : 13

    Ven 11 Jan 2013 - 18:30

    J'aimerai voir, merci beaucoup n_n
    W.
    W.
    FémininAge : 26Messages : 127

    Ven 11 Jan 2013 - 22:22

    Parfait! Magnifique! Merci ^^



    Je suis Charlie.
    Arrogant Mischief
    Arrogant Mischief
    MasculinAge : 29Messages : 70

    Sam 12 Jan 2013 - 2:38

    Merci !



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 4 Nu211
    Anastasia Roskaff
    Anastasia Roskaff
    FémininAge : 25Messages : 32

    Dim 13 Jan 2013 - 12:30

    Trop beau *O* Merci ! =)
    avatar
    Tony_Wayne
    MasculinAge : 34Messages : 45

    Dim 13 Jan 2013 - 13:51

    Merci
    Black Laugh
    Black Laugh
    FémininAge : 24Messages : 14

    Mer 16 Jan 2013 - 19:03

    Merci (: !



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 4 Signa_11
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 16 Jan 2013 - 20:32

    merci beaucoup :)



    :heart: :heart:
    MissDevilsJuly
    MissDevilsJuly
    FémininAge : 34Messages : 98

    Jeu 17 Jan 2013 - 5:45

    WOW merci!^^ Très intéressant!



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 4 76421899
    Kalhan
    Kalhan
    FémininAge : 33Messages : 134

    Sam 19 Jan 2013 - 18:06

    Je vais tester ça merci !
    Cissy
    Cissy
    FémininAge : 32Messages : 64

    Sam 19 Jan 2013 - 20:02

    Merci ! :love:
    Belosnezhka
    Belosnezhka
    FémininAge : 26Messages : 283

    Lun 21 Jan 2013 - 23:12

    Merci =)
    Yukiokami
    Yukiokami
    FémininAge : 26Messages : 4

    Jeu 24 Jan 2013 - 20:06

    Merci!



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 4 986986Sanstitre1
    Reeta
    Reeta
    FémininAge : 29Messages : 34

    Ven 25 Jan 2013 - 17:51

    Gorgeous ! **
    Febrilis
    Febrilis
    FémininAge : 74Messages : 8

    Sam 26 Jan 2013 - 1:24

    Merci bien ! :)
    Anonymous
    Invité

    Sam 26 Jan 2013 - 18:37

    Utile ... Très utile merci jack' :p
    Enid.
    Enid.
    FémininAge : 31Messages : 23

    Sam 26 Jan 2013 - 22:48

    Mercii
    EvilGibo
    EvilGibo
    MasculinAge : 42Messages : 12

    Dim 27 Jan 2013 - 10:26

    Merci Beaucoup *-* !!!
    Esther Amyko
    Esther Amyko
    FémininAge : 24Messages : 42

    Dim 27 Jan 2013 - 10:52

    Thank you **



    PA onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Page 4 Signa_10
    nougatine404
    nougatine404
    FémininAge : 27Messages : 14

    Dim 27 Jan 2013 - 21:26

    merci !
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 32Messages : 105

    Lun 28 Jan 2013 - 6:57

    Merrciiiiiiii
    Souky Mitsu
    Souky Mitsu
    FémininAge : 34Messages : 124

    Mar 29 Jan 2013 - 3:30

    Très beau, merci !
    katia06
    katia06
    FémininAge : 55Messages : 203

    Mar 29 Jan 2013 - 9:40

    bonjour,

    tout d'abord merci pour ces superbes présentations, elles très belles et dynamiques.

    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
    Patou972
    Patou972
    FémininAge : 45Messages : 181

    Mar 29 Jan 2013 - 18:14

    merci beaucoup bises
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 11:14