Discussion :

[Jolt0x]

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.

[Ethyde]

Hop !

http://webdevel.blogspot.com/2008/06...avascript.html

Sinon non pas de balise n'y rien

[Jolt0x]

Merci. Je pensais naïvement qu'il y avait une balise... OK Merci.

J.

[12monkeys]

Bonsoir

Tu en as aussi des tout fait dans la galerie CSS : http://css.developpez.com/galerie/?page=menus-onglets

[Jolt0x]

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.

[12monkeys]

Bonsoir

Pour rajouter du contenu aux tabs il suffit de mettre ton texte ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    <li><a href="#">Vélo</a></li>

à la place de vélo...

Il n'y a pas de <div class="tabcontainer"> dans ce code, d'où tu le tires ?

[Jolt0x]

É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.

[12monkeys]

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/

[Jolt0x]

Merci beaucoup 12monkeys. J'ai un fichier de style ci-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
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
59
 
 
div.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;
}

Ce fichier de style est pas mal. Je l'associa a ce code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="tabcontainer">
 
<ul id="tabnav">
	<li><a href="#tab1">Bio en Francais</a></li>
	<li><a href="#tab2">Bio in English</a></li>
</ul>
 
  <div class="tabcontents">
    <div class="content" id="tab1">
       <p>Test tab 1</p>
     </div>
 
     <div class="content" id="tab2">
       <p>Test tab Deux</p>
     </div>
 
  </div>
 
</div>

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:



Le message "Bio in English" devrait, normalement être masqué et seulement visible lorsque l'on clique sur l'onglet correspondant.

Merci.

[Jolt0x]

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.

[12monkeys]

En effet les commentaires en CSS c'est /* */