Information

  • Test-Zentrale
  • Zurreal Elemente
  • Infos

Zurreal.de

Fantasy Art ~ Phantastische Kunst

Fantasy Art ~ Phantastische Kunst

Please click on 'Switch Style'.
The style of the website will change.

Bitte klicken Sie auf 'Switch Style'.
Die Gestaltung der Webseite wird sich ändern.

Haupt-Rubriken: Top [1-5]
Haupt-Rubriken Namen der Rubriken
...
top1 Start
top2 Zeichnung
top3 Malerei
top4 IT
(früher: Plastik)
top5 Sonstiges

<body id="top1" class="basis bakun ulbas">

<body id="top2" class="basis bakun ulbas">

<body id="top3" class="basis bakun ulbas">

<body id="top4" class="basis bakun ulbas">

<body id="top5" class="basis bakun ulbas">


BKU: Hauptklassen
Hauptklassen Erklärung
...

Basis

schmaler Inhalt, lesefreundliche Texte, Bilder-Vorschau

Kunst

Bilder-Galerie, Präsentation, manchmal ohne Menü

Ultra

sehr sperriger Inhalt, sehr große Bilder, umfangreiche Tabellen, Texturen, Picture-Wall

<body id="top1" class="basis bakun ulbas">

<body id="top1" class="kunst kuult bakun">

<body id="top1" class="ultra ulbas kuult">


BKU: Zusatzklassen
Zusatzklassen Erklärung
...

kolpi

Sonderinhalt

karte (graph, index)

Sitemap

<body id="top1" class="... ... ... kolpi">

<body id="top1" class="... ... ... karte">


Sonstige Formatierungen für den Inhalt
Klasse Bedeutung
...
a.los Verweis
ul.uli
ol.uli
Liste
dl.def Definitionsliste
.text-cent text-align:center

Vorschau
Klasse Bedeutung
.vor niemals alleine stehen lassen - immer mit entsprechendem Zusatz verwenden: a, img, span
.vorschau Vorschau-Galerie
.vorschau.hintergrund Vorschau-Galerie mit Hintergrundgestaltung
.vor.v1x Bild-Größe 1x
.vor.v2x Bild-Größe 2x (umgesetzt in Fluidum und Zoid)
.vor.v3x Bild-Größe 3x (Möglichkeit in weiter Ferne)
a.vor Verweis
img.vor Vorschau-Bild
span.vor Hover-Effekt

Data Types
Klasse Bedeutung
...
.data Enthält meistens unterschiedliche Aufzählungen von Daten. Kann aber auch alle Arten von Text enthalten.
.tit Titel
.dat Datum
.cm3 Größe
.med Medium
.aut Autor
.pag Seite
.num Nummer
.uhr Uhrzeit
.web Web-Seite, Index, erste Seite
.top Haupt-Rubrik
.rub Unter-Rubrik, kann dupliziert werden

Data-Types
Beispiel
...

<div id="info">
<div class="data-info data">
<h4>Information</h4>
<ul class="liste">
<li class="top">Malerei</li>
<li class="rub">Frei</li>
<li class="dat">2009 bis heute</li>
<li class="tit">Landschafts-Architektur</li>
</ul>
</div><!-- /data-info -->
</div><!-- /info -->


Modul
Klasse Bedeutung
Aller Inhalt muss in Module, außer den Linien (hr)
.modul.buch Kommentar, Geschichte, Avatar, Autor und weitere Daten
.modul.werk Kunstwerk
Bild, Rahmen, Signatur, Daten, Beschreibung
.modul.zeug Behältnis für verschiedenste Inhalte, die sich an das Raster des Layouts halten
.modul.zeug.ganz
.modul.zeug.voll
Behältnis für verschiedenste Inhalte, die sich an das Raster des Layouts halten. Größtmöglichste Breite: 95% - 100%.
.modul.titan Behältnis für übergroße (titanische) Inhalte, die über den Bildschirm hinaus ragen (können). Z.B.: Stammbaum.

Modul Werk
Klasse Bedeutung
Spezifikationen für ein Kunstwerk in body.kunst
.modul.werk Hierin befindet sich das gesamte Kunstwerk mit Beschreibung
Größe maximal 700 x 700 px
Größe minimal 280 x 280 px (wegen den Rahmenteilen)
Maße Breite und Höhe muss durch 2 teilbar sein (ganze Zahlen).
.imago Inline-Markup, z.B.:
style="width:700px;height:700px;"
img.img-werk z.B.:
width="700" height="700"

non - zen - txt - uni
Klasse Bedeutung
vertikal u. horizontal zentrierter Text
non kein Inhalt, leeres Element
zen enthält zentriertes Objekt
txt um den Text anzusprechen
uni (unicode) Icon (z.B.: Hamburger-Menü-Icon, trigram for heaven, ≡ &equiv;)

HR = Horizontal Rule
Klasse Bedeutung
<hr class="dick" />
<hr class="fett" />
hr.dick Dicke Linie
hr.fett Fette Linie
hr Dick & Fett

Zwischen-Abstände
Klasse Bedeutung
innerhalb #welt-mi
zwi-ob Zwischen-Abstand oben
zwi-un Zwischen-Abstand unten
zwi-obun oben & unten

#plus #menu #smap
Klasse Bedeutung
...
#plus Plus-Menü, Zusatz-Menü
#menu Haupt-Menü
#smap Sitemap
.p-m Plus + Menu
.s-m Smap + Menu
.s-p Smap + Plus
.pms Plus + Menu + Smap

