Difference between revisions of "Template:Box"

From comp.tf
Jump to navigation Jump to search
m
m
Line 1: Line 1:
 
<includeonly>{{#switch:{{lc:{{{1|}}}}}
 
<includeonly>{{#switch:{{lc:{{{1|}}}}}
 
|break=</div>
 
|break=</div>
<div style{{=}}"display:inline-block; vertical-align: top; margin: 0 0 0 0;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}">
+
<div style{{=}}"display:inline-block; vertical-align: top; margin: -15 -15 -15 -15;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}">
 
|end=</div></div>
 
|end=</div></div>
 
|start
 
|start
 
|<div {{#if:{{{max-width|}}}|style="max-width:{{{max-width}}};"}}><div style{{=}}"display:inline-block; vertical-align: top; margin: 0 0 0 0;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}">
 
|<div {{#if:{{{max-width|}}}|style="max-width:{{{max-width}}};"}}><div style{{=}}"display:inline-block; vertical-align: top; margin: 0 0 0 0;{{#if:{{{padding|}}}|padding-right:{{{padding}}};}}{{#if:{{{padding-bottom|}}}|padding-bottom:{{{padding-bottom}}};}}{{#if:{{{box-width|}}}|width:{{{box-width}}};}}{{#if:{{{box-height|}}}|height:{{{box-height}}}; overflow:hidden;}}{{{style|}}}">
}}</includeonly>
+
}}</includeonly><noinclude>{{documentation}}[[Category:Templates]]</noinclude>
 
 
<noinclude>{{documentation}}[[Category:Template]]</noinclude>
 

Revision as of 17:21, 17 July 2015

(view - edit) Documentation

This template is to be used with fixed width objects to arrange them in a free "floating" fashion where they will take the least amount of vertical space by utalizing as much horizontal space as the individual "boxes" allows. There's also no limit to the amount of boxes you want to make with this, it can be anything from 2 to however many you want. But it does look bad if the objects/boxes are of different height.

Variables

The structure is as follows {{box| first variable | optional variable (padding=) }}

  • The first variable has three values you can set it to.
start
Used for the first instance in the array.
break
Used between two boxes.
end
Used to end the array of boxes.
  • padding= Defines the distance to neighbour elements towards the right. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
  • padding-bottom= Defines the distance to neighbour elements towards the bottom. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
  • box-width= Defines the width of the following box. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).
  • box-height= Defines the height of the following box. Set this to any value with either pixels (for example 5px) or em sizes (for example 1em).

Example

{{Box|start|padding=1em}}
{| class="wikitable" width="400px"
|<br />
|}
{{Box|break|padding=1em}}
{| class="wikitable" width="400px"
|<br />
|}
{{Box|break}}
{| class="wikitable" width="400px"
|
|}
{{Box|end}}

This code will become these three boxes below, displayed either in a single row a single column or 2 on one row and 1 on the next, depending on your browser window size. Also there's no need to use padding on the last break as nothing can come after it.




Credit to Liquipedia