Posts Tagged ‘Web Design’

New Video Tutorial: Customising HostPay – Part 1

New Video Tutorial: Customising HostPay – Part 1

Posted by Ben on July 15th, 2010

Over the past few months we have been inundated with requests to create a series of videos on how you can customise the look and feel of a HostPay template.

Well, the wait is finally over! You spoke and we listened! Fresh from the Video production studio (Well, me and my laptop) is the first in a series of step-by-step video demonstrations taking you through the process of customising your HostPay template.

The first video from this series is giving you an overview of changing your HostPay templates, swapping in your company logo, CSS tips plus a brief explanation on transferring and editing files.

All the videos can be found within the video section of your customer control panel or alternatively you can check out our YouTube channel (Make sure you subscribe to be the first to know about new video releases).

Remember, you need to have HostPay installed before you can follow this tutorial, luckily we have a demonstration on that as well! – Check that out here.

In the next installment of this video series, you can expect to get into much more detail about changing background, link and text colours and also creating new pages. Part 2 will be coming soon!

Customising HostPay: Part 1

Any questions or feedback please leave them in the comments box below!

Cheers :)

gravatar
Name:Ben Scott
About:As Senior Web Designer, Ben oversees all of Heart Internet's design, usability, SEO and conversion optimisation. Since joining the team in 2009, Ben has redesigned the Heart Internet website as well as the newsletters, HostPay templates, control panel and much more.

Tags: , , , , , , , ,

Top 40 list of lists 2010

Top 40 list of lists 2010

Posted by Ben on March 25th, 2010

Last year we ran a blog post titled “Top 40 lists of lists” which got a lot of good feedback so we thought we would make it an annual event. Here is 2010’s top 40 list of lists. They have been grouped in to broad categories of:

  • Coding and scripting
  • Web design
  • Freelancing
  • Web copy & blogging
  • Social media
  • Online marketing
  • WordPress
  • Analytics, optimisation & usability

Coding & scripting
10 useful online code editors
http://www.catswhocode.com/blog/10-useful-online-code-editors

22 handy HTML5 / CSS3 tools, resources and guides
http://www.1stwebdesigner.com/resources/22-handy-html5-css3-tools-resources-and-guides/

35 fresh JavaScript jQuery tools and resources
http://www.noupe.com/javascript/35-fresh-javascript-jquery-tools-and-resources.html

45 fresh useful JavaScript and jQuery techniques and tools
http://www.smashingmagazine.com/2010/03/12/45-fresh-useful-javascript-and-jquery-techniques-and-tools/

43 essential controls for web applications
http://www.uxbooth.com/blog/essential-controls-for-web-applications/

Web design
44 free stylish graffiti fonts for designers
http://naldzgraphics.net/freebies/44-free-stylish-graffiti-fonts-for-designers/

100 essential web development tools
http://www.noupe.com/tools/100-essential-web-development-tools.html

40 fundamental illustrator tools you must know
http://www.1stwebdesigner.com/tutorials/fundamental-illustrator-tutorials/

30 examples of attractive nav
http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/

9 things you can’t forget when designing a blog
http://www.tutorial9.net/web-tutorials/9-things-you-cant-forget-when-designing-a-blog/

Freelancing
16 Common Freelancing Mistakes and Misconceptions
http://www.thedesigncubicle.com/2010/03/16-common-freelancing-mistakes-and-misconceptions/

10 sure fire ways to make your clients love you
http://designshack.co.uk/articles/business-articles/10-sure-fire-ways-to-make-your-clients-love-you

The 20 best productivity and personal development blogs
http://freelancefolder.com/the-20-best-productivity-and-personal-development-blogs/

Web copy & blogging
Top 25 blogs about blogging
http://www.dailyblogtips.com/top-25-blogs-about-blogging/

5 tips for getting readers viewing your old blog posts
http://www.problogger.net/archives/2010/03/02/5-tips-for-getting-readers-viewing-your-old-blog-posts/

How to choose a blog niche [6 tips]
http://www.problogger.net/archives/2010/03/12/how-to-blog-how-to-choose-a-blog-niche/

