Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1Windows 7 Fenster mit CSS3 & jQuery - Du findest das Interfacedesign von Windows 7 ansehnlich und interessierst dich für CSS3? Dann bist du hier genau richtig. Denn im weiteren Verlauf wird in diesem Tutorial-2-Teilers ein Fenster aus Windows 7 mit Hilfe von CSS3 und jQuery UI erstellt. Im ersten Teil dieses Tutorials geht es hierbei um das Stylen des Fensters, entsprechend den "Interfacedesign-Vorgaben" von Windows 7. Im zweiten Teil dieses Tutorials geht es um das Dragging & Resizing des erstellten Fensters unter Zuhilfenahme von jQuery UI.

Windows 7 - Das Original als Vorlage
Windows 7 Fenster - Das Original als Vorlage

Windows 7 - Das Original als Vorlage

Damit ihr wisst, was nachgebaut werden wird, hier ein Abbildung eines Fensters aus Windows 7. Wir werden jedoch nur ein vereinfachtes Fenster ohne Schließen-, Minimieren und Verkleinern-Button erstellen. D.h. es gibt lediglich drei Elemente mit speziellen Interfacedesign-Eigenschaften, die für das Styling maßgeblich von Bedeutung sind:

  1. Fensterrahmen: Transparenz, runde Ecken, Schlagschatten
  2. Fenstertitel: Programm-Icon, Text-Shadow, Schriftart: Segoe UI
  3. Fensterinhalt: flexible Höhe und Breite

Windows 7 mit CSS3 & jQuery - ZoomDamit aber nicht genug, wenn ihr das Bild wie die Abbildung hier links etwas vergrößert, seht ihr, dass noch ein paar kleine Details in der Auflistung fehlen. Der Fensterrahmen hat einen dünnen schwarzen Rand nach außen, allerdings auch einen blassweißen Rand nach innen. Ähnliches trifft auf den Fensterinhalt zu, hier ist der helle Rand aber logischerweise außen und der dunkle Rand innen. Außerdem ist zu erkennen, dass der Fensterinhalt an den Ecken ganz leicht abgerundet ist

Step 1 - Anlegen des HTML-Gerüstes und der Inhalte

Bevor wir nun allerdings anfangen das Fenster aus Windows 7 mittels CSS umzusetzen, wird an dieser Stelle das für diesen Tutorial 2-Teiler verwendete HTML-Gerüst vorgestellt. Wobei kurz erwähnt sein sollte, dass die Überschriften h1 bis h3 ( Zeilen 13, 14 und 16 ) einer möglichen Webseitenstruktur entsprechen können. Um der Semantik der Headlines Rechnung zu tragen, bekommt das Windows 7 Fenster in diesem Tutorial-Beispiel den h4-Tag.

Code-Beispiel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-DE">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Windows 7 mit CSS3 und jQuery</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <!-- An dieser Stelle wird im 2.Teil des Tutorials auf die JavaScript-Ressourcen referenziert -->
</head>
<body>
  ...
  <h1>Überschrift eurer Webseite</h1>
  <h2>Artikelüberschrift</h2>
  <p>Lorem ipsum dolor sit amet ...</p>
  <h3>Artikeluntertitel</h3>
  <p>Lorem ipsum dolor sit amet ...</p>
  ...
  <div class="fenster">
    <h4 class="titel">Mozilla Firefox</h4>
      <div class="inhalt">
      <!-- An dieser Stelle ist dann Platz für Euren Fenster-Content -->
      </div>
    </div>
  ...
  </body>
</html>

Zur Erläuterung: Ein Doctype sollte vorhanden sein, welchen ihr benutzt, ist aber selbstverständlich euch überlassen. Empfehlenswert ist natürlich HTML/XHTML Strict zu verwenden, aber auch der neue HTML5 Doctype sollte hier funktionieren. Im head gebt ihr außer dem Titel natürlich noch den Link zur verwendeten StyleSheet-Datei an. An der hier vorgemerkten Stelle, wird im 2.Teil dieses Tutorials auf die verwendeten JavaScripte, die für Teil2 benötigt wird, referenziert.

  1. jQuery 1.4.2: die derzeit neueste Version des beliebten JavaScript Frameworks vom Microsoft Server
  2. jQuery UI: hier ist neben dem "Core" auch das Draggable und Resizeable Modul wichtig (wenn ihr euch nicht sicher seit, ob ihr alles dabei habt, nehmt einfach die Datei aus dem Beispiel zum Downloaden)
  3. die letzte Datei ist eine leere JavaScript-Datei, die wir erst in Teil2 füllen werden

