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.

If you intend to take the Junior Level Linux Professional (LPIC-1) exams and to be Ubuntu Certified Professional (UPC), Canonical and the Linux Professional Institute have created a bundle promotion at the special price of USD $120 (approximate) per exam (LPI-101, LPI-102 and LPI-199), if purchased together. So, if you are interested about this offer you can read more about this special offer exam. You can request the vouchers using the online form or contact an Ubuntu Training Partner.

Before you registered for the exam you should register for an account at Linux Professional Institute. After you register you’ll receive an unique LPI ID which you must provide (also with a valid ID card) at the exam center for proper identification.

Exams can be taken on Pearson Vue or Prometric Testing Centers. You can locate a Vue testing center or look-up for a Prometric test center.

I found Vue’s site more user friendly and the information more easy and more quickly to find, but this is just a personal opinion. On the other hand, it is possible that Prometric to have a testing center more close to you than Vue. It is better to take a look on both websites, to analyze data and to take the right action, convenient to your needs. The prices are similar for both providers, at least for my country. The difference is that on Vue’s site you can register for all three exams at any time and on Prometric’s site candidate must successfully pass either LPI 101 or 102 before booking for the second LPI exam and the Ubuntu 199 exam can be booked at any time.

Vouchers are valid for 12 months from date of receipt so, there is enough time to learn and to prepare for successfully passing the LPIC-1 and UPC exams.