html, css: "schwebende" navigation

[hello]

hallo zusammen

ich bin gerade an einer homepge und hatte die idee eine "schwebende" navigation einzubauen. was meine ich mit schwebend? ein navigation die immer z.b. 10px von linken und 10px von oberen fensterrand entfernt ist, und wenn man jetzt nach unten scrollt, bleibt die navigation an irem ort und der text/die bilder gehen unter der navigation durch.

ist sowas möglich mit css und html? wenn ja, könnt ihr mir helfen wie ich das machen muss?

danke im voraus
mfg
manuel

 

[Nathea]

So in etwa wie hier?

 

[hello]

ja es geht in diese richtung, nur das es eine horizontale navigation sein sollte die sich gar nicht bewegt

 

[Nathea]

Dann lies Dir diese Seite bei SELFHTML mal durch, wahrscheinlich ist es das, was Du suchst. - Layout mit fixem Bereich -

 

[hello]

danke für den tipp, ich werde es mal durchlesen

 

[ZIG-ZAG]

Hi

Nein, der IE hat mit fixed DIV's so seine Probleme. Um ein "bisschen" JavaScript kommst du nicht rum. Beispiel siehe hier: http://www.a.tu-berlin.de/TAD/lehre/ad/web/web03_ws2003/html/kurs/floatingMenu/floatingMenu.html

Dort kannst du dir auch das notwendige Script runterladen.

Klaus

 

[Peitzi]

Man könnte sowas natürlich auch mit nem iFrame machen.

Anleitungen dazu gibts bei selfhtml.org unter Frames.

 

[TaTonka]

gut, dass iframes seit etlichen jahren deprecated sind, weil sie ein erhebliches sicherheitsrisiko darstellen

 

[schwaiger]

schreib dir ma nen kleinen code...

schreibe die styles direkt ind die container.... kannst du aber ohne prob auslagern.
diese lösung geht in modernen browsern... fürn ie musst du googlen hab ich eben nicht im kopf (tipp css ... top: expression(parseInt(document.body.scrollTop + 10)...)

ok lets rock... achja schreibe es direkt und nicht getestet aber müsste gehen.

<div style="position:relative; width:700px;">
<div class="nav" style="position:fixed; top;20px; left:20px; width:150px;">
Hier die navigation am besten als liste
</div>
<div class="content" style="margin: 0 0 0 200px; width:500px;">
Hier deinen content
</div>
</div>


sollte so gehen lg flo