Version imprimable
Bonjour,
J'aurais besoin de faire des onglet (tab) sur une page. est-ce que quelqu'un pourrait me dire comment on peut faire (aussi simplement que possible, je ne voudrais pas a utiliser des librairies et faire 100 lignes de codes pour cela). Existe t-il une balise pour cela ?
Peut-être en PHP ? Comment ?
Merci de toute aide.
J.
Hop !
http://webdevel.blogspot.com/2008/06...avascript.html
Sinon non pas de balise n'y rien :)
Merci. Je pensais naïvement qu'il y avait une balise... OK Merci.
J.
Bonsoir
Tu en as aussi des tout fait dans la galerie CSS : http://css.developpez.com/galerie/?page=menus-onglets
Merci mais j'ai toujours un souci. J'ai trouvé le style des tout premier onglets ici: http://css.developpez.com/galerie/?p...glets#css-tabs (et là pour la demo: http://css.developpez.com/tutoriels/...39csstabs.htm# ) et je n'arrive pas du tout a mettre du contenu dans chaque onglet. Comment faire ?
Quelle sont les "<div class="tabcontainer">", etc. ?
Merrci de toute aide.
Bonsoir
Pour rajouter du contenu aux tabs il suffit de mettre ton texte ici :
à la place de vélo...Code:<li><a href="#">Vélo</a></li>
Il n'y a pas de <div class="tabcontainer"> dans ce code, d'où tu le tires ?
Évidement à la place de Vélo. Mais ce n'était pas ma question.
La question était, lorsque l'on clique sur un tab (Vélo par exemple) on doit afficher des choses. Ma question est: où est-ce que l'on met ces choses ? Dans des balises DIV et des ID qui vont bien ? Lesquelles ? Comment ? Sinon, les onglet "nus" ne servent a rien si on affiche pas quelques chose lorsque l'on clique dessus..
Le "tabcontainer" viens d'un autre exemple.
Ben... tu les mets où tu veux...
Dans la page d'exemple tu as 3 phrases en dessous, tu peux faire comme ceci... Rajouter des div doit être utile et nécessaire, pour structurer ton contenu par exemple, par exemple : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/
Merci beaucoup 12monkeys. J'ai un fichier de style ci-dessous:
Ce fichier de style est pas mal. Je l'associa a ce code HTML:Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59div.tabcontainer { width: 800px; background: white; border: 0px solid #000000; } div.tabcontents { height: 290px; background: white; // fond du contents overflow: hidden; border-top: 0px solid #011; padding: 3px; } div.tabcontents div.content { float: left; width: 100%; height: 102%; overflow-y: auto; } ul#tabnav { font: bold 11px verdana, arial, sans-serif; list-style-type: none; padding-bottom: 24px; border-bottom: 1px solid #6c6; margin: 0; } ul#tabnav li { float: left; height: 21px; background-color: #cfc; margin: 2px 2px 0 2px; border: 1px solid #6c6; } ul#tabnav li.active { border-bottom: 1px solid #fff; background-color: #fff; } ul#tabnav li.active a { color: #000; } #tabnav a { float: left; display: block; color: #666; text-decoration: none; padding: 4px; } #tabnav a:hover { background: #fff; }
C'est pas mal, sauf que l'effet recherché ne fonctionne pas. En effet, le texte "Test tab Deux" est affiché en dessous du container. Et lorsque l'on clique sur le second onglet, la page descend à la référence tab2 (Bio In English). Ci dessous une copie d'écran:Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
http://img819.imageshack.us/img819/9746/bio.jpg
Le message "Bio in English" devrait, normalement être masqué et seulement visible lorsque l'on clique sur l'onglet correspondant.
Merci.
Trouvé. C'était le commentaire " // fond du contents" qui foutait l'embrouille et faisait que le "overflow: hidden;" n'était pas pris en compte...
Merci a tous.
En effet les commentaires en CSS c'est /* */