Vorlage:InlineBlock/Doku

Aus MosaPedia

Version vom 02:45, 9. Okt. 2011 bei Kobold (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche
Dokumentations-Unterseite Diese Seite ist die Dokumentations-Unterseite der Vorlage:InlineBlock.


Diese Vorlage steht unter der folgenden Lizenz und darf unter den Bedingungen dieser Lizenz weiterverbreitet werden (Benutzer:Kobold 09.10.2011):


Diese Vorlage wurde unter der Lizenz
„Creative Commons Namensnennung–Weitergabe unter gleichen Bedingungen“
(abgekürzt „cc-by-sa“) in der Version 3.0 veröffentlicht.
Rechtsverbindlicher Lizenzvertrag: http://creativecommons.org/licenses/by-sa/3.0/legalcode
Kurzfassung in deutscher Sprache: http://creativecommons.org/licenses/by-sa/3.0/deed.de


Die Vorlage InlineBlock stellt eine Formatierungshilfe für Textblöcke in fließenden Layouts bereit.

Inhaltsverzeichnis

Anwendung

Die Verwendung der Vorlage bietet sich unter anderem für zweierlei Anwendungen an:

  • für komplexere Varianten der Hervorhebung von Text, sowie
  • zur Realisierung von Layouts basierend auf kompakten Blöcken, deren Anordnung sich in Abhängigkeit von der Breite des zur Verfügung stehenden Raumes ändert.

Die Wirkung der Vorlage ist die folgende:

  • Der Text innerhalb des Blockes wird so formatiert, als ob der Block die gesamte Seite bilden würde: Der Text wird entsprechend der Breite umgebrochen, Bilder werden ggf. am linken oder rechten Rand innerhalb des Blockes angeordnet, usw. (Unter anderem sehen Tabellenzellen "von innen" ebenso aus.)
  • Der Block als Ganzes wird "inline" im umgebenden Text, d.h. wie ein einzelnes Zeichen innerhalb der laufenden Zeile im Fließtext angeordnet.

Benutzung

Kopiervorlage

Einfache Version:

{{InlineBlock
 | width = 
 | style = 
 | {Inhalt}
}}

Ausführlich, mit allen Parametern:

{{InlineBlock
 | width = 
 | style = 
 | vertical-align = 
 | text-align = 
 | background = 
 | padding = 
 | border = 
 | margin = 
 | {Inhalt}
}}

Parameter

  • Die Breite des Blockes ist als width inklusive Einheit anzugeben (erlaubt sind neben Pixeln "px" auch fontspezifische Einheiten wie "em", sowie relative Angaben in "%" usw.)
  • Als style können bei Bedarf zusätzliche CSS-Attribute (ohne die einschließenden "Anführungszeichen") angegeben werden.
  • Zur Bequemlichkeit bzw. Übersichtlichkeit können Werte für die häufiger benötigten CSS-Attribute vertical-align, text-align, background, padding, margin und border auch im Wiki-Style übergeben werden:
    Anstelle von ...|style = border: 1px solid red; background: #fee|... kann auch ...|border=1px solid red|background=#fee|... geschrieben werden.
  • Der Inhalt der Box wird als namenloser (letzter) Parameter übergeben.

Beispiele

Um die volle Wirkung des "variablen Layouts" zu demonstrieren, bitte die Größe des Browserfensters ändern!

Hervorgehobene Bereiche im Fließtext

Beispieltext
Wir haben heute viel zu erzählen. Dies hier ist eine {{InlineBlock|width=100px|border=1px solid red|text-align=center
|wichtige}} Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine {{InlineBlock
|border=1px solid green|background=#efe|text-align=center|padding=0.3em 0.3em 0 0.3em
|[[Datei:Hapfff.png|left]] [[Datei:Hapfff.png|right]] schöne}} Sache.
<noinclude>[[Kategorie:Vorlage:nur Dokumentation]]</noinclude>
Wir haben heute viel zu erzählen. Dies hier ist eine
wichtige
Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine
schöne
Sache.


Demonstration
{| {{Prettytable}}
| colspan="3" | {{Beispieltext}}
|-
| style="width:22%" | {{Beispieltext}}
| style="width:33%" | {{Beispieltext}}
| style="width:44%" | {{Beispieltext}}
|}
Wir haben heute viel zu erzählen. Dies hier ist eine
wichtige
Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine
schöne
Sache.
Wir haben heute viel zu erzählen. Dies hier ist eine
wichtige
Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine
schöne
Sache.
Wir haben heute viel zu erzählen. Dies hier ist eine
wichtige
Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine
schöne
Sache.
Wir haben heute viel zu erzählen. Dies hier ist eine
wichtige
Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine
schöne
Sache.

Fließendes Layout

Beispieltext
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_385.jpg|border|right|x100px]] Mosaik [[385]]<br />Feuer, Würste und Skandale<br />Brabax  und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_386.jpg|border|right|x100px]] Mosaik [[386]]<br />Im finstern Walde<br />Johanna  und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_387.jpg|border|right|x100px]] Mosaik [[387]]<br />Eine haarige Angelegenheit<br />Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna  und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_388.jpg|border|right|x100px]] Mosaik [[388]]<br />Über den Dächern von Magdeburg<br />Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_389.jpg|border|right|x100px]] Mosaik [[389]]<br />Der Wassergeist<br />Die Abrafaxe, Johanna  und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_390.jpg|border|right|x100px]] Mosaik [[390]]<br />Johannas Vision<br />Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...}}
<noinclude>[[Kategorie:Vorlage:nur Dokumentation]]</noinclude>
Mosaik 385
Feuer, Würste und Skandale
Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ...
Mosaik 386
Im finstern Walde
Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ...
Mosaik 387
Eine haarige Angelegenheit
Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ...
Mosaik 388
Über den Dächern von Magdeburg
Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit...
Mosaik 389
Der Wassergeist
Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das...
Mosaik 390
Johannas Vision
Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...


Demonstration
{| {{Prettytable}}
| colspan="2" | {{Beispieltext}}
|-
| style="width:65%" | {{Beispieltext}}
| style="width:35%" | {{Beispieltext}}
|}
Mosaik 385
Feuer, Würste und Skandale
Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ...
Mosaik 386
Im finstern Walde
Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ...
Mosaik 387
Eine haarige Angelegenheit
Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ...
Mosaik 388
Über den Dächern von Magdeburg
Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit...
Mosaik 389
Der Wassergeist
Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das...
Mosaik 390
Johannas Vision
Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...
Mosaik 385
Feuer, Würste und Skandale
Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ...
Mosaik 386
Im finstern Walde
Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ...
Mosaik 387
Eine haarige Angelegenheit
Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ...
Mosaik 388
Über den Dächern von Magdeburg
Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit...
Mosaik 389
Der Wassergeist
Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das...
Mosaik 390
Johannas Vision
Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...
Mosaik 385
Feuer, Würste und Skandale
Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ...
Mosaik 386
Im finstern Walde
Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ...
Mosaik 387
Eine haarige Angelegenheit
Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ...
Mosaik 388
Über den Dächern von Magdeburg
Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit...
Mosaik 389
Der Wassergeist
Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das...
Mosaik 390
Johannas Vision
Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...

Technische Details

Interna

Die Vorlage ist eigentlich (fast) trivial, sie kapselt lediglich <div style="display: inline-block; ...">...</div> in eine Wiki-Vorlage. Die Bedeutung der Vorlage besteht vor allem darin, die realisierte Art der Formatierung auch mit HTML weniger vertrauten Autoren verfügbar zu machen.

Kompatibilität

Hinweis: Auf (sehr) alten Browsern wird die "inline-block"-Formatierung nicht unterstützt. Dort wird "inline-block" i.d.R. durch eine "block"-Darstellung ersetzt, d.h. ein InlineBlock-Element nimmt in diesem Fall die gesamte zur Verfügung stehende Breite ein.

Quelltext der Vorlage

<includeonly><div 
  style="display: inline-block; 
         {{#if: {{{style         |}}} | {{{style}}};                          }}
         {{#if: {{{width         |}}} | width:          {{{width}}};          }}
         {{#if: {{{vertical-align|}}} | vertical-align: {{{vertical-align}}}; }}
         {{#if: {{{text-align    |}}} | text-align:     {{{text-align}}};     }}
         {{#if: {{{background    |}}} | background:     {{{background}}};     }}
         {{#if: {{{padding       |}}} | padding:        {{{padding}}};        }}
         {{#if: {{{border        |}}} | border:         {{{border}}};         }}
         {{#if: {{{margin        |}}} | margin:         {{{margin}}};         }}
">{{{1}}}</div></includeonly><noinclude>{{Dokumentation}}</noinclude>


Persönliche Werkzeuge