5 simple ways to improve your web copy
http://www.cmswire.com/cms/web-content/5-simple-ways-to-improve-your-web-copy-004512.php

10 tips for creating compelling web copy
http://webdesignledger.com/tips/10-tips-for-creating-compelling-web-copy

Social media
35 social media tools that make life easier
http://freelancefolder.com/35-social-media-tools-make-life-easier/

Top 55 Twitter tools to use in 2010
http://www.businesscomputingworld.co.uk/?p=2670

25 must read social media marketing tips
http://www.toprankblog.com/2009/04/social-media-marketing-tips/

42 top social media tips and tools
http://www.socialmediatoday.com/SMC/24209

10 small business social media marketing tips
http://mashable.com/2009/10/28/small-business-marketing/

Online marketing
7 best tips to create landing pages for PPC campaigns
http://www.quickonlinetips.com/archives/2009/11/create-landing-pages/

20 PPC tips for 2009
http://www.komarketingassociates.com/blog/20-ppc-tips-for-2009/

PPC segmentation: 4 tips to better target customers
http://searchengineland.com/ppc-segmentation-4-tips-to-better-target-customers-21142

55 quick SEO tips even your mother would love
http://www.searchenginejournal.com/55-quick-seo-tips-even-your-mother-would-love/6760/

Top 25 SEO blogs
http://www.dailyblogtips.com/top-25-seo-blogs/

101 web marketing ideas and tips
http://www.seopedia.org/internet-marketing-and-seo/101-web-marketing-ideas-and-tips/

WordPress
10 blank/ naked WordPress themes perfect for development
http://speckyboy.com/2010/03/22/10-blanknaked-wordpress-themes-perfect-for-development/

13 free plug-ins to transform your WordPress based site
http://designm.ag/resources/wordpress-plugins/

20+ WordPress recipes (codes)
http://www.webdesignerwall.com/tutorials/20-wordpress-recipes-codes/

15 incredible WordPress plug-ins you need to use in 2010
http://www.sitesketch101.com/15-incredible-wordpress-plugins-you-need

32 essential WordPress plug-ins
http://www.marketingpilgrim.com/2010/01/32-essential-wordpress-plugins.html

100 best WordPress premium themes of 2009
http://www.levoltz.com/2010/01/06/100-best-wordpress-premium-themes-of-2009/

25 best free WordPress themes
http://www.elitefreelancing.com/free/25-best-free-wordpress-themes/

Analytics, optimisation & usability
20 fantastic usability and conversion analysis tools
http://spyrestudios.com/usability-conversion-analysis-tools/

55 Google Website optimizer tips
http://www.conversionrate.net/55-google-website-optimizer-tips

10 completely free wireframe and mock-up applications
http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/

24 UX articles to start 2010
http://www.uxbooth.com/blog/24-ux-articles-to-start-2010/

gravatar
Name:Ben Scott
About:As Senior Web Designer, Ben oversees all of Heart Internet's design, usability, SEO and conversion optimisation. Since joining the team in 2009, Ben has redesigned the Heart Internet website as well as the newsletters, HostPay templates, control panel and much more.

Tags:

6 great ways to ruin your website

6 great ways to ruin your website

Posted by Matthew on March 12th, 2010

Here are a handful of sure fire ways to ruin the user experience for your visitors, increase your bounce rates and make sure you get very few returning visitors.

Random colour palette
With all the free website colour tools available there is no excuse not to have a consistent and pre-planned colour palette throughout your website. Even subtle differences such as a slightly lighter blue in the .gif logo than you used in your <H1> tag can create a sense that something is off and be uncomfortable to look at.

Aesthetically pleasing, easier to read, more professional, clear branding… there are dozens of reasons why you should maintain a consistent colour scheme and only one why you shouldn’t; laziness. For a list of the best colour scheme pickers, read Ben’s blog post about his favourite website colour scheme inspiration & tools

Link to pages that don’t exist
Pages can come and go but it is important that your internal navigation reflects this. Linking to a 404 looks unprofessional and is a sure fire tactic to losing that visitor.  To avoid this set up a 404 redirect to a special error page. Avoid redirecting to your home page as the visitor will not know there was an error, only that he’s not where he thought he would be.

