Content met "tabs"

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Michel Koonen

Michel Koonen

02/12/2013 19:48:34
Quote Anchor link
Ik heb een script gevonden op internet welke bestaat uit een stukje HTML en CSS. Het werkt zodanig dat je content in "tabs" kunt ordenen. Selecteren van de tab zorgt dat enkel die content van de tab verschijnt.
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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}


- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Gewijzigd op 02/12/2013 19:50:39 door - Ariën -
 
PHP hulp

PHP hulp

29/03/2024 09:20:19
 
Frank Nietbelangrijk

Frank Nietbelangrijk

02/12/2013 20:37:37
Quote Anchor link
min-height: zegt enkel iets over de MINIMALE hoogte en niet over de maximale hoogte.
volgens mij moet je eens naar regel 84 kijken. Haal die maar eens weg.
 
Michel Koonen

Michel Koonen

02/12/2013 21:35:10
Quote Anchor link
Dat dit de minimale hoogte specificeerde snap ik uiteraard. Ik heb regel zoals je voorstelde weggehaald maar de hoogte van 't tabblad groeit dan niet met de content mee en blijft staan op de minimale hoogte...

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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.