Onglets en Css

**bthivent** · 03/12/2006, 12h45

Bonjour, j'aimerai réalisé un système d'onglet, et aimerait savoir si c'était possible seulement avec du Css.
Voici mon code actuel :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>{TITLE}</title>
		<style type='text/css'>
			body {
			color:{CFG_COLOR_TEXT};
			font-family:Verdana,sans-serif;
			font-size:12px;
			background-color:{CFG_BACKCOLOR};
			}
 
			table {
			color:{CFG_COLOR_TEXT};
			font-family:Verdana,sans-serif;
			font-size:12px;
			background-color:{CFG_BGCOLOR};
			}
 
			a:link, a:visited, a:active { text-decoration: underline; color: {CFG_COLOR_LINK} }
			a:hover { text-decoration: none; color: {CFG_COLOR_LINK} }
 
			input {
			border:1px solid black;
			border-color={CFG_BORDERCOLOR};
			background-color:{CFG_BGCOLOR};
			font-family:Verdana,sans-serif;
			font-size:11px;
			color:{CFG_COLOR_TEXT};
			}
			select {
			border:1px solid black;
			border-color={CFG_BORDERCOLOR};
			background-color:{CFG_BGCOLOR};
			font-family:Verdana,sans-serif;
			font-size:11px;
			color:{CFG_COLOR_TEXT};
			}
			textarea {
			border:1px solid black;
			border-color={CFG_BORDERCOLOR};
			background-color:{CFG_BGCOLOR};
			font-family:Verdana,sans-serif;
			font-size:11px;
			color:{CFG_COLOR_TEXT};
			}
			ul#tabnav {
			font: bold 11px verdana, arial, sans-serif;
			list-style-type: none;
			padding-bottom: 24px;
			border-bottom: 1px solid {CFG_BORDERCOLOR};
			margin: 50;
			}
			ul#tabnav li {
			float: left;
			height: 21px;
			background-color: {CFG_BGCOLOR};
			margin: 12px 2px 0 2px;
			}
			ul#tabnav li.active {
			border-bottom: 1px solid {CFG_BORDERCOLOR};
			background-color: {CFG_BGCOLOR};
			border: 1px solid {CFG_BORDERCOLOR};
			}
			#tabnav a {
			float: left;
			display: block;
			color: {CFG_COLOR_LINK};
			text-decoration: none;
			padding: 4px;
			}
			#tabnav a:hover {
			border-bottom: 1px solid {CFG_BORDERCOLOR};
			background-color: {CFG_BGCOLOR};
			}
			div.tab {
			display: none;
			}
			div.tab:target {
			display: block;
			}
			:target div.tab {
			display: block;
			}
			:target div.tab + div.tab{
			display: none;
			}
 
			.helpline { background-color: {CFG_BGCOLOR}; border-style: none; }
		</style>
	</head>
	<body>
	<div align="center">
		<table border="1" style="width:{CFG_WIDTH}px; BORDER-COLLAPSE: collapse; border:1; border-color:{CFG_BORDERCOLOR};" cellpadding="5" cellspacing="0">
			<tr>
				<td>
					<div style="text-align:center;">
					<h1>{TITLE}</h1>
					<ul id="tabnav">
						<li class="active"><a href="#guestbook">{LANG_GUESTBOOK}</a></li>
						<li><a href="#sign">{LANG_SIGN}</a></li>
						<li><a href="{SITE_URL}" target="_blanck">{LANG_BACK_LINK}</a></li>
					</ul>
				</td>
			</tr>
		</table>
		<br />&nbsp;<br />
		<div class="tab" id="guestbook">
		<table border="1" style="width:{CFG_WIDTH}px; BORDER-COLLAPSE: collapse; border:1; border-color:{CFG_BORDERCOLOR};" cellpadding="5" cellspacing="0">
			<tr>
				<td>
					<div style="text-align:center;">{STATS}<br />&nbsp;<br />
					{PAGINATION}</div><hr size="1" />
					<!-- BEGIN liste_messages -->
						{LANG_MSG_FROM} : {AUTHOR}, {LANG_POST_TIME} <span style="color:{CFG_COLOR_DATE}">{DATE}</span><br />
						<span style="color:{CFG_COLOR_COMMENT}">{COMMENT}</span><br />&nbsp;<br />
						<hr size="1" />
					<!-- END liste_messages -->
					<div align="center">{PAGINATION}</div>
				</td>
			</tr>
		</table>
		</div>
		<div class="tab" id="sign">
		<table border="1" style="width:{CFG_WIDTH}px; BORDER-COLLAPSE: collapse; border:1; border-color:{CFG_BORDERCOLOR};" cellpadding="5" cellspacing="0">
			<tr>
				<td>
					<div style="text-align:center;">
					{LANG_SIGN}</div>
				</td>
			</tr>
		</table>
		</div>
	</div>
	</body>
</html>

Donc voila comment ca marche :
J'ai vers le haut de la page 3 onglets qui marchent presque. Les deux premiers onglets ont pour lien la même page mais avec un # qui permet de montrer ou non le cade correspondant.
J'ai quelques problèmes cependant, et étant noob en css je ne peux pas y arriver seul ^^ :
- J'aimerai que quand on arrive sur la page, le block <div id="guestbook"> soit affiché. C'est un système de livre d'or, j'ai donc une pagination, et lors d'un changement de page, je n'ai plus aucun block d'affiché. J'aimerai que le bloc guestbook soit en fait affiché par défaut, et non pas rajouter dans ma pagination "#guestbook" à la fin de tous mes liens.
- Autre petit probleme : je ne sais pas comment faire pour activer l'onglet sélectionné (avec du javascript ??)

En résumé : j'aimerai qu'à l'arrivée de la page le premier onglet soit activé ainsi que le premier block, enfin que ces deux éléments soient activés par défaut (ainsi, toujours activés au changement de page), et que quand on clique sur le deuxième onglet, celui-ci deviennent activé, et que le block #sign soit activé (c'est la seule chose qui marche pour l'instant ^^) et ceci sans changer la source php (car ceci n'est qu'un template)

Voila j'espère m'être fait comprendre

A bientôt et merci d'avance
++

**bthivent** · 03/12/2006, 18h20

Problème résolu !
Avec deux trois changements et surtout du javascript pour changer l'attribut class des mes block div
pour les intéressés :

Code :

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

1
2
document.getElementById("id_objet").setAttribute("class","class_variante");
document.getElementById("id_objet").setAttribute("className","class_variante");

voila, utilisez bien les deux paramètres class et ensuite className, le 2e pour IE me semble-t-il.
++

Onglets en Css

CSS

Vue hybride

Discussions similaires

Partager

Partager