Well I have found a way to achieve this by just using CSS! Yep, just CSS. This is done by having a span that is hidden inside your ‘a’ element. Then on hover of your ‘a’ you just simply show the content of the span. All you then have left to do is position your span on your page and style it up however you like. Below is the code to achieve this…

Your ‘a’ element needs to look like this :

<a href="#">Title <span>This is the tooltip</span></a>

And the style needs to look something like this:

a {
	z-index:10;
}
a:hover {
	position:relative;
	z-index:100;
}
a span {
	display:none;
}
a:hover span {
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:.5em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
}

CSS Tooltip

Although the negative to using this technique is that Google would see this as anchor text so it would associate this with the link. This could potentially water down your keywords on the page this is running on! So as with all techniques this needs to be used with consideration to whether it is the right solution for the situation?

Well guys I hope this helps solve a problem as it really did help me out.

PS – Please be nice as this is my first post on Six Crayons!

Toodles…

As daunting as it may sound for even the most seasoned of web designers, web development is just another beast to tame and it can honestly be quite fun at the same time!

I decided to take this step several years ago. I was faced with a predicament. I could put together all these lovely looking designs but who was I going to get to turn it into a fully fledged website for the whole world to see? I certainly couldn’t afford to pay anyone. I was faced with a challenge, how was I going to learn about heads, body’s, positions, heights, widths, tables, no tables… yes I’m talking about front end web development!

This article will give you my recommended first steps to becoming an designer/developer all rounder. Something that is very attractive to prospective employers or if you freelance, hey, you get to keep the full hourly rate! You can say goodbye to outsourcing!

Slicing PSD’s.

This is your starting motor to building a website. You’ve got your design but at the moment its a raw format you need to cut up your design into several different images. This process is made very easy with the Photoshop slicing tool. There are many resources out there to help you but I recommend you follow this tutorial: From Photoshop to HTML

HTML

HTML is the foundation of every website. Although this markup may look daunting to the untrained eye. Its a simple and user friendly language (if you can call it that). Not only is it easy to get to grips with but there are more resources than you can shake a stick at on the internet to help you along the way.

When I was first learning HTML I found experimenting, as with many things is the best way to learn. HTML can be quite flexible in many browsers meaning that it wont keel over and die if you don’t close a tag here or there.

Here is a selection of recommended resources to get you going:

• W3 Schools HTML Tutorial
• Quackit.com HTML Tutorial

Also here are some interesting articles on the up-and-coming HTML 5. For those of you who don’t know, HTML 5 is going to be the latest release of standard markup by WHATWG:

• HTML 5 from Scratch
• HTML 5 Cheet Sheet

Semantic Markup

You may hear many people ask you, dude, is your markup table-less? Well if you’re going to try and master HTML in this day and age then its probably worth readying up on this!

This is really part and parcel of today’s web, but if you don’t already know then why not take a moment to read up about it: SPAN and DIV Wiki

CSS

Way back in the dot com boom all websites where sliced with html using tables. This made websites very large in size and even more difficult to view and update the source code and single styles such as links were very difficult to update. CSS bought all the different styles into one place which allowed one style to be shared by many pages. Beware though, each different browser can render CSS in a slightly different ways resulting in many hours swearing at a screen and pulling your hair out. Earlier versions of Internet Explorer are the biggest offenders with a campaign to get the last 14% of the browsers market share making the rounds on social networks recently: IE 6 no more

Here are some recommended resources on CSS:

• W3 Schools CSS Tutorials
• Subcide CSS Layout Tutorial

Once you’ve got these core skills under you’re belt, you will be on your way to becoming an all rounder! If your still hungry or maybe already know all these languages, I recommend you try learning something like jQuery and/or PHP.

Here are some great resources:

jQuery:

• Getting Started with jQuery
• jQuery for Designers

PHP:

• PHP Getting Started
• PHP 101

Plan ahead and keep organised

Declare your main structural elements nearer to the top of the document, and then the less important elements further down. Use a structure that works best for you, and save a template for future use.

1. Resets
2. Main Layout
3. Secondary Layout
4. Miscellaneous

Break your stylesheet into modules:

@import "/css/layout.css";
@import "/css/print.css";
@import "/css/typography.css";
@import "/css/forms.css";

Use Comments

Each CSS file should have a commented area at the beginning of the document, which includes the date it was written, updated date and the author. Use comments to clearly define each section of code.

Use Consistent and meaningful naming conventions

Try to use names that will remain relevant over time. The ability to redesign your entire website by just modifying the CSS will be much harder if you use limiting names. Use versatile naming and stay consistent – use hyphens instead of underscores (some older browsers don’t like underscores) but use it consistently, eg:

#Sub-Content { width:500px; background:#f2f2f2; }
#Advert-One { width:100px; background:#f2f2f2; padding:5px;}

Not this:

#SubContent { width:500px; background:#f2f2f2; }
#Advert-one { width:100px; background:#f2f2f2; padding:5px;}

If you capitalise the first letter of each word, and separate with a hyphen – do this for all elements.

Group elements and use shorthand

Use groups to re-use attributes instead of declaring the styles again. This technique allows you to create compact yet powerful CSS rules.

So this:

h3 {font-size: 12px; font-family: arial, helvetica, sans-serif;}
p {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Becomes this:

h3, p {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Use shorthand to create optimised CSS:

h3, p {font: 12px arial, helvetica, sans-serif;}

Validate

Every stylesheet should be fully validated using the free W3C CSS Validator, and if you’ve got issues with your CSS not doing what you want it to, this can be a big help in rectifying any errors in your code.