nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
suit
Gunnar Bittersmann
suit
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hallo zusammen,
ich möchte den Hintergrund einer Webseite durch einige Quadrate gestalten, die sich in x-Richtung periodisch wiederholen sollen.
Nun möchte ich dies nicht mittels eines quadrate.gif und
<body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>
realisieren, sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:
<div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">
<div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
<div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
</div>
Ist es möglich das <div> analog zu repeat-x periodisch zu wiederholen?
Alternativen zu meinem Ansatz einer periodischen Wiederholung des <div> sind willkommen.
Viele Grüße und tausend Dank!
Tom
@@Tom74269:
nuqneH
Nun möchte ich dies nicht mittels eines quadrate.gif und
<body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>realisieren,
Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.
Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?
sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:
<div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">
<div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
<div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
</div>
Das in eine Vektorgrafik übersetzt sieht so aus:
~~~xml
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" width="100" height="100">
<rect x="0" y="0" width="0.5" height="0.5" fill="red"/>
<rect x="0.5" y="0.5" width="0.5" height="0.5" fill="red"/>
</svg>
Speichern als quadrate.svg und im Stylesheet einbinden:
body { background: url(quadrate.svg) repeat-x }
Funktioniert in aktuellen Firefox, Opera, Chrome, Safari. (IE kann ich gerade nicht testen.)
Anmerkung: Schöner wäre es, die Farbe der Quadrate nicht im SVG, sondern auch im Stylesheet anzugeben. Also keine @fill-Attribute, dafür am Anfang:
<?xml-stylesheet type="text/css" href="default.css" ?>
und im Stylesheet:
rect { fill: red }
Ruft man die SVG-Grafik direkt im Browser auf, funktioniert das auch. Als Hintergrundbild eingebunden färbt jedoch nur Opera die Quadrate.
Qapla'
@@Gunnar Bittersmann:
nuqneH
Funktioniert in aktuellen Firefox, Opera, Chrome, Safari. (IE kann ich gerade nicht testen.)
Nachtrag: Funktioniert in IE ab 9, Firefox ab 4.
Als Hintergrundbild eingebunden färbt jedoch nur Opera die Quadrate.
Auch der IE 9 macht dies richtig.
Qapla'
Hi und vielen Dank für die Kommentare!
Nun möchte ich dies nicht mittels eines quadrate.gif und
<body style="background-image:url(quadrate.gif);background-repeat:repeat-x"> ...</body>realisieren,
Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.
Natürlich ist es sinnvoll den Hintergrund global in einem Stylesheet zu definieren. Aber an meinem Problem würde das nichts ändern, oder verstehe ich dich jetzt falsch?
Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?
Naja, auch als Vektorgrafik werden es nur wenige Byte sein. Eine solche bietet den Vorteil, dass sie in allen Zoom-Stufen perfekt aussieht.
sondern würde die quadrate.gif gerne als Vektorgrafik via css und <div> aufbauen:
<div style="position:absolute; left:0px; top:0px; width:100px; height:100px;">
<div style="position:absolute; left:0px; top:0px; width:50px; height:50px; background:red;"></div>
<div style="position:absolute; left:50px; top:50px; width:50px; height:50px; background:red;"></div>
</div>
>
> Das in eine Vektorgrafik übersetzt sieht so aus:
>
> ~~~xml
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" width="100" height="100">
> <rect x="0" y="0" width="0.5" height="0.5" fill="red"/>
> <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="red"/>
> </svg>
Speichern als quadrate.svg und im Stylesheet einbinden:
body { background: url(quadrate.svg) repeat-x }
Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.
Grüße
Tom
Hi!
Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.
Nicht? Oehm. Da weisst Du mehr als mein IE8. Wenn Du IE6 meinst, ist das total wurst.
@@Steel:
nuqneH
Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.
Nicht? Oehm. Da weisst Du mehr als mein IE8.
Nicht. Oder dein IE 8 weiß mehr als meiner. Öhm.
Oder zeigt dein IE 8 bei diesem Test den Hintergrund an?
(Ich hab nur bei einem Quadrat ein @fill-Attribut gesetzt, um den Unterschied zwischen Opera und IE 9 einerseits und Firefox und Webkits andererseits darzustellen. Auch der brandneue Chrome 11 stylt SVG als Hintergrundbild nicht.)
Qapla'
Moin!
Oder zeigt dein IE 8 bei diesem Test den Hintergrund an?
Er laedt eine CSS Datei, die in Notepad falsch dargestellt wird. (Rechtecke, wo wahrscheinlich Umbrueche sein sollten)
Er laedt eine CSS Datei, die in Notepad falsch dargestellt wird. (Rechtecke, wo wahrscheinlich Umbrueche sein sollten)
[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt
[ ] ich soll Notepad nicht verwenden, weil das keine Unix-Zeilenumbrüche kennt
Mehrfachauswahl möglich :p
Wird aber nunmal geoeffnet.
Wird aber nunmal geoeffnet.
Ja, weil du vermutlich deinem Windows nicht sagst, was dein Standard-Texteditor ist - den verwendet der Internet Explorer automatisch.
Wird aber nunmal geoeffnet.
Ja, weil du vermutlich deinem Windows nicht sagst, was dein Standard-Texteditor ist - den verwendet der Internet Explorer automatisch.
Doch klar: Notepad
Ich werd sicher nicht Word nehmen.
Ja, weil du vermutlich deinem Windows nicht sagst, was dein Standard-Texteditor ist - den verwendet der Internet Explorer automatisch.
Doch klar: Notepad
Ich werd sicher nicht Word nehmen.
Das hat auch keine verlangt - aber was spricht gegen Notepad++, PSPad oder sonstwas?
Hoi,
Ich werd sicher nicht Word nehmen.
Das hat auch keine verlangt - aber was spricht gegen Notepad++, PSPad oder sonstwas?
Das die nicht bei mir installiert sind. Die alte Leier.
PS:
(das kommt von zu schnellem abschicken)
Ein FF 3.6 zeigt tatsaechlich eine Seite mit lorem ipsum... ohne Hintergrund.
@@Steel:
nuqneH
Ein FF 3.6 zeigt tatsaechlich eine Seite mit lorem ipsum... ohne Hintergrund.
Ja, das erwähnte ich schon.
Qapla'
Die Seite bekomme ich allerdings nicht mit dem IE. Nur das CSS File.
@@Steel:
nuqneH
Oder zeigt dein IE 8 bei diesem Test den Hintergrund an?
Er laedt eine CSS Datei
Kann ich in meinem IE nicht nachvollziehen. Möglicherweise hat deiner andere Präferenzen im Accept-Feld im HTTP-Header oder kommt mit content negotiaion nicht klar. Probier mal mit Endung .html!
Qapla'
Hi!
Kann ich in meinem IE nicht nachvollziehen. Möglicherweise hat deiner andere Präferenzen im Accept-Feld im HTTP-Header oder kommt mit content negotiaion nicht klar. Probier mal mit Endung .html!
Funzt! ;) Ohne Hintergrundbilder.
@@Steel:
nuqneH
Kann ich in meinem IE nicht nachvollziehen. Möglicherweise hat deiner andere Präferenzen im Accept-Feld im HTTP-Header oder kommt mit content negotiaion nicht klar. Probier mal mit Endung .html!
Funzt! ;)
Das war’s also.
Ich hab dann mal alle test*.css in default*.css und alle test*.svg in qudrate*.svg umbenannt. Jetzt sollte es auch im IE ohne Endung .html funzen.
Qapla'
Hi!
Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.
Nicht? Oehm. Da weisst Du mehr als mein IE8. Wenn Du IE6 meinst, ist das total wurst.
Habe mich da auf Wikipedia (dt+engl) verlassen. Dort steht, dass erst der IE9 svg nativ unterstützt. Bei älteren Versionen soll die zusätzliche Installation eines plugins notwendig sein.
Grüße
Tom
Hi!
Nun. Plugins dafuer kann ich bei dem hier nicht finden. Privat nutze ich IE nicht, hab also nur den hier, der evtl. stark vergewaltigt wurde. Deshalb kann meine Aussage durchaus falsch sein.
@@Steel:
nuqneH
Privat nutze ich IE nicht, hab also nur den hier, der evtl. stark vergewaltigt wurde.
Und, zeigt der SVG _als Hintergrundbild_ an?
Qapla'
Hoi,
Privat nutze ich IE nicht, hab also nur den hier, der evtl. stark vergewaltigt wurde.
Und, zeigt der SVG _als Hintergrundbild_ an?
Bei deinem Test gibts keinen Hintergrund, weil CSS Dateien keinen Hintergrund haben. Mehr bekomme ich da ja nicht. Ich geh also mal kuehn davon aus, das das mit dem Background gar nicht klappt.
Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.
Den und seine Kollegen abwärts kannst du ja mit VML füttern.
@@Tom74269:
nuqneH
Mittels Inline-Angaben in @style-Attributen möchtest du das wirklich nicht realisieren. Alle Darstellungsangaben gehören ins Stylesheet.
Aber an meinem Problem würde das nichts ändern, oder verstehe ich dich jetzt falsch?
An diesem Problem nicht. Aber mit Inline-Styles schaffst du dir haufenweise anderer Probleme (Wartbarkeit, Wiederverwendbarkeit).
Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?
Naja, auch als Vektorgrafik werden es nur wenige Byte sein. Eine solche bietet den Vorteil, dass sie in allen Zoom-Stufen perfekt aussieht.
Hm, Skalieren von Grafiken mit ausschließlich horizontalen und vertikalen Kanten sollten Browser doch halbwegs hinbekommen, oder? Würde ein Pixel Rosa zwischen Rot und Weiß den Hintergrund zur Unschärfe verschwimmen lassen?
Ok, svg wollte ich nicht verwenden, da dies vom immer noch recht verbreiteten IE8 nicht unterstützt wird.
Grafik als Fallback für Browser, die SVG-Hintergrund nicht unterstützen:
body
{
background: url(quadrate.png) repeat-x;
background: url(quadrate.svg) repeat-x, url(quadrate.svg) repeat-x;
}
Browser, die multiple Hintergrundbilder unterstützen, bekommen SVG; die anderen eine Rastergrafik.
Dummerweise bleibt Firefox 3.6 dabei auf der Strecke, da er multiple Hintergrundbilder unterstützt, aber keine SVG-Hintergrundbilder.
Also für Firefox Rastergrafik setzen, für den 4er jedoch mit SVG überschreiben. Muss sich nur noch ein Selektor finden, den der 3.6er nicht kennt … da ha’m wa’n ja:
body, x:-moz-any-link
{
background: url(quadrate.png) repeat-x;
}
body:not(:indeterminate), x:-moz-any-link
{
background: url(quadrate.svg) repeat-x;
}
Qapla'
@@Gunnar Bittersmann:
nuqneH
Grafik als Fallback für Browser, die SVG-Hintergrund nicht unterstützen:
Ähm, SVG ist selbst nur Fallback für die reine CSS-Lösung.
Also für Firefox Rastergrafik setzen, für den 4er jedoch mit SVG überschreiben.
Papperlapapp! Firefox kann Gradienten!! Webkits auch. Chrome mittlerweile auch in der Mozilla-Syntax. Opera mittlerweile auch.
Also einfach zwei Gradienten mit harten Farbübergang per background-position und background-size wirkungsvoll in Szene gesetzt …
Problemtatisch ist das Setzen von background-size, das nur bei den Gradienten wirken soll. Das müsste also innerhalb der Deklaration als <bg-position>/<bg-size> angegeben werden. Dummerweise versteht das nur Opera. Und glücklicherweise versteht das Opera, denn -o-background-size versteht er nicht. Also für Firefox und Webkits background-size mit Präfixen setzen, sonst stört es die Größe im IE 9.
Voilà!! Test 4
Ich hab ein bisschen umgefärbt, damit man sieht, was Sache ist:
blau: Das ist old school: Rastegrafik (IE < 9)
grün: Da sind wir im grünen Bereich: SVG (IE 9)
rot: Hot! Gradienten (Firefox, Webkits, Opera)
Qapla'
@@Gunnar Bittersmann:
nuqneH
Also für Firefox und Webkits background-size mit Präfixen setzen, sonst stört es die Größe im IE 9.
Firefox 4 versteht -moz-background-size nicht mehr, sondern nur noch background-size; background-size darf aber nicht für alle Browser gesetzt werden. Glücklicherweise lässt sich Firefox per Selektor mit proprietärer Pseudoklasse gezielt ansprechen.
Qapla'
@@Gunnar Bittersmann:
nuqneH
Problemtatisch ist das Setzen von background-size […]
Eigentlich nicht, wenn man mal richtig nachdenkt.
Es werden ja schon multiple Hintergründe verwendet, da dürfen es auch ein paar mehr sein:
background: url(quadrate.svg), none, none;
background: none, <linear-gradient> 0 0, <linear-gradient> 0 50px;
Dann kann man für jeden Hintergrund background-size getrennt angeben:
background-size: auto auto, 100px 50px, 100px 50px;
Jetzt aber: Test 5
Qapla'
@@Gunnar Bittersmann:
nuqneH
background-size: auto auto, 100px 50px, 100px 50px;
Nö, nicht auto, sondern die gewünschten Abmessungen!
background-size: 100px 100px, 100px 50px, 100px 50px;
Dann kommen @width und @height aus dem SVG raus und die Größe wird da angegeben, wo’s hingehört: im Stylesheet.
Qapla'
@@Gunnar Bittersmann:
nuqneH
http://localhost/test/test3.html
Der war gut …
Qapla'
@@Tom74269:
nuqneH
Ähm, was hast du gegen eine nur wenige Byte große Grafikdatei im GIF- oder PNG-Format?
Naja, auch als Vektorgrafik werden es nur wenige Byte sein.
BTW: Dateigrößen:
PNG-8, 2 Farben: 180 Byte
SVG (ohne @fill, @width, @height): 331 Byte
Qapla'
@@Gunnar Bittersmann:
nuqneH
<?xml-stylesheet type="text/css" href="default.css" ?>
Das ist es, womit Firefox und Webkits nicht klarkommen. Mit CSS im SVG-Dokument funktionierts auch in diesen. (Test 2)
Qapla'
@@Tom74269:
nuqneH
Alternativen zu meinem Ansatz einer periodischen Wiederholung des <div> sind willkommen.
Qapla'
@@Gunnar Bittersmann:
Hi Gunnar,
vielen Dank für deine ausführlichen Kommentare. Ich denke, du hast das Problem trotz der zahlreichen Eigenheiten der Browser elegant gelöst.
Nochmals vielen Dank und ebenso viele Grüße.
Tom