logon2 Blog

It’s possible that you’re thinking, “Processing PHP in CSS? That’s plain stinks.,” just from reading the heading. It does stink, but so does maintaining two CSS files, updating your colour scheme manually (or even by sed), changing common dimensions, and all the other crap that goes with static files. Think about it this way – would you build a site out of many HTML files or would you use some kind of template system (like Pretty Smarties)? By now I hope you’re less sceptical. If you’re interested, please read on. (more…)

A common website design feature is the inclusion of navigation links (top level or otherwise) in the footer. Often, links are separated by a hyphen ( – ) or a pipe ( | ). It’s very easy to enter these separators in the markup, like so:

<a href="/">Home</a> |
<a href="/about/">About</a> |
<a href="/contact/">Contact</a>

I guess it’s OK to do that, but it’s not really great practice because the pipes ( | ) are not actually part of the content and are only meant for presentation, so they shouldn’t really be part of the HTML. Another problem with this is that it’s inflexible. What if we want more space between the pipes and the links? Do we enter a bunch of “ ”s? That’s ugly^.

We can use the CSS border property to add the separators for us by adding a left-border to each of the links.

“But what about the first link?“

The answer is the :first-child CSS pseudo-selector. It allows us to define CSS properties to the first element of its kind within a container. So in this instance, we can apply no border to the first child. Here’s how the lot would look:

<ul id="footer">
	<li><a href="/">Home</a></li>
	<li><a href="/about/">About</a></li>
	<li><a href="/contact/">Contact</a></li>
</ul>

ul#footer li {
    display:inline; /* so they display horizontally */
    border-left:1px solid #000000; /* our 'pipe' */
    padding-left:1em;
    padding-right:1em;
}
 
/* here it is, the first-child pseudo-selector */
ul#footer li:first-child {
    border:none; /* no 'pipe' before the first element */
}

It requires a bit more coding initially but it’s more elegant because it separates concerns and it’s also more accessible for screen readers and our friendly neighbourhood search engines*.

^ I know, this very site doesn’t follow this site doesn’t follow these practices. I’m a hypocrite!
* FACT

Inconsistent PNGs

Lovely Caption Maker

Have you ever been working on a website and noticed that in certain browsers a background image isn’t blending properly with one of your background colours or another image? This phenomenon occurs in Internet Explorer and it’s caused by metadata in the PNG file itself. There’s a great program that solves this problem without any hacks. (more…)

A recent trend I’ve noticed on some Australian media websites has been evoking my interest for a few months now. Sites like The Age and Fox FM have started overlaying a lovely coloured banner with a caption over feature images. The great thing is, they’re not rendered but glorious SEO-friendly and accessible HTML and CSS. I’m not surprised, however, since The Age and Fox FM have always been trend early adopters. The ABC still beats them, though.

Unfortunately, this effect can’t be achieved without knowing and entering the width and height of an image – making it kind of tedious to implement. After deciding that I’d like to use it with wordpress posts, it was decided that a tool should be built. And then The Lovely Caption Maker was born. Here’s an example of Lovely Caption Maker’s glory: (more…)