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:
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;
}