Create a .htaccess file (using that exact name) and put it in your root directory with something along the lines of…

ErrorDocument 404 /404.html

Don’t check it is compatible across the browsers
The days of designing a website with one or even two browsers in mind is long gone, and even with the movement to kill off IE6, that still leaves IE8, FF3, Chrome, Safari and Opera to think about. If your site breaks in Opera because of the 1,000 visits you get per month ‘only’ 5% of those are using Opera, that is still 50 visitors per month, and if you have a conversion rate of 10%, that’s a potential 5 sales you have missed out on. Designm.ag has a great list of resources for cross browser testing here http://designm.ag/resources/cross-browser-testing/

Intrusive advertising
Too many adverts on the page, pop-ups and pop-unders, and adverts that illicit an epileptic fit no longer have any place on any website. Advanced internet users certainly won’t put up with it and will be quite vocal about it but the more casual internet users are passively annoyed by it too. Integrated text links and clean banners near the content both increase visibility and click through rates without impacting on user experience.

SEO takes priority over your visitors

In all honesty, an unnatural over use of keywords can help a site’s ranking in the search engines. The paragraph below is taken from a real site but with the keyword they are targeting replaced and highlighted with the word ‘Toaster’.

Toaster services are offered by most toaster providers and are an affordable way for most users to get started with toaster services. Toaster services are the cheapest form of toasters available and it is important to remember that a toasters service is always going to be more expensive than a grill toaster service.”

The search engines clearly love it, but a human being and potential customer it’s just plain odd, tells me very little and is boring to read. It’s not going to convert me.  Use of keywords is absolutely vital to be ranked high in the search engines, but using them in your title, a couple of times in the content, and in some anchor text is enough. SEOMoz’s SEO guide for beginners offers some basic tips for writing search friendly text: http://www.seomoz.org/article/bg4#4c

Irregular navigation from one page to another

People don’t want to be made to work out how to navigate your site. They want clear consistent navigation that allows them to find what they are looking for as quickly as possible. Navigation on the “home page” running along the header suddenly snapping to the left on the “about us” page and then back again in the product pages is going to confuse, frustrate and anger your visitors and drive them away pretty quickly.

gravatar
Name:Matthew Telfer
About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for half a decade. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Tags:

9 great GIMP tutorials for beginners

9 great GIMP tutorials for beginners

Posted by Stu on February 8th, 2010

This post lists some of the best GIMP tutorials we have come across for beginners looking to flex their design muscles and learn something new and useful to apply to their designs and websites.

If you haven’t already got GIMP you should! One of the most popular blog posts we published in 2009 was Ricky’s “5 Great Open Source Graphic and Web Design Alternatives”. The open source alternative to Photoshop Ricky recommended is GIMP which in his words… “GIMP is almost a ‘clone’ of Photoshop. It works in very similar way with its layers, selections, filters and painting tools. It can even read and write in Photoshop format, making it ultra compatible with your Photoshop using colleagues or clients. The software doesn’t feel quite as polished as Photoshop does, and its text manipulation is a little behind Photoshop’s. But, if you’re like the majority of people who use Photoshop to resize their images, reduce the colours, and maybe add the odd special effect to add a little extra to your websites, then the GIMP is definitely something you should try!”

Now you have the software, what can you do with it?

Creating the light text effect in GIMP
http://puteraaladin.blogspot.com/2008/12/creating-light-text-effect-in-gimp.html

Designing iPod Touch in GIMP
http://bulbing.blogspot.com/2009/04/designing-ipod-touch-in-gimp.html

Round Web 2.0 button with a metal ring
http://gtuts.com/web/round-web-20-button-with-a-metal-ring

Gold text effect
http://gimpology.com/submission/view/gold_text_effect/

Transparent glass lettering
http://gimpology.com/submission/view/transparent_glass_lettering

Fancy glow effects
http://gtuts.com/effects/fancy-glow-effects-in-gimp

