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

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

Klasse! ^.^

Hey Juny! =)

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

Oh, das habe ich natürlich nicht erklärt, wie dumm von mir x')

Bei den zweifarbigen habe ich noch den Befehl border: dashed bzw. dotted hinzugefügt. ^^

---

Code:

<hr style="width:100%; background-color: #ff9c00; height:3px; border:dotted;">

---

Code:

<hr style="width:100%; background-color: #ff9c00; height:5px; border:dashed;">

@ Marie:

Ich habe das auch erst alles mit der Zeit herausgefunden x) Wenn man Langeweile hat, kommt man auf sowas. ~lach~

;D

Macht doch nix ^^


Danke schön!
Sieht cool aus ^.^

oh super. Wieder ein paar neue Einträge.
Danke dir, Jenny.
Das ist echt klasse.

LG Jojo

Hey Jenny,

da hast du dir ja echt Mühe gegeben. =)
Voll süß.
Ich arbeite ja schon seit einigen Jahren mit HTML & Co und kenne diese ganzen Codes daher schon, aber ich wusste gar nicht, dass man die hier im Forum benutzen kann. O.o
Gut zu wissen

Lg, Alex

Huhu Jenny *wink*

Ich wollte gerade eine Tabelle machen, aber ... Irgendwie geht das nicht mit den Trennstrichen ... Also meine hat mehrere Spalten und Zeilen und da sollten auch die Trennlinien angezeigt werden.
Allerdings möchte ich einfach eine dünne, schwarze Linie da haben.
Kannst du mir sagen, wie ich die dann da einfügen kann?
Das wäre super.

Meine sieht nämlich gerade so aus -.-

Jahreszahl

Stichwort

Status

Danke schon mal im Vorraus für die Hilfe.

LG Jojo

Ich weiß ich bin nicht Jenny aber eine Frage.
Meinst du es dann in dieser Form?

Jahreszahl

Stichwort

Status

hey Alex

Ja genau in der Form, aber eben mit diesen Trennlinien, die ich oben habe. Also dass die dann nicht so dick und komisch sind.

Lg Jojo

Jojo schrieb:Ja genau in der Form, aber eben mit diesen Trennlinien, die ich oben habe.

Wo sind denn bei dir schon Trennlinien? Du meinst sicher einfach nur so das ein Strich jeweils zwischen den Worten ist, ohne nochmal die Linie die einmal ganz rumgeht, oder?

So?

Jahreszahl

Stichwort

Status

oder so?

Jahreszahl	Stichwort	Status

Ich glaube, Jojo meint, dass die Trennlinien genau den gleichen Style haben wie die Außenlinie. Also so ungefähr, oder?

Jahreszahl . .

Stichwort . .

Status . .

_____________

