Vorlage:Stack/doc

ZIM HilfeWiki - das Wiki
< Vorlage:Stack
Version vom 21. Februar 2018, 11:25 Uhr von Oetterer (Diskussion | Beiträge)

(Unterschied) ← Nächstältere Version | Bestätigte Version (Unterschied) | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

This template can be used to stack images and other floating content such as infobox templates without causing problems with spacing and floating. Enter a string of images/templates as the first parameter to have them stack without generating floating errors or spacing errors. You can stack many objects from the top of a section and not force further subsections to space out.


Usage[Quelltext bearbeiten]

At its simplest:

{{stack|<objects>}}


<object> may simply be a string of wikicode for many images/templates.

Optional parameters[Quelltext bearbeiten]

{{stack| <objects> | float=left/right | clear=true/false}}

where

  • float= left or right (default is right)
    This option can be used to float the stack to the left or right of the page
  • clear= true or false (default is false)
    This option can be used to force the stack to the far left or right (e.g., near an infobox).

You can also explicily list multiple arguments.

{{stack| float=left/_right_ | clear=true/_false_
|1=<object(s)>
|2=<object(s)>
|3=<object(s)>, etc. up to 9 parameters in the current version
}}
  • NB This multiple argument version does include extra vertical whitespace between each (set of) <object(s)>.

Examples[Quelltext bearbeiten]

To illustrate the utility of the stack templates, consider the following situation. We would like to have two right floating images at the top of the first section of our article (here, the Lorem section), and one left floating image at the top of the second section (here, the Lorem section). To achieve this layout, without using a stack template, we could try the following code:

=====''Lorem''=====
[[File:{{Image mapper|Shuttle}}|thumb|right|Example 1a]]
[[File:{{Image mapper|Shuttle}}|thumb|right|Example 1b]]
... text ...

=====''Lorem''=====
[[File:{{Image mapper|Shuttle}}|thumb|left|Example 1c]]
... text ...

=====''Ipsum''=====
... text ...

The result of this is shown in the without stack section below. Notice how the left floating image (Example 1c) is prevented from floating above the last right floating image (Example 1b). You may need to resize the width of your browser to fully appreciate the issue. To fix this problem, we can stack the two right floating images together, using the following code:

=====''Lorem''===== {{stack |[[File:{{Image mapper|Shuttle}}|thumb|right|Example 2a]] [[File:{{Image mapper|Shuttle}}|thumb|right|Example 2b]]}} ... text ...

=====''Lorem''===== [[File:{{Image mapper|Shuttle}}|thumb|left|Example 2c]] ... text ...

=====''Ipsum''===== ... text ...

The result of this is show in the with stack section below. Notice how by adding this stack template, the left floating image (Example 2c) can now float higher and is not blocked from floating higher than the top of the last right floating image (Example 2b).

Without {{stack}}[Quelltext bearbeiten]


Lorem[Quelltext bearbeiten]
Example 1b
Example 2b

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem[Quelltext bearbeiten]
Example 3b

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ipsum[Quelltext bearbeiten]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

With {{stack}}[Quelltext bearbeiten]


Lorem[Quelltext bearbeiten]
Example 1a
Example 2a

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem[Quelltext bearbeiten]
Example 3a

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ipsum[Quelltext bearbeiten]

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


More examples[Quelltext bearbeiten]


{{Stack}} can also be used to float one or more images across a page.

Shuttle.svg
Shuttle.svg
{{stack|[[File:{{Image mapper|Shuttle}}|40px]]}}
{{stack|[[File:{{Image mapper|Shuttle}}|60px]]}}

It might take some experience to learn how the box area floats, in combination with various images or wikitables on a page. {{Stack}}'s operation is very quick, as it uses an HTML <table> to achieve its effects.

Floating portal boxes[Quelltext bearbeiten]


{{Stack}} can be used to float a portal box beside an infobox (or other right-aligned item) when other methods might not work as anticipated.

Infobox


line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9

Test image

This is a wikitable serving as a typical left-aligned table. The overlap on left-aligned tables had been a frequent problem when other boxes nearby were set to "float:right". So this is a test of how well a floating portal-box would avoid overlapping onto a left-side table.


Cookies helfen uns bei der Bereitstellung des ZIM HilfeWikis. Bei der Nutzung vom ZIM HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.