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.

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.

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.

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.

An example with three positioned division elements one on top of the other

Follow this link and you will see how z-indes style property places overlapped boxes. It presents three <div> elements, all positioned relatively inside the body container, and inside the first division element are three anchors also positioned relatively. These three containers overlap visually and they are one on top of the other. If the web browser you are using is standard complying according to W3C CSS 2.1 specifications the anchor Link2 and Link3 are not accessible because of the other two containers which are positioned on the top of first container and they cover those two anchors. Setting a value for the z-index style property, following the specifications, for the Link 2 and Link 3 anchors make them accessible and these links can be followed. The good browsers are Firefox v2 (and above) and Safari v3.1. The bad user agents are Internet Explorer v6 and v7 and unfortunately Opera v9.52. These last browsers don’t make any deference between the two situations, and wrongly display the positioned anchor elements.

Given Situation: HTML page was constructed using a division container which encapsulates three positioned division elements which are siblings on DOM tree, first one encapsulating three positioned anchor elements.

An overview for a dropdown JavaScript menu

Searching some information on the Internet, I landed on Sitecore Website. The layout is clean, the colors are well positioned and the information is presented in a professional way. First screenshot presents the landing main page.

Quite nice I might say. But, since the beginning they have a style issue in the presentation page. The white area over the dark grey background definitely has some text for visitors but, unfortunately the text and the background has the same color, white. Anyway, this does not have an important impact on users interaction as the menu has.
The menu, as you can see in the screenshot, it’s an unordered list with left floating elements on the top area of the page. Starting from this point, at user’s action mouse over, a sub menu is displayed, showing relevant links in site. Unfortunately it is not constructed well for all user agents and operating systems, and because the stack level for the sub menu is lower than the stack level for some heading (and other) elements, and when they are sharing the same screen area, the elements of the list in the sub menu are covered by the area of the heading element, and they are not displayed properly. The next screenshots show the undesirable behavior for the sub menu.

and another one …

and another one …

and the last one …

All screenshots present the sub menu which is not “in front of other elements” like the heading on top. The purpose for any menu is to create access to the website pages. If is interrupted in some way, many visitors will think negative about the intentions of the creator of the website.
Setting a value for the z-index style property for the container which holds the anchors of the sub menu will make it visible in front of any other page element.

Given situation: All screenshots were taken using Firefox v3.0.1 user agent on Ubuntu (Hardy Heron) operating system. The behavior described above is a particular situation for the given operating system and the user agent.

Nifty corners

First one it's a simple and in some way useful choice of creating rounded corners using Nifty corners. The techniques involves no images just a few lines of HTML code. The idea belongs to Alessandro Fulciniti (we were borne in the same year ) and the main article can be found here. He presents very well how to make a container with rounded corners. It works like this: you have a container when you want to place some text; on top and on the bottom of the <div> element a few <b> elements appear and using some margin attributes for the <b> elements the effect is created. Very simple and efficient.

The result can be seen here.

The HTML code for this container is presented bellow.

<div id="container">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<!--content goes here -->
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

and the CSS attributes for the elements are on the next lines:

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

It's good to note that, because <b> is an inline element, and to be able to change the margin attribute we have to make it a block element, and this is accomplished using the CSS attribute {display:block}.

Quite impressionable I can say .

Rounded corners using images for top and bottom area

This second method is, I think, the most widespread technique for creating containers with rounded corners. The idea is to generate an image for the container's background, and split it in three pieces, one for the top area, another for the bottom area and the third one for the middle section. The height size of the last one can be as small as possible

The HTML code consists in only few lines:

<div id="container">
<p class="top">some text here</p>
<p>some content here</p>
<p>some content here</p>
<p class="bottom">some text here</p>
</div>

and the styles look like:

#container{margin:20px;background:url(middle.png) center repeat-y;width:420px}
.top{background:url(top.png) no-repeat}
.bottom{background:url(bottom.png) bottom no-repeat}
p{padding:8px 10px 5px 20px}

Following this link you can see an example of rounded corners container.

It's simple and more efficient than previous one, because in this case a border can be used, and it creates a nice visual effect. Note that, all images have less than 1Kb in size. Also the top <p> element can be replaced with a heading tag, like <h3>, so the container looks more interesting.

Rounded corners using an image for each corner

This method uses for each corner a small image representing the corner itself. It is very well presented here with a lot of comments how to create it.

Let's take a look at the HTML code:

<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<!--content goes here-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

As you can see to achieve this effect this method needs eight <div> elements, which is quite consistent. This piece of code has exactly 174 chars (excluding the "content ..." text) which means that 174 bytes are "eating" the bandwidth every time the page is loaded.
The styles also are written with consistency:

.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

As a comparison with the previous method, this one uses five images for creating the effect. The good thing is that they are very small in size.

Until the 'border-radius' CSS3 attribute will be implemented in web browsers' engine (you can read the specifications here at paragraph 19), one of those methods presented above is good for creating containers with rounded corners.

Another method to get rounded corners is using JavaScript (ECMAScript), but this is another story .