Willkommen in der Webstatt Zum Webstatt Blog und Stories
Remo1234 Remo1234 am 11.06.06 19:15

Hallo,
ich hab gerade das Problem, dass ich keine Ahnung habe, wie ich diesen Hintergrund mit XHTML/CSS am besteb aufbauen kann... Jemand ne Idee?

[IMG]http://binomia-gaming.de/files/vorlage.jpg[/IMG]

netcup.de Warum gibt es hier Werbung?
milahu milahu am 11.06.06 19:46

body: Grauer Hintergrund + Linien, repeat-x+fixed (wg. Verlauf)
body>#bg1: Schatten oben, repeat-x
body>#bg2: Heller horizontaler Streifen, repeat-x
body>#inhalt: Hintergrund mit grauem Rahmen + Schatten, repeat-y

Remo1234 Remo1234 am 11.06.06 22:02

Lässt sich das so wie hier beschrieben mit CSS3 machen?! Also jeweils die einzelnen Teile übereinander zu "legen"...

http://meiert.com/de/publications/articles/20051224/#background-image

Eine Frage dazu: Wie gebe ich den einzelnen BGs dann noch die repeats, positions etc.?


Edit: Der Verlauf soll ja quasi nur oben ein verlauf sein. wenn man weiter runter scrollt bleibt der BG in einer Farbe. Dann könnte ich den Verlauf mit Repeat-X über den Normalen BG legen oder so...

Wird aber schwierig das hinzubekommen, dass die Scanlines überall bündig aneinanderliegen...

Vertsehen die Browser überhaupt schon CSS3 ???

milahu milahu am 11.06.06 22:56

CSS3 ist noch Zukunftsmusik von 2008 (lt. deinem Artikel da).
Übereinanderlegen geht primär aber auch nur via XHTML.
Einzelheiten zu den CSS Definitionen für Hintergrundbilder gibt's hier.

Remo1234 Remo1234 am 11.06.06 22:59

Und wie bekomme ich das dann hin?

milahu milahu am 12.06.06 12:04

Bau die Seite als 1600x1200 JPEG oder lies meinen ersten Beitrag nochmal....

Christian am 12.06.06 18:26

Quote
Original von milahu
body: Grauer Hintergrund + Linien, repeat-x+fixed (wg. Verlauf)
body>#bg1: Schatten oben, repeat-x
body>#bg2: Heller horizontaler Streifen, repeat-x
body>#inhalt: Hintergrund mit grauem Rahmen + Schatten, repeat-y


frage

1. was genau bringt nochmal ">"
2. wie schreibt man das in html, brauch ich dann da zwei geschachtelte divs mit id "bg1" und "bg2"?

danke :)

bekomm ich mit der selben methode um eine box einen schatten an allen 4 seiten?

:)

der_nic der_nic am 12.06.06 18:35

zu 1. http://www.css4you.de/wscss/css04.html -> Verschachtelte Selektoren: Selektor > Selektor

Remo1234 Remo1234 am 12.06.06 18:41

Demnach funktionieren verschachtelte Selektoren im IE nicht?!

milahu milahu am 12.06.06 19:12

Sucker#1: Damit wollte ich doch nur die Struktur darstellen...
Sucker#2: [FONT=monospace]<body><div /><div /></body> 0_o[/FONT]
Remo1234: Richtig. Aber brauchst du die hier etwa?

Remo1234 Remo1234 am 12.06.06 20:10

Nein, mich haben deine ">" verwirrt. Dachte (wie nic) damit sind diese Verschachtelten Selektoren gemeint ( => unlogisch)...

Aber wie code ich das denn dann am besten? Divs erscheinen mir da als nicht angebracht...

In der Überschrift steht ja "Gutes XHTML"

Ich denke da gibts ne bessere Lösung... Noch jemand ne Idee?

milahu milahu am 12.06.06 21:02

Quote
Original von Remo1234
In der Überschrift steht ja "Gutes XHTML"

"Gutes XHTML" ist meistens ein Kompromiss aus Style und Semantik -- außer bei den Layouts,
die auch ohne zusätzliche Style Elemente realisierbar sind.

Dabei fällt mir grad ein, dass ich doof bin. ;)
Den grauen Hintergrund + Schatten oben + heller horiz. Streifen kannst ja zu einem Hintergrund
zusammenfassen mit repeat-x + fixed. Je weiter man dann runterscrollt, desto mehr verschwinden
die Scanlines und es geht allmählich in das Grau über, das du als Hintergrundfarbe definieren kannst.

Umsetzen lässt sich das dann ganz ohne zusätzliche Styleelemente -- allerdings auch nur im Utopos:
IE verträgt es nicht, wenn man <html> CSS Definitionen aufbrummt :-\

Wow, das ist echt mal ein gutes Konzept. *eigenlob* :D

leo am 13.06.06 16:56

hmm...ich hab schon gedacht ich habe das falsch verstanden und hab dann lieber nichts gepostet. dachte auch an milahus vorschlag, dürfte wohl die einfachste und effektivste lösung sein.

und IE6 versteht definitionen bei html { }

gruß.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt