Pre-Requisites: We want to create a navigational menu using a fancy font-type which looks great on our website. But, we want to achieve this effect not using any JavaScript library or any flash object and we want this menu to be similar in functionality with any other menu that uses text in anchor links.

Creating the menu

The solution I will present I find it simple and easy to implement. We will create a navigational menu using an unordered list of anchor links displayed on one line, and we use different background images for each element to create the desired effect. The HTML code will be as following:

<ul id="buttons">
<li id="home"><a href="#">Home</a></li>
<li id="services"><a href="#">Services</a></li>
<li id="about_us"><a href="#">About Us</a></li>
<li id="partners"><a href="#">Partners</a></li>
<li id="policy"><a href="#">Policy</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>>

Nothing complicated so far.

The CSS style properties that we will use are:

ul#button li{float:left;padding:0;margin:0.1em 0.1em 0 0.1em;width:110px;height:40px;text-align:center}
ul#button li a{text-decoration:none;color:#ffffff;display:block;height:40px;font-size:0px;line-height:0px}
#home{background:url(images/buttons_sprite.png) no-repeat 0 0}
li#home a:hover{background:url(images/buttons_sprite.png) no-repeat 0 -41px}
#services{background:url(images/buttons_sprite.png) no-repeat -110px 0}
li#services a:hover{background:url(images/buttons_sprite.png) no-repeat -110px -41px}
#about_us{background:url(images/buttons_sprite.png) no-repeat -220px 0}
li#about_us a:hover{background:url(images/buttons_sprite.png) no-repeat -220px -41px}
#partners{background:url(images/buttons_sprite.png) no-repeat -330px 0}
li#partners a:hover{background:url(images/buttons_sprite.png) no-repeat -330px -41px}
#policy{background:url(images/buttons_sprite.png) no-repeat -440px 0}
li#policy a:hover{background:url(images/buttons_sprite.png) no-repeat -440px -41px}
#contact{background:url(images/buttons_sprite.png) no-repeat -550px 0}
li#contact a:hover{background:url(images/buttons_sprite.png) no-repeat -550px -41px}

As you can see, we will use one image which will incorporate all the necessary images we need, 6 for each active item and another 6 for roll-over effect. In this circumstances it will be one server request (instead of having 12 for all elements) for background images. Using the background-position CSS style property and setting a width and a weight for each list item we can control the appearance of the list elements. Setting the font-size
to 0px the text should not be displayed. But in Safari and Chrome if you set it to 0px or 0em somewhat the text is displayed, even its dimension is reduced. Adding line-height property and set it to 0px will make the text disappear forever.

Conclusions

With this method you can have the appearance you want for your menu using only images with the help of CSS style properties, with the font type you want, and with the good format of the HTML page code in accordance with the SEO requirements.

Follow this link and see few examples on how to create menus using only images.

To display elements in the way we desire we have to follow some rules, which means that, if we want to position an element inside a web page or to set the font size of the text, we can use some CSS style properties (such as margin, padding, font-size etc.) and eventually we can acquire the same result on most web user agents. The goal is to have the same result in all major web browsers. At this time we are talking about Mozilla Firefox, Internet Explorer, Opera, Safari and Chrome.

CSS units for measurements

According to W3 Consortium lengths refer to horizontal or vertical measurements and there are two types of length units: relative and absolute. Using relative units means that the scale from one medium to another will be more easily.

Relative units are:

• em: the ‘font-size’ of the relevant font
• ex: the ‘x-height’ of the relevant font
• px: pixels, relative to the viewing device

The absolute units are:

• in: inches — 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
• pc: picas — 1 pica is equal to 12 points.

Absolute length units are only useful when the physical properties of the output medium are known and with this, the discussion about these measurement units is closed.

The most known and used units within CSS style sheets are em and px. One is relative to the relevant font and the other is relevant to the viewing device.

Using em as measurement unit

If we check the properties for our default (or many) web browser we will see that the default font size is set to 16px. A good approach is to define the font-size style attribute for the elements displayed in a web page to 62.5% which means that 1em measurement unit will be equal to 10px (simple calculation 62.5%*16px = 10px), or to directly declare font-size:10px. This is good because if we define a 1.1 em unit it is translated to 11px and so on. On the other hand if we are using values with more than one digit to represent non-integer values, problems may occur because, using values like 1.2345em cannot split a pixel to the desired value (1.2345*10px = 12.345px) and the measurement unit will take the rounded value. The problem comes when the subvalue is half of the value, because there is a different behavior among the top wide-spread web browser on rounding these values. Some of them will round the subvalues up (IE 6 and IE 7) and some of them will round the subvalues down (Opera and Safari) and Firefox tends to round both up and down. With this approach the result will not be the same on different web browsers.

So, a good behavior is to use as much as possible multiplying values that in the end will compute integer values (measured as pixels). Take a look at this application which transforms px to em values and viceversa.

Using px as measurement unit

Because the content of the web pages is mostly served as graphic representation through an user agent to the audience a good reflex might be to set all measurement units using px values. This approach tends to be necessary and most desirable when the width and height style properties are declared, and even the measurement unit is relative to the viewing device, in absolute values the space occupied is the same.

Using a mix of em and px as measurement units

Another option is to use px as a measurement unit to declare some style properties, such as width, height, background-position or letter-spacing, and em measurement unit to declare another style properties like margin, padding, line-height, font-size or text-indent. In the last case, the properties will follow the size of the text font.

Conclusions for what measurement units to use

