Australian Made and Owned

Nicer Footer Navigation with pseudo-selectors

Posted January 21, 2010

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 “&nbsp;”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

Filed under: CSS, Web Design — Tags: , , , , , — Tim @ 11:31 pm

PHP - No such file or directory in Unknown on line 0 Error

Posted January 19, 2010

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!

Filed under: PHP, Troubleshooting — Tags: , , , , — Tim @ 12:31 pm

New Site - Barrabool Rural Protection Group

Posted September 15, 2009

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.

Barrabool Rural Protection Group

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.

Filed under: Clients, Websites — Tags: , , , — Tim @ 2:55 pm

Launched: Artist Guysel

Posted August 3, 2009

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

Artist Guysel - Straight Line Abstract

Filed under: Clients — Tags: , , , , , — Tim @ 9:18 am

Check if Headers Have Already Been Sent in PHP

Posted July 22, 2009

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

Filed under: PHP, Troubleshooting — Tags: , , , , , — Tim @ 3:39 pm

Pretty Smarties 0.5 - Pretty URLs, Smarty Templates and Faster Web Design

Posted June 7, 2009

Pretty Smarties

Pretty Smarties

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

PNGs Have Different Colours in Different Browsers?

Posted May 7, 2009

Inconsistent PNGs

Inconsistent PNGs

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

Filed under: CSS, Web Design — Tags: , , , , , , , — Tim @ 9:03 am

Introducing the Lovely Caption Maker

Posted June 19, 2008

Lovely Caption Maker CSS Transparent OverlayA 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…)

Filed under: CSS, SEO, Web Design, tools — Tags: , , , , , , , , , — Tim @ 7:35 am

Launched: Adamas Fishing Charters - Sports Fishing in Bass Strait

Posted February 24, 2008

Adamas Fishing ChartersI 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

Filed under: Clients — Tags: , , , , , , , — Tim @ 6:44 pm

Clean URLs Using Apache’s mod_rewrite and PHP - Beginner’s Tutorial

Posted February 10, 2008

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

Filed under: PHP, SEO, Web Design — Tags: , , , , , , — Tim @ 3:39 pm
Newer Posts »