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.

When a visitor reaches a web page for the first time, and he or she has to watch how the images are fulfilling the placeholders floating the text around or not, could be turned into a “leave and forget this” experience. A neat aspect of your web page presentation can make your visitors to never come back. For many web pages a good tweak could be the option to preload the images using JavaScript and display them with the rest of the page content in one “shot” on visitor’s screen.

Mootools JavaScript Framework

Mootools JavaScript framework is designed for the intermediate to advanced JavaScript developer and allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. I use this framework and so far I’m pleased with the way things are going. If you want to know more about please read the Mootools documentation.
In the next lines I will present how to use one of this framework plug-in, Assets Method:images to preload images and the content after the operation is completed. It’s easy to understand and to reproduce.

Assets Method:images

What does this plug-in do? Preloads an array of images (as strings) and returns an array of img elements.. The syntax is very simple:

var myImages = new Asset.images(source[, options]);

where sources – is an array or a string, of the paths of the image files and options – (object, optional) could be a function which is executed on onProgress or onComplete events for this plug-in.

Optimizing web page appearance

The purpose of using this plug-in is to have our page content displayed after the images within are loaded. Our page will have some text and let’s say 10 images with the size varying from 60Kb to 100Kb to be displayed.
First, we need to hide the content when web page is loaded. For doing this we have two options: one to set the display style property to none, and the second to set the visibility style property to hidden. The difference between this two options is that display:none means that the placeholder for the element is not present at all, and for visibility:hidden the placeholder exists on page but is not visible.

With Mootools JavaScript Framework we can set the desired style property using:

$('myContent').setStyle('display', 'none');

 or

$('myContent').setStyle('visibility', 'hidden');

The problem is that until the JavaScript library is loaded there is a slightly chance for our content to be shown until it has the style property set. So, it will be better to use a very trivial JavaScript function to set the style property which will be declared on <head> area, and call it inside the document body.

Our function will be as follows:


function hideContent{
documentGetElementById('myContent').style.display = "none'
}

 or

function hideContent{
documentGetElementById('myContent').style.visibility = "hidden';
}

It is important where the function should be fired up. So I place the JavaScript code just after the opening <div> tag with the id "myContent". Place the code before, and you will have a "null" object.
At this point we have our content hidden. After this we can initiate the images preloading process. The options for the Asset Mootools Plug-in could be one of two functions which can be executed on onComplete or onProgress events. On onProgress we have a function which will create HTML elements so during the preloading process a "Loading content, please be patient ..." text string will be displayed, and on onComplete event a function will reveal the content of our page.

Creating HTML elements

One of the methods used to create HTML elements with Mootools is the Element constructor which creates a new element of the type passed in. I chose to create two elements, one of division type and the second of image type, which will be injected after the text generated to be displayed. The image, which will be an animated GIF, is added just as a bit of flavor for our page presentation. The code will be executed based on MooTools' custom domready event.
The elements will be created inside a division container. We have two options to place this container, before the main content container or after. If we place it at the end of page content, the string text will appear without the image, for a certain period of time, and this is an undesired effect, so it will be better to place it just after the opening <body> tag.

The JavaScript code will be as follows:

var myImages = new Asset.images(['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png','images/img5.png', 'images/img6.png', 'images/img7.png', 'images/img8.png', 'images/img9.png', 'images/img10.png'], {
  onProgress: function(){
    var myDisplayTextContainer = new Element('div', {id: 'loadingText'}); //create text container
    var myPreloadingImg = new Element('img', {id: 'loadingImg'}); //create image
    myPreloadingImg.setProperty('src', 'images/preloading.gif'); //set the image source
    $('loading').grab(myDisplayTextContainer); //grabs text string container
    myPreloadingImg.inject(myDisplayTextContainer, 'after'); //inject image after text string container
    $('loadingText').set('text', 'Loading content, please be patient ...'); //create text string
  },
  onComplete: function(){
    $('loading').setStyle('display' , 'none'); //or use $('loading').setStyle('visibility', 'hidden')
    (function(){
$('myContent').setStyle('display', ''); //or use $('myContent').setStyle('visibility', 'visible')
    }).delay(250);
  }
})

I use a delay time before the content is displayed, because the animated GIF creates an ugly visual effect just before is disappearing.
Anyway, being a stochastic process, a different behavior is expected for each web browser, even the desired result may be as expected.
Please follow the link, to see how content is displayed using the Mootools Asset Method:images to preload images.

Limitations and issues using this method

There could be a chance when using this method with display style property used to hide/show content, that the images will not be displayed on Internet Explorer 6. Using visibility style property instead to target this browser engine version will fix this issue. On the other hand, if the visibility property is used on Internet Explorer 7, there could be a chance that the images and some text will not appear on page, or they are shown after some time.
Another issue is that, is more than one instance of the image injected after the text string container. This could simply be "cosmeticized" setting the overflow style property for the image container to hidden and setting the height of the container to a value that fits the text string and the preloading image heights.

Preloading images using JavaScript

If your are looking for some JavaScript functions to preload images, independent of any framework, here you can find a good example for a JavaScript Image Preloader.

I hope this resource is useful.

Nowadays, when you are visiting websites on the Internet, you are almost familiar with the way some words or even phrases render differently from a regular (normal) font type.

The Italic refers to “cursive typefaces based on a stylized form of calligraphic handwriting”, and the font style originated in Italy. The influence from calligraphy can be seen in their usual slight slanting to the right, and is definitely different from what does mean oblique writing.
When you may use <i> HTML element? It is recommended to use the <i> HTML element when you want to define terms (i.e. "the prime number is a natural number which has exactly two distinct natural number divisors: 1 and itself"), to emphasis foreign words (i.e. "Au revoir - she said, touching his hand with a tender gesture.", names of ships (i.e. "Titanic sunk at it's first and only journey.") etc.
In typography, emphasis is the exaggeration of words in a text with a font in a different style from the rest of the text—to emphasis them. So, in this situation, emphasis could mean an italic or an oblique or a bold face font type, or even small caps or adding space between letters.
A web browser displays the words between the <em> HTML starting and ending tag most often as an italic writing, but some browsers can show the text in a different way.
On the other hand if you think from a search engine optimization for your content, it seems that using <em> rather than <i> HTML element will give to your words more importance.

As a conclusion, the text effect using the <i> HTML element can be achieved using Cascading Style Sheets rules, and the use of this element could be deprecated to some point. Using <em> instead will add more importance to your words or sentences and in most cases the visual effect will be the same.