Zu guter Letzt wird zwischen Zeile 19 bis 24 das eigentliche Fenster, bestehend aus den oben genannten drei Teilen vorgestellt (div.fenster, div.inhalt und h4, welche natürlich der Struktur eures Dokumentes entsprechen muss ). Besonders wichtig sind die Klassennamen, darüber läuft dann das Styling. Die Klasse fenster steht für den zu erstellenden Fensterrahmen und umschließt alles andere, was zum Fenster gehört. Die Klasse titel ist wie der Name schon sagt der Fenstertitel. Die Klasse inhalt beinhaltet logischerweise alle späteren der Fensterinhalte.

Step 2 - Anlegen und Stylen des Fensterhintergrundes

Jetzt wird's interessant, denn ohne CSS haben wir bis jetzt nur eine weiße Seite und einen nichtssagenden Titel "Mozilla Firefox" (oder was auch immer ihr in den Titel geschrieben habt... ). Daher wird im folgenden, das Layout für den Hintergrund des Fensters definiert. Das unter Creative Commons stehende Hintergrundbild eines Steinadlers von Richard Bartz dient hierbei im übrigen zur Verdeutlichung der Effekte wie bspw. der Transparenz.

Code-Beispiel
* {
  margin:0;
  padding:0;
}
html {
  height:100%;
  width:100%;
}
body {
  background:#eadfcd url(../img/background.jpg) no-repeat 0 0;
  -moz-background-size:cover;
  -webkit-background-size:cover;
  background-size:cover;
  height:100%;
  width:100%;
  overflow:hidden;
}

In den Zeilen 1 bis 4 wird ein CSS-Reset durchgeführt (es kann gern ein anderer benutzt werden), die Seite wird auf die volle Bildschirmgröße aufgezogen und bekommt noch ein Hintergrundbild verpasst (im Beispiel enthalten). Durch background-size:cover wird sichergestellt, dass das Hintergrundbild, unabhängig von der Auflösung, immer auf die volle Höhe und Breite des Fensters aufgezogen wird.

Step 3 - Anlegen und Stylen des Fensterrahmens

Wir wissen welche optischen Merkmale der Rahmen hat, daraus ergibt sich folgender CSS-Code, der mit mehreren CSS3 Eigenschaften gespickt ist.

Code-Beispiel
.fenster {
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  -moz-box-shadow:0 0 0 1px #eee inset,
  0 0 15px rgba(0,0,0,0.9);
  -webkit-box-shadow:0 0 0 1px #eee inset,
  0 0 15px rgba(0,0,0,0.9);
  box-shadow:0 0 0 1px #eee inset,
  0 0 15px rgba(0,0,0,0.9);
  background-color:rgba(160,160,160,0.4);
  border:1px solid #000;
  height:146px;
  left:555px;
  padding-bottom:46px;
  position:absolute;
  top:125px;
  width:389px;
}

  • Zeile 2-4: Runde Ecken durch Border-Radius (jeweils für Gecko, Webkit und die normale Syntax)
  • Zeilen 5 bis 10: dünner blassweißer Rand innen, schwarzer Schlagschatten außen
  • Zeile 11: transparente Hintergrundfarbe durch RGBa
  • Zeile 12: dünner schwarzer Rand
  • Zeile 15: das Padding wird gebraucht, damit wir später den Fensterinhalt auf die volle Größe aufziehen können
  • Zeile 16: ist notwenig für die Positionierung
  • height, left, top und width sind beliebig wählbar, sie dienen nur zur Initialisierung von Größe und Position des Fensters

Der aktuelle Stand der Dinge, wäre dann jetzt ein transparentes, allerdings noch "leeres" Fenster ohne jegliche Text- und Bildinhalte. Also, weiter geht's!

Windows 7 - Transparentes Fenster
Windows 7 - Transparentes Fenster

Step 4 - Stylen des Fenstertitels

Im nächsten Schritt widmen wir uns dem Titelbereich des Fensters, wozu neben der stilistischen Auszeichnung des Titels auch ein Favicon gehört. In diesem Fall wird das des Mozilla-Browsers Firefox verwendet. Als Schriftfamilie wird auf die von Microsoft für die Betriebssysteme Windows Vista und Windows 7 entwickelte Schriftfamilie Segoe UI zurückgegriffen.

Code-Beispiel
.fenster .titel {
  background:transparent url(../img/firefox_favicon.png)
  no-repeat 6px 6px;
  color:#000;
  cursor:move;
  font:normal 12px/16px "Segoe UI",Arial,sans-serif;
  height:16px;
  overflow:hidden;
  padding:6px 0 6px 28px;
  text-overflow:ellipsis;
  text-shadow:0 0 1px #fff,
  3px 3px 5px #fff,
  -3px -3px 5px #fff,
  -3px 3px 5px #fff,
  3px -3px 5px #fff;
  white-space:nowrap;
}

  • Zeilen 2 bis 3: Programm-Icon, hier geht jedes 16x16 Pixel große Bild
  • Zeile 5: Cursor wird zu einem Kreuz, was signalisiert, dass man es herumschieben kann (nach Teil2 ;) )
  • Zeile 6: Schriftgröße und -familie (mit Fallback, falls erste Schriftfamilie nicht vorhanden)
  • Zeile 10: eine CSS3-Eigenschaft, die derzeit nur Chome unterstützt. Text, der länger als das Element ist, wird mit drei Punkten abgeschnitten
  • Zeilen 11 bis 15: Text-Shadow, damit sich der Text auf dem transparenten Rahmen leserlich bleibt
  • Zeile 16: Text wird nicht umgebrochen, wenn er länger als das Element ist

Na, damit nähern wir uns doch unserem Ziel...

Windows 7 - Transparentes Fenster mit Firefox-Icon und Titel
Windows 7 - Transparentes Fenster mit Firefox-Icon und Titel

Step 5 - Anlegen und Stylen des Fensterinhaltes

Im nun folgenden Arbeitsschritt richten wir unser Augenmerk auf den Contentbereich des Windows 7 Fensters. Dieses bekommt zu erst einen kaum sichtbaren aber von einem Pixel vorhandenen Border-Radius, sowie entsprechende Schatten- und Hintergrund-Eigenschaften zugewiesen.

Code-Beispiel
.fenster .inhalt {
  -moz-border-radius:1px;
  -webkit-border-radius:1px;
  border-radius:1px;
  -moz-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
  -webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
  box-shadow:0 0 0px 1px rgba(255,255,255,0.65);
  background-color:#fff;
  border:1px solid #666;
  color:#000;
  font:normal 12px/18px arial,sans-serif;
  height:100%;
  margin:0 6px;
  overflow:auto;
  padding:5px;
  position:relative;
}

  • Zeilen 2 bis 4: ganz leicht abgerundete Ecken
  • Zeilen 5 bis 7: dünner weißer Rand außen
  • Zeile 12: Inhalt muss sich auf die volle Höhe des Rahmes aufgezogen werden
  • Zeile 14: Inhalt, der über das Element hinausgeht, darf nicht dargestellt werden, stattdessen erscheinen Scrollbalken an den Rändern des Elements

Die in diesem Arbeitsschritt durchgeführten CSS-Arbeiten ergeben nun den Stand, der unserer eingangs gestellten Aufgabenstellung entspricht.

Windows 7 Fenster inklusive Content
Windows 7 Fenster inklusive Content

Step 6 - Content is the King!

Da bekannter weise Content the King is, kann das Fenster nun mit weiteren Inhalten ( Eurer Wahl ) befüllt werden.

Code-Beispiel
...
<div class="inhalt">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><img alt="Musterbild" src="img/oops.png"/> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
...
</div>
...

Da die Text- und Bildinhalte für die Fenstergröße zu umfangreich sind, erscheint dadurch der Scrollbalken, über dessen Betätigung dann auch die restlichen Inhalte wie in einem "echten" Windows 7 Fenster zu erreichen sind.

Windows 7 Fenster im Browservergleich
Windows 7 Fenster im Browservergleich

Browser-Kompatibilität

Eine Frage die sich insbesondere aufgrund der verwendeten CSS3-Eigenschaften einige von Euch stellen werden, ist die nach der Browser-Kompatibilität dieses Tutorial-Beispiels. Und damit ihr eine Vorstellung bekommt, wie dieses Fenster in den anderen Browsern aussieht, hier mal eine kleine Vorschau in den aktuellsten Versionen ( FF3.6, Opera10.5, IE8, Safari4, Chrome4 ):

Windows 7 Fenster im Browservergleich
Browservergleich - FF3.6, Opera10.5, IE8, Safari4, Chrome4 ( von links )

Wie man sich denken konnte, unterstützt der Internet Explorer(8) im Vergleich zur Internet Explorer 9 Preview keine der hier verwendeten CSS3-Eigenschaften, ebenso hat Safari noch so seine Probleme mit Box-Shadow, in denen inset vorkommt. Chrome hat einen kleinen Rendering-Bug: bei Border-Radius im Zusammenspiel mit Box-Shadow treten unschöne hellgraue Ecken auf. Einzig Firefox und Opera rendern in diesem Tutorial alles so, wie es der Aufgabenstellung entspricht.

Windows 7 Fenster mit CSS3 - The Demo

Sicherlicht gibt es auch eine Reihe von Workarounds und Fallbacks für die weniger ausgereiften Browser, aber die sollen nicht Inhalt dieses Tutorials sein. Vielmehr soll der 1.Teil dieses Turorials aufzeigen, was mit CSS3 in zuknuft alles möglich sein wird. Bis alle Browser auf dem gleichen Niveau sind, könnte das Beispiel ja als kleine CSS3-Testsuite herhalten. ;)

View Tutorial Demo

Im zweiten Teil erfahrt ihr, wie man mit Hilfe von jQuery UI das Fenster verschieben und dessen Größe verändern kann. Ich bedanke mich schonmal für das aufmerksame Lesen, danke! :)

Autor: Verfasst hat diesen ersten Teil dieser kleinen Tutorial-Serie der Gast-Blogger Norman Paschke, den wir über diesem Wege auf dem Webstandard-Blog herzlich willkommen heißen. Norman studiert Angewandte Informatik an der Technischen Universität Chemnitz und hat Anfang 2009 Norman's Blog ins Leben gerufen, in dem er sich inhaltlich den Themen "Web und Webdesign" verschrieben hat und hierzu neben Tutorials auch aktuelle Trends und Entwicklungen, wie bspw. auf dem Browsermarkt, aufgreift.

Werde auch du Gastautor im Webstandardblog!

Um Themengebiete wie diese, für die sich die Leser interessieren anbieten zu können, möchten wir über diesem Wege weiterhin anderen Bloggern die Möglichkeit geben, ihr Fachwissen mit unseren Lesern teilen zu können. Voraussetzung ist lediglich, dass sich diese Artikel in den vorhanden Kategorien unseres Blogs untergebracht werden können und der jeweilige Autor über entsprechendes Fachwissen verfügt.

