Vorlage:InlineBlock
Aus MosaPedia
Version vom 02:44, 9. Okt. 2011 bei Kobold (Diskussion | Beiträge)
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 
- 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 | ||
| 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 | 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 | 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 |
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>
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 ...
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 ...
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, ...
Ü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...
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...
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}}
|}
| 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 ... 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 ... 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, ... Ü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... 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... 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... | |
| 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 ... 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 ... 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, ... Ü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... 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... 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... | 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 ... 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 ... 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, ... Ü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... 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... 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>