Content met "tabs"

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Oracle ontwikkelaar met PL/SQL en APEX in de regio

Bedrijfsomschrijving Het havengebied rondom Rotterdam biedt veel uitdagende projecten binnen o.a. container mangement, douane en warehousing. Deze organisatie biedt juist op dergelijke segmenten ICT-oplossingen van grote kwaliteit. Deze organisatie kenmerkt zich als een fullservice softwarehuis dat verantwoordelijk is voor zowel het bepalen van de informatie behoeftes bij klanten, inhouse software ontwikkeling en de implementatie van deze software. Dit doen ze inmiddels al een zeer geruime tijd voor voornamelijk klanten binnen de logistieke sector. Binnen de logistieke sector hebben ze inmiddels een imposant klantenbestand opgebouwd wat optimaal bediend wordt. Denk hierbij aan bijvoorbeeld grote vervoers/transportmaatschappijen. De organisatie is zeer goed bereikbaar

Bekijk vacature »

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

17/01/2022 01:29:31
 
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.