Ähnliche Artikel zu diesem Thema:
  1. Sven 23 Mär 2010, 10:24

    Eines muss ich als sonst "stiller Leser" hier im Blog ja mal sagen, die Beiträge in letzter Zeit sind wirklich klasse. Hut ab vor deinem und dem Engagement der Gastautoren.


  2. LexX Noel
    23 Mär 2010, 10:46

    Dem Lob muss ich mich mal anschliessen, denn die Beiträge sind wirklich TOP! Gute geschrieben, mit guten Erklärungen. Hat mir schon so manches mal geholfen.


  3. Franka 23 Mär 2010, 12:15

    Sind wirklich klasse aufgebaut die Tutorials hier. Man kann die einzelnen Schritte ohne Probleme nachvollziehen und nachbauen. So muss es sein. Jetzt will ich aber auch wissen wie das Fenster mit jQuery "beweglich" wird. Also her mit Teil-2! ;o)


  4. Manuel 23 Mär 2010, 14:23

    Um dem Original noch etwas näher zu kommen, könnte man noch eine Technik verwenden, die hier gezeigt wird:
    http://css-tricks.com/blurry-background-effect/

    So ist das Fenster nicht nur teiltransparent, sondern der Hintergrund erscheint zusätzlich noch verschwommen.


  5. Norman
    23 Mär 2010, 15:35

    @Manuel: ja, das geht aber leider nur, wenn du nur ein einziges Fenster hast. Bei mehreren Fenstern, die sich überlappen, klappt das leider nicht mehr. Dann sieht man nämlich das dahinterliegende Fenster nicht durch. Aber es ist trotzdem ein cooler Effekt. :)


  6. Chris 24 Mär 2010, 08:07

    Interessanter Betirag, aber wie kann man mit h4 anfangen bei der Box? Das ist nicht schematisch und ergibt obendrein keinen Sinn.

    Gruß
    Chris


  7. Webstandard-Team
    24 Mär 2010, 08:48

    @Chris: Die Wahl des Tags für den Titel eines solchen Fenster-Elementes steht dir wie im Artikel von Norman erwähnt vollkommen frei. Da ein solches Element meistens in Kombination mit JavaScript aufgerufen wird und somit nur nach bestimmten Aktionen, wie einem Klick auf einen Link der ein solches Fenster öffnet, Bestandteil einer Webseite oder -anwendung. Da die Überschrift h1 meisten den Webseitentitel oder den Firmennamen enthält fällt diese schon einmal weg, da sie in in der Dokumentstruktur nur einmal vorkommen sollte. h2 dürfte somit dann Überschriften zutreffen, die den Content betreffen und h3 eventuell entsprechende Untertitel. Daher ist die Wahl für h4 durchaus nachzuvollziehen und somit auch sinnvoll. Schließlich soll der Titel eines solchen Fenster-Elementes nicht mehr "wiegen" als die Hauptüberschrift einer Seite.


  8. Chris 24 Mär 2010, 10:58

    Sicherlich hast du mit deiner Argumentation recht. Allerdings ist das je nach Struktur unterschiedlich und es sollte das passende h-tag verwendet werden. Man kann nicht pauschal sagen, dass ein h4 hier sinnvoll wäre.

    Desweiteren vermittelt es den Eindruck, wenn ein HTML-/CSS-Beginner ankommt, dass das h4 gewählt wurde, da es von der Schriftgröße gleich richtig ist.
    Das große Problem an Tutorials ist, dass meist zuviel vorausgesetzt wird, aber nie darüber nachgedacht wird, dass auch Menschen ankommen, welche nicht soviel Ahnung haben.

    Im obigen Fall wäre es, aufgrund des Dokumentes, sinnvoll ein h1 zu verwenden. Dies wäre schematisch korrekt und es sollte erwähnt werden, dass man je nach Struktur und Text- /Seitenposition (in Sinne der Schematik), ein passendes h-Tag verwendet werden sollte.

    Gruß
    Chris


  9. Chris 24 Mär 2010, 11:04

    Endschuldigt den nochmaligen Doppelpost, aber wie in Schritt 2 zu sehen ist, fehlen da komplette Überschriften, was absolut barrierearm ist.

    h1: [Fehlende Überschrift]
    h2: [Fehlende Überschrift]
    h3: [Fehlende Überschrift]
    h4: Another Post
    h4: Comments are closed.
    h2: [Fehlende Überschrift]
    h3: Welcome!
    ....

    Es soll keinesfalls kritisierend oder negativ sein, ich möchte nur drauf hinweise, dass wenn man eine webstandard-Seite betreibt, auch diese einhalten MUSS.

    Gruß
    Chris


  10. Norman
    26 Mär 2010, 18:28

    Chris, deine Argumentation ist nicht ganz richtig. Semantisch ist es völlig korrekt eine h4 zu verwenden OHNE vorher eine h1-h3 verwendet zu haben. Die heading-Tags geben die Wichtigkeit der Überschrift an, das heißt nicht, dass sie hierarchisch aufeinander aufbauen müssen.
    Natürlich wäre eine h1, h2 oder h3 genauso gut gewesen, je nachdem, in welchem Kontext die Fenster stehen und wie wichtig sie sind (genau deswegen steht ja hinter der Stelle im Artikel in Klammern, dass man auch gern ein anderes Tag nehmen kann).
    Wenn du mir nicht glaubst, lies bitte die HTML 4.01 Spezifikation in Ruhe durch und überzeuge dich selbst. Der Standard wird hier jedenfalls eingehalten (Standard hat meiner Meinung nach auch nichts mit Semantik) und hier von "barrierearm" zu reden, finde ich dann doch etwas übertrieben.


  11. jansteffen 09 Apr 2010, 19:49

    hey, ich würde an deiner stelle den title mit dem selektor .fenster:first-line stylen, und den rest mit .fenster:not(:firstline)

    dann braucht man die klassen(und somit auch die umschließenden tags) .titel und .inhalt nich mehr. aber so gehts natürlich auch!! :-)


  12. Gerrit
    26 Apr 2010, 16:03

    Super Idee, gut geschrieben und umgesetzt. Dem kann man einfach nichts mehr hinzufügen. Danke ;)


  13. Manuel 08 Sep 2010, 09:04

    Kannst du vllt. noch ne Anleitung posten, wie man den Schließen-Button oben rechts einbauen kann.


  14. Jessi 13 Okt 2010, 17:06

    Wow. Guter Artikel. Sehr ausführlich. Danke.


  15. chris
    02 Dez 2010, 11:24

    Bisschen spät von mir entdeckt, aber Danke für diese tolle Inspiration. Leider macht der IE ein Strich durch die Rechnung, seine mäsige CSS Implementierung ist der Grund warum ich es nie Produktiv einsetzen würde.


  16. Günther
    14 Okt 2011, 14:16

    Das ist ein sehr schönes Tutorial. Ich habe mich in letzter Zeit intersiver mit CSS auseinander gesetzt und möchte nun etwas dafür umsetzten um meine Kenntnisse ein wenig zu vertiefen. Da kommt mir das Tutorial gerade recht. Ich werde es einmal durcharbeiten, in der Hoffnung dass viel von dem Inhalt bei mir hängen bleibt.


  17. rappet 18 Feb 2012, 18:35

    Super!, bei mir sieht es im IE7 sogar am besten aus!


  18. Peter 05 Apr 2012, 11:26

    Habe es und es sieht recht gut aus - macht auch einen guten Eindruck, wenn man ein modfiziertes Windows-Fenster sein Eigen nennen darf!


  19. Yuriy 10 Mai 2012, 09:27

    Diese Anleitung ist einfach genial!!!
    Besten Dank an die Autoren für die geleistete Arbeit!


  20. Florian 25 Jul 2012, 01:34

    Danke für diese geniale Anleitung!
    Ein Vorschlag was man übrigens noch tun könnte: Wenn man das Hintergrundbild nochmal in einer anderen Datei als unscharfe (und etwas grau angefärbte, zwecks der Fensterfarbe) Version hinterlegt hat, kann man den Unschärfe-Effekt der Fenster noch mit nachahmen. Dazu muss man dann das 'background-attachment' Attribut im body auf 'fixed' setzen, genauso im .fenster, außerdem muss im .fenster als 'background-image' das unscharfe Bild und 'background-size' sowie 'background-position' wie in im body angegeben werden.
    Sieht dann echt gut aus! :-)
    ABER es geht ganz stark zu Lasten der Performance (vor allem beim Verschieben/Vergrößern/Verkleinern)! Von daher nur einsetzen, wenn das ganze nur auf eurem Rechner laufen soll und der das verkraftet. Sonst ruckelt's ganz gewaltig.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage