CSS positioning

[Sorry, I know most of you won’t be even slightly interested in this]

I’ve just had a major intellectual breakthrough about how CSS positioning works. Or, to put it another way, I’ve just realised that I’ve been being very stupid for a very long time.

I’ve read lots and lots of online CSS tutorials, and either none of them made it clear, or I was being dense. They often suggest that ‘absolute’ positioning is measured from the containing block – or sometimes they say that it’s measured from the edge of the browser window. The containing block theory clearly didn’t work. The screen approach seemed to work most of the time, but it meant that you couldn’t, for example, center the page on the screen if you were using absolute positioning – because it would always be a fixed distance from one of the window-edges.

In fact, absolute positions are measured from the nearest containing block in the hierarchy which has a ‘position’ property specified as something other than static. So if you just set the page’s ‘position’ tag to ‘relative’, you can then move the page around as much as you want and all things you’ve positioned with ‘absolute’ measurements will follow it. Similarly, you can take one area of the page and set it to {position:relative} and then use absolute positioning within that area.

I assumed, you see, that you’d only set the position property if you wanted to change the position of the block in question, not as a way of affecting the blocks contained within it. Now I know better. The CSS positioning system is suddenly much easier to use and much saner. I can’t believe I’ve been struggling along trying to design table-free webpages without grasping this; and I can’t believe that none of the tutorials I read made it clearer, since it’s the single most important thing to understand if you want to use CSS positioning.

Testers wanted!

I mentioned earlier that I thought it might be fun to enter a WordPress theme competition. Well, I’ve got a theme worked up that I’m thinking of entering. You can see it in action on my test blog here. As you can see, it’s a two-column variation on the Swifts theme with a different picture.

I’ve checked it on Firefox, Safari and IE for Mac, and they all look basically OK, but I haven’t checked it on Windows at all. So I’d be grateful if anyone using IE, Firefox or Opera on Windows could take a look and poke around, see if there’s anything you think might be wrong, and let me know. Cheers.

EDIT: well, I’ve just tried it on Opera for Mac, and it doesn’t work right. It’s startling how no two browsers seem to render the same bit of code in the same way.

EDIT: OK, I’ve sorted that out. Further comments still appreciated. If something looks wrong, it would help if you could give me a screenshot of it so I can see what the problem is.

web design stuff

The more time I spend thinking about web design, the more easily irritated I am. Take Spork. Look at that lovely, stylish, front cover: it manages to have something of a print aesthetic without being heavy-handed, and it’s clear, simple and eye-catching. Classy.

But then you click on the names, and the links open as new windows. Like I don’t have enough windows cluttering up my screen all the time as it is. Look, I never, ever want any link I click to open as a new screen unless I specifically tell it to.

And you just know that they’re only done it that way because someone didn’t want navigation buttons cluttering up his nice neat page layouts. Humph.

New Theme

I’ve come up with a new design for the site, as I think should be pretty obvious. If you prefer the calmer qualities of the old look, there’s now a theme switcher in the sidebar so you can pick your favourite. The scarab picture is used by kind permission of elina. Fab, innit?

The main problem with the new theme from a design POV is that it looks a bit peculiar if you’re looking at a single post which isn’t very long. But I can’t think of an easy answer to that one. It’s also a wee bit visually aggressive, but hey, that’s what the theme switcher is for – you can take your pick.

he just doesn’t get it

Creative have launched a competitor to the video-capable iPod. It looks rather like the iPod except clumsier and uglier. But this is the bit I thought was extraordinary:

Creative are touting the Zen as a far more powerful player than Apple’s offering, with additional functions such as FM radio and a built-in mic.

“We are focused on the technology,” he said. “This is still a technology marketplace.”

“This is the key difference between a technology company and a branding company,” he said, taking a side-swipe at Apple’s successful marketing campaign for its iPod.

Firstly – the iPod does what it does very well. What makes Mr Sim think people want additional functions? But more to the point – how many millions of units do Apple have to ship, and what proportion of the market do they have to win, before their competitors come to terms with the fact that all consumer products are brand items, and bought as much because people like them as for what they can do? We’re not talking about coal-fired power stations or aircraft carriers here, we’re talking about something that people are buying for entertainment, that they carry around every day in their pocket. Car companies get it – that people want cars that look nice, have the right associations (yes, Mr Sim, that’s branding) and that they enjoy owning. If that’s true for a £20,000 car, it’s certainly true for a £200 mp3 player. That’s not much more than a pair of trainers. If the chairman of Nike suggested that branding was unimportant, we’d all assume he’d lost his marbles.

blog design

I’ve been thinking about web design recently, specifically as it applies to a possible redesign for this blog. There’s no rush, because the current look is fairly new and I’m pleased with it, but I had set myself a more ambitious target. Inspired by an exchange I had with Will over at Corridor of Uncertainty, I wanted to come up with something which broke away from the standard layout of ‘header and 2 or 3 columns’, which looked genuinely distinctive and sharp.

Obviously you can’t get away from the fact that most of the content you want to present (posts, blogroll, categories) is naturally in a column form. What you can do, hopefully, is break up the boxy visual appearance, both by disguising it – rather as I’ve tried to do with the fading-out of the blue boxes in the current design, which softens their appearance – and by laying them out somewhat differently. And that’s quite apart from all the decisions about typography, visual style, colour-scheme and so on. I would want to get the look stylish without being über-tasteful, modern without trying to present myself as terribly hip (which I’m not), and low-key while still being distinctive. And no Flash or Java, both because they’re completely unnecessary with this kind of site and because I wouldn’t know how to do them anyway – it took me long enough to learn my way around basic HTML and CSS.

I do have a few ideas, but it’s not coming together just yet. In the meantime, I had a (not very thorough) scan through the long poetry blogroll to see what other people have done. Most, sensibly enough, have just used one of the blogger templates. And there are plenty with good, simple designs based primarily on sensible colour and type choices. But here are a few that have managed something a bit more distinctive. In no particular order:

Equanimity (probably my favourite of the lot, though the one-column layout is a bit limiting)
jane dark’s sugarhigh!
Shanna Compton
{lime tree}
JewishyIrishy
Jacob’s Ladder
One Good Bumblebee
Odalisqued
Postcards from the Imagination
Watermark

Note that I’m not talking about anything particularly radical or super-ingenious, just good design.