XHTMLforum - Farbverlauf als Background

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Farbverlauf als Background (http://xhtmlforum.de/showthread.php?t=58651)

Farbverlauf als Background

Hi zusammen,

ich möchte einen Farbverlauf für den Hintergrund meiner Seiten haben.

Das Problem: der Farbverlauf soll im Viewport unten anfangen; aber entweder setze ich ihn (ungewollt) über den Footer oder aber er fängt zu spät an (bei kleinerer Bildschirmauflösung sieht man ihn gar nicht).
Habe schom probiert mit bottom, position (absolute und fix), repeat aber irgenwie bekomme ich es nicht hin. Egal ob ich das gannze für html oder body definiere. Helft ihr mir auf die Sprünge?

Hier der css-Teil

Code:

html {

background: #ffffcc;

background-image:  url('/hp/verlauf.gif');



height : 100%; 

}



body { 

/*background: #ffffcc;

background-image:  url('/hp/verlauf.gif');*/

font-family :  "Book Antiqua", Georgia, Arial, sans-serif; 

text-align : center; 

color : #008080; 

height : 100%; 

}

und hier ein link zur Seite (die eigentlich von gelb nach grün verlaufen sollte, sieht man aber erst bei höherer Auflösung, aber dort auch nicht richtig, fängt eben "zu spät" an)
Undercover-Coon's

Und ich weiß, ich bin eine "Design"-Krampe...

Tanja

Wie wärs mit background-position: bottom left; ? :D

Supi, das klappt einwandfrei. Muss das ganze nur im html lassen, im body geht´s nicht. Aber egal.
Schön, wenn man sich damit auskennt. Ich google manchmal stundenlang und komme auf keinen grünen Zweig und hier geht´s ruck zuck.

Vielen Dank
Tanja

Nachtrag: ich musste dem html noch ein overflow:hidden geben, sonst hätte ich eine doppelte Scroll-Leiste gehabt.

Dafür sind wir doch da :D

Von deinem Codeschnipsel da oben dürfte es aber eigentlich nicht zwei Scrollbalken geben. Gib html und body noch ein padding: 0; margin: 0; mit - dann passt es ohne overflow: hidden ;)

Warum geht es nicht im Body? Ist oben der aktuelle Code verlinkt, warum gibst du den zwei Haupt-Divs (so nenne ich sie mal) ein overflow:auto?

Tanja,
entferne mal alle overflow: auto / hidden und position: absolute / fixed.

Dann gebe #contents min-height: 100% und #footer eine Höhe in em + negativen margin-top in em.

css-faq4 100% Höhe Footer Stick Alt

ho ho ho - immer langsam mit der alten Dame hier ....

ich probier das später mal alles aus (muss gleich erst die Kiddis "fertig" machen und was erledigen).

Ich habe (eigentlich) einen festen, sehr schmalen Header (muss nur manchmal eine Textzeile rein), den mittleren content-Bereich mit dem eigentlichen Ihnhalt (scrollbar) und einen festen Footer, der bei zu kleinem Anzeigenfenster scrollbar sein soll. Ich habe versucht, das ganze als liquid zu machen. Ein Menu muss fixed sein, sonst ist man total weit unten auf der Seite (Bilder) und man muss wieder zurück, um an das Menu zu kommen (mich nervt sowas).
Ich hab tierisch lange dran gesessen, weil css für mich (nach Frontpage und 100% Tabellenlauyout) gar nicht so einfach war; wollte meine HP auch nicht komplett verwerfen sondern jetzt nach und nach umgestalten.

Probiere Eure Tipps mal durch und melde mich dann...

Tanja

Sodele,

der Vorschlag von Boris funktioniert.
Setze ich das ganze in den body, ist der Farbverlauf nicht mehr zu sehen.
Mein Footer muss immer sichtbar sein, weil dort ein Menu drin ist.
@ plastiko: setze ich die Vorschläge um, rutscht mein Footer an das Ende der Seite (und ist daher nicht mehr am Ende des Viewports), ist aber nur durch scrollen zu erreichen und der Farbverlauf beginnt erst über dem Footer (Beispielseite: Undercover-Coon's , egal ob body oder html (Seite sieht so bescheiden aus, ist aber auch nur test-Seite!)
Ich hatte viele "feste" Footer ausprobiert; den "Alt", den von Sejuma und noch ein paar andere. Nur mit dem von Stu habe ich es so hinbekommen (warum auch immer..)

Warum ist margin, padding besser als overflow?

Tanja

Du mußt body und html height: 100% geben.
Die floats in #footer müssen eingeschlossen werden (hast du vorher mit overflow gemacht).
#footer ist höher als 2em;

Am einfachsten kopierst Du den Quelltext (ohne externes css) von
themaninblue.com/experiment/footerStickAlt/good_example_short.htm
und fügst nach und nach Deine Inhalte ein.

Das bekomm ich nicht hin, verstrubbelt mir irgendwie alles ...
Momentan möchte ich nur über css ändern; in naher Zukunft werde ich die Seiten sicherlich nochmals überarbeiten, aber momentan fehlt mir eine Idee zur Umsetzung und eines nicht völlig anderen Layouts.
Ich bin schon an einem drop-down Menü gescheitert, weil es immer wieder zu war nach einem neuen Seitenaufruf.

Man lernt nie aus, aber ich tue mich etwas schwer damit ...

Tanja