asciwhite
Nov 22, 2012, updated at 11:15:25 (UTC)
view3928
view21
1
Goto Top

Webseite erstellen, CSS Problem mit Mozilla

GermansolvedQuestionWeb DevelopmentDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 194721

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

Printed on: April 23, 2024 at 15:04 o'clock

21 Comments
Latest comment
Goto Top
Member: B4ZTI4N
B4ZTI4N Nov 22, 2012 at 11:39:38 (UTC)
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.
Member: AsciWhite
AsciWhite Nov 22, 2012 updated at 12:07:28 (UTC)
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
Member: B4ZTI4N
B4ZTI4N Nov 22, 2012 at 12:27:43 (UTC)
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...
Member: AsciWhite
AsciWhite Nov 22, 2012 at 12:42:45 (UTC)
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ß
Member: Bosnigel
Bosnigel Nov 22, 2012 at 12:57:28 (UTC)
Goto Top
Muss da nicht ein repeat-y hin?
Member: AsciWhite
AsciWhite Nov 22, 2012 at 12:58:57 (UTC)
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ß
Mitglied: 16568
16568 Nov 22, 2012 at 13:18:30 (UTC)
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)
Member: AsciWhite
AsciWhite Nov 22, 2012 updated at 13:47:40 (UTC)
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 ...
Mitglied: 16568
16568 Nov 22, 2012 at 15:56:00 (UTC)
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
Member: AsciWhite
AsciWhite Nov 22, 2012 at 16:05:16 (UTC)
Goto Top
du scheinst jedenfalls nichts brauchbares beisteuern zu können, Mister XML/CSS/XHTML Profi ...
Member: Arano
Arano Nov 22, 2012 updated at 17:44:12 (UTC)
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
Member: Bosnigel
Bosnigel Nov 22, 2012 updated at 18:49:44 (UTC)
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?
Member: AsciWhite
AsciWhite Nov 23, 2012 at 07:21:25 (UTC)
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ß
Member: AsciWhite
AsciWhite Nov 26, 2012 at 09:45:48 (UTC)
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...
Mitglied: 16568
16568 Nov 26, 2012 at 11:23:34 (UTC)
Goto Top
Siehste, geht doch...

Immer diese Uneinsichtigen face-wink


Lonesome Walker
Member: AsciWhite
AsciWhite Nov 26, 2012 at 12:30:57 (UTC)
Goto Top
komisch nur, dass von dir nichts brauchbares kam ...
Member: Arano
Arano Nov 26, 2012 at 12:52:15 (UTC)
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
Mitglied: 16568
16568 Nov 26, 2012 updated at 13:08:10 (UTC)
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
Member: AsciWhite
AsciWhite Nov 26, 2012 at 13:06:56 (UTC)
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ß
Member: Arano
Arano Nov 26, 2012 at 14:11:18 (UTC)
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
Member: AsciWhite
AsciWhite Nov 26, 2012 at 14:31:48 (UTC)
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
GermansolvedQuestionWeb DevelopmentDevelopment
Hotly discussed
gleixnerdCheck of ZFW Firewallgleixnerd - 5 CommentsjstrickerWireguard VPN on UDM Pro behind Fritzbox - Handshake did not completejstricker - 3 CommentsAlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment