• ◄ Welcome ►
    Na, neu hier? In der Stadt in der niemand schläft, musst du dich beeilen, um nicht den Anschluss zu verlieren. Vergiss nicht deine Louboutins und den Armani-Anzug und steig ein.
    ◄ HeyHo Fremder!


    ◄ Lists ►
    ◄ Quicklinks ►
    ◄ News ►
    08.09. Back to the roots! Wir haben unser Board modernisiert und verschlankt, und mehr automatische Plugins für euch eingebaut. Außerdem planen wir das nächste Postingwochenende und wollen euch dafür ziemlich durcheinander wirbeln. Was genau das für euch bedeutet? Lest es doch in unser News nach!
  • ◄ Plots ►
    Es ist Thanksgiving und mit dem Fest der Dankbarkeit entdecken sogar die kaltblütigsten Damen der feinen Gesellschaft ihre soziale Ader. Zumindest für ein gutes Bild muss es reichen, auch wenn sich die eine oder andere danach naserümpfend vom Suppentopf abwendet. Mehr
    ◄ Team Online ►
    1 Teammitglied online
    Jeremy Abernathy » PN senden
    Vor 9 Minuten
    ◄ Helpful ►
    ◄ Quicklinks ►
    ◄ September - December ►
    Der Herbst ist im vollen Gange und geht langsam aber sicher in die besinnliche Zeit über. Von September bis Dezember kannst du den letzten Cosmopolitan noch schlürfen, solltest aber langsam deine Wintergarderobe auspacken. Denn langsam fallen nicht nur die Blätter, sondern auch die ersten Schneeflocken.
nach oben

Coding Baukasten
Page Six
NY RESIDENT

Jahre Single Unterschicht


Offline
Beitrag #1
Coding Baukasten

Coding-Baukasten



Ihr seid absolut frei, eure eigenen Codevorlagen zu benutzen. Aber für diejenigen, die nicht weiter suchen wollen, haben wir zwei Codevorlagen, die ihr frei in diesem Forum benutzen könnt - für alles, was euer Herz begehrt. Egal ob Steckbrief, Gesuch oder Beziehungen, unser kleines Baukastensystem sollte alles hergeben. Wenn nicht, dann schickt Wünsche zu Erweiterungen einfach ans Team.

Grundsätzlich gilt:
# Diese Codes sind nur zur Verwendung in unserem Forum gedacht. Es ist nicht erlaubt, sie auch in anderen Foren zu benutzen.
# Veränderungen sind erlaubt! Wenn ihr euch mit coden auskennt, könnt ihr euch die Codes gerne anpassen.


Baukastensystem - wie funktioniert es?



Wir haben mehrere Elemente, mit denen man sich einen eigenen Code zusammen bauen kann. Das gibt euch mehr Flexibilität, da wir weder vorgeben wollen, wie eure Steckbriefe, noch eure Gesuche aussehen sollen. Folgender Code enthält alle Bausteine mit sinnlosem Fülltext:

Das hier ist eine Überschrift.
Und das hier eine kleinere Überschrift.
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
Fact #1
Fact #2
Fact #3
Fact #1
Fact #2
Fact #3
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Wusstest du, dass...
  • Dies ist ein Typoblindtext.
  • An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
  • Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.
Fakt: Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks


Der Anfang: Ein Rahmen für alle Bausteine




Zuerst einmal schnappt ihr euch folgenden Code:

Code:
<link href="https://nyc-royalty.de/diverse/huebschecodestrance.css" rel="stylesheet">
<center><div id="nycroy-mainbox">
<!-- Ersetze diese Zeile durch die Bausteine. -->
</div></center>

Die folgenden Bausteine setzt ihr an die Stelle, die entsprechend gekennzeichnet ist, zwischen *div und */div. Alle Bausteine kommen in diesen Rahmen hinein.

Die Überschriften & Markierungen

Das hier ist eine Überschrift.
Und das hier eine kleinere Überschrift.
Fakt:
Text Text
Fakt: Text Text


Fast jedes Template hat Überschriften, sie sind vielseitig einsetzbar. Auch deutlich markierte Textteile haben ihren Vorteil, vor allem wenn man mehrere Dinge in einem Abschnitt beschreiben will. Folgende Code-Bausteine kannst du dafür einfügen:

Die große Überschrift:
Code:
<div class="headline1">Das hier ist eine Überschrift.</div>

Die kleine Überschrift:
Code:
<div class="headline2">Und das hier eine kleinere Überschrift.</div

Markierung mit Absatz
Code:
<div class="highli">Fakt:</div> Text Text

Markierung ohne Absatz
Code:
<span class="highli">Fakt:</span> Text Text


Textblöcke

Dies ist ein Typoblindtext. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.



