Template:Infoline

{{tocright}}
= [[User:Mikk|Mikk]]'s spiel about CSS and divs and tables =

''If you cba to read all my mistakes and thoughts, just jump down to [[#Conclusion|the conclusion]].''


Right. This has certainly been a learning experience for me as I've been experimenting with what HTML layout engines can and can't do today. CSS certainly brought us a long way but... well.. it's not quite there yet, as I see it.

These centered, page-wide bars have gone from tables, to divs, and back to tables again. Here's why:


== Div bars ==

<div style="float:right; border:1px dotted; width:30ex; height: 5em;">
Hey! I'm floating!<br>Woohoo!
</div>
<div style="border: 1px solid blue; margin: 0em 3em;">
(text goes here)
</div>

<div style="float:right; border:1px dotted; width:30ex; height: 5em;">
Hey! I'm floating!<br>Woohoo!
</div>
<div style="border: 1px solid blue; margin: 0em 3em; text-align:center;">
Look how our nice page-wide div disappears straight under the float
to the right and generally looks off-center and icky.
</div>


== Table bars ==

&lt;div style="float:right; border:1px dotted; width:30ex; height: 5em;">
Hey! I'm floating!&lt;br>Woohoo!
&lt;/div>
&#x7b;| style="border: 1px solid blue; margin: 0em 3em; text-align:center;"
|-
|(text goes here)
|}


<div style="float:right; border:1px dotted; width:30ex; height: 5em;">
Hey! I'm floating!<br>Woohoo!
</div>
{| style="border: 1px solid blue; margin: 0em 3em; text-align:center;"
|-
|
Look how our nice page-wide table nicely stays put to the left of the
float on the right and actually looks quite ok! Our only problem is that
if you enter too little text, it just ends up a small blip in the middle
of the screen, but I attempt to fix that further down.
|}


== A bar with short text though... ==

<center>
{| style="border: 1px solid blue; margin: 0em 3em; padding: 0em 4em; text-align:center;"
|-
|Whoops!
|}</center>


== Fixing the minimum width... sort of ==

This is where it gets ugly.

{{Code/Begin}}
&#x7b;&#x7c; style="border: 1px solid blue; margin: 0em 3em; padding: 0em 4em; text-align:center;"<br>
&#x7c;-<br>
&#x7c;Better.<br>
&lt;div style="height:1px; background-color: transparent;">&lt/div>&lt;font style="font-size: 0px;">&lt;div style="float: left; width: 300px; height: 1px; background-color: transparent;">&lt;/div>&lt;div style="float: left; width: 300px; height: 1px; background-color: transparent;">&">&lt;/div>&lt;div style="float: left; width: 300px; height: 1px; background-color: transparent;">&">&lt;/div>&lt;div style="float: left; width: 300px; height: 1px; background-color: transparent;">&">&lt;/div>&lt;/font><br>
&#x7c;}<br>
{{Code/End}}


The trick with the divs forces the table to become as wide as possible:

<center>
{| style="border: 1px solid blue; margin: 0em 3em; padding: 0em 4em; text-align:center;"
|-
|Better.
<br style="clear:left;"><font style="font-size: 0px;"><div style="float: left; width: 300px; height:4px; background: #ff8080;"></div><div style="float: left; width: 300px; height:4px; background: #80ff80;"></div><div style="float: left; width: 300px; height:4px; background: #8080ff;"></div><div style="float: left; width: 300px; height:4px; background: #40ffff;"></div></font>
|}</center>

I just colorized the divs so you can see what happens. Try resizing your browser!

Quirks:
* MSIE is to blame for the &lt;font> tag and the "height:1px" in all the elements
* Opera is to blame for the bonus &lt;div> tag in the beginning, it doesn't handle the left floats exactly right.
* Without the "background-color: transparent;" (or with ":none"), MSIE goes bezerk and assumes that divs MUST be a full 1em high. Joy.
* Mozilla/Firebox is to blame for the "height:1px". With "0px", it assumes that the divs should not be displayed, and ignores them completely.


And now look at how it works with a float off to the right:

<div style="float:right; border:1px dotted; width:30ex; height: 5em;">
Hey! I'm floating!<br>Woohoo!
</div>
<center>
{| style="border: 1px solid blue; margin: 0em 3em; padding: 0em 4em; text-align:center;"
|-
|Still works!
<font style="font-size: 0px;"><div style="height:1px; background-color: transparent;">div style="float: left; width: 300px; height:1px; background-color: transparent;"></div><div style="float: left; width: 300px; height:1px; background-color: transparent;"></div><div style="float: left; width: 300px; height:1px; background-color: transparent;"></div><div style="float: left; width: 300px; height:1px; background-color: transparent;"></div></font>
|}</center>

Remember that divs are 1 pixel high. This means you'll get 1--4 pixels of free padding (depending on page width) at the bottom of your bar. Live with it :-)

= Conclusion =

For any kind of page-wide, centered bar that wants to work with floats off to the right:

And, finally, the markup basics:
&#x7b;| style="margin: 0em 3em;"
|-
|''your text here''
&#123;&#123;makemewide&#125;&#125;
|}

It's easy when you (finally) know how to do it, huh? :-)

--[[User:Mikk|Mikk]] 16:41, 8 June 2006 (EDT)


== Generic "band" templates ==

Whoops, as I was going through all the band thingies, I got annoyed that the colors were always slightly mismatching, so I created a generic {{tlink|band}} template to use as a base, and then a bunch of "band-''color''" that I've now used more or less everywhere. Well, there's a few spots remaining, but I need zzzzz now. --[[User:Mikk|Mikk]] 18:14, 8 June 2006 (EDT)

{{band-blue|The code on this template is funky, but I have no idea how it works. Can you fix the little poop that comes out just below this? [[User:D. F. Schmidt|Schmidt]] 01:48, 18 June 2006 (EDT) }}
: Damnit Schmidt, I even documented how to do it ''in the template itself''! =) --[[User:Mikk|Mikk]] 05:35, 18 June 2006 (EDT)

= Comments =

Fun :) The bar templates do need an overhaul to make them all constant - my recent attempt had some success (at least they look similar now), but the coding needs redoing. Talking about the infobar, redbar, greenbar, RPG bar, warning bars, etc ...

I have to say, stubs do look a *lot* better now. -- Kirkburn 15:16, 8 June 2006 (EDT)