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 wil 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..
Wie weet hoe ik dit kan oplossen?
html code:
CSS code:
Dit werkt uitstekend enkel als ik meer content kwijt wil 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..
Wie weet hoe ik dit kan oplossen?
html code:
Code:
<!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>CSS 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}
