I know, you have no idea what I’m talking about. This should give you a better idea:
I didn’t think much of this when I got the copy – but then again, I hadn’t really thought about it. When I did think about it, it got a little daunting…and then a little more. How was I going to make this?
Idea #1: Build it strictly from CSS.
Build it using z-index and overlapping div tags. Except that it didn’t really work the way I wanted it to. Mainly because I’m not a CSS guru.
Idea #2: Build it from a table.
When a colleague suggested this, I was skeptical. The concept was to build a 2-row, 3-column table and merge the center two cells and put the text there. Since I prefer not to use inline styles, I built a table style like this:
- All outer borders to 1px white
- Text in the cells are Palatino Bold 14pt centered
- Row separators are 2px black
- Column separators are 0px white
That’s it and the table looks like this in preview mode:
Nothing much to look at, I admit.
Then, in the topic, I merge the center column cells so it looks like this:
I enter the text I need, set the width of the center cell to fit my text plus some space on each end, and POOF!
It’s just lovely. In preview mode, it’s even more lovely:
So, I accomplished this, but not strictly using CSS. I did fall back on a table, which I wish I could have avoided.
Do you know how you would have coded this in Flare using CSS only? If so, please share!
RSS
