Difference between revisions of "Template:Flowlist/doc"
Jump to navigation
Jump to search
List of animals:
imported>Edokter |
imported>OgreBot m (Replacing File:Example.png with Commons version File:Bad Title Example.png (report errors here)) |
||
| Line 4: | Line 4: | ||
===Usage=== | ===Usage=== | ||
If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example: | If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example: | ||
| − | [[File:Example.png|left|thumb|100px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals: |
* [[cat]] | * [[cat]] | ||
* [[dog]] | * [[dog]] | ||
| Line 14: | Line 14: | ||
then {{tl|Flowlist}} enables lists to stay clear of these left floating objects. It effectively makes lists act as a block level element. It does however have a few [[#Side_effects|side effects]] that you should take note of. | then {{tl|Flowlist}} enables lists to stay clear of these left floating objects. It effectively makes lists act as a block level element. It does however have a few [[#Side_effects|side effects]] that you should take note of. | ||
| − | [[File:Example.png|left|thumb|100px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals: |
{{flowlist}} | {{flowlist}} | ||
* [[cat]] | * [[cat]] | ||
| Line 28: | Line 28: | ||
===Examples=== | ===Examples=== | ||
<pre><nowiki> | <pre><nowiki> | ||
| − | [[File:Example.png|left|thumb|100px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals: |
{{flowlist | | {{flowlist | | ||
* [[cat]] | * [[cat]] | ||
| Line 39: | Line 39: | ||
</nowiki></pre> | </nowiki></pre> | ||
| − | [[File:Example.png|left|thumb|100px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals: |
{{flowlist | | {{flowlist | | ||
* [[cat]] | * [[cat]] | ||
| Line 52: | Line 52: | ||
;Alternative syntax: | ;Alternative syntax: | ||
<pre><nowiki> | <pre><nowiki> | ||
| − | [[File:Example.png|left|thumb|100px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals: |
{{flowlist}} | {{flowlist}} | ||
* [[cat]] | * [[cat]] | ||
| Line 63: | Line 63: | ||
</nowiki></pre> | </nowiki></pre> | ||
| − | [[File:Example.png|left|thumb|100px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals: |
{{flowlist}} | {{flowlist}} | ||
* [[cat]] | * [[cat]] | ||
| Line 83: | Line 83: | ||
<div style="width:30em; display:inline-block; vertical-align:top; border: 1px dotted; padding: 1em; margin-right:2em; "> | <div style="width:30em; display:inline-block; vertical-align:top; border: 1px dotted; padding: 1em; margin-right:2em; "> | ||
====This==== | ====This==== | ||
| − | [[File:Example.png|left|thumb|20px|Test image]][[File:Example.png|right|thumb|20px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|20px|Test image]][[File:Bad Title Example.png|right|thumb|20px|Test image]] List of animals: |
* [[cat]] in a very long sentence that should collide with the image to the right | * [[cat]] in a very long sentence that should collide with the image to the right | ||
* [[dog]] in a very long sentence that should collide with the image to the right | * [[dog]] in a very long sentence that should collide with the image to the right | ||
</div><div style="width:30em; display:inline-block; vertical-align:top; border: 1px dotted; padding: 1em;"> | </div><div style="width:30em; display:inline-block; vertical-align:top; border: 1px dotted; padding: 1em;"> | ||
====Will become==== | ====Will become==== | ||
| − | [[File:Example.png|left|thumb|20px|Test image]][[File:Example.png|right|thumb|20px|Test image]] List of animals: | + | [[File:Bad Title Example.png|left|thumb|20px|Test image]][[File:Bad Title Example.png|right|thumb|20px|Test image]] List of animals: |
{{flowlist}} | {{flowlist}} | ||
* [[cat]] in a very long sentence that should collide with the image to the right | * [[cat]] in a very long sentence that should collide with the image to the right | ||
Revision as of 00:23, 22 March 2017
| 40px | This is a documentation subpage for Template:Flowlist. It contains usage information, categories and other content that is not part of the original template page. |
Usage
If you have this problem of list bullets and numbers overlapping with a left floating image or Infobox, for example:
File:Bad Title Example.png
Test image
List of animals:
then {{Flowlist}} enables lists to stay clear of these left floating objects. It effectively makes lists act as a block level element. It does however have a few side effects that you should take note of.
File:Bad Title Example.png
Test image
List of animals:
This template can be used with or without {{endflowlist}}.
Examples
[[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist |
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}
File:Bad Title Example.png
Test image
List of animals:
- Alternative syntax
[[File:Bad Title Example.png|left|thumb|100px|Test image]] List of animals:
{{flowlist}}
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
{{endflowlist}}
File:Bad Title Example.png
Test image
List of animals:
Parameters
- class – adds a CSS class to the containing div.
- style – adds CSS style options. Complex styles should not be used in articles (per wp:deviations) but may be acceptable on user, project, and talk pages.
- Example:
|style=border:solid 1px silver; background:lightyellow
- Example:
Side effects
Using this technique has a side effect. If your list is longer than the floated element, then the list will not flow around the image like normal, but instead be one block, leaving white space below the floated element. This goes for both left and right side of the list.
Will become
File:Bad Title Example.png
Test image
File:Bad Title Example.png
Test image
See also
- {{endflowlist}}
- {{flatlist}}
- {{plainlist}}