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…

Once you’ve grasped how to use these two positioning techniques, you’ll wonder how you ever build a site without them.

There are in fact 4 separate positions for content :

Static (the default), Fixed, Relative and Absolute.

Static is the default, which means if you don’t specify any positioning through CSS, your content will automatically be statically positioned. All this really means is that it behaves as you’d expect, in the normal flow of the content on the page. Fixed means the content is fixed at a stated position, such as the bottom of the page.

But lets look at the more wildly used Relative and Absolute positioning :

Relative positioning

Think of relative positioning as a rooting system. Setting an element’s position to relative sets roots where it is. You can then move the element “relative” to where its roots are by using horizontal and vertical positions. So you can tell a box to be 50px from the left and 50px from the top of where it originally was.

But because the elements roots are where you first put it, the space taken up by these roots remains. So if you had 3 boxes, and moved the middle one, the other 2 would stay exactly where they are, separated by the space taken up by the middle one.

Absolute Positioning

Absolute positioning has no roots. The element is in its own pot, and you are moving the pot around. Again you move the element around using horizontal and vertical positions, but this time other elements will fall into the gap that was left by the pot, as if it was never there in the first place.

So this time, moving a box 50px from the left and 50px from the top, is moving it from the edges of its container, not where it was originally.

Absolutely positioned elements use the edges of its nearest positioned container. What that means is that if the element is inside a div with position applied to it, it will be offset from the edges of that div.

If its not in any container with any positioning applied, it will default to the page container, which is basically the browser window.

The good part

The most powerful part of positioning is when you combine relative and absolute.

You set the container’s position to relative, then the element you are positioning to absolute, and set the horizontal and vertical positions of that element.

One of my next posts will be a tutorial to follow, using the various techniques in positioning, so make sure you check back here often!

But for now, have a go at positioning some elements all over the place. Once you get the hang of it, its a very accurate way to arrange your content.

In certain situation, this behaviour can be quite irritating, especially if you are customising the appearance of your inputs so that that differ greatly from the standard look.

In this example, we were opting for an Apple like rounded input element using background images and a transparent input.

All appears to be fine until the input receives focus when browsing using Safari and you are presented with the following outer glow effect around the original input element.

The solution to removing this effect is a very simple one. Set the outline property of the element to none in your CSS file.

input { outline: none; }

You may want to be more specific and target a single element, but here we are setting the value for all input elements.

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.