nicht angemeldet
CSS und Vertikales Scrollen
Hi Leute!
Mich treibt ein Problem mit CSS beinahe in den Wahnsinn, ich freue mich über alle Tipps! Also:
Ich baue gerade ein ziemlich verschachteltes Layout zusammen, only mit CSS. Die Anweisungen lauten z.B. wie folgt (es sind alles horizontal nebeneinander liegende Spalten, die letzte ist nach rechts hin "offen"):
#d_eins {position: absolute; top: 211px; left: 0px; width: 37px; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #8DCF66;}
#d_zwei {position: absolute; top: 211px; left: 37px; width: 1px; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #000000;}
#navigation_2 {position: absolute; top: 211px; left: 38px; width: 180px; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #8DCF66;}
#d_vier {position: absolute; top: 211px; left: 218px; width: 1px; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #000000;}
#content {position: absolute; top: 211px; left: 219px; width: 540px; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #8DCF66;}
#d_sechs {position: absolute; top: 211px; left: 759px; width: 1px; height: 100%; margin: 0px; padding: 0px; border: 0px; background: #000000;}
#teaser {height: 100%; margin: 0px 0px 0px 760px; padding: 0px; border: 0px; background: #8DCF66;}
Im HTML-Quellcode rufe ich dann über "DIV ID" das Ganze auf und positioniere die Boxen. Das ist kein Problem - klappt soweit gut. Wenn ich nun aber im Bereich "#content" Texte in die Website fülle, die sehr lang sind, reisst ab etwa 1,5 Bildschirmhöhen die Hintergrundfarbe beim vertikalen Scrollen einfach ab, und das über alle Spalten! Ich habe auch schon anstelle der Befehle "width: 100%" mit "bottom: 0px" gearbeitet. Geht auch nicht.
Wer weiß einen Rat? Tausend Dank ....;-)
-
Hi Andy,
Wenn ich nun aber im Bereich "#content" Texte in die Website fülle, die sehr lang sind, reisst ab etwa 1,5 Bildschirmhöhen die Hintergrundfarbe beim vertikalen Scrollen einfach ab, und das über alle Spalten! Ich habe auch schon anstelle der Befehle "width: 100%" mit "bottom: 0px" gearbeitet. Geht auch nicht.
worauf beziehen sich die 100 % der Höhe? Richtig, auf das übergeordnete Element. Gibt es einen speziellen Grund, auf ein simples Hintergrundbild für body zu verzichten? Ohne sich das anzusehen, kann man nicht viel mehr dazu sagen. Wie lautet die Adresse?
Grüße,
Roland-
Hi Roland!
Die Adresse der Seite lautet:
www.traumpalast.de/newlayout/main.htm
In der mittleren grünen Spalte habe ich zum Test ein Haufen geschützte Leerzeichen eingesetzt. Die direkt daneben liegenden Spalten sind von den CSS-Eigenschaften her ja nicht anders aufgebaut, verlieren aber Ihre Hintergrundfarbe beim vertikalen Scrollen.
Warum?
Was würdest Du an der Programmierung des Layouts ändern?Thanx für Deine Antwort!
Grüße,
Andy-
Hi Andy,
http://www.traumpalast.de/newlayout/main.htm
In der mittleren grünen Spalte habe ich zum Test ein Haufen geschützte Leerzeichen eingesetzt. Die direkt daneben liegenden Spalten sind von den CSS-Eigenschaften her ja nicht anders aufgebaut, verlieren aber Ihre Hintergrundfarbe beim vertikalen Scrollen. Warum?
weil sich 100% der Höhe bei den <div>s auf den Viewport beziehen, der in diesem Fall die Höhe einer Bildschirmseite ist. Zum besseren Verständis lies bitte </archiv/2004/3/75228/>.
Was würdest Du an der Programmierung des Layouts ändern?
ich würde auf absolute Positionierung verzichten, den <div>s lediglich die gewünschte Breite und float: geben und den Hintergrund bei body {} definieren. Sollen die Begrenzungsstriche bis zum Ende der Seite gehen, benötigst du statt border: bei den <div>s ein entsprechend gestaltetes Hintergrundbild für <body>.
Grüße,
Roland-
Hi Roland!
Vielen Dank für den Tipp!
Habe den Artikel gelesen, jedoch noch eine Frage:ich würde auf absolute Positionierung verzichten, den <div>s lediglich die gewünschte Breite und float: geben und den Hintergrund bei body {} definieren. Sollen die Begrenzungsstriche bis zum Ende der Seite gehen, benötigst du statt border: bei den <div>s ein entsprechend gestaltetes Hintergrundbild für <body>.
Das ist mir jetzt nicht so ganz klar. ;-(
Die Begrenzungsstriche sollen bis zum Ende der Seite gehen, genauso wie die <div>s, denen man dann ja dank der CSS eine eigene background-color geben kann. Auf der rechten Seite des Browserfensters ist das kein Problem - es funktioniert ja nur am unteren Fensterrand nicht.
Die Border habe ich ja bereits auf 0 gesetzt, die Striche bilden ein eigenes <div>-element, welches seine Farbigkeit durch die background-color bekommt.
Wie meinst Du das mit dem Hintergrundbild?
Kannst Du mir das an einem Strich, der von oben nach unten gehen soll, schreiben?
Thanx a lot!Grüße,
Andy-
Hi Andy,
Die Begrenzungsstriche sollen bis zum Ende der Seite gehen, genauso wie die <div>s, denen man dann ja dank der CSS eine eigene background-color geben kann.
allerdings kannst du niemals allen <div>s per CSS die gleiche Höhe zuweisen, wenn diese variabel ist. Dann bleibt nur noch der Weg über _ein_ Hintergrundbild für die gesamte Seite, das diese Striche enthält. Ein Hintergrundbild für <body> reicht bei vertikaler Wiederholung immer bis zum Ende der Seite.
Grüße,
Roland
-
-
-
-