Hallo zusammen,
ich möchte gerne auf meiner Website Textboxen einfügen, die durch tabs zu erreichen sind. Da ich damit erfolgreich war dachte ich das Problem sei erledigt...
Nun das Problem: Folgender XHTML und CSS code funktionieren in Safarie, Firefox und Chrome - nur der IE8 stellt die Tabs untereinander, anstelle von übereinander dar.
Hat jemand eine Idee wie ich das lösen kann? und wo ich gerade dabei bin... evtl. auch wie man das W3C konform umschreibt (die :target klasse ist ja nicht mehr conform, hab aber so nichts anderes finden können was funktionierte..) Das muss aber nicht sein, wenn es halt so ist muss ich damit leben.
Erst der HTML code:
HTML-Code:
<div class="picture">
<div class="tabs">
<div id="tab1">
<a href="#tab1">Teil 1</a>
<div><p> Hier steht jetzt mal was </p></div>
</div>
<div id="tab2">
<a href="#tab2">Teil 2</a>
<div><p> Und hier was anderes </p></div>
</div>
</div>
</div>
nun der CSS code
HTML-Code:
div.tabs {
height: 370px; /* 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 */
div.tabs > div > a {
color: white; /* Looks more like a button than a link */
background: #B3B3B3; /* Active tabs are light gray */
padding: 0.2em; /* Some breathing space */
border: 0.1em outset #B1B1B1; /* Make it look like a button */
border-bottom: 0.1em solid #B3B3B3} /* Visually connect tab and tab body */
div.tabs > div:not(:target) > a {
border-bottom: none; /* Make the bottom border disappear */
background: #999} /* Inactive tabs are dark gray */
div.tabs > div:target > a, /* Apply to the targeted item or... */
:target #default2 > a { /* ... to the default item */
border-bottom: 0.1em solid #B3B3B3; /* Visually connect tab and tab body */
background: #B3B3B3;} /* Active tab is light gray */
div.tabs > div > div {
background: #B3B3B3; /* Light gray */
width: 410px;
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 */
border: 0.1em right #B1B1B1;} /* 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 */