Quelltext der Seite Hilfe:Gestaltungsmöglichkeiten von Seiteninhalten

{{Bildwegweiser | Titel = [[:Kategorie:Hilfe|Hilfe]] | Größe =  35px | Hilfe}}
Allgemeines Formatieren wird im Artikel [[Hilfe:Bearbeiten]] erklärt.

== Listen, Absätze == 

=== Erstzeileneinzüge ===

<div class="hanging-indent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="hanging-indent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

{| class="vertical-align-top booktable"
|-
| '''Wiki-Code''' || '''Voraussetzung'''
|-
|
 &lt;div class="hanging-indent">Lorem ipsum …
 …
 &lt;/div>
|
* Zeile muss direkt hinter <code>&lt;div …></code> anfangen
|}


Eine Variante zum Hervorheben ist die Wiki-Definitions-Liste umgeben von einem speziellen <code>&lt;div></code>-Element
<div class="definition-inline">
; Begriff : Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
; Ein weiterer Punkt : Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
; Noch ein weiterer Punkt&#58;: (''inklusive Doppelpunkt'') orem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

{| class="vertical-align-top booktable"
|-
| '''Wiki-Code''' || '''Voraussetzung'''
|-
|
 &lt;div class="definition-inline">
 ; Begriff : …
 ; Ein weiterer Punkt : …
 ; Noch ein weiterer Punkt<span style="background-color:orange">&amp;#58;</span>: …
 &lt;/div>
|
* Jeder Absatz muss ''in einer Zeile'' sein und darf keinen Zeilenumbruch enthalten
* manuelle Umbrüche mit <code>&lt;br/></code>
|}



== Tabellen ==

Tabellen sind für Daten konzipiert worden, nicht für ganze Seitenlayouts. Für Tabellen gibt es generell folgende CSS Klassen die eine Zusatz-Funktion oder -Layout hervorrufen:

<div class="hang-indent"><code>sortable</code>  sortierbare Tabellen</div>
<div class="hang-indent"><code>vertical-align-top</code>  alle Zellen (bis auf &lt;th>) werden vertikal oben angeordnet</div>
<div class="hang-indent"><code>vertical-align-middle</code>  alle Zellen (bis auf &lt;th>) werden vertikal mittig angeordnet</div>
<div class="hang-indent"><code>vertical-align-bottom</code>  alle Zellen (bis auf &lt;th>) werden vertikal unten angeordnet</div>


Die Tabellen <code>booktable</code> sind konzipiert für eine elegante Tabellen-Darstellung. Die Variante <code>booktabledotted</code> sind für lange Tabellendaten gedacht, wo es visuelle Führungslinien braucht.

<div>
{| class="booktable" style="float:left"
|+ <tt>class="booktable"</tt>
|-
! Art
! Kopffarbe
! Ausprägung
|-
| ''Biene Maja''
| gelb-orange
| +++
|-
| ''Biene Willi''
| gelb-orange
| ++
|-
|''Grashüpfer Flip''
| grün
| +
|}

{| class="booktabledotted"
|+ <tt>class="booktabledotted"</tt> für lange Tabellen
|-
! Art
! Kopffarbe
! Ausprägung
|-
| ''Biene Maja''
| gelb-orange
| +++
|-
| ''Biene Willi''
| gelb-orange
| ++
|-
|''Grashüpfer Flip''
| grün
| +
|}
</div>

=== Tabellen mit Gitternetzlinien ===

Diese sind gedacht für große und komplexe Tabellen, in denen es Führungslinien braucht.

<div>
{| class="wikitable" style="clear:both;float:left"
|+ CSS-Klasse <tt>class="wikitable"</tt>
|-
! Art
! Kopffarbe
! Ausprägung
|-
| ''Biene Maja''
| gelb-orange
| +++
|-
| ''Biene Willi''
| gelb-orange
| ++
|-
|''Grashüpfer Flip''
| grün
| +
|}

{| class="prettytable"
|+ CSS-Klasse <tt>class="prettytable"</tt>
|-
! Art
! Kopffarbe
! Ausprägung
|-
| ''Biene Maja''
| gelb-orange
| +++
|-
| ''Biene Willi''
| gelb-orange
| ++
|-
|''Grashüpfer Flip''
| grün
| +
|}
</div>

{| class="mw_metadata" style="clear:both;"
|+ CSS-Klasse <tt>class="mw_metadata"</tt>
|-
! Art
! Kopffarbe
! Ausprägung
|-
| ''Biene Maja''
| gelb-orange
| +++
|-
| ''Biene Willi''
| gelb-orange
| ++
|-
|''Grashüpfer Flip''
| grün
| +
|}

{| class="tableBoxedWithGridBlack1px"
|+ <tt>class="tableBoxedWithGridBlack1px"</tt>
|-
! Art
! Kopffarbe
! Ausprägung
|-
| ''Biene Maja''
| gelb-orange
| +++
|-
| ''Biene Willi''
| gelb-orange
| ++
|-
|''Grashüpfer Flip''
| grün
| +
|}


[[Kategorie:Hilfe]]