De PHPhulp kroeg
Content met "tabs"
Dit werkt uitstekend enkel als ik meer content kwijt in een "tab" is de hoogte gelimiteerd tot "min-height: 500px;" Ik zou de hoogte auto willen hebben op basis van de content die erin verschijnt. Nu krijg ik als resultaat een slider aan de rechterkant. Ik heb al geprobeerd een width: auto; te plaatsen maar dat werkt niet..
Hier is de html en CSS:
Code (php)
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="include/tabs.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class=tabs>
<div id=tab1> <a href="#tab1">tab1</a>
<div>
content tab 1
</div>
</div>
<div id=tab2> <a href="#tab2">tab2</a>
<div>
content tab 2
</div>
</div>
<div id=tab3> <a href="#tab3">tab3</a>
<div>
content tab 3
</div>
</div>
<div id=default2> <a href="#tab4">tab4</a>
<div>
content tab 4
</div>
</div>
</div>
</body>
</html>
</code>
<code>
div.items p:not(:target) {height:auto;display: none}
div.items p:target {height:auto;display: block}
div.tabs {
min-height: 500px; /* No height: can grow if :target doesn't work */
position: relative; /* Establish a containing block */
line-height: 1; /* Easier to calculate with */
z-index: 0} /* So that we can put other things behind */
div.tabs > div {
display: inline} /* We want the buttons all on one line */
a {text-decoration: none}
div.tabs > div > a {
color: black; /* Looks more like a button than a link */
background: #f6f6f6; /* Active tabs are light gray */
padding: 0.2em; /* Some breathing space */
border: 0.1em outset black; /* Make it look like a button */
border-bottom: 0.1em solid #2cabe2 /* Visually connect tab and tab body */
text-decoration: none;
}
div.tabs > div:not(:target) > a
{
border-bottom: none; /* Make the bottom border disappear */
background: #f6f6f6; /* Inactive tabs are dark gray */
}
div.tabs > div:target > a, /* Apply to the targeted item or... */
:target #default2 > a
{ /* ... to the default item */
font-weight: bold;
border-bottom: 0.1em solid #DDDDDD; /* Visually connect tab and tab body */
background: #DDDDDD; /* Active tab is light gray */
}
div.tabs > div > div {
background: white; /* Light gray */
z-index: -2; /* Behind, because the borders overlap */
left: 0; top: 1.3em; /* The top needs some calculation... */
bottom: 0; right: 0; /* Other sides flush with containing block */
overflow: auto; /* Scroll bar if needed */
padding: 0.3em; /* Looks better */
border: 0.1em outset #BBB} /* 3D look */
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
position: absolute } /* All these DIVs overlap */
div.tabs > div:target > div, :target #default2 > div {
position: absolute; /* All these DIVs overlap */
z-index: -1} /* Raise it above the others */
div.tabs :target {
outline: none}
<html>
<head>
<title>tab</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="include/tabs.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class=tabs>
<div id=tab1> <a href="#tab1">tab1</a>
<div>
content tab 1
</div>
</div>
<div id=tab2> <a href="#tab2">tab2</a>
<div>
content tab 2
</div>
</div>
<div id=tab3> <a href="#tab3">tab3</a>
<div>
content tab 3
</div>
</div>
<div id=default2> <a href="#tab4">tab4</a>
<div>
content tab 4
</div>
</div>
</div>
</body>
</html>
</code>
<code>
div.items p:not(:target) {height:auto;display: none}
div.items p:target {height:auto;display: block}
div.tabs {
min-height: 500px; /* No height: can grow if :target doesn't work */
position: relative; /* Establish a containing block */
line-height: 1; /* Easier to calculate with */
z-index: 0} /* So that we can put other things behind */
div.tabs > div {
display: inline} /* We want the buttons all on one line */
a {text-decoration: none}
div.tabs > div > a {
color: black; /* Looks more like a button than a link */
background: #f6f6f6; /* Active tabs are light gray */
padding: 0.2em; /* Some breathing space */
border: 0.1em outset black; /* Make it look like a button */
border-bottom: 0.1em solid #2cabe2 /* Visually connect tab and tab body */
text-decoration: none;
}
div.tabs > div:not(:target) > a
{
border-bottom: none; /* Make the bottom border disappear */
background: #f6f6f6; /* Inactive tabs are dark gray */
}
div.tabs > div:target > a, /* Apply to the targeted item or... */
:target #default2 > a
{ /* ... to the default item */
font-weight: bold;
border-bottom: 0.1em solid #DDDDDD; /* Visually connect tab and tab body */
background: #DDDDDD; /* Active tab is light gray */
}
div.tabs > div > div {
background: white; /* Light gray */
z-index: -2; /* Behind, because the borders overlap */
left: 0; top: 1.3em; /* The top needs some calculation... */
bottom: 0; right: 0; /* Other sides flush with containing block */
overflow: auto; /* Scroll bar if needed */
padding: 0.3em; /* Looks better */
border: 0.1em outset #BBB} /* 3D look */
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
position: absolute } /* All these DIVs overlap */
div.tabs > div:target > div, :target #default2 > div {
position: absolute; /* All these DIVs overlap */
z-index: -1} /* Raise it above the others */
div.tabs :target {
outline: none}
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Gewijzigd op 02/12/2013 19:50:39 door - Ariën -
volgens mij moet je eens naar regel 84 kijken. Haal die maar eens weg.
Toevoeging op 03/12/2013 11:56:52:
Ook bij 't toevoegen van een height: auto; bij een bovenliggende div gaat de div niet meegroeien met de content.