22.11.2012, aktualisiert um 12:15:25 Uhr

4016

Webseite erstellen, CSS Problem mit Mozilla

Hallo an alle,
Ich erstelle zur Zeit eine Webseite in der ein Farbverlauf liegen soll. Bisher bin ich bei diesem Stand:

...
<body style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%);">  
...

Leider erzeugt Mozilla damit aber nur eine sich wiederholende Zeile des Farbverlaufs. Also habe ich eine Höhenangabe hinzugefügt:

...
<body style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%); height: 2000px">  
...

Damit wird zwar der Farbverlauf auf die Größe gesetzt, aber ich habe bei unterschiedlichen Auflösungen die unbeliebten Scrollbalken.
Ein Code nach diesem Schema wird jedoch vom FF komplett ignoriert.

...
<body style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%); height: 100%">  
...

Frage: wie bekomme ich FF dazu überredet, den Farbverlauf auf die gesamte Seitenhöhe anzuwenden?

MfG

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 194721

Url: https://administrator.de/contentid/194721

Ausgedruckt am: 22.11.2024 um 13:11 Uhr

21 Kommentare

Neuester Kommentar

> ...
> <body style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%);">  
> ...
> 

Du kannst

style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%); background-repeat:repeat-x;"

Vielleicht kann man dann gesondert nochmal die Farbe vom Verlaufsende unten nehmen dann wiederholt er sich zumindest nur horizontal.

Hallo und erstmal Danke für deinen Versuch.

nach kleiner Korrektur am Ende deiner Zeile (erst " dann ; oder?) habt ich nun folgendes probiert:

<body style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%); background-repeat:repeat-x";>   

Leider ohne Erfolg. FF macht stur eine schmale Zeile...
Screenshots hochladen ist ja hier anscheinend nicht mehr, also: http://s1.directupload.net/file/d/3082/yq77emhm_jpg.htm

Danke!!! verschrieben

Vielleicht erstmal ein 1px breites jpg mit passender größe nehmen und repeat-x drauf anwenden. Backgroundcolor = endfarbe.

Und jetzt überlegen wir uns nochmal was...

ne ne ne neee... die "Bildchen-Methode" will ich ja gerade nicht nutzen weil das ja die nur das Problem umgeht und ich will ja auch valides (x)html schreiben ;)

Außerdem funktioniert -moz-linear-gradient ja bei div-Tags zb. Was mich auch noch brennend interessieren würde wär ja, wieso der angegebene Winkel einfach mal ignoriert wird, wenn ich das im body-Tag machen will :-O Beim div geht das ganze nämlich 1a :-O (soviel dazu, dass nur der IE sich nicht an Konventionen hällt)

Gruß

Muss da nicht ein repeat-y hin?

Soweit ich den Befehl verstanden hab muss da gar nichts hin. Ich will ja gar nicht, dass irgendwas in irgendeiner Richtung wiederholt wird :-O

Gruß

Ich gebe Dir den Tipp:

lerne erst mal richtig, CSS in HTML zu verwenden.
Styles werden erstens ausgelagert, und zweitens ist der Gradient lediglich beim FF zu sehen.
(und drittens: Du bist auch einer der Vielen hier, die nicht mal die Mindestanforderungen an eine Frage fertigbekommen...)

Lonesome Walker
(ein Profi in [X]HTML [4/5], CSS und JavaScript)

Ohhh, Meister ergötze mich und alle anderen Unwissenden ...

Ich habe nie behauptet, dass ich alles kann. Deshalb stelle ich auch hier meine Fragen rein!
Mir ist NATÜRLICH klar, dass CSS in eine eigene Datei gehört, aber der Problemstellung hier ist das völlig Schnuppe.
So nebenbei glaube ich schon das es für den IE was gib... zb: "background: -ms-linear-gradient"
Das führt aber ja von meinem Problem weg.

Du als "ein Profi in [X]HTML [4/5], CSS und JavaScript" solltest mir doch sicher meine Frage beantworten können, stimmst?

PS: für dich kommentiere ich Sarkasmus zukünftig mit "Bazinga" :D
PPS: Was meine Fragestellung angeht finde ich schon, das man und ander diese sehr wohl verstehen können ...

Zitat von @AsciWhite:

PPS: Was meine Fragestellung angeht finde ich schon, das man und ander diese sehr wohl verstehen können ...

na, dann gucken wir doch mal, ob Du sie hier gelöst kriegst...

Lonesome Walker

du scheinst jedenfalls nichts brauchbares beisteuern zu können, Mister XML/CSS/XHTML Profi ...

Hallo zusammen

Also lösen muss er das schon selber...
Asci, mit dem folgendem HTML sollte sollst du die folgenden Fragen beantworten können:

<html>
  <head>
    <title>-moz-linear-gradient( ...testing... )</title>
    <style tyoe="text/css">  
      <!--
        html { border: 10px solid #ff0000; }
        body { border: 10px solid #00ff00; }
        p    { border: 10px solid #0000ff; }
      -->
    </style>
  </head>
  <body>
  
  
  <p>#
    Hier ist ein Absatz, dieser sollte schon etwas l&auml;nger sein denn nur eine Zeile w&auml;re dann doch etwas wenig...
    Hier ist ein Absatz, dieser sollte schon etwas l&auml;nger sein denn nur eine Zeile w&auml;re dann doch etwas wenig...
    Hier ist ein Absatz, dieser sollte schon etwas l&auml;nger sein denn nur eine Zeile w&auml;re dann doch etwas wenig...<br>
    Hier ist ein Absatz, dieser sollte schon etwas l&auml;nger sein denn nur eine Zeile w&auml;re dann doch etwas wenig...
  #</p>
  
  
  </body>
</html>

Wie hoch ist __die Seite__ ?
Wieso erzeugt hier ein CSS: body{ height:100% } Scrollbalken ? (auch wenn alle "border = 0px" sind)
Welchem Element sollte der Farbverlauf zugeordnet werden ? Und...
Welche Eigenschaften sollte dieses haben ?

Und nun sollte auch diese Bemerkung, tatsächlich einen Sinn ergeben:
(...lerne erst mal richtig, CSS in HTML zu verwenden. ...)

~Arano

PS: Naja... zumindest hoffe ich das man das kann... *fg*
Es gibt "keine" dummen Fragen, dumm ist es nur __nicht__ zu fragen

Also mit

 <body style="background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%); background-repeat:repeat-x";>   

Macht er mir den gesamten Hintergrund mit Farbverlauf und ohne Scrollbalken.
Ist das nicht das gewünschte Ergebnis?

hallo Bosnigel,
ja, das ist das gewünschte Verhalten, aber bei mir wird der Winkel von 315deg für den Farbverlauf (von links oben nach rechts unten) ignoriert. Es wird nur ein waagerechter erstellt. Wenn ich die gleiche Zeile auf ein div anwende klappts.

Gruß

Hallo,
nach etwas probieren habe ich nun selber folgende Lösung gefunden:

...
<body>
  <div>
    ...
  </div>
</body>
...

In der HTML Datei steht also keine Stylesheet-Angabe mehr und die CSS Datei hat diesen Aufbau:

html {
  height: 100%;
}

body{
  height: 100%;
  margin: 0px;
  background: -moz-linear-gradient(60% 0% 315deg,#FF2D2D, #2D2DFF, #000000 100%);
}

Somit wird der gesamte Seitenhindergrund mit dem Farbverlauf von links oben nach rechts unten gefüllt. Solage der Inhalt es nicht verlangt kommen auch keine Scollbalken.

Gruß und Danke an die, die sich wenigstens mit Vorschägen beteiligt haben...

Siehste, geht doch...

Immer diese Uneinsichtigen

Lonesome Walker

komisch nur, dass von dir nichts brauchbares kam ...

Das kann ich dir in gewisser Hinsicht eigentlich auch vorwerfen !
Denn warte ich noch immer auf mindestens eine Antwort zu meinen Fragen mit denen ich DIR helfen wollte... von vor VIER TAGEN !

Aber statt dessen Quittierst du das mit einem

habe ich nun selber ... gefunden

Schönen Dank auch,
schönen Tag noch,
auf nimmer Wiedersehen

~Arano

Zitat von @AsciWhite:

komisch nur, dass von dir nichts brauchbares kam ...

Echt?
Ja, schade daß Du nicht lesen kannst:

Zitat von @16568:

Ich gebe Dir den Tipp:

lerne erst mal richtig, CSS in HTML zu verwenden.

Styles werden erstens ausgelagert, und zweitens ist der Gradient lediglich beim FF zu sehen.

(und drittens: Du bist auch einer der Vielen hier, die nicht mal die Mindestanforderungen an eine Frage fertigbekommen...)

So, wer hatte Recht?

@Arano:

Schönen Dank auch,
schönen Tag noch,
auf nimmer Wiedersehen

Nimm es nicht schwer, alleine die Formulierung seiner Frage hat ihn sicherlich geistig schon sehr gefordert

Lonesome Walker

Das war auch nicht an dich gerichtet ~Arno sondern an die unqualifizierten Kommentare von Herrn xHTML Profi L.Walker ...

Sorry, dass ich nicht explizit geschrieben habe, dass dein Vorschlag leider nicht auf mein Problem zutraf ...

Gruß

Zitat von @AsciWhite:

Das war auch nicht an dich gerichtet ~Arno sondern an die unqualifizierten Kommentare von Herrn xHTML Profi L.Walker ...

Ja das habe ich auch so aufgefasst und verstanden !

Sorry, dass ich nicht explizit geschrieben habe, dass dein Vorschlag leider nicht auf mein Problem zutraf ...

Nun ja, das meine Vorschläge hin und wieder tatsächlich mal nicht zutreffen kenne ich schon, das ist kein Problem.
Aber wenn ich mir meine Fragen so ansehen, mit denen ich auf die HÖHE zweier Elemente eingehe und das mit deiner Lösung vergleiche (in der ausgerechnet die HÖHE zweier Elemente definiert wird) dann... ach was soll's...

...die Frage ist ja als gelöst markiert und das Problem ist es !

Schöne Woche noch
~Arano

Das da Scrollbalken kommen liegt an den borders (und ggf. margin und padding). Darüber bin ich auch schon gestolpert.

Den Farbverlauf habe ich dem Body-Tag über die CSS-Datei mitgegeben und die "Höhe zweier Elemente" muss wohl sein, da das body ja im html Tag verschachtelt ist.

MfG

gelöst Frage Webentwicklung Entwicklung

Mehr von AsciWhite

Windows 10, individuelle TaskleisteAsciWhite

Excel 2010 vba mehrspaltige listboxAsciWhite - 11 Kommentare

Tobit 12 mit Funkwerk LAN-CAPI Fehler 3303AsciWhite - 3 Kommentare

Zellenkommentar prüfenAsciWhite - 2 Kommentare

Heiß diskutiert