PMS: Listenelemente
Klasse Bedeutung
...
#e1top1
#e1top2
#e1top3
#e1top4
#e1top5
jede Haupt-Rubrik hat einen obersten Listenpunkt in der Ebene 1 (e1)
ul.eX
li.eX
a.eX
Die Menü-Struktur erlaubt 5 Ebenen (eX):
.e1 / .e2 / .e3 / .e4 / .e5
li.anfa Listenpunkt am Anfang
li.ende Listenpunkt am Ende
li.tief eine Ebene tiefer
li.sing 1x Single-Punkt
(.solo = mögliche Alternative)
pro Ebene gibt es 2 leere Listenpunkte für die Gestaltung
li.obun oben + unten
li.ob.obun oben
li.un.obun unten

Plus-Menü
Elemente und Variation Abk.
...
#useable
Bedienung, Usability
.use
Inhalt, content .con
Sitemap, smap, map, Karte .sma
Suchen, search .arc
Social-Communities .cia
#auftrag
Auftragsarbeit, Auftrag
.auf
Malerei .mal
Design .des

Wobi-Blob (Bilder und Textrahmen im Fließtext)
Klasse Erklärung kompatibel mit nicht kompatibel mit
Klasse Erklärung kompatibel mit nicht kompatibel mit
.blob Container Ausrichtung
Breite
Effekte
.oval
.wobi .wobi.wort
.wobi.bild
Effekte Ausrichtung
Breite
.wobi.wort Rahmen für Text - .bild
.wobi.bild Rahmen für ein Bild - .wort
.wobi.wort.legende Bild-Legende .wort .bild
.wobi.wort.kapitel Kapitel-Auswahl .wort .bild
Ausrichtung
  • links
  • rechts
  • mitte
.links links ausgerichtet
.rechts rechts ausgerichtet
.mitte mittig ausgerichtet
- .ganz / .voll
Breiten
  • wenig
  • halb
  • viel
  • ganz / voll
.wenig 20% - 25%
.halb 40% - 50%
.viel 65% - 75%
.ganz / .voll 90% - 100%
-
Effekte
  • grund
  • rand
  • oval
  • rund
  • schatten
.grund Hintergrund
.rand Rand
.oval ovaler Rahmen
.rund abgerundete Ecken
.schatten Schattenwurf
- oval und rund sind zusammen nicht kompatibel

Geschichte und Kapitel
#id .class Erklärung
...
h1#Kapitel-AA Anfang der Geschichte
h1#Kapitel-ZZ Ende der Geschichte
h3#Kapitel-00 Auswahl der Kapitel
h3#Kapitel-01 Kapitel 1 usw.
h3#Seite-00 Auswahl der Seiten
h3#Seite-01 (noch nicht vorgesehen)
.blob .wobi.wort.kapitel Bereiche der Überschriften und Auswahlmöglichkeiten
#welt-all Zum Anfang der Seite
#welt-un Zum Ende der Seite

Geschichte

Startwert der nummerierten Liste

Wenn eine Geschichte aus mehreren Seiten besteht, soll die 'ordered list' <ol> die Klasse start="30" erhalten. Damit kann der Startzähler der Kapitel-Liste auf einen bestimmten Wert (im Beispiel: 30) festgelegt werden.

Diese Funktion ist nicht 'XHTML Strict'. Der 'Doctype' der Seite sollte dann in 'XHTML Transitional' abgeändert werden.


Tabelle: Info
Klasse Erklärung
<table class="tab nfo">
table.tab Alle Tabellen im Inhalt bekommen diese Klasse.
table.tab.nfo Informelle Tabelle.
table.tab.lux Deluxe-Tabelle im dezenten Stil.
table.tab.zeb Abwechselnde Zebra-Farben in den Zeilen.
table.tab.hov Zeilen leuchten auf beim Drüberfahren.
table.tab.tab2big

Bewirkt eine Spezial-Formatierung, wenn die Tabelle für das gewählte Seiten-Design zu breit wird. Wird derzeit nicht eingesetzt.


Tabelle: Deluxe
Klassen Erklärung
<table class="tab lux">
table.tab.lux Deluxe-Tabelle im dezenten Stil.

Stammbaum (SMB)
Klasse Bedeutung
---
#sbm Haupt-Container
.sbm-text Beschreibungstext (kann ausgeblendet werden)
.sbm-paar Container für Paar (2x .sbm-mensch) oder Junggeselle (1x .sbm-mensch)
.sbm-bild Portrait (max. 100x100px, muss quadratisch sein)
.sbm-mensch
(Mensch)
.sbm-mann Mann
.sbm-frau Frau
.sbm-mensch.sbm-mann
.sbm-mensch.sbm-frau
.sbm-kind Kind der Eltern
.sbm-frei Junggeselle
.sbm-data-1
Daten (A) für den Einzelnen
.sbm-name Name
.sbm-gebu Geburt
.sbm--tod Tod
.sbm-info Informationen, z.B.: Beruf, weitere Partner
.sbm-data-2
weitere Daten (B) zum Abschluß
.sbm-hoch Datum der Hochzeit
wird beim Junggesellen ausgeblendet
.sbm-post Anschrift und Kontakt
.sbm-mehr noch 'mehr' Infos