Home Karmen For You Tuts Games xoxo updates Res Listed Credits LinkMe Cbox

CSS: Horizontal Navigation

Horizontal navigation is similar to vertical navigation, except, of course, it is horizontal. Also, some of the code needs to be changed.

Changing your code

Normally you’d have something like this:

Relatively boring. And you know you want to spice it up.
With CSS block navigation, it is essential to place the links in a list rather than just as normal text. That way we can customise the links so they stand out as navigation and not boring ordinary links.
This is the code you should now have:


After doing that, you will obviously want to customise your navigation.
Below are the sections that need to be added to your stylesheet, and why.

Adding this margin and padding removes the default left margin that comes up in all browsers. If you want, you can align the navigation to be in the center of the page by using text-align: center;.

The floating property allows the links to appear horizontally as they will all line up alongside each other.

This part is for colouring each link block. You can probably envisage what it looks like. The background will be the background of the links; the colour obviously the colour of the text.
The width sets each link in the list with the same width. The centering of the text allows the links to be placed more uniformly.
The padding is how much whitespace is around the text on the link. If you want to change the amount of space around each block – use margin: 5px; with your own value.
You can always add other attributes here – you can change font style, size and decoration.
Of course, a hover effect is desirable, so make sure you add this:

Of course, you can customise the hover effect as well, to how you like.
If this tutorial has helped you. Please link back!!