logon2 Blog

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

Ran XAMPP, tried to access the development virtual host for Kids On The Rise ( http://localhost:99 ) and got this:

Warning: Unknown([PATH HERE]): failed to open stream: No such file or directory in Unknown on line 0

Some other Fatal error came up but I forgot to copy it, sorry.

The error message is unhelpful but it was pretty easy to fix. I just deleted the .htaccess file from the root and tested. It worked! After restoring a backup of the .htaccess file everything worked. Hooray!

The Barrabool Rural Protection Group needed a website to share news and information quickly and efficiently. They now have a blog set up, allowing them to post news, add pages, engage in discussion and automatically send new content to subscribers.

The turnaround time for Barrabool Rural Protection Group’s blog was 42 hours including domain registration and discussion.

Have a look at Barrabool Rural Protection Group’s site to learn more about how they want to protect McAdam Park from over development as a result of a new motorbike / motorcross track.

Artist Guysel’s straight-line abstract art website was actually launched in March so this celebratory blog post is slightly late. This website update project presented some milestones for logon2:

• Gallery2 instead of miniGal for photo gallery management
• Pretty Smarties, logon2’s very own Template System, was used to keep pages consistent and content separated from presentation at source.
• Working with PHP as CGI on an external server

Artist Guysel in logon2’s folio

Most PHP programmers would have come across this old chestnut before:
Cannot modify header information – headers already sent by page.php line 42

This can happen when you try doing a HTTP redirect or send HTTP 404, as it can happen whenever you try to send headers once they’ve already been sent. When a user sees this, they are basically left high and dry, often on a blank page. The solution is simple:
(more…)

Pretty Smarties

Lovely Caption Maker

This is the simple PHP template system which integrates Pretty URLs and Smarty Templates. The release is only two months later than I said, but I’ve made the release fairly decent. Here’s a rundown on the system: (more…)

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…)

I just launched Adamas Fishing Charters’ new website. Adamas Fishing Charters is based in Barwon Heads and provides recreational fishing charters in Victoria, in bass strait - they generally depart from Barwon Heads and Portland.

Go with Adamas Fishing Charters to catch Mako Sharks, Thresher Sharks, Blue and Bronze Whalers, Snapper, Tiger Flathead, Barracouta, Squid, Gummy Sharks, Seven Gill Sharks, Yellowtail Kingfish, St. George Whiting, Trevally, Salmon, Calamari, Pike, Flathead and Tuna.

View Adamas Fishing Charters logon2 Portfolio Profile

In technology, there’s always the goal of making complex and difficult things more simple - this goal has brought about ‘clean URLs’. Clean URLs are website addresses that are easy for people (and also search engines) to read and understand. For example: An interesting article about the Bermuda Triangle might be at www.articles.com/article.php?id=23452 - That address tells us (and search engines) nothing about the article. Using a clean URL, the same article might be at www.articles.com/articles/bermuda-triangle - much easier, right? Well, here is how you can implement this on your website… (more…)