Crossbrowser Farbverlauf Problem

Hazzi1 · #1 (**permalink**) 10.05.2012, 10:15

Hallo zusammen,

wie der Titel schon sagt hab ich ein Problem mit einem Farbverlauf.
Der Farbverlauf bezieht sich auf den body tag der Seite und ist in vertikaler Richtung.

Das Problem das ich nun habe ist, dass eine Unterseite recht kurz ist. Soll heissen, dass das untere Ende der Seite ohne scrollen zu sehen ist. Hieraus ergibt sich das Problem, dass bei Firefox(12.0) und Chrome(18.0.1025.16

der Hintergrund(Farbverlauf) ab dem Ende der Seite wiederholt wird. Wie kann ich das umgehen? Ich müsste in diesem Fall ja vorher wissen, wie groß das Browserfenster ist um den Inhalt der Seite künstlich zu strecken. Ist das möglich?

Den Code den ich verwendet habe ist folgender

HTML-Code:

background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#FFFFFF));



background: -moz-linear-gradient(top, #EBEBEB, #FFFFFF);



filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#FFFFFF);



-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#FFFFFF)";

Vielen Dank für eure Bemühungen.
Viele Grüße

lottikarotti · #2 (**permalink**) 10.05.2012, 10:30

Hallo,

du könntest für das Element html eine minimale Höhe (mit der Eigenschaft min-height) von 100% festlegen. Wenn dein Farbverlauf nun auf das Element body angewendet wird, dürfte dieser sich über die gesamte Seite strecken, sofern der Inhalt vollständig im sichtbaren Bereich liegt. Wird die Seite länger, dehnen sich html und somit auch body nach unten hin aus.

Um dein Problem etwas deutlicher zu machen, postest du beim nächsten Mal bitte dein vollständiges CSS + HTML und, wenn möglich, einen Link zu deinem Problem.

Gruß, lotti.

Hazzi1 · #3 (**permalink**) 10.05.2012, 10:39

Hallo lotti,

ich habe es gerade ausprobiert und es funktioniert einwandfrei.
So einfach kann es manchmal gehen.

Vielen Dank für die schnelle Antwort und die Verlinkungen.

Viele Grüße
Hazzi

fricca · #4 (**permalink**) 10.05.2012, 10:44

Zitat:

Zitat von lottikarotti

du könntest für das Element html eine minimale Höhe (mit der Eigenschaft min-height) von 100% festlegen. Dem Element body gibst du dann eine Höhe (mit der Eigenschaft height) von 100%.

Die height-Angabe des body ist wirkungslos, weil der Bezugswert fehlt. Wenn html keine eigenen Angaben für einen Hintergrund hat ist für body auch nichts weiter nötig.

lottikarotti · #5 (**permalink**) 10.05.2012, 11:01

Zitat:

Zitat von fricca

Die height-Angabe des body ist wirkungslos, weil der Bezugswert fehlt. Wenn html keine eigenen Angaben für einen Hintergrund hat ist für body auch nichts weiter nötig.

Hallo,

das stimmt natürlich. Da habe ich mal wieder Unsinn verzapft. Danke für die Info!

Gruß, lotti.

Hazzi1 · #6 (**permalink**) 10.05.2012, 11:43

Und ich sage nochmals vielen Dank an fricca für die zusätzliche Info.

Viele Grüße
Hazzi

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Font der Überschrift ändern (Problem)	artist	CSS	2	07.12.2007 10:01
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28