CK Services

Here’s a link to ‘37 ways to promote your website’, a very informative article!
We perform all of these 37 actions on every website we build, at no extra cost, or recommend those which you need to action yourself, as the business owner.

Click here to read the 37 actions

As part of my work, I analyse existing websites developed by other people. These websites are often (though not always) greater than 3 years old. However, it constantly amazes me how many new websites continue to use old HTML/Javascript methods for creating buttons with rollovers. There IS a better way!

The method I learned several years ago doesn’t use Javascript. Instead, it uses pure CSS to create the buttons and the rollovers – all that is needed is a little knowledge of CSS and how the background property can be used on various elements.

When I create a website, I invariably create my menus as unordered lists. I’m going to show you how this is done, and how elegant menus can be created in this way.

I’ll be using my company’s website (which I created) at http://www.ck-services.co.uk as an example in this tutorial.

STEP 1: The HTML
First, you need to set-up the menu in the HTML.
In the HTML, I did it this way:

<div id="nav">
	<ul>
		<li id="home_button"><a href="/index.php"><span class="hide">Home</span></a></li>
		<li id="about_button"><a href="/about.php"><span class="hide">About</span></a></li>
		<li id="services_button"><a href="/services.php"><span class="hide">Services</span></a></li>
		<li id="clients_button"><a href="/clients.php"><span class="hide">Clients</span></a></li>
		<li id="blog_button"><a href="/blog/"><span class="hide">Blog</span></a></li>
		<li id="contact_button"><a href="/contact.php"><span class="hide">Contact</span></a></li>
	</ul>
</div>

I chose to use <ul> and <li> for Accessibility purposes, but you could equally use <div> tags in place of the <ul> and <li> tags.

Notice also the use of <span class=”hide”>Contact</span>. We’ll come to this later, in the CSS.

I set up a containing div with an ID of “nav”, then created the menu as an unordered list within the div.
I then created the list items, each with a unique ID. This is so we can apply a specific background to each list item. We’ll come back to this later, in the CSS.

STEP 2: Creating your buttons
Now you need to create your buttons in Photoshop or whatever graphics package you prefer to use. For each button, you need to create an ‘off’ state and an ‘on/rollover’ state.

On our website, the buttons are very simple – each of the buttons is black, and rolls over to blue. I created the graphic in Photoshop as follows:

As you can see, the ‘off’ state of the button is in the top half of the graphic. The ‘on/rollover’ state is in the bottom half.
So this is going to be the background for the list item with id=”home”.

Once we have all of our buttons ready, we can move onto the CSS.

STEP 3: The CSS

Here’s the CSS for the UL and LIs belonging to the enclosing DIV ID=”nav”:

#nav ul { list-style:none; }
#nav ul li { float: left; }


And for each DIV:

#home_button a { float: left; display:inline; width: 69px; height: 40px; margin: 0; background: url(../images/home_b.gif) no-repeat; background-position: 0 0; }
#home_button a:hover { background-position: 0 -40px; }


What this basically does is set the background of the A tag within the LI with ID=”home” to the graphic I showed you above. It also sets the position of the background image to its top-left corner.
Then the a:hover rule tells it to change the position of the background-image to the top-left corner of the rollover part of the graphic.

Here’s how we work this out:
We use Photoshop to work out the coordinates. We know that we’ll always be aligning to the left of the background image, so we only need the top coordinate.

I use the marquee tool to measure the height from the top of the graphic to the top of the rollover section. This height gives me the ‘top’ coordinate for the a:hover’s background:

We also used <span class=”hide”>Contact</span> inside each of the <li> tags above. I set up a class in the CSS called .hide which hides the button’s text from view. This is so the text doesn’t show up over the button, which can look messy if you’ve flattened the text onto the graphic itself, as I have.
The code I used to do this is simply:

.hide { display: none; }

STEP 4: Testing
Now go back to your page (having saved the HTML and CSS documents of course, and refresh it. You should see that the ‘home’ button is showing the black part of the button graphic only.
When you roll over the button, it should turn blue – that is, it should display the blue part of the button graphic.

Repeat for each of the buttons you wish to create.

That *should* be it. If it doesn’t work for you, check the div IDs match what you’ve set in the CSS, and check you have the co-ordinates of the rollover part of the graphic.

Good luck!

In accordance with my own advice (see ‘The importance of up-to-date content’), we’ve updated our website to provide more information about our services. Some of our clients felt we would benefit from expanding slightly on the services we offer, so this is what we’ve done.

I’ve been using a service called StumbleUpon for some time now, and to be honest, it’s one of the most useful web resources I’ve found for quite some time.
It’s a free web-browser extension which acts as an intelligent browsing tool for discovering and sharing web sites; basically when you sign up you select a load of categories which you’re interested in, and when you hit the Stumble! button in your web browser, it randomly selects a web page which someone else has suggested.

I find this tool really useful if I have a few minutes of downtime, or I need a 5-minute break between tasks. Often for me, it brings up a web design or development website, a light-hearted YouTube video, or a website concentrating on environmental technologies.
The other great thing is, being completely random, you never see the same site twice.

9 times out of 10, the site it brings up is useful, and I often bookmark it and refer to it later when I have more time. I’ve lost count of how many useful sites I’ve StumbledUpon!

Got to www.stumbleupon.com and get it downloaded!