asciwhite
Goto Top

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

Content-ID: 194721

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

Ausgedruckt am: 05.11.2024 um 21:11 Uhr

B4ZTI4N
B4ZTI4N 22.11.2012 um 12:39:38 Uhr
Goto Top
> ...
> <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.
AsciWhite
AsciWhite 22.11.2012 aktualisiert um 13:07:28 Uhr
Goto Top
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
B4ZTI4N
B4ZTI4N 22.11.2012 um 13:27:43 Uhr
Goto Top
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...
AsciWhite
AsciWhite 22.11.2012 um 13:42:45 Uhr
Goto Top
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ß
Bosnigel
Bosnigel 22.11.2012 um 13:57:28 Uhr
Goto Top
Muss da nicht ein repeat-y hin?
AsciWhite
AsciWhite 22.11.2012 um 13:58:57 Uhr
Goto Top
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ß
16568
16568 22.11.2012 um 14:18:30 Uhr
Goto Top
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)
AsciWhite
AsciWhite 22.11.2012 aktualisiert um 14:47:40 Uhr
Goto Top
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 ...
16568
16568 22.11.2012 um 16:56:00 Uhr
Goto Top
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
AsciWhite
AsciWhite 22.11.2012 um 17:05:16 Uhr
Goto Top
du scheinst jedenfalls nichts brauchbares beisteuern zu können, Mister XML/CSS/XHTML Profi ...
Arano
Arano 22.11.2012 aktualisiert um 18:44:12 Uhr
Goto Top
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>

  1. Wie hoch ist __die Seite__ ?
  2. Wieso erzeugt hier ein CSS: body{ height:100% } Scrollbalken ? (auch wenn alle "border = 0px" sind)
  3. Welchem Element sollte der Farbverlauf zugeordnet werden ? Und...
  4. 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
Bosnigel
Bosnigel 22.11.2012 aktualisiert um 19:49:44 Uhr
Goto Top
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?
AsciWhite
AsciWhite 23.11.2012 um 08:21:25 Uhr
Goto Top
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ß
AsciWhite
AsciWhite 26.11.2012 um 10:45:48 Uhr
Goto Top
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...
16568
16568 26.11.2012 um 12:23:34 Uhr
Goto Top
Siehste, geht doch...

Immer diese Uneinsichtigen face-wink


Lonesome Walker
AsciWhite
AsciWhite 26.11.2012 um 13:30:57 Uhr
Goto Top
komisch nur, dass von dir nichts brauchbares kam ...
Arano
Arano 26.11.2012 um 13:52:15 Uhr
Goto Top
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
16568
16568 26.11.2012 aktualisiert um 14:08:10 Uhr
Goto Top
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 face-wink


Lonesome Walker
AsciWhite
AsciWhite 26.11.2012 um 14:06:56 Uhr
Goto Top
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ß
Arano
Arano 26.11.2012 um 15:11:18 Uhr
Goto Top
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
AsciWhite
AsciWhite 26.11.2012 um 15:31:48 Uhr
Goto Top
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