Horizontal navigation

This example uses a horizontal navigation. There are several techniques to do this, one involves floating but i choose not to use this.

I started with an unordered list, which i gave a white-space: no wrap; so the list wouldn't wrap to a new line when you resize the viewport. The li items are given a display : inline; to get them horizontal aligned. To reduce the white space between the li items i used a negative margin-right.

The main problem was getting the borders right. If you add the border to #button ul li a, you'll get the effect of a thick border as separator because the right-border is butting up against the left-border of the next li item. To get rid of that problem i had to create a #specialborder and gave that a border-right : 1px solid #000000;. What this does is that the left-border does appears to be the left and right border of each list item. However, the last right-hand list item doesn't have any right-side, so the "specialborder" ID solves that.

CAVEAT

In some situations, IE6 can squish the first link in the horizontal list. It depends on where in the structural hierarchy the list happens to be: it seems to happen in this page. One solution is to insert an empty li tag before the first link and fill it with a non-breaking space.

See another menu.

Tested in IE6, Mozilla 1.7, Firefox 0.9.1 and Opera 7.52.

Some more scribbles for you to look at.

More Pages

Links to other parts of the site.

Friends

People who have been good enough to me that I would call them friends.

You can get your W3C stuff at the W3C site

The W3C Logo

It's has all the specifications you need, some tutorials and also validation tools. If you get into CSS you'll be needing this link !

Unless otherwise expressly stated, all original material of whatever nature created by Dzinelabs and included in this site and any related pages, including the weblog's archives, is licensed under The Creative Commons License.

The Creative Commons Licence logo