Übrigens danke für dein Kommi, Alex. (:
Ja, ich habe das auch erst nach einer Weile herausgefunden, aber manches funktioniert hier leider nicht. :/ Also zumindest nicht so, wie ich das wollte. ^^°

Ja genau, die Trennlinien sollen genauso aussehen, wie der Rahmen aus drum.
Und wie mach ich das jetzt? *dumm ist*

Und am besten wäre es noch, wenn auch die Zeilen immer getrennt werden könnten ... Wobei das alles sicherlich nicht so funktioniert, wie ich das mit vorstelle ... na ja xD
Also kann man auch einstellen, dass jetzt unter dem geschriebenen, wenn ich jetzt eine neue Zeile einfüge, auch ein Trennstrich zu sehen ist?

Also die senkrechten Trennlinien macht man mit border-left bzw. border-right. Also bei der ersten Spalte mache ich rechts eine Linie, bei der dritten Spalte links eine Linie. Das geht natürlich auch mit den folgenden Zellen. Wird vielleicht etwas aufwendig. ^^° Da musst du dann immer unten und oben noch eine Linie einfügen.

Jahreszahl	Stichwort	Status
Neue Zeile	Neue Zeile	Neue Zeile

Code:

[table style="padding-left: 5px; padding-right: 5px; border: 1px solid;"][tr][td width=100px style="border-right: 1px solid;"]Jahreszahl
[/td][td width=300px style="padding: 5px;"]Stichwort
[/td][td width=200px style="border-left: 1px solid; padding-left: 5px;"]Status
[/td]
[/tr]
[tr]
[td width=100px style="border-right: 1px solid; border-top: 1px solid;"]Neue Zeile
[/td][td width=300px style="padding: 5px; border-top: 1px solid; "]Neue Zeile
[/td][td width=200px style="border-left: 1px solid; padding-left: 5px; border-top: 1px solid;"]Neue Zeile[/td]
[/tr]
[/table]

Vielleicht weiß Alex ja, wie man das besser hinkriegt. ^^°
Tut mir leid. :'D

oh das sieht wirklich kompliziert aus o.O
Aber okay, ich werd's mal versuchen oder mich einfach für eine andere Tabelle entscheiden mit weniger Trennstrichen oder so *grins*

Danke dir für die Hilfe. *knuddel*

Hm was unkomplizierteres wüsste ich nur das hier...nur da ist die Linie dicker und ich weiß grad nicht wieso die nicht dünner ist obwohl sie auf 1px steht.

Jahreszahl	Stichwort	Status
Neue Spalte	Neue Spalte	Neue Spalte

Code:

<table cellspacing="0" border="1px solid;">
<tr>
<th width="100px">Jahreszahl</th>
<th width="300px">Stichwort</th>
<th width="200px">Status</th></tr>
<col>
<tr>
<th width="100px">Neue Zeile</th>
<th width="300px">Neue Zeile</th>
<th width="200px">Neue Zeile</th></tr> </col></table>

Das finde ich recht übersichtlich und dort müssen auch < anstatt [ gesetzt werden, da der th Befehl sonst irgendwie nicht funktioniert.

Code:

<th width="Wunschgröße">Titel in Zeile</th> <- Das ist jeweils eine Spalte
<col>Dazwischen dann wieder den Code für die gewünschten Felder </col> <- Das ist eine neue Zeile.

Man muss dann also um die Tabelle länger werde zu lassen diesen Code nur immer wieder kopieren und unten anhängen und anpassen:

Code:

<col>
<tr>
<th width="100px">Neue Zeile</th>
<th width="300px">Neue Zeile</th>
<th width="200px">Neue Zeile</th></tr> </col>

Hoffe das hab ich jetzt nicht zu kompliziert erklärt xD

Lg, Alex

Hey Alex,

Danke dir.
Das ist ja super.
Ich habe das jetzt aber leider schon anders gemacht, allerdings auch nicht mit Jennys Methode, sondern einfach nur, dass da ein Kasten drum ist ... Irgendwie war mir das alles zu kompliziert ..
Vielleicht änder ich das noch mal dann um xD
Danke dir trotzdem für die Mühe, Alex.
So was werde ich sicherlich noch mal gebrauchen

LG Jojo

Hallo Jenny,

vielen Dank für die Übersicht, das hat mich sehr viel klüger gemacht. Ihr arbeitet also mit Tabellen. *erleuchtung*

Ich wollte ja gestern das erste Mal einen Post schön gestalten und habe das ganze mit divs gemacht - leider hab ich dabei das ganze Forenlayout gesäbelt und hab das ganze schnell rückgängig gemacht, bevor es jemand gesehen hat. *pfeif* (In der Vorschau sah noch alles gut aus...)

Ahaha, aber nun habe ichs durchschaut, wunderbar, danke dir. Und gleichzeitig zeigst du kreativer Kopf einem noch so viele Anregungen für schöne Gestaltungen.

Vielen Dank und viele Grüße
Marit

Hey Marit!

Sorry, ich hatte deine Antwort noch gar nicht gesehen. :0

Freut mich, wenn ich helfen konnte. (:
Ich habe die Idee mit den Tabellen auch erst vor kurzem ausprobiert und muss noch einiges dazu lernen. =)
Aber ich finde, mit diesem eigentlich einfachen Trick kann man ganz tolle Einträge gestalten.
Ich werde heute vielleicht noch ein paar Vorlagen reinstellen, die man dann gerne benutzen kann, falls man selbst keine Zeit oder Lust hat, sich selbst etwas zu erstellen. ^^

Liebe Grüße
Jenny

Hier nun drei Vorlagen, die ihr gerne benutzen und natürlich auch nach euren Wünschen verändern könnt. :3
Wenn erwünscht, mache ich noch weitere Vorlagen. ^^

Code:

<div align=center>[table width=90% cellspacing=0 style="border: 2px #7507b8 solid;"]
[tr valign=top]
[td colspan=2 style="padding-left: 5px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/untitl12.jpg); border-bottom: 1px #7505d6 solid;"][color=#c077ff][b]ÜBERSCHRIFT[/b][/color][/td]
[/tr]
[tr valign=top]
[td width=30% style="border-right: 1px #7505d6 solid; padding: 5px; background-color: #9c1beb;"][color=#c077ff]Links und Kurzinfos[/color][/td][td width=70% style="padding: 5px; background-color: #9c1beb;"][color=#c077ff]Inhalt
.
.
.[/color][/td]
[/tr]
[tr]
[td colspan=2 style="border-top: 1px #7505d6 solid; padding-right: 5px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/untitl12.jpg);"][right][color=#c077ff][b]FOOTER[/b][/color][/right][/td]
[/tr]
[/table]</div>

Code:

<div align=center>[table width=90% cellspacing=0 style="border: 2px #0481d7 solid;"]
[tr]
[td colspan=2 style="padding-left: 5px; padding-top: 5px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/untitl13.jpg);"][color=#005fb5]ÜBERSCHRIFT[/color][/td]
[/tr]
[tr valign=top]
[td colspan=2 style="border-bottom: 1px #0483df solid; padding-right: 5px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/untitl13.jpg);"][right][color=#005fb5]Links oder Untertitel; Kommentar des Autors oder ähnliches[/color][/right][/td]
[/tr]
[tr valign=top]
[td width=20% style="border-right: 1px #0483df solid; padding: 5px; background-color: #2eaaff;"][color=#005fb5]Links und Kurzinfos[/color][/td][td width=80% style="padding: 5px; background-color: #2eaaff;"][color=#005fb5]Inhalt
.
.
.[/color][/td]
[/tr]
[/table]</div>

Code:

<div align=center>[table width=90% cellspacing=0 style="border: 2px #ca7803 solid;"]
[tr valign=top]
[td rowspan=2 style="border-right: 1px #ca7803 solid; padding-top: 10px; background-color: #e49500;"][color=black][center]Kurzinfos und Links
-
-
-[/center][/color][/td]
[td width=20% style="border-bottom: 1px #ca7803 solid; padding-left: 5px; padding-top: 5px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/untitl14.jpg); padding: 5px;"][color=black][right]ÜBERSCHRIFT[/right][/color][/td]
[/tr]
[tr]
[td width=80% style="padding: 5px; background-color: #e49500;"][color=black]Inhalt
.
.
.[/color][/td]
[/tr]
[/table]</div>

Hey Jenny,

Die sind ja super, die Vorlagen.
Vielen Dank dafür!
Sehen echt schön aus. Mal sehen, ob ich mal eine davon benutzte.

Danke, dass du dir so viel Mühe machst. *knuddel*

Liebe Grüße
Jojo

Oh wow!

Hey Jenny!
Danke für die tollen Vorlagen. Mensch, in diesen Code-Sachen bist du echt der Master. Ich muss gestehen, dass ich schon ein paar mal versucht hatte, das irgendwie so hinzubekommen wie du, aber ich habe immer kläglich versagt. Deswegen vielen Dank für die Vorlagen, das kann ich auf jeden Fall sehr gut gebrauchen!

Danke *.*


Liebe Grüße
Marie

@ Jojo:

Die Mühe mache ich mir gerne, wenn ich weiß, dass ich jemandem damit vielleicht helfen kann. =3

@ Marie:

Haha, der 'Code-Master' bin ich wohl eher nicht (das ist wohl eher Alex ^^), aber für die Gestaltung von Forenbeiträgen reicht es schon. x) Ich muss auch noch einiges lernen, denn vieles, was ich gerne umsetzen würde, kriege ich leider noch nicht hin. :'D
Aber das, was ich kann, gebe ich natürlich gerne weiter. ;D

Liebe Grüße
Jenny

Texte gestalten - Überschriften

Soho, mal etwas Neues hier. ;D Bisher habe ich eigentlich nur Tipps zu Hintergrund-Threads und ähnlichem gezeigt, jetzt möchte ich mal zeigen, wie man Texte gestalten kann, um sie etwas einladender zu machen. ^^ Ich weiß, hier sind Schreiberlinge unterwegs, keine Webdesigner, aber ich finde, das Design ist oft entscheidend. Ich bleibe eher bei Texten hängen, die schön gestaltet sind. Der erste Eindruck ist oft wichtig, finde ich. ;3 Nun ja, vielleicht steh ich mit dieser Meinung alleine da, aber hier jetzt trotzdem mal ein paar Tipps. ^^ Als Beispiel habe ich einen meiner Texte genommen, den ich mal angefangen, aber nie zu Ende gebracht habe. Lest ihn einfach nicht, es geht nur darum, irgendeinen Text zu gestalten. x3 Was drin steht, ist egal. :'D

Hier der Text, ganz jungfräulich... x3

"Kartenspiel" - Kurzgeschichte:

Den wollen wir jetzt etwas aufwerten. Zuerst einmal die Überschrift. Es gibt viele verschiedene Arten, die Überschrift zu gestalten. Hier ein paar Beispiele. Wenn bei den Codes irgendetwas nicht klar sein sollte, einfach Bescheid sagen. ^^

Kartenspiel - Kurzgeschichte

Code:

[table width=500px style="border: 1px solid #000000; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 10px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/karten10.jpg);"][tr][td][size=14][justify][font=Verdana][b][color=red]K[/b]artenspiel - Kurzgeschichte[/color][/font][/justify][/size][/td][/tr][/table]

Code:

<div align=right>[table width=600px style="border-top: 1px #000000 solid; border-bottom: 1px #000000 solid; border-right: 6px #000000 solid; border-left: 1px #000000 solid; padding-left: 20px; padding-top: 2px; padding-bottom: 2px; padding-right: 10px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/karten15.png); background-repeat: no-repeat;"][tr][td][size=14][font=Verdana][right][color=black][b]Kartenspiel - Kurzgeschichte[/b][/color][/right][/font][/size][/td][/tr][/table]</div>

Kartenspiel - Kurzgeschichte

Code:

[table width=500px height=45px style="border-top: 0px; padding-left: 15px; padding-top: 0px; padding-bottom: 8px; padding-right: 15px; background-image: url(http://i69.servimg.com/u/f69/12/89/51/33/karten17.png); background-repeat: no-repeat;"][tr][td][size=14][font=Verdana][center][color=black][b]Kartenspiel - Kurzgeschichte[/b][/color][/center][/font][/size][/td][/tr][/table]

KARTENSPIEL - KURZGESCHICHTE

Code:

[table width=100% style="margin-left: 60px; border-left: 10px #000000 solid; border-bottom: 1px #000000 solid; padding-left: 15px;"][tr][td][size=14][font=Verdana][color=black][b][color=darkred]K[/color]ARTENSPIEL - KURZGESCHICHTE[/b][/color][/font][/size][/td][/tr][/table]

Code:

<div align=center>[table width=80% style="border-left: 10px #920202 solid; border-right: 10px #920202 solid; border-bottom: 1px #000000 solid; border-top: 1px #000000 solid; padding: 5px;"][tr][td][size=14][font=Verdana][color=black][center][b][color=darkred]K[/color]ARTENSPIEL - KURZGESCHICHTE[/b][/color][/center][/font][/size][/td][/tr][/table]</div>

Code:

<div align=center>[table height=50px width=350px style="border-left: 10px #920202 solid; border-right: 10px #920202 solid; padding: 5px; background-color: #000000;"][tr][td][size=14][font=Verdana][color=darkred][center][b]KARTENSPIEL - KURZGESCHICHTE[/b][/color][/center][/font][/size][/td][/tr][/table]</div>

So, wie sieht unser Text nun aus?

[spoiler="Kartenspiel" - Kurzgeschichte:9cb8]
Wie jeden Tag stehen das Teeservice mit dem Blumenmuster und die Schokoladentorte auf dem kleinen Tisch im Salon unseres Anwesens. Peinlich genau sind Teller und Besteck auf die Tischkante ausgerichtet. Die Torte hat jemand bereits in zehn Stücke geschnitten. Sechs davon werden übrig bleiben. Genauso wie immer.
Ich blicke auf die große Standuhr, die in diesem altmodisch eingerichteten Zimmer steht, in dem sich wohl schon seit Jahren nichts mehr verändert hat. Jedes Möbelstück und alle noch so unbedeutenden Kleinigkeiten sind noch genauso platziert, wie vor zehn Jahren. Blumenvasen, Bilderrahmen, Bücher und sogar diese alte, ungeöffnete Weinflasche, die mir noch von meinem ersten Tag in diesem Haus im Gedächtnis geblieben ist, stehen an ihrem alten Platz.
In diesem Zimmer ist die Zeit stehen geblieben und wir gleich mit dazu. Es passiert nichts Neues. Wir erleben immer wieder das gleiche. Ich kenne unseren Tagesablauf ganz genau.
Ich weiß zum Beispiel, dass Samuel in fünf Minuten mit dem frischen, noch heißen Tee den Raum betreten wird.
So ist es die letzten Tage, Wochen und Monate gewesen und es wird auch immer so bleiben. Nichts verändert sich. Unser Leben ist eine ewige, nicht enden wollende Routine, die mich ermüdet. Ein ereignisloser Tag reiht sich an den nächsten. Dieses Leben ist doch nichts weiter als eine Farce.
Das Geläut der Standuhr reißt mich aus meinen Gedanken.
Auf die Sekunde genau betritt nun auch Samuel das Zimmer. Er wird gleich sagen, dass es schön ist, mich zu sehen.
„Es ist schön, dich zu sehen, Alfons“, sagt er wie erwartet und stellt die Teekanne rechts neben der Torte auf den Tisch. Dort steht sie immer.
„Es ist auch schön, dich zu sehen, Samuel“, leiere ich meinen Text herunter und setze mich hin. Natürlich ist es dumm von mir, bei diesem Theater mitzumachen, doch ich weiß aus Erfahrung, dass es unklug ist, den täglichen Lauf der Dinge durcheinander zu bringen. Samuel kommt einfach nicht damit klar, wenn etwas Unvorhergesehenes geschieht. Dann verliert er sein Gleichgewicht.
Das will ich nicht.
Doch an machen Tagen muss es trotzdem sein... Noch habe ich die Hoffnung nicht aufgegeben.
„Möchtest du Tee?“, fragt er mich lächelnd und setzt sich mir gegenüber an den Tisch.
Ich nicke nur und ziehe wie jeden Tag die Zuckerdose zu mir herüber. Sie steht immer genau auf der falschen Seite. Samuel weiß, dass ich von uns beiden der Einzige bin, der Zucker braucht. Trotzdem stellt er die Dose nach wie vor auf seine Seite des Tisches. Es ist eben immer so gewesen und so wird es immer sein.
Nachdem er auch sich Tee eingegossen und einen Blick aus dem Fenster geworfen hat, meint er: „Heute ist ein schöner Tag, nicht wahr?“
Das sagt er auch, wenn es in Strömen regnet.
„Hm, ja“, erwidere ich nur darauf und werfe die ersten zwei Stück Zucker in meine Tasse.
Mein Gegenüber beobachtet mich aufmerksam und wartet nur darauf, dass ich noch ein weiteres Mal in die Dose greife. Für gewöhnlich brauche ich immer drei Stück Zucker in meinem Tee.
Heute ist mir aber nicht danach und ich schiebe die Zuckerdose wieder zurück an ihren Platz.
Ein kurzer Blick zu Samuel verrät mir schon, dass ich ihn aus dem Konzept gebracht habe. Nervös kaut er auf seiner Unterlippe und sieht auf die Uhr.
Ich seufze und rühre in meiner Tasse herum. „Findest du es nicht lächerlich?“
Er antwortet mir nicht, greift in die Dose und wirft ein drittes Stück Zucker in meine Tasse.
Genervt verdrehe ich die Augen. „Soll das ewig so weitergehen?“
Unruhig knetet Samuel seine Hände und schaut wieder auf die Uhr. Er wird mich gleich fragen, ob ich Kuchen möchte.
„Möchtest du ein Stück Kuchen?“
Ich sehe ihn eine Weile stumm an und antworte: „Nein, heute nicht. Vielen Dank.“
Mit zittrigen Fingern legt er ein Stück Kuchen auf einen Teller und reicht ihn mir. „Hier, dein Stück Kuchen.“
„Ich sagte, ich möchte heute keinen.“
Er beißt sich auf die Unterlippe und stellt den vollen Teller vor mich. „Lass es dir schmecken“, meint er und lächelt gezwungen.
So kann das wirklich nicht mehr weitergehen!