Oftmals will man einfach nur Text schreiben. Für die normalen Textblöcke haben wir ein ganz einfaches Schriftfeld und eins, mit dem man bestimmte Passagen besonders hervor heben kann.

Der normale Textblock:
Code:
<div class="contentbox">TEXT TEXT TEXT</div>

Der außergewöhnliche Textblock:
Code:
<div class="contentbox2">TEXT TEXT TEXT</div>

Bild mit Nebenboxen

Fact #1
Fact #2
Fact #3
Fact #1
Fact #2
Fact #3


Okay, das soll einfach nur schick aussehen und kann eigentlich vielseitig genutzt werden. Ein bisschen aufpassen muss man, dass die "Fakten" nicht zu lang werden, damit sie in die Zeile passen. Das Bild sollte die Größe 100x100 haben, bei größeren Bildern wird er den Rest einfach wegschneiden.
Passt beim Schreiben ein wenig mit den divs auf, wenn ihr da eines löscht oder ein <> löscht, verrutscht es euch schnell. Sollte also alles Nachfolgende komisch aussehen, überprüft den Code auf Richtigkeit.

Code:
<div class="imgheadline"><div class="flex-item-side"><div class="littlebox">Fact #1</div><div class="littlebox">Fact #2</div><div class="littlebox">Fact #3</div></div><div class="flex-item-middle"><div class="circle" style="background-image: url('https://place-hold.it/100x100');"></div></div><div class="flex-item-side"><div class="littlebox">Fact #1</div><div class="littlebox">Fact #2</div><div class="littlebox">Fact #3</div></div></div>

Ihr könnt auch noch weitere Fakten hinzufügen, dazu ergänzt einfach

Code:
<div class="littlebox">Fact #x</div>

nach

Code:
<div class="littlebox">Fact #3</div>

Dies sollte ein- oder zweimal möglich sein, ausprobiert haben wir es selbst noch nicht Wink

Texte mit seitlichen Bildern/Fakten

Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.


Hier hast du die Möglichkeit, Text neben kleinen Fakten oder Bildern darzustellen. Jeder Teil ist aufgebaut in zwei Spalten, die eine feste Breite haben, aber keine feste Höhe. Daher kannst du die Fakten und den Text beliebig lang machen, und die Bilder in der Höhe variieren oder sogar schmaler machen. Die Höhe bestimmen wird die Spalte, die mehr Inhalt hat.

Textblock mit Fakten links:
Code:
<div class="sidedesc"><div class="flex-item-littleboxes"><div class="littlebox">Fact #1</div><div class="littlebox">Fact #2</div><div class="littlebox">Fact #3</div></div><div class="flex-item-desc">TEXT TEXT TEXT</div></div>

Textblock mit Fakten rechts:
Code:
<div class="sidedesc"><div class="flex-item-desc">TEXT TEXT TEXT</div><div class="flex-item-littleboxes"><div class="littlebox">Fact #1</div><div class="littlebox">Fact #2</div><div class="littlebox">Fact #3</div></div></div>

Ihr könnt auch noch weitere Fakten hinzufügen, dazu ergänzt einfach

Code:
<div class="littlebox">Fact #x</div>

nach

Code:
<div class="littlebox">Fact #3</div>

Textblock mit Bild links:
Code:
<div class="sidedesc"><div class="flex-item-image150"><img src="https://place-hold.it/150"></div><div class="flex-item-desc">TEXT TEXT TEXT</div></div>

Textblock mit Bild rechts:
Code:
<div class="sidedesc"><div class="flex-item-desc">TEXT TEXT TEXT</div><div class="flex-item-image150"><img src="https://place-hold.it/150x190"></div></div>
24.12.2017, 12:11
Return to top
Page Six
NY RESIDENT

Jahre Single Unterschicht


Offline
Beitrag #2
RE: Coding Baukasten

Das hier ist eine Überschrift.
Und das hier eine kleinere Überschrift.
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
Fact #1
Fact #2
Fact #3
Fact #1
Fact #2
Fact #3
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.
Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Wusstest du, dass...
  • Dies ist ein Typoblindtext.
  • An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
  • Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen.
Fakt: Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks


Der Anfang: Ein Rahmen für alle Bausteine




Zuerst einmal schnappt ihr euch folgenden Code:

Code:
<link href="https://nyc-royalty.de/diverse/huebschecodeswasabi.css" rel="stylesheet">
<center><div id="nycroy-mainboxw">
<!-- Ersetze diese Zeile durch die Bausteine. -->
</div></center>

Die folgenden Bausteine setzt ihr an die Stelle, die entsprechend gekennzeichnet ist, zwischen *div und */div. Alle Bausteine kommen in diesen Rahmen hinein.

Die Überschriften & Markierungen