Based on whatever option we chose and use for measurement units it’s good to follow some practices.

A good start is to declare explicitly the font-size for the body element to a fixed value of 10px. In this case the control of the sizes isn’t influenced by the default font size value on users’ web browser. If we set the value as a percent (62,5%) relative to the default web browser’s font size value, and if this value is different from 16px, problems may occur.

Use px as a measurement unit for width and height of the elements. You may find that in IE7 11em is not equal with 110px when you set the width of an element (assuming that 1em = 10px).

When we use em as measurement unit is better to define subvalues of it with one digit. Using more than one could lead to some unexpected displaying behavior on some web browsers which can make the web site pages look messy.

Also, some attention should be given on inheritance on DOM tree. Changing the font-size value, after the initial declaration of 10px, should be made using the em measurement unit. Using px to declare the font size of an element will also modify the value of em measurement unit.

Today web browsers developers tend to adhere to HTML and CSS standards more accurately than a few years ago, and for a web site developer this represents less time consumed for fixing bugs for old versions of user agents. I hope that one day in the near future, the old versions browser will be gone for ever, and the HTML and CSS standards will be implemented in the same way in all major browsers.

Almost every website on the Internet has a navigational menu constructed horizontally or vertically. Simple or more complex with drop-down sub-items, it’s presence is necessary to lead the visitor(s) to the desired information inside the website. There are quite enough methods to build navigational menus, and I’ll give my opinion on few of them.

Use of table for building the menu

HTML element <table> has the advantage of being well implemented in all major browsers, so no displaying issues when it's content is deployed. The idea is simple, to create only one table row, with one data cell for each item menu. Using the CSS style attributes the menu will get the appearance it needs.

The HTML code is a follows:

<table>
<tr>
<td><a href="">Item 1</a></td>
<td><a href="">Second Item</a></td>
<td><a href="">Third One</a></td>
<td><a href="">Item 4</a></td>
<td><a href="">Fifth in the row</a></td>
<td><a href="">LastItem</a></td>
</tr>
</table>

We can add some style to the table appearance and be sure you set the border-collapse property to collapse so no spaces are between data cells and borders are collapsed into a single border when possible. A detailed presentation of this style property can be found at W3 Schools CSS border-collapse property page.

Using unordered list items to create navigational menu

Using the items of an unordered list to create the navigational menu is, maybe, the most used technique.
Comparing with the previous method it requires almost the same number of lines for CSS styles, and the effect is similar. To display items horizontally you can use the display:inline style property, so the elements of the unordered list are displayed in the same line, like a row of elements. Setting the item elements to be displayed as inline elements, make them "unmovable" on y axis, which means that using padding or margin property to arrange the way they are displayed has no effect. But giving some values to height or/and line-height properties this issue can be easily handled.

Another way to display the elements on the same row is to float the list-items of the unordered list to left. This method tends to be more desired then the previous and the result is much similar with the menu created using table elements.

Following the next link you can see a few examples of horizontal navigational menus using the methods described above. I left the style properties unaltered so you can see on different web browser how the menus are displayed.

Adding some graphic style to the menu

Using background images for the elements of the menu creates a nice and more desired visual effect. Even if you use a repeated background image or you create a little more sophisticated rounded corner button for your menu you definitely add a bit of color to the (maybe) flat HTML page. In the next line I'll give some hints on how to create these rounded corner buttons.

Creating rounded corner buttons for the navigational menu

The simplest approach may be to create a button with a given width and height and use it as a background image for each item of the menu. This will work fine in situations when the text of the menu items has the same length or the differences are insignificant.

Split image for the background

Another method is to split the images in two parts and build the menu items using besides the anchor element an additional span element. The code for the menu will look like:

<ul id="split">
<li><a href=""><span>Item 1</span></a></li>
<li><a href=""><span>Second Item</span></a></li>
<li><a href=""><span>Third One</span></a></li>
<li><a href=""><span>Item 4</span></a></li>
<li><a href=""><span>Fifth in the row</span></a></li>
<li><a href=""><span>Last Item</span></a></li>
</ul>

The idea is to set the display:block property for anchor and span elements, and using the padding values the items are displayed correctly with the desired effect, which means that the width of each item will follow the length of the text. Note that the image on the right side in this case should have a width which is greater than the length of the text with the values for the left and right padding added; otherwise the background image will be broken.

Using two span elements for the right and left margins

In this case the image is split in three parts, one for the right margin, second for the left margin and the third one for the middle. This last one image may have a width as small as possible, because it can be repeated on x axis. The HTML code of the menu will be as follows:

<ul id="split3">
<li><a href=""><span><span>Item 1</span></span></a></li>
<li><a href=""><span><span>Second Item</span></span></a></li>
<li><a href=""><span><span>Third One</span></span></a></li>
<li><a href=""><span><span>Item 4</span></span></a></li>
<li><a href=""><span><span>Fifth in the row</span></span></a></li>
<li><a href=""><span><span>Last Item</span></span></a></li>
</ul>

The good part for this method is that the padding values can be set just for the last span element, and this is enough to reach the desired effect. Even we have more CSS and HTML code for this last method I think is more simple than the previous one, because you don't have to tweak padding values to have all elements aligned.

Please follow this link to see (and download files) examples of building navigational menus using the method I've described.

The resulted page was tested on Firefox v3.0.9., Internet Explorer v6.0, v7.0 and v8.1, Opera v9.63, Safari v3.2.1 and Google Chrome.