Pooly's Kunst und Schreibforum

Liebe Gäste und natürlich auch liebe Mitglieder!


Ich möchte euch alle herzlich willkommen heißen in Pooly's Kunst und Schreibforum!

Zu unseren Mitgliedern sage ich: willkommen zurück.

Und unseren Gästen möchte ich empfehlen, sich vielleicht etwas hier umzusehen. Vielleicht lohnt es sich ja für euch.
Lasst euch nicht abschrecken. Eventuell könnte die Anzahl unserer Foren euch etwas erschlagen. Aber es dauert wirklich nicht lange, bis man sich hier eingefunden hat und im Notfall sind alle User und Teammitglieder bereit, euch unter die Arme zu greifen :)

Viel Spaß!



Pooly & Co.

    Forenbeiträge gestalten [Schritt-für-Schritt]

    Teilen
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Sa 23 Okt 2010, 19:37



    Zuletzt von Artistes am Sa 26 März 2011, 17:19 bearbeitet; insgesamt 12-mal bearbeitet
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Sa 23 Okt 2010, 19:38

    Mit Tabellen kann man Beiträge besonders schön gestalten. (Auch dieser Beitrag ist mit Tabellen gestaltet worden.) Es gibt so viele Möglichkeiten, Tabellen zu verändern. Zwei davon davon möchte ich euch jetzt zeigen.

    WICHTIG: Diese Codes sind nur bei Tabellen mit einer Zeile und einer Spalte anzuwenden. Bei mehreren Zeilen werden die Trennstriche nicht angezeigt. Für die Designs, die ich erstelle, ist dies auch nicht tragisch. Wenn gewünscht, zeige ich aber, wie man die Trennstriche doch anzeigen kann.

    Neben den Standartlinien gibt es noch viele andere Arten, die man ganz leicht auswählen kann.

    Inhalt

    Nachdem ihr euch eine Standarttabelle mit der entsprechenden Schaltfläche erstellt habt, ändert ihr die erste Zeile folgendermaßen:

    Vorher:
    Code:
    [table border="1"]
    [tr]
    [td]Inhalt[/td]
    [/tr]
    [/table]

    Nachher:
    Code:
    [table style="border: 1px solid;"]
    [tr]
    [td]Inhalt[/td]
    [/tr]
    [/table]

    Das Ergebnis sieht dann so aus:

    Inhalt

    Nun könnt ihr die Linienart frei wählen. Zur Auswahl stehen neben der einfachen Linie solid noch:

    dotted

    dashed

    inset

    outset

    Außerdem könnt ihr noch die Linienstärke frei wählen. Dazu ändert ihr einfach die Zahl bei border: 1px

    Inhalt

    Inhalt

    Inhalt
    avatar
    Pooly
    Koordinator

    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Pooly am Sa 23 Okt 2010, 19:57

    Hey Jenny!

    Oh klasse!
    Danke für dieses tolle Tutorial!

    Ich kenne es zwar schon, aber ich weiß auch noch nicht so viel über die Beitragsgestaltung wie du, denke ich, deswegen werde ich die Sache hier sehr interessiert verfolgen.
    Danke noch mal, dass du dir die Mühe dafür machst :]


    Liebe Grüße
    Marie


    ______________________Poolys Kunst- und Schreibforum______________________



    »GEGEN MICH IST DER WOLF EIN KUSCHELTIER
    UND DUNKELHEIT EIN WARMER HOFFNUNGSSCHIMMER.
    Die ganze verdammte Nacht lebt in meinem Kopf.«

     
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Sa 23 Okt 2010, 20:30

    Hey Marie! =)

    Am Anfang ist es für dich wahrscheinlich erstmal langweilig, weil ich die Grundlagen erkläre, aber vielleicht ist ja später was interessantes für dich dabei. Wink

    Danke, dass du das Tutorial gelesen hast. (:

    Liebe Grüße
    Jenny

    avatar
    Jojo
    Als Held gefeiert
    Als Held gefeiert

    Beiträge : 15813
    Laune : Himmelhoch jauchzend ~ zu Tode betrübt
    Ich schreibe : momentan nur Gedankensplitter und Ideenfetzen
    Texte : Jojo
    Kunst : Jojo
    Infos : Jojo

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jojo am Sa 23 Okt 2010, 20:39

    Hey Jenny,

    Wow, du bist ein Schatz. Wirklich, das ist ja echt klasse.
    Vielen Dank für das Tutorial.
    Ich bin in so was total schlecht und habe einfach auch nicht die Geduld so was auszuprobieren. Da werd ich das dann demnächst mal zusammen mit deiner Anleitung machen.

    Danke dir!

    LG Jojo
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Sa 23 Okt 2010, 20:52

    Hey Jojo!

    Freut mich, wenn es dir gefällt. (:
    Gleich kommt noch der nächste Teil. Ich hoffe, es hilft dir weiter. ^^
    Am Anfang ist es natürlich noch nicht so spannend, aber ich wollte eben bei den Grundlagen anfangen. =)

    Liebe Grüße
    Jenny
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Sa 23 Okt 2010, 20:56

    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!


    Zuletzt von Jookpub am Fr 16 Jan 2015, 12:42 bearbeitet; insgesamt 2-mal bearbeitet
    avatar
    Ash Lynne
    Versucht sich selbst am Handwerk
    Versucht sich selbst am Handwerk

    Beiträge : 452
    Ich schreibe : meine Gefühle auf, um meine Seele zu befreien
    Texte : Ash Lynne
    Kunst : Ash Lynne
    Infos : Ash Lynne
    Sonstiges : Hintergrund - Von der Unteilbarkeit der Seele

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Ash Lynne am Sa 23 Okt 2010, 21:20

    Hey Jenny! (Ich nenne dich jetzt einfach so, weil ich mir Nicknamen immer nur so schwer merken kann usw und so fort... *g* Ich hoffe das ist okay.)

    Wow, wirklich toll, dass du so ein Tutorial machst, weil ich mich schon gefragt habe wie du sowas machst (hab mir nämlich ein paar Beiträge von dir angeschaut)... ich werde das die Tage bestimmt mal ausprobieren!
    Danke für die Mühe.

    Liebe Grüße,
    Ash
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Sa 23 Okt 2010, 21:29

    Hallo Ash! =)

    Klar kannst du mich Jenny nennen. Ist mir sogar lieber. ^^
    Ich hoffe, das Tutorial wird dir helfen. (:

    Liebe Grüße
    Jenny
    avatar
    June
    Verwaltet seinen eigenen Stadtteil der Künstler
    Verwaltet seinen eigenen Stadtteil der Künstler

    Beiträge : 55631
    Laune : Nope
    Texte : June
    Kunst : June
    Infos : June
    Sonstiges : Set by Alania (:

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von June am Sa 23 Okt 2010, 21:44

    Woah, Jenny *-*

    *umknuddel*
    Danke schön für dieses Tutorial! *_*

    Das wollte ich alles schon immer mal wissen ^.^
    Wie toll *freu*

    Das verfolge ich auf jeden Fall weiter!

    glg, Juny
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am So 24 Okt 2010, 11:47

    Hey June! ^^

    Schön, dass du mitliest.
    Ich hoffe, ich kann mit diesem Tutorial helfen. (:

    Heute werden vielleicht noch zwei Einträge folgen.

    Liebe Grüße
    Jenny
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am So 24 Okt 2010, 12:24

    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:  http://i29.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:  http://i29.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. ^^



    Zuletzt von Jookpub am Fr 16 Jan 2015, 12:45 bearbeitet; insgesamt 1-mal bearbeitet
    avatar
    Jojo
    Als Held gefeiert
    Als Held gefeiert

    Beiträge : 15813
    Laune : Himmelhoch jauchzend ~ zu Tode betrübt
    Ich schreibe : momentan nur Gedankensplitter und Ideenfetzen
    Texte : Jojo
    Kunst : Jojo
    Infos : Jojo

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jojo am So 24 Okt 2010, 12:33

    Danke dir, Jenny.

    Die beiden neuen Tutorials sind ja echt klasse.
    Jetzt weiß ich endlich wie so was funktioniert und bald werd ich das dann auch mal anwenden *freu*
    Das ist echt super, dass du dir so viel Arbeit damit machst.
    Danke schön.

    LG Jojo
    avatar
    Pooly
    Koordinator

    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Pooly am So 24 Okt 2010, 12:34

    Ah, jetzt kommen wir schon in den Bereich, in dem ich mir unsicher bin, wie es aussieht! Klasse, danke *.*
    Ich hab den Thread hier direkt mal in meinen Linkfavos gespeichert :'D


    ______________________Poolys Kunst- und Schreibforum______________________



    »GEGEN MICH IST DER WOLF EIN KUSCHELTIER
    UND DUNKELHEIT EIN WARMER HOFFNUNGSSCHIMMER.
    Die ganze verdammte Nacht lebt in meinem Kopf.«

     
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am So 24 Okt 2010, 12:44

    Hey Jojo und Marie! ^^

    Freut mich, wenn ich helfen kann. Ich bin ja auch kein Experte, aber das wenige, was ich weiß, hilft dem ein oder anderen vielleicht. :'D

    Ich denke, ich werde am Ende des Tutorials dann noch eine Übersicht mit den ganzen Befehlen machen, damit man sich nicht jedes Mal durch die Beiträge kämpfen muss. (:
    Mal schauen. x) Ich mach das hier ziemlich schnell, damit ich es fertig kriege, bevor mich die Faulheit wieder ergreift x) Ich hoffe, das ist okay. :'D Am Wochenende komm ich einfach eher dazu. ^^°

    Gleich kommt noch der nächste Teil.

    Liebe Grüße
    Jenny
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am So 24 Okt 2010, 13:00

    Nun wollen wir mal dafür sorgen, dass der Text nicht so an den Linien 'klebt'. Wir nehmen wieder unsere 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)


    Mit dem Code padding: 1px können wir den Abstand zwischen Rand und Text bestimmen.
    Wir fügen den Befehl so ein:


    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; padding: 1px;"]
    [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)


    Bei 5px sieht unsere Tabelle dann so aus:


    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)


    Wir möchten nun aber links einen größeren Abstand haben, als bei den restlichen Seiten. Dafür benutzen wir: padding-left. Das geht natürlich auch bei den anderen Seiten. Statt left nehmt ihr dann eben right, top oder bottom.
    Nun können wir den linken Abstand größer machen. Das sieht dann so aus:


    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; padding: 5px; padding-left: 30px"]
    [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)


    Spielt einfach mal ein wenig mit den Abständen herum, bis ihr die richtige Zahl gefunden habt. ^^



    Zuletzt von Jookpub am Fr 16 Jan 2015, 12:46 bearbeitet; insgesamt 1-mal bearbeitet
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am So 24 Okt 2010, 16:57

    Diesmal kümmern wir uns um die Größenverhältnisse der gesamten Tabelle. Auch arbeite ich hier das erste Mal mit mehreren Zeilen und Spalten.
    Wenn ihr eure Tabelle vom letzten Mal über die gesamte Breite des Beitrags haben möchtet, braucht ihr den Befehl width. Dieser bestimmt die Breite der Tabelle. Für die gesamte Breite brauchen wir die Größenangabe 100%. Also nehmen wir den Code width=100%.
    Dieser Code kommt ganz vorne hin.


    Code:
    [table width=100% 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; padding: 5px; padding-left: 30px"]
    [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)


    Je nach Bildschirmgröße kann es sein, dass mal die Hintergrundfarbe sieht, weil das Hintergrundbild in der Breite zu klein ist. Das wollen wir natürlich nicht. Damit die Tabelle nun bei jeder Bildschirmgröße gleich groß bleibt, brauchen wir eine andere Größenangabe. Dazu nehmen wir px, also Pixel. Die Hintergrundgrafik ist 864px groß. Also darf die Tabelle höchstens so groß sein. Nehmen wir nun einfach mal 650px.
    Ändern wir das also nun so: width=650px.


    Code:
    [table width=650px 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; padding: 5px; padding-left: 30px"]
    [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)




    Wenn ihr eine Tabelle mit mehreren Spalten erstellt, werden diese immer gleichmäßig aufgeteilt oder verändern sich je nach Inhalt.


    Code:
    [table border="1"]
    [tr]
    [td]Inhalt[/td][td]Mehr Inhalt x) Bla, blaaaaaaaaaa[/td]
    [/tr]
    [/table]


    InhaltMehr Inhalt x) Bla, blaaaaaaaaaa


    Ihr könnt aber auch manuell steuern, wie groß die einzelnen Spalten sein sollen.
    Dafür brauchen wir wieder den Befehl width.

    Gehen wir davon aus, dass wir die Tabelle wieder 650px groß haben wollen. Also width=650px. Nun möchten wir, dass die erste Spalte 200px und die zweite 450px groß ist. Dazu müssen wir das erste mal den style der einzelnen Spalten ändern. Dazu müssen wir in dieser Klammer etwas hinzufügen:



    . Diese befinden sich in der dritte Zeile des Codes.
    Wir brauchen also einmal width=200px und width=450px.

    Code:
    [table border="1"]
    [tr]
    [td width=200px]Inhalt[/td][td width=450px]Mehr Inhalt x) Bla, blaaaaaaaaaa[/td]
    [/tr]
    [/table]

    InhaltMehr Inhalt x) Bla, blaaaaaaaaaa
    Wenn wir nun eine Zeile einfügen und diese über die gesamte Breite der Tabelle haben wollen, stoßen wir auf ein Problem: Der Code wird nicht richtig angenommen.

    Code:
    [table width=650px border="1"]
    [tr]
    [td width=650px]Inhalt[/td]
    [/tr]
    [tr]
    [td width=200px]Inhalt[/td][td width=450px]Mehr Inhalt x) Bla, blaaaaaaaaaa[/td]
    [/tr]
    [/table]

    Inhalt
    InhaltMehr Inhalt x) Bla, blaaaaaaaaaa
    Um dieses Problem zu lösen, brauchen wir einen neuen Befehl, der die Breite der Spalten besser definiert. Dieser Befehl heißt colspan.
    Die obere Zeile soll über zwei Spalten gehen, also benutzen wir colspan=2. Diesen Befehl fügen wir bei der oberen Zeile ein.

    Code:
    [table width=650px border="1"]
    [tr]
    [td colspan=2 width=650px]Inhalt[/td]
    [/tr]
    [tr]
    [td width=200px]Inhalt[/td][td width=450px]Mehr Inhalt x) Bla, blaaaaaaaaaa[/td]
    [/tr]
    [/table]

    Inhalt
    InhaltMehr Inhalt x) Bla, blaaaaaaaaaa
    Beim nächsten Mal verwenden wir alle Befehle, um die Grundstruktur für einen schön gestalteten Beitrag zu erhalten. ^^




    Zuletzt von Jookpub am Fr 16 Jan 2015, 12:47 bearbeitet; insgesamt 1-mal bearbeitet
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am So 24 Okt 2010, 20:05

    Nun, das war es eigentlich auch schon, was ich zu den Tabellen zu sagen habe. ^^° Nun können wir mit diesem Wissen schon einmal die Grundform für einen schönen Beitrag machen. Details kommen dann in den folgenden Einträgen.

    Wenn ihr zum Beispiel einen Eintrag für Hintergründe zu einer eurer Geschichten haben möchtet, solltet ihr euch zuerst überlegen, was ihr wie unterbringen wollt. Macht euch ruhig eine Skizze in Paint oder einfach auf einem Blatt Papier.
    Ich habe das jetzt mal schnell gemacht.



    Nun könnt ihr euch das Grundgerüst für diese Tabelle erstellen.

    Wir brauchen drei Zeilen und zwei Spalten.


    Code:
    [table border=1px]
    [tr]
    [td]Überschrift und Bild[/td]
    [/tr]
    [tr]
    [td]Links und Kurzinfos[/td][td]Inhalt[/td]
    [/tr]
    [tr]
    [td]Zitat oder anderer Mist xD[/td]
    [/tr]
    [/table]


    Überschrift und Bild
    Links und KurzinfosInhalt
    Zitat oder anderer Mist xD


    Wir möchten, dass die obere und die untere Zeile über die gesamte Breite der Tabelle gehen. Also brauchen wir nun den Befehl colspan.


    Code:
    [table border=1px]
    [tr]
    [td colspan=2]Überschrift und Bild[/td]
    [/tr]
    [tr]
    [td]Links und Kurzinfos[/td][td]Inhalt[/td]
    [/tr]
    [tr]
    [td colspan=2]Zitat oder anderer Mist xD[/td]
    [/tr]
    [/table]


    Überschrift und Bild
    Links und KurzinfosInhalt
    Zitat oder anderer Mist xD


    Nun passen wir die Größe an. Die Tabelle soll 600px groß sein. Die linke Spalte soll 30% und die rechte 70% der Tabelle ausmachen. Wir benutzen den Befehl width.


    Code:
    [table width=600px border=1px]
    [tr]
    [td colspan=2]Überschrift und Bild[/td]
    [/tr]
    [tr]
    [td width=30%]Links und Kurzinfos[/td][td width=70%]Inhalt[/td]
    [/tr]
    [tr]
    [td colspan=2]Zitat oder anderer Mist xD[/td]
    [/tr]
    [/table]


    Überschrift und Bild
    Links und KurzinfosInhalt
    Zitat oder anderer Mist xD


    Nun möchten wir einen Hintergrund. Die Zeilen und Spalten soll zuerst einmal weiß sein. Der obere und untere Teil bekommt aber ein Hintergrundbild. Die Linien sollen nicht mehr sichtbar sein. Damit zwischen den einzelnen Zeilen und Spalten kein Zwischenraum bleibt, bestimmen wir mit cellspacing=0, dass die ganzen Bestandteile der Tabelle keinen Abstand zueinander haben.


    Code:
    [table width=600px cellspacing=0]
    [tr]
    [td colspan=2 style="background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/beispi10.jpg);"]Überschrift und Bild[/td]
    [/tr]
    [tr]
    [td width=30% style="background-color: #ffffff;"]Links und Kurzinfos[/td][td width=70% style="background-color: #ffffff;"]Inhalt[/td]
    [/tr]
    [tr]
    [td colspan=2 style="background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/beispi10.jpg);"]Zitat oder anderer Mist xD[/td]
    [/tr]
    [/table]



    Überschrift und Bild
    Links und KurzinfosInhalt
    Zitat oder anderer Mist xD


    Ohne diesen Befehl würde die Tabelle sonst so aussehen:
    (Wem das gefällt, kann mit dem Befehl cellspacing natürlich auch einen größeren Abstand erzeugen. ^^)


    Überschrift und Bild
    Links und KurzinfosInhalt
    Zitat oder anderer Mist xD


    Als nächstes möchte ich eine Grafik für die Überschrift und die untere Zeile. Diese füge ich einfach wie gewohnt mit dem Befehl  ein.



    Code:
    [table width=600px cellspacing=0]
    [tr]
    [td colspan=2 style="background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/beispi10.jpg);"][img]http://i29.servimg.com/u/f29/12/89/51/33/abersc13.png[/img][/td]
    [/tr]
    [tr]
    [td width=30% style="background-color: #ffffff;"]Links und Kurzinfos[/td][td width=70% style="background-color: #ffffff;"]Inhalt[/td]
    [/tr]
    [tr]
    [td colspan=2 style="background-image: url(http://i29.servimg.com/u/f29/12/89/51/33/beispi10.jpg);"][right][img]http://i29.servimg.com/u/f29/12/89/51/33/footer10.png[/img][/right][/td]
    [/tr]
    [/table]


    Links und KurzinfosInhalt


    Nun liegt es an euch, was ihr daraus macht. ;D
    Es gibt unendlich viele Möglichkeiten, eure Einträge zu gestalten. Probiert einfach mal verschiedene Sachen aus.
    In einem nächsten Beitrag werde ich noch ein paar Dinge zeigen, die ich sonst noch für meine Einträge verwende.


    Hier können ein paar kurze Infos über eure Geschichte stehen.

    Link 1
    Link 2
    Link 3

    Diesen Teil müsst ihr wohl oder übel selbst füllen. XD
    Traut euch ruhig, irgendwas auszuprobieren. Wenn ihr Fragen habt, könnt ihr mir diese natürlich gerne stellen. Ob ich bei allen Problemen helfen kann, ist allerdings eine andere Sache. ^^°

    Eine Seite, die mir sehr geholfen hat, ist http://de.selfhtml.org.


    Zuletzt von Jookpub am Fr 16 Jan 2015, 12:47 bearbeitet; insgesamt 1-mal bearbeitet
    avatar
    Pooly
    Koordinator

    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Pooly am So 24 Okt 2010, 21:28

    Ah, danke, danke, danke!
    Klasse, danke für die ganzen Erklärungen, besonders das letzte hier. Bei den zwei Spalten hörts bei mir schon auf :'D

    Supercool ^.^
    Danke, Jenny! :3


    ______________________Poolys Kunst- und Schreibforum______________________



    »GEGEN MICH IST DER WOLF EIN KUSCHELTIER
    UND DUNKELHEIT EIN WARMER HOFFNUNGSSCHIMMER.
    Die ganze verdammte Nacht lebt in meinem Kopf.«

     
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Mo 25 Okt 2010, 18:10

    Hey Marie! (:

    Freut mich, wenn ich helfen konnte. =)

    Heute kommen dann wahrscheinlich noch die zwei restlichen Beiträge.
    Wenn erwünscht, kann ich auch ein paar Vorlagen erstellen; also schon fertige Tabellen, wo man nur noch Farben und Grafiken ändern müsste. ^^

    Liebe Grüße
    Jenny
    avatar
    June
    Verwaltet seinen eigenen Stadtteil der Künstler
    Verwaltet seinen eigenen Stadtteil der Künstler

    Beiträge : 55631
    Laune : Nope
    Texte : June
    Kunst : June
    Infos : June
    Sonstiges : Set by Alania (:

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von June am Mo 25 Okt 2010, 19:06

    Ah, wie toll *_*

    Das sieht ja richtig geil aus *_*

    Danke schön, Jenny *_*
    Echt nett von dir, dass du uns das allen so erklärt hast ^^

    Danke!
    *knuddel*
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Mo 25 Okt 2010, 20:43

    Hey Juny (:

    Gern geschehen. ;D
    Ich hoffe, ich konnte alles verständlich erklären. ^^ Sonst einfach nachfragen. (:

    Liebe Grüße
    Jenny
    avatar
    Jookpub
    Wohl bekannt am Hofe
    Wohl bekannt am Hofe

    Beiträge : 7297
    Ich schreibe : Fräulein Solloman
    Puppenherz
    Texte : Jookpub
    Kunst : Jookpub
    Infos : Jookpub

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Jookpub am Di 26 Okt 2010, 19:00

    So, nun habe ich noch ein paar Codes und Befehle für euch, die ihr vielleicht gebrauchen könnt. ^^ Es handelt sich dabei um HTML-Codes. (:

    Bild neben dem Text

    Es gibt zwei Möglichkeiten, um ein Bild neben den Text zu bekommen. Die eine Möglichkeit wäre eine Tabelle ohne Rahmen. In die eine Spalte fügt man dann das Bild ein, in die andere kommt der Text.
    Es gibt aber noch eine andere Möglichkeit: Mit diesem Code kann man das Bild entweder links oder rechts neben den Text laufen lassen.

    Code:
    <img align="left" src="URL des Bildes">
    Mit align bestimmt man, ob das Bild links (left) oder rechts (right) stehen soll.
    Diesen Code müsst ihr einfach vor den Text setzen, neben dem das Bild erscheinen soll. Und das war es auch schon. ^^

    Code:
    <img align="left" src="URL des Bildes">Hier kommt der Text hin. (:

    Tipp: Damit der Text nicht so am Bild hängt, empfiehlt es sich, an das Bild noch einen transparenten Freiraum zu hängen. [siehe nächste Grafik]



    Ohne Freiraum:

    Das sieht nicht gut aus, oder?




    Mit Freiraum:

    Na, das sieht doch schon viel besser aus, nicht wahr? ^^




    Trennlinien gestalten

    Hier kennt sicher alle den Button für die Trennlinie, nicht wahr? ^^ Wenn ihr aber mal eine Trennlinie braucht, die farblich besser zu eurem Eintrag passt, könnt ihr mit einem HTML-Code Farbe, Länge und Höhe der Trennlinie selbst bestimmen.

    Code:
    <hr style="width:100%; background-color: #000000; height:1px;">

    Die Trennlinien könnten dann zum Beispiel so aussehen:












    Wenn ich noch weitere Tipps für euch habe, editiere ich diesen Beitrag und mache auch darauf aufmerksam, dass etwas Neues dazugekommen ist. (:

    avatar
    June
    Verwaltet seinen eigenen Stadtteil der Künstler
    Verwaltet seinen eigenen Stadtteil der Künstler

    Beiträge : 55631
    Laune : Nope
    Texte : June
    Kunst : June
    Infos : June
    Sonstiges : Set by Alania (:

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von June am Di 26 Okt 2010, 20:16

    Hey, Jenny ^.^

    Wie schön!
    Danke für die Tipps ^^

    Es freut mich wirklich, dass du uns an deinen Erkenntnissen teilhaben lässt ^.^

    Hab auch gleich eine Frage, wie sieht denn der Code zu den zweifarbigen Trennlinien aus? ^^

    glg, Juny
    avatar
    Pooly
    Koordinator

    Beiträge : 109754
    Laune : Welcome to Mindfuck Central.
    Ich schreibe : Um meine Seele am Ende des Tages vom Staub des Alltags zu befreien.
    Texte | Kunst
    Schreibtisch | ReadOn

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Pooly am Di 26 Okt 2010, 20:22

    Ah, danke Jenny!
    Wieder ein sehr informativer Beitrag! Auf die Ideen wäre ich gar nicht gekommen -lach-

    Klasse! ^.^


    ______________________Poolys Kunst- und Schreibforum______________________



    »GEGEN MICH IST DER WOLF EIN KUSCHELTIER
    UND DUNKELHEIT EIN WARMER HOFFNUNGSSCHIMMER.
    Die ganze verdammte Nacht lebt in meinem Kopf.«

     

    Gesponserte Inhalte

    Re: Forenbeiträge gestalten [Schritt-für-Schritt]

    Beitrag von Gesponserte Inhalte


      Aktuelles Datum und Uhrzeit: Sa 16 Dez 2017, 19:31