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 **
  1. 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

TextCode
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

{{Bausteindesign}}
{{Bausteindesign1}}
{{Bausteindesign2}}
{{Bausteindesign3}}
{{Bausteindesign4}}
{{Bausteindesign5}}
{{Bausteindesign6}}
{{Bausteindesign7}}
{{Bausteindesign8}}
{{Bausteindesign9}}
{{Bausteindesign10}}
{{Bausteindesign11}}
nur so breit wie der Text {| class="wikitable" | |}

mit CSS

Beispiel:

hintergrundfarbe3   rahmenfarbe3
CodeWirkung
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:

TextfarbeHintergrundfarbeRahmenfarbe
111
hintergrundfarbe1
hintergrundfarbe2
hintergrundfarbe3
hintergrundfarbe4
hintergrundfarbe5
hintergrundfarbe6
hintergrundfarbe7
hintergrundfarbe8
hintergrundfarbe9

Siehe auch: Hilfe:Farben, Web-Farben

Tabellen

Siehe auch Hauptartikel: Hilfe:Tabellen

 Spalte 1Spalte 2Spalte 3
Zeile 1z1-s1z1-s2z1-s3
Zeile 2z2-s1z2-s2z2-s3

Tabellenkopf mit: |- class="hintergrundfarbe5"

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

 Spalte 1Spalte 2
Zeile 113
Zeile 222
Zeile 331

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)
CodeErgebnis
<nowiki> ... </nowiki>zeigt einen Code als Text, ohne ihn auszuführen
<code> ... </code>zeigt einen Code in Schriftart Courier auf hellem Hintergrund
CodeErgebnisBeispiel
{{NUMBEROFARTICLES}}Artikelzahl in Wikipedia, immer neu berechnet2.931.848
{{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