Sexy CSS

And no, I’m not referring to Cansei der Ser Sexy. I’m referring to the ingenious way I hacked a WordPress plugin and then did some CSS wizardry to make it display the way I wanted, so that, for a short time only, you can see my Archives By Date the way I want them.

Only slight drawback: they look crap in IE 5.2 for Macintosh (but really, who uses that?) and they also don’t work in Opera. In fact in some circumstances they make it crash, which I find deeply mysterious. Still, this is what they look like for the moment:

What’s so good about that, you ask? Well, without using a table, I have the dates flush right and the post titles flush left, so there’s an even space between the two.

However… I may not care about IE for Mac, but Opera is a proper, current browser (and I haven’t even tested it on IE for Windows). So tomorrow, probably, I’ll change it back. Ho-hum.

Ajax and the common man

One of the hot new(ish) things in web design is Ajax – standing for Asynchronous Javascript And Xml. To quote Wikipedia, “The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire Web page does not have to be reloaded each time the user makes a change.” You’ll have seen the results on websites like Flickr, where you can edit the descriptions on your photos without having to load a new page. An impressive example of an Ajax-rich WordPress theme can be seen here; click on the buttons at the top to get the full effect.

Which is great, of course. Except that one of the joys of the internet is its accessibility for the casual user who wants to make a webpage. HTML is, really, an extremely simple system to use. CSS means a bit more to learn, but once you get the hang of it, it actually makes your life easier. And that’s all you need to arrange content on a page. If you just want to create a static webpage, you can do it entirely from scratch just with HTML and CSS, and how good the content is and how good it looks are entirely up to you.

Even using software like WordPress, it’s easy enough to just use some knowledge of HTML and CSS to restyle the output. The software is built in PHP, and you just have to work around the PHP tags, moving them around as necessary; it’s usually obvious from context what they do. So you can completely change the look of a site without doing any of what I’d call real coding. The various changes to the appearance of this site and its predecessors have all been done without me knowing any PHP. Ajax kills that, as far as I can tell; hacking around a theme to change the styling becomes a suddenly much more technical exercise.

I completely see the point of Ajax – when it’s used well, it transforms the user experience. And I’m not suggesting that anyone stop using it just for my sake. New software makes it easier and easier for people who know little about computers to share their thoughts and pictures on net; it’s just an unfortunate side-effect that as the software gets more sophisticated, it gets harder for a dabbler like me to get my hands dirty and tinker with the machinery.

I guess it’s a natural progression with all technologies. In the early days of motoring, you *had* to know how to do basic repairs to your car by the side of the road, and the engine was simple enough that you could probably do it with a couple of spanners and a can of oil. The fact that cars are now so reliable that you barely need to know how to check your oil and tyre pressure is a Good Thing, of course. But it still seems a pity when things get professionalised out of people’s hands to the point where they never get to do things themselves from scratch, whether it’s baking bread or creating a webpage.

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.

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.

For a short time only – valid XHTML *and* CSS!

It’s not that I go out of my way to use non-standards compliant HTML or CSS, but some of the specs seem pretty petty (tags must be lower case, img tags must have an ‘alt’ quality, you have to close your break tags), so I certainly can’t guarantee that the site will remain valid for long. And I’ve only checked the front page. But, just at the moment, the front page does validate both for XHTML and CSS.

If you have no idea what I’m talking about – it’s not important.

New design for the blog

As should be pretty obvious, I’ve re-designed the blog. Again. If it looks peculiar on your computer, let me know. I’ve pretty much decided not to make the extra effort to make the site work on early versions of Internet Explorer, but if it’s not looking right on IE6 I might need to do something about it.

Can I just say how fucking annoying it is that CSS doesn’t seem to support blocks where the bottom is defined relative to the bottom of the webpage (i.e. the document rather than the screen).

The swifts are taken from this picture on Flickr.

Close Menu