Identify Design.net
The Digital Development Resource

home articles features tutorials basics coding css photoshop PHP flash security

In this tutorial we're going to show you various examples of making navigational links (such as tabbed navigation) a little more exotic. Throughout the tutorial we'll be editing a sample script which will be comprised of a box with the collection of links at the top. To keep things simple we're going to put as little elements on our page as possible.

We'll be using a wrapper box called "wrapper" and a collection of links enclosed within a wrapper called "links-wrapper". Set this up now, or replace the above mentioned with your own code. Here is our sample code to begin with:

Making Links Stand Out

The first part of this tutorial is going to show you how to make links look a little different. If you're placing the main navigation around your site in the header as tabbed navigation, you're going to want to make them stand out. Ordinary links just won't do in this occasion. There's many ways of making links stand out; bright colours, animations, little icons, or making them stand out. For now, we're going to focus on the latter.

The simplest way of doing this is telling our stylesheet to display them as blocks. Displaying links as blocks essentially treats links as mini div tags that can be defined in the exact same way as divs and thus be utilised much better than a plain link. To do this, we quite simply tell "links-wrapper" to display any links within its tag to display as a block. The following CSS code will do this:

The #links-wrapper a { is opening formatting for every link contained within the links- wrapper ID.

You might've noticed that nothing's changed. Visually, nothing has changed. The links are now displaying as blocks but still using the default link format properties; this means that, until we change them, they'll look like any other link.

We can add a lot of different formats to our links, but for the purpose of this tutorial we're going to keep it simple. We're going to change their background to black, change the font colour to white and make the colours reverse when we hover over.

background: #000; is setting the background colour of our links to black. color: #fff; is setting the font colour of our links to white. Altogether, our code looks like this now: Now refresh your page and your links should look like this: Now we're going to make our links reverse colours when we hover over them. We do this with a:hover. This defines a set of formatting to use when somebody hovers over one of our links. It will apply all the formatting within that specific ID until the user moves the mouse away from the link.

Adding it into our stylesheets is pretty straightforward. We simply add it like we did the first ID and reverse the colours around: As you can see above, we swapped the two colours around so that they reverse when we hover over. Combining a:hover with our ID name tells every link that's hovered over within this wrapper to apply the formatting defined.

When you hover over a link, your page should now look like this. I've hovered over "Hyperlink Three":

Just to give us a little breathing space, we're going to add a little padding to these links. Here is where displaying our links as blocks kicks in. Normally padding and margin definitions given to links will not be parsed; however, with the links told to display as blocks, we can do that now! To add a little padding, we'll use padding.

We'll set the padding to 4 pixels by adding the following to our stylesheet:

The above code will apply a padding of 4 pixels to every side of our link. We'll combine this with both of our link IDs to make sure we've not got "jumping" links. Our overall code looks like this now: Now we want to make our links display inline with each other, so that they don't stretch to the whole of the page and drop a line after each other. To do this, we're going to introduce the float definition to our page. Float essentially tells an element to "float" to the left or right of our page. Like image alignment, which you probably learnt with basic HTML, it allows the text to fill the gaps either side of our floating element.

We want to make the links float to the left of our page, so we're going to define it as follows:

With the introduction of float: left; our links will now float over the left of the page. The best thing is, they'll not auto-stretch to the size of our monitor now either. Our navigation is starting to take shape: Now that our links are display properly, spice them up with a better font. As you can see, my browser's default font is Lucida Grande; yours might be Times New Roman, or whatever you've chosen. We're going to tell our links to use the Verdana font, by defining the font-family definition.

To introduce that into our code, we use the following:

This isn't the best method of defining fonts, but this is a basics tutorial and we need to know the technique before we can do it "the proper way". With this added to our code, our links will now display using the Verdana font rather than the user's browser default.

Our final code looks like this:

We've now got the basics for a horizontal navigation going with a simple hover over effect. Our next tutorial will look at furthering what we've learnt here and using background images in a creative fashion to make our navigation links more intricate.

© Identify Design 2009 · Legal Disclaimer