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

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

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

<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;"
|-
|(text goes here)
|}

Hey! I'm floating!
Woohoo!

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...

Whoops!

Fixing the minimum width... sort of

This is where it gets ugly.

{| style="border: 1px solid blue; margin: 0em 3em; padding: 0em 4em; text-align:center;"
 |-
 |Better.
 <div style="height:1px;  background-color: transparent;"></div><font style="font-size:
 0px;"><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>
 |}

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

Better.

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

Quirks:

• MSIE is to blame for the <font> tag and the "height:1px" in all the elements
• Opera is to blame for the bonus <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!

Still works! div style="float: left; width: 300px; height:1px; background-color: transparent;">

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 <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:

{| style="margin: 0em 3em;"
|-
|your text here
{{makemewide}}
|}

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 {{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. --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 WoWWiki:Templates. It says {{band-blue|text|extra css}}, e.g. {{band-blue|hi folks|}}. --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)