Template:Tab

{{#vardefine:width|{{{tab1}}}{{{tab2}}} {{{content1}}} {{{content2}}} {{{content3}}} {{{content4}}} {{{content5}}} {{{content6}}} {{{content7}}} {{{content8}}} {{{content9}}} {{{content10}}} {{{content11}}} {{{content12}}} {{{content13}}} {{{content14}}} {{{content15}}} {{{content16}}} {{{content17}}} {{{content18}}}

<css>

.tab { text-align:center; font-size: 90%; padding: 3px; margin: -2px 1px 0; border: 2px solid #426787; background-color: #1D578B; white-space: nowrap; cursor: pointer; display: block; float:left; }

span.tab:hover, div.tab:hover, td.tab:hover { background-color:#1b5181; color:#F4F26B; }

.tabselected { background-color:#17456e !important; border-bottom: 2px solid #17456E; color: #F4F26B; }

.tabcontainer p { margin:0; } </css>

Purpose

This template is a tool to create navigation templates with a tabbed layout. This condenses the overall size of the navigation template but still offers everything in it. This makes navigation templates with a lot of content far less intimidating and much easier to get around.

This template can create up to 18 tabs. They will automatically break into multiple lines if the container is too narrow.

Usage

To use this template, start with this layout:

{{Tab
|header   =
|width    =
|height   =
|tabwidth =
|default  =
|fallback =
|tab1     =
|content1 =
|tab2     =
|content2 =
|tab3     =
|content3 =
...
|tab17    =
|content17=
|tab18    =
|content18=
}}

• header — The title for the tab container. If left blank, the tabs will not be in a stylized container.
• width — The width of the container. Fits to the contents if left blank.
• height — The height of the tab contents section. Fits to the contents if left blank. Base this on the largest content tab. Usually 20px per line works best. You may wish to add an addition 20px to account for the bolding that happens when you're on the page for a link, as this might add a new line.
• tabwidth — The width of each tab. Fits to the contents if left blank.
• default — The tab to display when the page first loads. Defaults to "1"
• fallback — The tab to load in case javascript does not load. The default tab also loads in case of error.
• tab# — The name of each tab. Try to keep the names short as long names tend to look bad. You can also use images here. However, if you do, they should be entered with a blank "link=" parameter, or the linking to nothing option of Template:Image. If you neglect to do this, clicking the tab will take you to the that page instead of loading the tab.
• content# — The content you want to display for each tab. There is no limit here, but you may want to insert line breaks and adjust the width and height parameters to make the whole template look its best.

Examples

To see examples of using this template, see the templates:

• Template:Games
• Template:Swords
• Template:Shields
• Template:Songs

Template:Cat