Making a pencil drawing from a photo
http://www.gimpusers.com/tutorials/making-a-pencil-drawing-from-a-photo.html

Mac style wall paper
http://gimp-tutorials.net/mac-wallpaper-tutorial

Turn a digital photo in to Polaroid
http://howto.nicubunu.ro/gimp_polaroid_photo/

If you are still not quite ready for these tutorials the official GIMP tutorials can be found here and we would recommend going through them to learn the basics http://www.gimp.org/tutorials/

gravatar
Name:Stuart Gilbert
About:One of the key members of the Heart Internet Developer team, Stu joined the company in 2008 and has various responsibilities including the development of customer tools, HostPay, and the maintenance of the blog.

Tags: ,

Interview: thewebdesignblog.co.uk’s Phil Matthews

Interview: thewebdesignblog.co.uk’s Phil Matthews

Posted by Matthew on December 3rd, 2009

philmatthewsWe had a chat with freelance web designer Phil Matthews (www.twitter.com/philmatthews) about his recently launched UK web design blog www.thewebdesignblog.co.uk, the challenges of writing regular content, his thoughts on the web design trends we will see in 2010 and his tips for anyone looking to set up their own blog…

Could you provide a bit of information about yourself and thewebdesignblog.co.uk?
I’ve been a freelance web designer (www.weymouthwebdesign.com) for nearly six years. In September 2009 I setup The Web Design Blog with the intention of providing web design resources, tutorials, downloads and interviews.

How do you come up with your article ideas and how long does each one take to research and write?
In the strangest of places! I’ve found the best ideas come when I least expect it. I could be sat at my desk for hours wracking my brains for an idea that never comes to fruition. Then, suddenly (normally before I fall asleep at night) an idea for an article will pop in to my mind so I always make sure I have a notepad next to the bed to jot them down for the morning.

Are there any web design trends you are expecting to be big in 2010?
I’m expecting to see a lot more designs push the boundaries of the normal grid and box models and not stick to rigid layouts. The trend for big imagery, logos and headers will probably continue as designers look to provide immediate impact with their creations. I quite like the hand drawn look that has become popular so I’d quite like to try this style out for myself if I get the chance.

The UK has a large and active web design community but why do you think that article/ blog style sites from the USA still dominate so much (e.g. smashingmagazine.com and its network)?
I don’t know for sure. A lot of the big blogs like Smashing Magazine, Web Design Ledger and Web Designer Depot have all earned the right to be at the top because their content and articles are superb. Smashing Magazine has picked up an unfair reputation for writing too many “list articles” but I disagree with this. They have a wonderful archive of resources and information and I love the content they provide.

Although my blog is UK based I try to provide resources that will appeal to everyone. There are so many talented designers all around the world and design is universal!

When you first started the website how did you go about getting people to read your blog?
Initially I just posted links to my Twitter feed (www.twitter.com/philmatthews) which got a small amount of traffic. I’ve been lucky enough to interview some fantastically talented designers for the blog which has proved very popular. They’ve shared lots of advice and stories which have really helped promote the blog to a wider audience.

How big a part does ’social media’ play in raising awareness and driving traffic to your blog?
Quite a bit in fact! Twitter is the main way I promote the blog and articles I publish but I also make sure I submit new stories to sites like Design Bump, Design Float, The Web Blend, Digg and Stumble Upon. I’ve also been lucky enough to have the website featured on CSS Remix which has provided a lot of traffic to the website.

What are the top three tips you would give to someone planning on setting up their own industry blog?
1) Write about something you are passionate about. This could be a niche subject or, like with my blog, a more general subject like web design. Whatever you choose you have to be fanatical about your subject otherwise you won’t have the motivation to keep writing about it. Pick something you love and it will be a lot easier to come up with content.

2) Let your users interact with your website. Providing a place for visitors to post comments on your blog will help you get feedback on what articles are popular, help promote your articles and keep the interest on the story going. Also make sure you provide a way for people to spread the word about each article to all major social networks.

3) Focus on content above everything else. It is easy to focus too much on the things that are less important when setting up a blog. I’d recommend putting the time and effort in to the content first and then everything else should fall in to place.

