Benutzer:Markus Bärlocher/Layout

Habe hier alle bisher verwendeten Layout-Tricks zusammengestellt, damit ich - und andere - einfach mal schnell nachschlagen können:

Aufzählungen

Aufzählung durch *
- Aufzählung durch **

nummerierte Aufzählung durch #
1. nummerierte Aufzählung durch ##

Absatzformate

Standardtext

eingerückt durch : am Zeilenanfang

doppelt eingerückt durch :: am Zeilenanfang

Überschrift

einfache Überschrift durch ; am Zeilenanfang (neue Zeile automatisch, Überschrift erscheint nicht im Inhaltsverzeichnis)

Absatz durch Leerzeile (Zeilenabstand 1,5)
neue Zeile durch <br /> (Zeilenabstand 1,0)

Absatz über ganze Breite bei mehreren Objekten durch {{Absatz}}

Textformate

Text	Code
kursiv	`''` ... `''`
fett	`'''` ... `'''`
fett und kursiv	`'''''` ... `'''''`
rot	`<span style="color:red;">` ... `</span>`
grün	`<span style="color:green;">` ... `</span>`
blau	`<span style="color:blue;">` ... `</span>`

zentrierter Text durch <div class="center"> ... </div>

oder {{Center|1=}}

Textbausteine

nur so breit wie der Text {\| class="wikitable" \| \|}

mit CSS

Beispiel:

hintergrundfarbe3 rahmenfarbe3

Code	Wirkung
`cellspacing="Zahl"`
`cellpadding="Zahl"`
`class="hintergrundfarbe3 rahmenfarbe3"`	bestimmt Farbe für Texthintergrund und Rahmen

`style="`	Beginn des Style-Codes
`font-size: Zahl%;`	Schriftgrösse in % der WP-Standardgrösse
`text-align:middle;` `text-align:right;`	zentrierter Text rechtsbündiger Text
`border-style: solid;` `border-style: dotted;`	Rahmen durchgezogene Linie Rahmen gepunktete Linie
`margin-top: 2px;` `margin-bottom: 2px;`	Rahmen oben 2 Pixel breit Rahmen unten 2 Pixel breit
`margin: XXpx;`	Abstand nach aussen in Pixel
`padding: XXpx;`	Abstand nach innen in Pixel
`clear: both;`
`position:relative;`
`float:right;`	plaziert Objekt rechtsbündig
`"`	Abschluss des Style-Codes

Farben in Wikipedia:

Textfarbe	Hintergrundfarbe	Rahmenfarbe
1	1	1

hintergrundfarbe1

hintergrundfarbe2

hintergrundfarbe3

hintergrundfarbe4

hintergrundfarbe5

hintergrundfarbe6

hintergrundfarbe7

hintergrundfarbe8

hintergrundfarbe9

Siehe auch: Hilfe:Farben, Web-Farben

Tabellen

Siehe auch Hauptartikel: Hilfe:Tabellen

	Spalte 1	Spalte 2	Spalte 3
Zeile 1	z1-s1	z1-s2	z1-s3
Zeile 2	z2-s1	z2-s2	z2-s3

Tabellenkopf mit: |- class="hintergrundfarbe5"

sortierbare Tabelle mit {| class="wikitable sortable":

	Spalte 1	Spalte 2
Zeile 1	1	3
Zeile 2	2	2
Zeile 3	3	1

Einfacher Textblock mit {| class="wikitable":

Textzeile 1 Textzeile 2

Textzeile 1 Textzeile 2

Einfacher Textblock mit {| class="wikitable" style="float:right":

Textblock rechts, von Text umflossen, mit kleiner Schrift und passendem Zeilenabstand

Textzeilig 1 Textzeilig 2

Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext Fliesstext

2 Tabellen nebeneinander:

{| 
|
{| class="wikitable" 
|ganz links
|}
|
{| class="wikitable" 
|die nächste
|}
|}

ganz links

die nächste

fast ganz rechts

ganz rechts

Code

Code (durch Leerzeichen am Zeilenanfang)

Code	Ergebnis
`<nowiki>` ... `</nowiki>`	zeigt einen Code als Text, ohne ihn auszuführen
`<code>` ... `</code>`	zeigt einen Code in Schriftart Courier auf hellem Hintergrund

Code	Ergebnis	Beispiel
`{{NUMBEROFARTICLES}}`	Artikelzahl in Wikipedia, immer neu berechnet	2.970.424
`{{Zitat\| ... }}`	zeigt ein Zitat eingerückt, Abstand unten und oben, Zitatzeichen	Fliesstext „Zitat-Text“ Fliesstext
`{{Absatz}}`	erzwingt einen Absatz-Endeabstand über die ganze Fensterbreite z.B. nach Text und Bild nebeneinander