Problem mit CSS Positionierung

anmi

Grünschnabel
Hallo zusammen,
ich habe meine gebastelte Homepage (http://anmi.bplaced.net/)
versucht von Frames auf CSS mit DIV umzustellen. (http://anmi.bplaced.net/versuch)
Bin soweit auch schon relativ erfolgreich gewesen und schon sehr zufrieden.
Nur bin ich auf ein Problem gestoßen.

Die Navigationsleiste links soll beim vertikalen scrollen immer an ihrer Position sein, beim horizontalen scrollen aber möglichst nicht, da sie sonst über dem Text steht.
Das Problem tritt nur auf bei kleinem Browserfenster, ist dann aber sehr störend.
Bei meiner Photogallery hab ich die feste Positionierung der Navigation komplett weg gelassen, da sich dort die Fensterbreite erweitert und die Navigation sonst immer über dem Text bzw. Bildern liegt.

Bin relativ frisch in HTML und CSS und hab mir das alles Stück für Stück irgendwo angesehen und versucht nach zu bauen. Doch komme ich dort jetzt nicht weiter.

hier mal der CSS Code für die Positionierung:

Code:
div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 772px;
	height: 100%;
    padding: 0;
}

div#Oben {
	position: absolute;
	top: 0px;
	width: 772px;
	background: #efefef;
	border: 1px ridge silver;
}
	html>body #Oben {  /* nur fuer moderne Browser! */
	position: absolute;
}

div#Inhalt {
	position: relative; 
	background: #e0e0e0;
	background-image:url(../images/back_li.jpg); background-repeat:repeat-y;
	width: 772px; height: 100%;
	top: 71px;
	border: 1px ridge silver;
}	
	html>body #Inahlt {  /* nur fuer moderne Browser! */
	position: relative;
}

div#Navigation {
	position: relative; 
	float: left;
	width: 221px;
	left: auto; top: 71px; bottom: auto;
}
	html>body #Navigation {  /* nur fuer moderne Browser! */
	position: fixed;
}
 
... Die Navigationsleiste links soll beim vertikalen scrollen immer an ihrer Position sein, beim horizontalen scrollen aber möglichst nicht, da sie sonst über dem Text steht.
Hallo,

ich würde den Navigationsblock einfach in der Schichtposition hinter den Inhaltsblock legen, so dass er beim horizontalen Scrollen abgedeckt wird. Das erreichst du, indem entweder im HTML die Navigation vor den Inhalt gesetzt wird oder per CSS über die z-Index-Eigenschaft. Dabei ist lediglich zu beachten, dass im ungescrollten Zustand der Inhaltsblock die Navigation nicht verdeckt. Bei fast allen Browser kann man auch durch transparente Ebenen nicht "hindurchklicken".

Übrigens:
Wozu dient das Javascript "rechtsklicksperre". Vermutlich nur dazu, jemandem Knüppel zwischen die Beine zu werfen, der dir hier evtl. helfen möchte.
 
Hi,
danke erst mal für die Inspiration, doch leider hab ich das gewünschte Ergebnis noch nicht erhalten.
Problem ist dabei das mein Inhalts div über die komplette Breite geht und nun dadurch die Navigation sofort hinter dem Inhalt liegt und gar nicht erst zu sehen ist.

PS: Das mit der rechtsklicksperre tut mir leid, hät ich dran denken sollen das mal raus zu nehmen.
hab das hier http://anmi.bplaced.net/versuch/annett.html mal entfernt zum probieren.
 
Zurück