You use WordPress to power your blog, why did you choose that over all the other blogging and CMS programs available?
I chose WordPress as I’ve used it regularly for client websites so it was the obvious choice. Despite WordPress being a blogging platform I’ve been using it more and more as a full content management system in recent months because it is so flexible to work with. Every time I setup a new website with WordPress I find I learn something new!

Which are the essential WordPress plug-in’s you always use?
One of the best things about WordPress is the huge range of plug-ins that are available. I always use “All In One SEO” and “XML Sitemap” which are invaluable for search engine optimisation. For my blog I found “Related Posts” and “WordPress Popular Posts” were ideal for promoting older content at the end of each article.

Although I’ve been lucky to avoid spam comments (so far) on my blog, I’ve setup “Akismet” in anticipation of this starting in the future. I am currently looking to improve the comments section of my site so I’ll be on the search for some comment enhancing plug-ins soon.

Are there any UK focused resources and sites  that you would recommend for beginners and advanced designers?
Grace Smith (www.gracesmith.co.uk) always has really useful design links on her Twitter stream (twitter.com/gracesmith)  I also love both of Chris Spooner’s websites www.line25.com and http://blog.spoonergraphics.co.uk which contain tutorials and resources. I’d also highly recommend www.boagworld.com (both the podcast and forum) which is a treasure trove full of knowledge and a must for every web designer!

Thanks for the interview! :-)

gravatar
Name:Matthew Telfer
About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for half a decade. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Tags: ,

Web hosting guides

Web hosting guides

Posted by Matthew on November 27th, 2009

Over the year we have been putting together a series of web hosting guides covering various aspects of managing a website in detail. Below are links to the current crop of PDF web hosting guides available completely free for anyone to download and use.  Note: The links below all open a PDF.

Web Design:


Marketing:

Web hosting resellers:

Resources:

These web hosting guides can be along with our series of beginner’s guide to web hosting

gravatar
Name:Matthew Telfer
About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for half a decade. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Tags: , , , , ,

Web designers/ developers: Integrating web hosting in to your existing services

Web designers/ developers: Integrating web hosting in to your existing services

Posted by Matthew on November 25th, 2009

Being able to buy everything from one place is always an attractive proposition to clients who don’t want to have to shop around. If your core product is providing web services for small sites such as banners, logos, HTML emails etc you can easily integrate web hosting in to your product mix.

Attracting your customers
If you already have a client base, the first step is to tell them about the range of services you can do for them. Phone or email your clients with details about your hosting service and why they should sign up. Getting your foot under the table is always the hardest part. To reduce the client’s perceived risk offer them an introductory low price or a scaled down version of your service so you can demonstrate your value to them. A lot of the application developers for the iPhone and iPod touch offer a ‘Lite’ version of the application to get people hooked and wanting more (which they then have to pay for).

If your customers don’t bite straight away or you want to run a promotional campaign, you could consider offering bundling your core product (e.g. web design) and web hosting at a rate cheaper than if they were bought separately. To create a sense of urgency and prompt a quick response, run it as limited time only.

Up-selling & cross-selling
Up-selling and cross-selling are not about the hard sell or getting someone to buy something they don’t really need or want.  When done properly the process should almost feel like a service in its own right. One of the best examples online of up-selling and cross-selling is Amazon. Put an item in your basket and you are presented with “Customers who bought this also bought…” with the majority of the suggestions being more expensive items. If you go back to the home page it will have changed to show you items based on your browsing history along with items they feel are associated with that item e.g. putting a men’s skater brand watch in a basket would prompt the site to show jewellery, skater trainers and related accessories. Always keep an eye out for opportunities that may arise from any offhand comments a client may make about needing work in a particular area.

Click here to find out more about our reseller hosting product and features

gravatar
Name:Matthew Telfer
About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for half a decade. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Tags: , ,

CSS Tutorial: Create rounded corners with only one image

CSS Tutorial: Create rounded corners with only one image

Posted by Jonathan on September 29th, 2008

