imported>Xwolf am 20. Dezember 2013 um 14:09 Uhr

2013-12-20T14:09:37Z

Neue Seite

{{Navigationsleiste SG Website}}

Der Text der in einer Hinweisbox erscheinen soll, wird im "Text"-Editor mit einem <div> umrandet:

<pre>
<div class="hinweis">
...
</div>
</pre>

Hierbei gibt es mehrere Modifikationen durch weitere CSS-Klassen:

{| class="wikitable sortable" border="1" frame="hsides" rules="rows" cellspacing="0" cellpadding="4" style="border-color:#ccc;"
! CSS-Klasse
!Wirkung
|-
| info
| style="background:#f4f4f4;"| Grauer Hintergrund
|-
| success
| style="background:#88cc88;" |Grüner Hintergrund
|-
| warning
| style="background:#cccc88;" |Halbgelber Hintergrund
|-
| error
| style="background:#cc8888;" |Halbroter Hintergrund
|}

Anwendungsbeispiel:
<pre>
<div class="hinweis info"> .. </div>
</pre>

Weiterhin kann man die Box links, rechts oder mittig ausrichten:

Dazu gibt es die Klassen:

{| class="wikitable" border="1" frame="hsides" rules="rows" cellspacing="0" cellpadding="4" style="border-color:#ccc;"
! CSS-Klasse
!Wirkung
|-
| float-right
| Box ist rechts
|-
| float-left
| Box ist links
|-
| center
| Box ist mittig

|}

Wenn man das macht, ist das aber nur sinnvoll zusammen mit einer
Begrenzung der Breite der Box. Dazu gibt es folgende Breitendefinitionen:

{| class="wikitable" border="1" frame="hsides" rules="rows" cellspacing="0" cellpadding="4" style="border-color:#ccc;"
! CSS-Klasse
!Wirkung
|-
|p33
|33% Breite
|-
|p40
| 40% Breite
|-
|p50
|50% Breite
|-
|p60
|60% Breite
|-
|p66
|66% Breite
|}

Anwendungsbeispiel:
<pre>
<div class="hinweis info float-right p40"> .. </div>
</pre>

Wie das aussieht, sieht man hier:
[http://www.piratenpartei.de/2013/12/20/piraten-stellen-sich-queer-koalitionsvertrag-ist-eine-luftnummer/ Piraten stellen sich Queer - Koalitionsvertrag ist eine Luftnummer]

Falls man, wie in dem Beispielartikel einen Hinweistext macht der bei mehreren
Artikeln der gleiche sein soll, sollte der Text der in der Box erscheinen
soll NICHT im ersten Absatz des Artikels sein!
Grund: Der erste Absatz, bzw. der Text wird bei Teaser oder Previews
als Anreissertext verwendet. Wenn das dann immer derselbe ist... blöd.

Daher sowas am Besten im zweiten Absatz und dann ggf. mit einem
<pre>
<div class="hinweis info float-right p40"> .. </div>
</pre>

Servicegruppen/Webseite/Dokumentation/Hinweisboxen - Versionsgeschichte

imported>Xwolf am 20. Dezember 2013 um 14:09 Uhr