MW - Trennlinien

Trennlinien und Seiten-Verzierungen in MediaWiki

In diesem Artikel erfährst du, wie du Trennlinien und Verzierungen in MediaWiki einfügen kannst, um deine Seiten optisch zu strukturieren und visuell aufzuwerten. Trennlinien sind besonders nützlich, um Abschnitte zu unterteilen, während Verzierungen helfen, den Text zu verschönern und hervorzuheben.

1. Einfache Trennlinien

Eine einfache Trennlinie kann in MediaWiki mit drei Bindestrichen erzeugt werden:

---

Ergebnis: --- Erklärung:

• Die Trennlinie wird durch drei aufeinanderfolgende Bindestriche erzeugt.
• Sie ist eine schlichte horizontale Linie, die Abschnitte trennt.

2. Trennlinien mit CSS anpassen

Du kannst Trennlinien mit CSS anpassen, um z. B. die Farbe, Dicke oder das Muster zu ändern.

<hr style="border: 1px solid #000;"/>
<hr style="border: 2px dashed #ff0000;"/>
<hr style="border: 3px dotted #00ff00;"/>

Ergebnis:

---

---

---

Erklärung:

• Der `

  ---

  `-Tag erzeugt eine horizontale Linie.
• Mit dem `style`-Attribut kannst du die `border`-Eigenschaften anpassen:

 * `solid` für eine durchgezogene Linie.
 * `dashed` für eine gestrichelte Linie.
 * `dotted` für eine gepunktete Linie.
 * Die Farbe kann mit einem Hexadezimalcode (z. B. `#ff0000` für Rot) festgelegt werden.

3. Verzierungen mit Symbolen und Sonderzeichen

Neben einfachen Linien kannst du auch Symbole und Sonderzeichen verwenden, um dekorative Trennlinien zu erstellen.

<hr/>
<p style="text-align:center;">★★★</p>
<p style="text-align:center;">✿✿✿</p>
<p style="text-align:center;">❀❀❀</p>
<hr/>

Ergebnis:

---

★★★

✿✿✿

❀❀❀

---

Erklärung:

• Symbole wie Sterne (★★★) oder Blumen (✿✿✿) können verwendet werden, um Abschnitte zu trennen.
• Der `style="text-align:center;"`-Befehl zentriert die Symbole auf der Seite.

4. Trennlinien mit Farben und Verläufen

Mit CSS kannst du farbige Trennlinien oder sogar Linien mit Farbverläufen erstellen.

<hr style="border: 0; height: 1px; background-color: #ff6600;"/>
<hr style="border: 0; height: 2px; background-image: linear-gradient(to right, #ff6600, #ffcc00);"/>

Ergebnis:

---

---

Erklärung:

• Durch das Setzen von `border: 0;` und `height:` kannst du die Dicke der Linie und die Farbe mit `background-color:` anpassen.
• Der `background-image:`-Befehl mit `linear-gradient` erzeugt einen Farbverlauf.

5. Verzierungen mit Rahmen und Boxen

Um Texte oder Abschnitte besonders hervorzuheben, kannst du Rahmen und Boxen verwenden, die mit CSS formatiert sind.

<div style="border: 2px solid #000; padding: 10px; margin: 10px;">
<p><strong>Hinweis:</strong> Dieser Text ist von einem einfachen Rahmen umgeben.</p>
</div>

<div style="border: 2px dashed #ff0000; padding: 10px; margin: 10px;">
<p><strong>Warnung:</strong> Dieser Text ist von einem gestrichelten roten Rahmen umgeben.</p>
</div>

Ergebnis:

Hinweis: Dieser Text ist von einem einfachen Rahmen umgeben.

Warnung: Dieser Text ist von einem gestrichelten roten Rahmen umgeben.

Erklärung:

• Der `
  `-Tag mit `style="border: 2px solid #000;"` erzeugt einen Rahmen um den Text.
• Mit `padding:` wird der Abstand zwischen dem Text und dem Rahmen festgelegt, und `margin:` bestimmt den äußeren Abstand des Rahmens zu anderen Elementen.

6. Verwendung von Symbolen als Trennlinien

Du kannst auch Symbole verwenden, um dekorative Trennlinien zu erstellen.

<p style="text-align:center;">✦✦✦✦✦✦✦✦✦✦</p>
<p style="text-align:center;">❖❖❖❖❖❖❖❖❖❖</p>

Ergebnis:

✦✦✦✦✦✦✦✦✦✦

❖❖❖❖❖❖❖❖❖❖

Erklärung:

• Du kannst jede Art von Symbolen verwenden, um kreative und visuell ansprechende Trennlinien zu erstellen.
• Das Zentrieren dieser Symbole sorgt für ein ästhetisches Design.

7. Schattierte Trennlinien

Um einen 3D-Effekt zu erzeugen, kannst du schattierte Trennlinien verwenden.

<hr style="border: 0; height: 2px; box-shadow: 0px 2px 5px #888888;"/>

Ergebnis:

---

Erklärung:

• Die `box-shadow:`-Eigenschaft fügt der Linie einen Schatten hinzu, wodurch ein 3D-Effekt entsteht.

8. Kombination von Verzierungen und Linien

Hier ist ein Beispiel, wie du verschiedene Elemente kombinieren kannst, um komplexere Trennlinien zu erstellen.

<hr style="border: 0; height: 1px; background-color: #cccccc;"/>
<p style="text-align:center; font-size: 20px; color: #333;">❖❖❖❖❖</p>
<hr style="border: 0; height: 1px; background-color: #cccccc;"/>

Ergebnis:

---

❖❖❖❖❖

---

Erklärung:

• Die Kombination aus Linien und dekorativen Symbolen kann verwendet werden, um Abschnitte stilvoll zu unterteilen.

Fazit

Mit diesen Techniken kannst du Trennlinien und Verzierungen verwenden, um deine MediaWiki-Seiten übersichtlicher und attraktiver zu gestalten. Egal, ob du einfache Linien oder komplexe Verzierungen benötigst, die gezeigten Beispiele bieten dir eine breite Palette von Möglichkeiten, um deine Inhalte ansprechend zu präsentieren.

Siehe auch

• MW - Klapptexte
• MW - Tabellen
• MW - Trennlinien
• MW - Typografie