Okay, let’s say we have our logo, it’s called sixshootermedia_logo.png, it sits in our images folder and is 200 pixels wide by 100 pixels tall. Okay.

The first thing I do is to create the html necessary to hold the logo. This is about as semantic as we can get!;

<h1><a href="/home/" title="Take me home!">Six Shooter Media</a></h1>


Nice and simple. Now on to the actual magic; the css. What I do with the css is give the link inside the h1 the exact dimensions of the logo by displaying it in the block format. And then set the logo file as it’s background image. So we have something like this

h1 a {
display:block;
width:200px;
height:100px;
background:url(/images/sixshootermedia_logo.png) no-repeat;
}


Now if you check your site you will notice that your homepage link is sat nicely, with the logo as it’s background, fully visible for all to see. But wait, the actual h1 text is still there, and it’s sat right on top of our logo image, “Sacre Bleu!”
This leads us onto the final spell in our magic trick! Simply add text-indent:-9999px; to your h1 a css style and the actual text itself disappears, leaving the logo in it’s pride of place.

So there you have it! A semantic h1 logo link.

You can actually see this technique live, on this site, right now!


<a href="#" title="Title">Link Here<span>Descriptive Text Here</span></a>


Now to make this work I figured that I should firstly hide that span by giving it a “display:none” property, and then make it visible again on rollover. I had something like this in my css:


#nav li a span {
display:none;
}

#nav li a:hover span {
display:block;
position:absolute;
top:0
right:0
}


Looks fine, right? I thought so too. IE6 thought otherwise. IE6 always does. …After some quick Googling it seemed that there was nothing wrong with my methodology; many other people had achieved the same effect using this code, but for some reason it wasn’t working for me. Probably something to do with code used elsewhere within the page…

Instead of crawling through all of my code I decided to find another way to achieve this effect. I’ve always said one of the great things about web design, css/xhtml coding in particular is that there are hundreds of ways to do the same things and create the same effects. Anyway, I figured that it was quite probably the “display” property which was causing the problem and so tried something different; “visibility”.

Hey Presto! It worked. Instead of placing the properties of the box containing the descriptive text in the span selector in the CSS, I placed it in the a:hover span selector and used visibility:hidden and visibility:visible as opposed to display:none and display:block.

Don’t ask my WHY this worked when the alternative didn’t, but it did, and I thought it might be useful to someone out there and so here is my blog post

You can see a demo of this effect here: CSS Disjointed Text Rollovers.

I’ve put together a simple directory into which I hope the authors of all the useful web design tidbits out there will submit their links to. Of course there will be the benefits of the traffic the directory will create to your web site, but mainly I am just trying to create a useful place for fellow web designers to refer to when they need something.

So be sure to check out the Web Design Directory and be sure to add your link!

Dagon Design Sitemap Generator - This is the plugin I use to create my sitemap. It offers plenty of flexibility and displays all posts, categories and pages in the most elegant way that I’ve yet to discover for WordPress

Advanced WordPress Contact Form - It’s true there are plenty of Contact Form plugins available for WordPress, and I’ve used a fair few of them, but this one’s my favorite so far. It’s easy to set up and configure, uses valid code and has built in spam protection… A winner all-round! You can see this plugin in action on my contact page.

KB Robots - Not really an essential plugin, but one that makes setting up your blog that little bit easier… KB Robots allows you to add and customise your Robots.txt file through the WordPress interface

Google Hilite - This is a nifty little plugin which adds some simple styles to your stylesheet so that users who arrive at your web page from Google will have all of their search terms highlighted on your page… This obviously makes it easier for them to skim your page and find what they were looking for in the first place immediately.

Similar Posts - This is a great plugin and a clever one at that. On each of your individual pages that this plugin is running on, it scans the text for keywords, and then returns other articles on your web site relevant to the keywords it found for the current article. This is great as it gives users an alternate location once they’ve finished reading the current article which in turn helps boost your Search Engine Rankings.

That’s it for now… I thought I was making use of more plugins than that but apparently not! I suppose you could call this a list of the bare essentials… The plugins I (apparently) could not live without! What are your “can’t-live-without” plugins?

Pinvoke - Pinvoke also produce a lovely iconset containing over 400 icons. They also distribute some fantastic, free pixel fonts.

Tripoli - Tripoli is a stable, cross browser rendering foundation which forms a fantastic starting point for all web design projects. It creates a standard css and xhtml file which performs as consistently as possible across all modern browsers.

Colour Schemer Online - This colour schemer is a useful tool. Simply add a main parent colour to the swatch on the left and generate a palette of compatible colours. This can be especially useful if you’re struggling to find that perfect match of colours.

FontShop Free Fonts - This is a page featuring a freebie font offered by the FontShop. While there is only one font here, that font is changed and rotated fairly regularly and is generally a font of high quality, unlike a lot of free font offerings on the web. Well worth checking back regularly.

TypeTester - We all know about typetester, right? It’s an online app which allows you to preview different fonts rendered in css with all the different font style properties available. Useful for selecting font styles before designing a page.

CSS Type Test - Similar to TypeTester. My personal choice of type testing app.

AJAXRain - When used properly and intuitively, AJAX is pretty damn cool. AJAXRain is a directory of various different AJAX scripts, all located in one place and well organised.

Attackr - A good read, Attackrs articles are written by blogging designers all over the world who produce both interesting and informative articles.

CSS Play - Another one we all know about. A great resource of all kinds of different useful and experimental CSS techniques.

Google Analytics - Hugely popular, Google Analytics allows you to keep track of visitors to your site, and all kinds of information about them; where they come from, what browser they are using, which web site referred them etc etc etc. Very in-depth traffic analysis application.

GoPlan - GoPlan is a project tracking application which allows you to efficiently keep on top of all your current projects. It offers file hosting, chat rooms, calendars and all kinds of other useful features for you and your client. I prefer GoPlan to Basecamp as I get more for my bucks, and can pay with PayPal.

And there you have it. I hope you enjoyed my list of uber useful linkage!