Das hier ist eine Überschrift.
Und das hier eine kleinere Überschrift.
Fakt:
Text Text
Fakt: Text Text


Fast jedes Template hat Überschriften, sie sind vielseitig einsetzbar. Auch deutlich markierte Textteile haben ihren Vorteil, vor allem wenn man mehrere Dinge in einem Abschnitt beschreiben will. Folgende Code-Bausteine kannst du dafür einfügen:

Die große Überschrift:
Code:
<div class="headline1w">Das hier ist eine Überschrift.</div>

Die kleine Überschrift:
Code:
<div class="headline2w">Und das hier eine kleinere Überschrift.</div

Markierung mit Absatz
Code:
<div class="highliw">Fakt:</div> Text Text

Markierung ohne Absatz
Code:
<span class="highliw">Fakt:</span> Text Text


Textblöcke

Dies ist ein Typoblindtext. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum.
Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.



Oftmals will man einfach nur Text schreiben. Für die normalen Textblöcke haben wir ein ganz einfaches Schriftfeld und eins, mit dem man bestimmte Passagen besonders hervor heben kann.

Der normale Textblock:
Code:
<div class="contentboxw">TEXT TEXT TEXT</div>

Der außergewöhnliche Textblock:
Code:
<div class="contentbox2w">TEXT TEXT TEXT</div>

Bild mit Nebenboxen

Fact #1
Fact #2
Fact #3
Fact #1
Fact #2
Fact #3


Okay, das soll einfach nur schick aussehen und kann eigentlich vielseitig genutzt werden. Ein bisschen aufpassen muss man, dass die "Fakten" nicht zu lang werden, damit sie in die Zeile passen. Das Bild sollte die Größe 75x75 haben, bei größeren Bildern wird er den Rest einfach wegschneiden.
Passt beim Schreiben ein wenig mit den divs auf, wenn ihr da eines löscht oder ein <> löscht, verrutscht es euch schnell. Sollte also alles Nachfolgende komisch aussehen, überprüft den Code auf Richtigkeit.

Code:
<div class="imgheadlinew"><div class="flex-item-sidew"><div class="littleboxw">Fact #1</div><div class="littleboxw">Fact #2</div><div class="littleboxw">Fact #3</div></div><div class="flex-item-middle"><div class="middleboxw"><img src="https://place-hold.it/75x75"></div></div><div class="flex-item-sidew"><div class="littleboxw">Fact #1</div><div class="littleboxw">Fact #2</div><div class="littleboxw">Fact #3</div></div></div>

Ihr könnt auch noch weitere Fakten hinzufügen, dazu ergänzt einfach

Code:
<div class="littleboxw">Fact #x</div>

nach

Code:
<div class="littleboxw">Fact #3</div>

Dies sollte ein- oder zweimal möglich sein, ausprobiert haben wir es selbst noch nicht Wink

Texte mit seitlichen Bildern/Fakten

Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Fact #1
Fact #2
Fact #3
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.
Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen.


Hier hast du die Möglichkeit, Text neben kleinen Fakten oder Bildern darzustellen. Jeder Teil ist aufgebaut in zwei Spalten, die eine feste Breite haben, aber keine feste Höhe. Daher kannst du die Fakten und den Text beliebig lang machen, und die Bilder in der Höhe variieren oder sogar schmaler machen. Die Höhe bestimmen wird die Spalte, die mehr Inhalt hat.

Textblock mit Fakten links:
Code:
<div class="sidedescw"><div class="flex-item-littleboxesw"><div class="littlebox2w">Fact #1</div><div class="littlebox2w">Fact #2</div><div class="littlebox2w">Fact #3</div></div><div class="flex-item-descw">TEXT TEXT TEXT</div></div>

Textblock mit Fakten rechts:
Code:
<div class="sidedescw"><div class="flex-item-descw">TEXT TEXT TEXT</div><div class="flex-item-littleboxesw"><div class="littlebox2w">Fact #1</div><div class="littlebox2w">Fact #2</div><div class="littlebox2w">Fact #3</div></div></div>

Ihr könnt auch noch weitere Fakten hinzufügen, dazu ergänzt einfach

Code:
<div class="littlebox2w">Fact #x</div>

nach

Code:
<div class="littlebox2w">Fact #3</div>

Textblock mit Bild links:
Code:
<div class="sidedescw"><div class="flex-item-image150w"><img src="https://place-hold.it/150"></div><div class="flex-item-descw">TEXT TEXT TEXT</div></div>

Textblock mit Bild rechts:
Code:
<div class="sidedescw"><div class="flex-item-descw">TEXT TEXT TEXT</div><div class="flex-item-image150w"><img src="https://place-hold.it/150x190"></div></div>
24.12.2017, 12:11
Return to top





Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste

Nach oben | Mobile Version