Laisse ton imagination déborder

Forum de graphisme ET de flood
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 # Page d'accueil n°2 ~

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
Wapi

Vétéran du forum


Féminin
Messages : 1229
Age : 20
Puf : Wapi ou Blue

MessageSujet: # Page d'accueil n°2 ~   Mer 10 Aoû - 10:50

Page d'accueil en onglets ♪


    Hellooooo ♪
    Je propose une page d'accueil en onglet. Je tiens à préciser que le codage est neutre, sobre. Donc si vous vous attendiez à avoir un truc tout coloré avec des bords arrondis ou une police très jolie, ce ne sera pas le cas. Le codage, c'est à vous de le personnalisez ou à la suite de ce message :3 Donc ce codage est noir et blanc et en arial u.u

    Avant d'utiliser ce code, il faut remplir les conditions suivantes :
    ♥. Avoir accès au panneau d'administration
    ♥. Avoir activé le HTML (Comment l'activer ? Cliquez !)
    ♥. Etre en PhBB2

    Voici le code de base de notre page d'accueil :
    Code:
    <title>Conception d'onglet</title>
          <script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></script>
          <style>

              /* Début de la feuille de style */
                .onglet-content > div {
                display : none ; /* permet de spécifier la manière dont un élément est affiché */
                border : solid 0px; /* Bordure de la page d’accueil*/
                border-radius : 25px 25px 25px 25px ; -moz-border-radius : 25px 25px 25px 25px ; -webkit-border-radius : 25px 25px 25px 25px ; /* l'arrondi de l'encadrement, a retiré selon ce que tu veux */
                padding : Xpx ; /* correspond à la marge interne d'une boite, et permet de définir la distance */
                margin-bottom : Xpx ; /*correspond à la marge externe d'une boite, et permet de définir la distance */
                width : Xpx ; /* définis l'hauteur de la Page d'accueil */
                height : Xpx; /* définis la largeur de la Page d'accueil */
                background: #ffffff; /* fond de la Page d'accueil */

              }
              .onglet-content > div.active{ display : block ; }
     
              .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
              .onglet-table td {
              style : top ;
              vertical-align:middle ; /* permet de gérer l'alignement vertical du texte */
              border : solid Xpx ; /* Bordure de la page d’accueil */
              border-radius : 50px 50px 50px 50px ; -moz-border-radius : 50px 50px 50px 50px ; -webkit-border-radius : 50px 50px 50px 50px ; /* l'arrondi de l'encadrement, a retiré selon ce que tu veux */
                padding : Xpx; /* taille en largeur des onglets */
                width: Xpx; /* taille en hauteur des onglets */
                text-align:center; /* permet de centré le nom des onglets */
           
                opacity : 0.7 ; /* (entre 0,1 et 1) opacité de tes onglets inactifs (que tu n'as pas sélectionné ou que tu ne survole pas) */
                font-size: Xpx; /* taille des titres de tes onglets */
                background: #ffffff; /* fond de tes onglets */
                }
              .onglet-table td.active, .onglet-table td:hover {
                opacity : 1 ; /* (entre 0,1 et 1) opacité d'un onglet survolé ou que tu as sélectionné */
                }
              /* Fin de la feuille de style */
          </style>
        <center>

        <script type="text/javascript">
          /* Début du script */
          jQuery(document).ready(function(){
              jQuery(".onglet-table").find("td").click(function(){
                /* Suppression des classe .active pour tout les onglets et contenus */
                var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
                system.find(".onglet-table").find(".active").removeClass("active");
                system.find(".onglet-content").find(".active").removeClass("active");

                /* Ajout de la classe active à l'onglet cliqué et au contenu correspondant */
                var id = jQuery(this).attr("name");            /* Identification du numéro de l'onglet cliqué */
                jQuery(this).addClass("active");
                system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
              });
          });
          /*Fin du script */
        </script>
        <!-- Début du HTML --><div class="onglet">
        <table><tbody><tr><td colspan="2">
          <table class="onglet-table">

                /* Noms des onglets */
                <tbody><tr><td name="1" class="active">Onglet 1</td>
                <td name="2">Onglet 2</td>
                <td name="3">Onglet 3</td>
                <td name="4">Onglet 4</td>
                <td name="5">Onglet 5</td>
          </tbody></table></td></tr><tr><td>
                <div class="onglet-content">

                /* Contenus des onglets */
              <div name="1" class="active">contenu de l'onglet 1</div>
              <div name="2">contenu de l'onglet 2</div>
              <div name="3">contenu de l'onglet 3</div>
              <div name="4">contenu de l'onglet 4</div>
              <div name="5">contenu de l'onglet 5</div>
     
          </div></td></tr></tbody></table>

    J'ai mis différents commentaires pour vous guidez pas à pas.
    Il est possible qu'ils apparaissent malgré le fait qu'ils soient encadrés par des /* et */. Si c'est le cas, veuillez tout simplement les supprimer et ils ne seront plus visibles !

    Sachant que ceci est un code en libre service et non un tutoriel, le reste c'est à vous de le faire, comme dis plus haut ^^

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

UN EXTRAIT DU TROISIÈME CYCLE DE LGDC !!!


Merchi Xiumi chériiiiie n_n
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://wonder-land.forumactif.fr/
avatar
Dyne

S'intègre enfin au forum


Féminin
Messages : 138
Age : 21
Puf : Dyne©.
Professeur : Xiumi

MessageSujet: Re: # Page d'accueil n°2 ~   Mer 10 Aoû - 11:29

On peut voir ce que ça donne?
Croquis ou autre.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

La véritable essence de mon bonheur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Wapi

Vétéran du forum


Féminin
Messages : 1229
Age : 20
Puf : Wapi ou Blue

MessageSujet: Re: # Page d'accueil n°2 ~   Mer 10 Aoû - 13:39

Euh, ben mon forum ^^
>> http://wonder-land.forumactif.fr/

(Il est en Publicité et en Partenariat avec GI, donc j'espère que c'est pas considéré comme une pub frauduleuse xD)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

UN EXTRAIT DU TROISIÈME CYCLE DE LGDC !!!


Merchi Xiumi chériiiiie n_n
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://wonder-land.forumactif.fr/
avatar
Xiumi

Ouch ! Les rides commencent à apparaître


Féminin
Messages : 2014
Age : 25
Puf : Xiumi

MessageSujet: Re: # Page d'accueil n°2 ~   Mer 10 Aoû - 13:43

non xD
Merci pour ce don !

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://forum-detente.forum-actif.net
avatar
Dyne

S'intègre enfin au forum


Féminin
Messages : 138
Age : 21
Puf : Dyne©.
Professeur : Xiumi

MessageSujet: Re: # Page d'accueil n°2 ~   Mer 10 Aoû - 21:20

C'est superbe j'adore! Je vais surement le prendre, il est simple/rapide, et beau à la fois.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

La véritable essence de mon bonheur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Shangwi'

Ose à peine montrer le bout de son nez


Féminin
Messages : 2
Puf : Shan

MessageSujet: Re: # Page d'accueil n°2 ~   Jeu 20 Juin - 16:26

Ca ne marche pas avec moi...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fayzl4D

Ose à peine montrer le bout de son nez


Masculin
Messages : 2
Puf : quentin

MessageSujet: merci   Mar 5 Aoû - 9:30

merci
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Fayzl4D

Ose à peine montrer le bout de son nez


Masculin
Messages : 2
Puf : quentin

MessageSujet: oh   Mar 5 Aoû - 9:33

oh
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

Contenu sponsorisé





MessageSujet: Re: # Page d'accueil n°2 ~   

Revenir en haut Aller en bas
 

# Page d'accueil n°2 ~

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Laisse ton imagination déborder :: Codes hlm :: Codes libre service-
Sauter vers: