InvitéInvité Code PA simple à mettre | | Voici un code simple pour votre PA que j'ai trouvé en libre service. A mettre simplement dans votre page d'accueil et bien sur modifer les couleurs,arrondis.... Si vous avez des questions... - 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>
|
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5857 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120037 Re: Code PA simple à mettre | | Coucou Merci pour ce code sophie 2 Le rendu du code est: [Vous devez être inscrit et connecté pour voir cette image]Amicalement |
| |
InvitéInvité Re: Code PA simple à mettre | | Si vous voulez centrer le texte au fait ,demandez moi c'est un ptit code de 3 mots mais je m'en souviens plus là maintenant Merci Perle pour le rendu |
| |
Mimi
A les clefs du forum
Je tiens le trousseau de clefs du forum
Partenaires
Très honoré d'être partenaire
Messages : 1288 Venue : 01/07/2009 Je suis : Age : 71 Je vie à : Dijon Humeur : Bonne Humeur Mes Points : 110416 Re: Code PA simple à mettre | | Voici le petit code pour centrer - Code:
-
<div align="center"> |
| |
InvitéInvité Re: Code PA simple à mettre | | Bonjour à tous, Je voudrais savoir si sur le forum il y a une page qui explique un peu plus en détail un code, comment et où l'installer, etc. Car pour moi c'est du chinois tout ça et j'aimerai comprendre pour ne pas poser dix mille fois les mêmes questions. |
| |
Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5857 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120037 Re: Code PA simple à mettre | | Coucou Maeva
Ici il y as noté pour mettre le code : page d'accueil <=== dans ton administration de ton forum, tu as page d'accueil, donc tu copie colle le code
Après il faut le mettre à ton goût
Pour toutes questions, tu peux les poser dans la section ou il y as un code que tu ne comprend pas, et on t 'expliquera en détail
Bisoussss |
| |