We’re going to show you how to make expandable rounded corners with CSS. Using our method will require only 6 HTML tags and one background image (yes, ONE image for all 4 corners!). It also validates, works across all the major browsers, and looks great in your source code.

Download the full rounded corners tutorial below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

Making the corner images
One downside of most of the other methods for rounded corners is that you require multiple background images, one for each corner. With our method you only need one. If you take a look at corners.gif in the source files you’ll see how you need to set up your image. The basic premise is to create a full circle, chop it up into 4 segments and put each segment in the opposite corner to what it started in (top left would go into the bottom right, etc).
The last thing to do is put a white (or other colour) background behind the segments and then save the image.

HTML Code
<ul class=”roundedCornerWrapper”>
    <li class=”top”>
        <span></span>
    </li>
    <li class=”middle”>
        Heart Internet
    </li>
    <li class=”bottom”>
    <span></span>
    </li>
</ul>

Keeping the HTML short and valid is important for many reasons, so for the rounded corners we’re going to use an unordered list with some span elements. There may be shorter methods, but this is quick, easy, and validates.

The full tutorial including HTML, CSS and Graphics can be download via the link below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

gravatar
Name:Jonathan Brealey
About:As a Director and Co-founder of Heart Internet, Jonathan developed the company based around innovative features, user-friendly functionality and excellent customer support. Jonathan has been a key player in shaping the UK web hosting industry since 1997, having co-founded WebFusion with Tim Beresford.

Tags: , ,

Create a drop shadow effect for your website using CSS

Create a drop shadow effect for your website using CSS

Posted by Jonathan on August 17th, 2008

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out.This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:
http://www.heartinternet.co.uk/blog/HI_Drop_Shadow.zip

The shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your <body> using CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

 

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:
<div id=”container”>
     <p>Your Content Here</p>
</div>
CSS Code:
body {
     background-image: url(images/background_760.jpg);
     background-repeat: repeat-y;
     background-position: center;
     background-color: #f7f4ee;
}
#container {
     width: 760px; margin: 0 auto; text-align: center;
}

 

gravatar
Name:Jonathan Brealey
About:As a Director and Co-founder of Heart Internet, Jonathan developed the company based around innovative features, user-friendly functionality and excellent customer support. Jonathan has been a key player in shaping the UK web hosting industry since 1997, having co-founded WebFusion with Tim Beresford.

Tags: , ,

Create a super fast website navigation with a single image and CSS

Create a super fast website navigation with a single image and CSS

Posted by Jonathan on August 6th, 2008

This tutorial will show you how create a navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions.

The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly.

HTML Code: (This goes between your <body> </body> tags)
<div id=”navigation”>
     <ul>
          <li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li>
          <li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li>
          <li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
</div>

Stylesheet Code:
#navigation ul {
     width: 333px;
     height: 27px;
     background: url(navigation.gif) no-repeat 0 0;
     list-style: none;
     padding: 0;
     margin: 0 auto;
}
#navigation li {  display: inline; }
#navigation li a:link, #navigation li a:visited {
     display: block;
      text-indent: -7000px;
     outline: none;
     height: 27px;
     width: 100px;
     float: left;
}
#navigation li.navhome a:hover {
      background: url(navigation.gif) no-repeat 0 -27px;
}
#navigation li.navhosting a:hover {
      background: url(navigation.gif) no-repeat -100px -27px;
}
#navigation li.navcontact a:hover {
      background: url(navigation.gif) no-repeat -200px -27px;
}

And that’s it!

Be sure to add the CSS code either within the <head> tag of your website or within a separate stylesheet.

Don’t worry if you are having troubles with this tutorial, you can download all the files associated with it below. If you look in the code of the html you will see everything commented to help you understand how it works and also help you modify it for your own website.

Download this tutorial:
http://www.heartinternet.co.uk/blog/HI_Tutorial_Navigation.zip

gravatar
Name:Jonathan Brealey
About:As a Director and Co-founder of Heart Internet, Jonathan developed the company based around innovative features, user-friendly functionality and excellent customer support. Jonathan has been a key player in shaping the UK web hosting industry since 1997, having co-founded WebFusion with Tim Beresford.

Tags: , ,