Difference between revisions of "Test page"

From wikibase-docker
Line 2: Line 2:
  
 
<span style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; border: none; cursor: pointer;" onclick="window.open('https://example.com', '_blank');">Click me</span>
 
<span style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; border: none; cursor: pointer;" onclick="window.open('https://example.com', '_blank');">Click me</span>
 +
<div class="limit-line-length">
 +
'''Diese Seite zeigt einige Formatierungen, die dank der [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles-Erweiterung] möglich werden.''' Das zugehörige Stylesheet findet sich unter [[Vorlage:TemplateStyles/styles.css]]. Es wird wie folgt eingebunden:
 +
 +
<syntaxhighlight lang="html">
 +
<templatestyles src="TemplateStyles/styles.css" />
 +
</syntaxhighlight>
 +
<templatestyles src="TemplateStyles/styles.css" />
 +
 +
<hr>
 +
 +
 +
==Indirekte Anordnung von Unterelementen==
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="in-row">
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
</div>
 +
 +
<syntaxhighlight lang="html">
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="in-row">
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
 +
<div class="box">
 +
Dies ist ein Beispieltext.
 +
</div>
 +
</div>
 +
</syntaxhighlight>
 +
 +
==Indirekte Formatierung von Links==
 +
<div class="in-row">
 +
<div class="box">
 +
Dies ist ein Beispieltext mit einem [[Wikilink]].
 +
</div>
 +
 +
<div class="box negativ">
 +
Dies ist ein Beispieltext mit einem [[Wikilink]].
 +
</div>
 +
</div>
 +
 +
<syntaxhighlight lang="html">
 +
<div class="in-row">
 +
<div class="box">
 +
Dies ist ein Beispieltext mit einem [[Wikilink]].
 +
</div>
 +
 +
<div class="box negativ">
 +
Dies ist ein Beispieltext mit einem [[Wikilink]].
 +
</div>
 +
</div>
 +
</syntaxhighlight>
 +
 +
==Fluide Bildgrößen==
 +
Zum Testen Broswerfenster skalieren. Bild wird immer auf die zur Verfügung stehende Breite skaliert.
 +
<div class="in-row">
 +
<div class="full-box fluid-image">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image">[[File:MK 0461-0481 Kurhaus Wiesbaden.jpg|800px]]</div>
 +
<div class="full-box fluid-image">[[File:MK53831-32_Palais_des_Papes_d'Avignon.jpg|800px]]</div>
 +
</div>
 +
 +
<syntaxhighlight lang="html">
 +
<div class="in-row">
 +
<div class="full-box fluid-image">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image">[[File:MK 0461-0481 Kurhaus Wiesbaden.jpg|800px]]</div>
 +
<div class="full-box fluid-image">[[File:MK53831-32_Palais_des_Papes_d'Avignon.jpg|800px]]</div>
 +
</div>
 +
</syntaxhighlight>
 +
 +
<div class="in-row">
 +
<div class="full-box fluid-image" style="width:30%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image" style="width:20%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image" style="width:13.3%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image" style="width:8.8%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
</div>
 +
 +
<syntaxhighlight lang="html">
 +
<div class="in-row">
 +
<div class="full-box fluid-image" style="width:30%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image" style="width:20%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image" style="width:13.3%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
<div class="full-box fluid-image" style="width:8.8%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 +
</div>
 +
</syntaxhighlight>
 +
 +
==Breakpoints==
 +
Aussehen ändert sich abhängig von der Viewport-Größe. Zum Testen Broswerfenster skalieren.
 +
 +
<div class="box full-width-small-down float-right-medium-up">
 +
Dies ist ein Beispieltext mit einem [[Wikilink]].
 +
</div>
 +
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. 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.
 +
 +
<syntaxhighlight lang="html">
 +
<div class="box full-width-small-down float-right-medium-up">
 +
Dies ist ein Beispieltext mit einem [[Wikilink]].
 +
</div>
 +
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. 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.
 +
</syntaxhighlight>
 +
 +
</div>

Revision as of 17:55, 13 February 2024

Click me

Click me

Diese Seite zeigt einige Formatierungen, die dank der TemplateStyles-Erweiterung möglich werden. Das zugehörige Stylesheet findet sich unter Vorlage:TemplateStyles/styles.css. Es wird wie folgt eingebunden:

<syntaxhighlight lang="html"> <templatestyles src="TemplateStyles/styles.css" /> </syntaxhighlight> <templatestyles src="TemplateStyles/styles.css" />


Indirekte Anordnung von Unterelementen

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

<syntaxhighlight lang="html">

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

Dies ist ein Beispieltext.

</syntaxhighlight>

Indirekte Formatierung von Links

Dies ist ein Beispieltext mit einem Wikilink.

Dies ist ein Beispieltext mit einem Wikilink.

<syntaxhighlight lang="html">

Dies ist ein Beispieltext mit einem Wikilink.

Dies ist ein Beispieltext mit einem Wikilink.

</syntaxhighlight>

Fluide Bildgrößen

Zum Testen Broswerfenster skalieren. Bild wird immer auf die zur Verfügung stehende Breite skaliert.

800px
800px
800px

<syntaxhighlight lang="html">

800px
800px
800px

</syntaxhighlight>

800px
800px
800px
800px

<syntaxhighlight lang="html">

800px
800px
800px
800px

</syntaxhighlight>

Breakpoints

Aussehen ändert sich abhängig von der Viewport-Größe. Zum Testen Broswerfenster skalieren.

Dies ist ein Beispieltext mit einem Wikilink.

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

<syntaxhighlight lang="html">

Dies ist ein Beispieltext mit einem Wikilink.

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. 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. </syntaxhighlight>

Retrieved from "https://itidata.abtk.hu/w/index.php?title=Test_page&oldid=769602"