Still Kicking

Just checking in to let everyone know I’m still around.

Working on a new layout that I’m going to use as a new WP layout for this blog. I’d originally intended it to be a separate, new layout, but now I think I’ll publish it was a WP layout instead. After it’s been up here for a bit and the bugs ironed out. Hope to install the first version of this template in the next week or two.

Here’s a little tip for web designers. Sometimes I’ll find myself wanting to produce “previous” and “next” links to appear at the bottom of a web page used to manage some kind of database-driven content. The links would obviously point to the previous and next records in the database.

To style this I sometimes prefer to have the links centered on the page with a bit of a gap between the two links. Why centered and not at the far left and right edges? I don’t know. Visual preference that fits better with the layout and style perhaps, but I tend to operate more on gut feeling with a layout.

Now in the past I’d simply make a paragraph tag with text-align:center set and then a bunch of   characters to add some space. Now if the text should ever wrap because the viewport is too small then the effect breaks horribly. Also, the text would center based on the center of all the text, and would NOT center on the gap between the two links. The illusion breaks very quickly if these previous/next links include a variable width bit of text like, say, the title of the previous/next record. The position of the gap starts moving from record to record. Ick.

« Previous             Next »

So here’s a new way to do this. Simply create two paragraphs. Float them to either side. Set a width of, say, 40% for each. Right-align the left-float and left-align the right float. Now you’ve got a gap (20% the page width in this case) between the two links, they’re centered to the page based on the gap, the gap’s location won’t change from page to page, and if the text wraps the visual structure is retained.

« Previous

Next »

Now there’s no great reveal here, is there? It’s a pretty basic and simple trick. But I find my mind will sometimes approach a problem from a direction that makes it difficult to see the obvious. So I like to see these simple tips from time to time, because once in a while it’ll be a trick I’d never considered before.