Template talk:Infoline

Mikk's spiel about CSS and divs and tables
If you cba to read all my mistakes and thoughts, just jump down to 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
&lt;div style="float:right; border:1px dotted; width:30ex; height: 5em;"> Hey! I'm floating!&lt;br>Woohoo! &lt;/div> &lt;div style="border: 1px solid blue; margin: 0em 3em;"> (text goes here) &lt;/div>

Hey! I'm floating! Woohoo! Look how our nice page-wide div disappears straight under the float to the right and generally looks off-center and icky.

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) |}

Hey! I'm floating! Woohoo!

Fixing the minimum width... sort of
This is where it gets ugly.

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

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:

Hey! I'm floating! Woohoo!

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:


 * You have to use a table, not a div


 * Use &lt;center> around the table


 * You can't say "width=100%", you have to embed makemewide in the table


 * Please use style="margin: 3em;" to match other page-wide things so that they place nice together

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

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

--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 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. --Mikk 18:14, 8 June 2006 (EDT)


 * 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? Schmidt 01:48, 18 June 2006 (EDT)


 * Peruse Templates. It says, e.g.  . --Mikk 05:33, 18 June 2006 (EDT)
 * Damnit Schmidt, I even documented how to do it in the template itself! =) --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)


 * Yeah, no kidding. I'm going to go over them ALL now and apply this concept. And thanks mate :-)  --Mikk 16:44, 8 June 2006 (EDT)


 * Great work. I see you're recreating the band stuff now, so I'll leave you to it ... Simplicity and beauty (and Mikk) roolz! :D -- Kirkburn 17:56, 8 June 2006 (EDT)


 * Sod it, now I broke MSIE again. Microsquishies will have to live with a bonus blank line til tomorrow. Like I said above, Zzzz now. --Mikk 18:20, 8 June 2006 (EDT)


 * Did you know that without " background-color:...", MSIE assumes that a div with no text in it has to be a whole text line high? Well, now you do, and so do I. >.<  --Mikk 03:39, 9 June 2006 (EDT)