Hier einmal ein Beispiel. Leider funktioniert es noch nicht 100%ig. Denn ich möchte, dass man den Content beim Hochscrollen gar nicht mehr sieht - jetzt ist er ja noch sichtbar.
Gibt es also eine Möglichkeit den Content verschwinden zu lassen, auch wenn die beiden Div's die gleiche Hintergrundfarbe haben???
Code
* { margin: 0; padding: 0; }
body { background: #555555; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; color: #ffffff; }
.clear { clear: both; }
.center { width: 750px; margin: 0 auto; }
div#header { z-index: 2; width: 100%; padding-bottom: 50px; border-bottom: 1px solid #777777; position: fixed; top: 20px; }
div#header ul { margin: 10px 0 0 0; padding: 0; list-style: none; float: left; }
div#header ul li { }
div#header ul li a { text-decoration: none; color: #777777; }
div#header ul li a:hover { color: #ffffff; }
div#header h1 { font-size: 40px; color: #777777; width: 500px; float: right; }
div#header h1 span { font-size: 40px; color: #ffffff; }
div#content { z-index: 1; width: 100%; position: absolute; top: 200px; }
div#content img { margin-bottom: 30px; }
div#content h2 { font-size: 14px; margin-bottom: 10px; }
div#content p { font-size: 14px; line-height: 20px; text-align: justify; margin-bottom: 10px; }
Alles anzeigen