|
Manel
{ Membre }
Messages : 122
| Bonsoir, bon après plusieurs essais je n'y arrive pas... j'ai regardé les tutos mais je ne vois pas se que je dois rajouter j'ai un tableau avec onglet dans ma PA... sauf que les onglets sont bien cliquable mais quand je clique il ne se passe rien sa reste sur le premier... voici le code : le CSS - Code:
-
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; cursor:pointer; font-family: Casual, sans-serif; background-color : #ffa3cc; color : #000000; } .onglet_0 { font-family: Casual, sans-serif; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px; background-color : #ffa3cc; color : #000000; } .onglet_1 { padding-bottom:4px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px; font-family: Casual, sans-serif; background-color : #ffa3cc; color : #000000; } .contenu_onglet { margin-left:3px; margin-right:3px; padding:3px; display:none; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-bottom-right-radius: 7px; width: 900px; font-family: Casual, sans-serif; background-color : #f5dce7; color : #000000; }
et la page d'accueil - Code:
-
<span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('4);">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('6');">Divers</span>
<div class="contenu_onglets">
<div style="display: block;" class="contenu_onglet" id="contenu_onglet_1"> En cours <br></div>
<div style="display: none;" class="contenu_onglet" id="contenu_onglet_2"> En cours . </div> </div>
<div class="contenu_onglet" id="contenu_onglet_3"> En cours... </div>
<div class="contenu_onglet" id="contenu_onglet_4"> En cours ! </div>
<div class="contenu_onglet" id="contenu_onglet_5"> En cours de construction </div>
<div class="contenu_onglet" id="contenu_onglet_6"> En cours d'aménagement</div>
<script type="text/javascript"> //<!-- var anc_onglet = 'accueil'; change_onglet(anc_onglet); //--> </script> et ceci dans la description - Code:
-
<script language=javascript src=http://sd-1.archive-host.com/membres/up/86473130127969805/onglet.html></script> si quelqu'un aurait la gentilesse de m'aider... merciii | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Bonjour~ - Code:
-
<script type="text/javascript"> //<!-- var anc_onglet = 'accueil'; change_onglet(anc_onglet); //--> </script> Modifie accueil par onglet_1 C'est à la fin du html =D | | |
|
| |
Manel
{ Membre }
Messages : 122
| coucou sa marche pas | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Ha j'ai trouvé le problème =D - Code:
-
<span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('4);">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('6');">Divers</span> Le problème réside à chaque change_onglet('1'), par exemple. Au lieu de mettre le chiffre, il faut mettre onglet_1 Au fond, mets ce code-ci: - Code:
-
<span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('onglet_1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('onglet_2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('onglet_3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('onglet_4);">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('onglet_5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('onglet_6');">Divers</span> | | |
|
| |
Manel
{ Membre }
Messages : 122
| - Code:
-
<span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('onglet_1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('onglet_2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('onglet_3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('onglet_4);">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('onglet_5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('onglet_6');">Divers</span>
<div class="contenu_onglets">
<div style="display: block;" class="contenu_onglet" id="contenu_onglet_1"> En cours <br></div>
<div style="display: none;" class="contenu_onglet" id="contenu_onglet_2"> En cours . </div> </div>
<div class="contenu_onglet" id="contenu_onglet_3"> En cours... </div>
<div class="contenu_onglet" id="contenu_onglet_4"> En cours ! </div>
<div class="contenu_onglet" id="contenu_onglet_5"> En cours de construction </div>
<div class="contenu_onglet" id="contenu_onglet_6"> En cours d'aménagement</div>
<script type="text/javascript"> //<!-- var anc_onglet = 'onglet_1'; change_onglet(anc_onglet); //--> </script> c'est bien comme ça ? parce que sa marche toujours pas... | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Ehm et si tu essayais comme ça? - Code:
-
<span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('onglet_1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('onglet_2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('onglet_3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('onglet_4);">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('onglet_5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('onglet_6');">Divers</span>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_1"> En cours <br></div>
<div class="contenu_onglet" id="contenu_onglet_2"> En cours . </div> </div>
<div class="contenu_onglet" id="contenu_onglet_3"> En cours... </div>
<div class="contenu_onglet" id="contenu_onglet_4"> En cours ! </div>
<div class="contenu_onglet" id="contenu_onglet_5"> En cours de construction </div>
<div class="contenu_onglet" id="contenu_onglet_6"> En cours d'aménagement</div>
<script type="text/javascript"> //<!-- var anc_onglet = 'onglet_1'; change_onglet(anc_onglet); //--> </script> | | |
|
| |
Manel
{ Membre }
Messages : 122
| ho ba c'est pire lol
j'ai plus le cadre du texte... il reste que les onglets ... | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Eh merde XD *regarde le code* HAAA y'a une balise mal fermée è___é - Code:
-
<span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('onglet_1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('onglet_2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('onglet_3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('onglet_4);">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('onglet_5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('onglet_6');">Divers</span>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_1"> En cours <br></div>
<div class="contenu_onglet" id="contenu_onglet_2"> En cours . </div> </div>
<div class="contenu_onglet" id="contenu_onglet_3"> En cours... </div>
<div class="contenu_onglet" id="contenu_onglet_4"> En cours ! </div>
<div class="contenu_onglet" id="contenu_onglet_5"> En cours de construction </div>
<div class="contenu_onglet" id="contenu_onglet_6"> En cours d'aménagement</div> </div> <script type="text/javascript"> //<!-- var anc_onglet = 'onglet_1'; change_onglet(anc_onglet); //--> </script> Tient xD On va le dompter ton code è_é t'vas voir~ | | |
|
| |
Manel
{ Membre }
Messages : 122
| ha ba nan xD toujours pas de texte lol toujours que les onglets lol
moi je suis une quiche dans ça alors malheureusement je suis pas d'une grande aide lol | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Re eh merde xDD Bon atta un peu è__é *méchant code xD* Jvais le mettre sur un de mes fo test et je vais tenter de règler le problème~ En attendant, met ça dans ton CSS à la place; - Code:
-
.onglet { display:inline-block; margin-left:3px; margin-right:3px; padding:3px; cursor:pointer; font-family: Casual, sans-serif; background-color : #ffa3cc; color : #000000; } .onglet_0 { font-family: Casual, sans-serif; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; background-color : #ffa3cc; color : #000000; } .onglet_1 { padding-bottom:4px; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; font-family: Casual, sans-serif; background-color : #ffa3cc; color : #000000; } .contenu_onglet { margin-left:3px; margin-right:3px; padding:3px; display:none; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; width: 900px; font-family: Casual, sans-serif; background-color : #f5dce7; color : #000000; } Je te l'ai un peu allégé parce que tu n'avais pas besoin d'autant de codes d'arrondis pour avoir ce que tu voulais, simplement un simple -moz-border-radius: 7px; aurait suffit pour Firefox par exemple =D Je t'ai aussi ajouté le code pour les arrondis sur Opera xD (plusieurs l'oublient~) Bon je vais te revenir avec une solution bientôt =D | | |
|
| |
Manel
{ Membre }
Messages : 122
| est-ce que sa arrondit aussi sous safari (c'est mon navigateur) ?? edit : ou sa a l'air d'être bon |
Dernière édition par Manel le Mer 30 Juin 2010, 15:56, édité 1 fois | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Ouep ça arrondi également sous Safari grâce à -webkit-border-radius =D
EDIT: aghalfhaklsfs *vient de voir* mais il te manque un bout du code O___O" *ajoute le bout selon le code sur son autre fo test* | | |
|
| |
Manel
{ Membre }
Messages : 122
| ouai j'ai testé merciii :-) | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| ftghjlksfa bon jviens de me rendre compte que je suis super stupide xD jme suis auto induit en erreur x_x *recommence =DD* | | |
|
| |
Manel
{ Membre }
Messages : 122
| lol sa arrive à tout le monde | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| MDR Moi ptêtre plus souvent qu'un autre x) mais bon~ VOILÀÀÀÀ - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Un système d'onglet en javascript</title> <script type="text/javascript"> //<!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script> </head> <body> <div class="systeme_onglets" width="50%"> <div class="onglets"> <span class="onglet_1 onglet" id="onglet_1" onclick="javascript:change_onglet('1');" style="margin-left: 20px;">Encore l'écrit et/ou l'oral à passer</span> <span class="onglet_0 onglet" id="onglet_2" onclick="javascript:change_onglet('2');">Reçu sur Liste Principale</span> <span class="onglet_0 onglet" id="onglet_3" onclick="javascript:change_onglet('3');">Sur Liste Complémentaire</span> <span class="onglet_0 onglet" id="onglet_4" onclick="javascript:change_onglet('4');">Recalé</span> <span class="onglet_0 onglet" id="onglet_5" onclick="javascript:change_onglet('5');">Divers</span> <span class="onglet_0 onglet" id="onglet_6" onclick="javascript:change_onglet('6');">Divers</span>
<div class="contenu_onglets">
<div style="display: block;" class="contenu_onglet" id="contenu_onglet_1"> En cours <br></div>
<div style="display: none;" class="contenu_onglet" id="contenu_onglet_2"> En cours . </div> </div>
<div class="contenu_onglet" id="contenu_onglet_3"> En cours... </div>
<div class="contenu_onglet" id="contenu_onglet_4"> En cours ! </div>
<div class="contenu_onglet" id="contenu_onglet_5"> En cours de construction </div>
<div class="contenu_onglet" id="contenu_onglet_6"> En cours d'aménagement</div>
</div></div> <script type="text/javascript"> //<!-- var anc_onglet = '1'; change_onglet(anc_onglet); //--> </script> Ça marche~ J'en ai même la preuve là http://iko-test.forumactif.com/forum.htm | | |
|
| |
Manel
{ Membre }
Messages : 122
| haaaaaa super ça marche xD Mille merci <3 on peut classé super gentil d'avoir cherché | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| De rien, ça me fait plaisir =D S'il y a un autre problème n'hésite pas =D
Je classe le sujet =) | | |
|
| |
Manel
{ Membre }
Messages : 122
| Pas de soucis je sais pas si tu pourrait m'aider sur mon poste de "cadre barre de navigation" ? tant qu'a faire... désolé si j'abuse mercii | | |
|
| |
Contenu sponsorisé
| |
| |
|