Tab menü "fixieren"?

Philro

Philro

Grünschnabel
Hallo...
Ich weiß jetzt schon das die Überschrift nicht wirklich mein Problem beschreibt aber besser kann ich es nicht sagen!

Mein Problem: Bin momentan eine Internetseite zubasteln auf der ich ein Problem habe:
http://brigittespanien.br.funpic.de/test/casabibi.htm

es geht um das in dem pinken kasten.. wenn man oben auf die punke klickt (Preis, beschreibung...) springt er leider auch dahin... das möchte ich nicht. Es soll die Seite oben gehalten werden. Ist das irgendwie möglich?
 
So vielleicht
Code: 
<!DOCTYPE html>
<html>
<head>
<title>Tabs mit CSS3</title>
<meta charset="utf-8"/>
<style type="text/css">


* {
 margin:0;
 padding:0;
 
}


body {
 min-height:1200px;
 width:700px;
 margin:0 auto;
}


#tab {
 position: relative;
 float:left;
 width:520px;
 min-height:100px;
 padding:0 ;
}

#tab br {
 display:none;
}


#tab span , h3 {
 padding:10px;
}


#tab br:target ~ span  
{
 display: block;
 position: absolute;
 top: 2.5em;
 left: 0em;
 width:500px;
 min-height:100px;
 background:#ddd;
 z-index:11;
}

#tab br:not(:target) ~ span  {
 display: none;
}


#tab br:not(:target) ~ h3 , #tab br:target ~ h3 {
 float:left;
 margin-right:2px;
 font-size:1em;
 background:#aaa;
 position:relative;
}


#tab br:target ~ h3 > a   {
 visibility:hidden;
} 

#tab br:target ~ h3:before  {
 content:attr(title);
 position:absolute;
 text-align:center;
 padding:.5em;
 left:0;
 top:0;
 right:0;
 bottom:0;
 background:#ddd;
 color:#fff;
}

</style>

</head>
<body id="body">

<h1 style="height:200px;background:#a33;color:#fff;margin-bottom:100px;">:target</h1>
<div id="tab">

<div>
<br id="t1" />
<h3 title="tab 1" ><a href="#t1" id="start">Preis</a></h3>
<span>  
 Preis
</span> 

</div>

<div>
<br id="t2" />
<h3 title="tab 2" ><a href="#t2">Beschr.</a></h3>
<span> 
Beschreibung 
</span>
</div>    




<div>
<br id="t3" />
<h3 title="tab 3" ><a href="#t3">Vakenz</a></h3>
<span> 
Vakanz
 </span>
</div> 

</div>

</body>
</html>
Für screenreader ist diese Variante weniger geeignet. Daher lieber mit JS umsetzen.

Edit: Nochwas. Denke daran, dass :target nicht alle Browser verstehen. Also erstmal so formatieren das die älteren Browser auch was davon haben.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück