Die Suche hat 2 Ergebnisse ergeben FFE599

Jookpub

Forenbeiträge gestalten [Schritt-für-Schritt] - So 24 Okt 2010, 12:24

Beiträge mit dem Tag ffe599 auf Pooly's Kunst und Schreibforum Header21
Beiträge mit dem Tag ffe599 auf Pooly's Kunst und Schreibforum Leer10
Statt einer Farbe können wir für den Hintergrund natürlich auch eine Grafik nehmen. Wie das funktioniert, zeige ich euch jetzt.

Wir nehmen eine Tabelle vom letzten Mal:


Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)



Um statt der Farbe eine Grafik als Hintergrund zu bekommen, fügen wir das hier ein: background-image: url(http://www.bildadresse.de)
Es ist nicht nötig,  background-color: #FFE599 zu löschen.

Ich habe jetzt mal irgendein Hintergrundbild eingefügt.


Code:
[table style="border: 1px solid #ffffff;  background-color: #FFE599; background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/beispi10.jpg);"]
[tr]
[td]Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)[/td]
[/tr]
[/table]



Und das Ergebnis:


Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)



Wenn ihr möchtet, dass sich das Hintergrundbild bei größeren Tabellen wiederholt, fügt ihr noch den Zusatz background-repeat: repeat ein. (Wobei ich mich schwach daran erinnere, dass dies automatisch passiert, wenn man ein Hintergrundbild einsetzt. Also wenn ihr das Hintergrundbild senkrecht und waagerecht wiederholen wollt, könnt ihr diesen Zusatz wohl auch weglassen.)
Wollt ihr, dass das Bild sich nur waagerecht wiederholt, braucht ihr den Code repeat-x. Für eine senkrechte Wiederholung nehmt ihr repeat-y. Mit diesen Befehlen könnt ihr einige schöne Effekte erzielen. Zwei davon zeige ich jetzt.

Effekt mit repeat-x.

Hier eignen sich immer Verläufe sehr gut an. Diese könnt ihr leicht in eurem Bearbeitungsprogramm erstellen. Die Datei muss gar nicht groß sein. Ich nehme diese hier:  https://i.servimg.com/u/f29/12/89/51/33/verlau10.jpg


Code:
[table style="border: 1px solid #ffffff;  background-color: #9675fd; background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/verlau10.jpg); background-repeat: repeat-x;"]
[tr]
[td][color=white]Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)[/color]
[/td]
[/tr]
[/table]



Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)



Effekt mit repeat-y.

Da kommt mir für ein Schreibforum gleich ein besonders schönes Beispiel in den Sinn. ^^ Dafür habe ich mir diesen Hintergrund von http://www.kneller-gifs.de/ gespeichert:  https://i.servimg.com/u/f29/12/89/51/33/bg_rin10.gif
Auf dieser Seite findet ihr noch viele andere schöne Hintergründe. Schaut euch einfach mal um. (:


Code:
[table style="border: 1px solid #ffffff;  background-color: #9675fd; background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/bg_rin10.gif); background-repeat: repeat-y;"]
[tr]
[td]Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)
[/td]
[/tr]
[/table]




Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!
Hier steht jetzt ein wenig mehr Text, damit man mehr vom Hintergrundbild sieht. XD
Blubb, Blubb!
Bla, blaaaa x)



Das sieht jetzt noch nicht so schön aus, ich weiß. Im nächsten Teil zeige ich euch, wie ihr das mit dem Abstand zwischen Rand und Text besser machen könnt. ^^

Beiträge mit dem Tag ffe599 auf Pooly's Kunst und Schreibforum Footer13

Jookpub

Forenbeiträge gestalten [Schritt-für-Schritt] - Sa 23 Okt 2010, 20:56

Beiträge mit dem Tag ffe599 auf Pooly's Kunst und Schreibforum Header19
Beiträge mit dem Tag ffe599 auf Pooly's Kunst und Schreibforum Leer10
Diesmal werden wir ein bisschen Farbe in unsere Tabelle bringen. Wir nehmen als Beispiel diese Tabelle:


Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!



Zuerst ändern wir die Farbe unserer Linie. Dazu erweitern wir unseren Code um den Farbcode. #ffffff (Weiß)


Code:
[table style="border: 1px solid #ffffff;"]
[tr]
[td]Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb![/td]
[/tr]
[/table]



Dann sieht unsere Tabelle so aus:


Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!



Ihr könnt jeden Farbcode dort einfügen. Eine Tabelle mit den Codes findet ihr beispielsweise hier: Farbtabelle

Als nächstes möchten wir einen gelben Hintergrund für die Tabelle. Dazu brauchen wir einen neuen Code. Dieser sieht so aus: background-color: #FFE599
Wir fügen ihn so ein:


Code:
[table style="border: 1px solid #ffffff; background-color: #FFE599;"]
[tr]
[td]Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb![/td]
[/tr]
[/table]



Dann sieht unsere Tabelle nun so aus:


Bla, bla, bla
Aufgrund von absoluter Hirnlosigkeit und mangelnder Kreativität steht hier nichts Interessantes. x) Blubb!

Beiträge mit dem Tag ffe599 auf Pooly's Kunst und Schreibforum Footer12


Nach oben
Aktuelles Datum und Uhrzeit: So 19 Mai 2024, 20:55