Which statement is served first?

A style.css file is nothing more than a text file with (a lot of) statements which define properties for HTML elements. Note, this is the default style sheet file, and the statements are read from top to bottom and from left to right. So, a good approach is to have on top statements for html and body elements, and general properties for other HTML elements (like text-decoration:none for anchor link, or list-style-type:none for unordered or ordered list elements etc.). Keeping things in good order, will save you time from not wasting it.

Which property should come first?

When declaring properties for styling HTML elements I think is better to start with properties that have to do with the position of the element inside the HTML page. So, start with declarations for display, margin, padding and position, and finish with the font characteristics. Also, give a width to the elements like img or the ones who float. With this approach, you’ll avoid loading pages with elements that “struggle” to find their places inside the content.

Which value for measurement unit to use?

When it comes about values for measurement units, is better to use px, a relative unit to the viewing device for style properties like margin, padding, position and width. At least, a pixel has the same dimension in all web browsers’ engine, and the cross-browser differences are not noticeable. For font you can use em to have the height flexible.

Dealing with images and objects

Give a width and a height to the images or the objects you want to be loaded inside the page. With this, you wont see “running” pieces of text finding their places inside the page. Note that, this elements will overflow if their width will exceed the width of their parent element (a div). For avoiding this, is better to set a maximum limit for the element’s width:

img {max-width:100%;height:auto}

With this, the image width will be limited to it’s parent width, and height:auto will set the height to the correct value, preserving the aspect ratio. An object is often the media stream of a movie or a video clip. Setting the same maximum limit as the images have, wont have the same result in all major browser. A solution might be to set the max-width to 100% and the max-height to a maximum value in pixels based on the aspect ratio of the video AND taking into consideration the width of the parent in pixels. More precisely, if you have a container with the width set to 600px, set the max-height of the object to 450px (aspect ratio 4:3).

Classes or IDs?

When you want to style some HTML elements or to manipulate them using JavaScript giving and ID and/or classes to him will help things out. An ID is an unique identifier so, it can be used once per page. A footer, a navigation menu or a main content container should be emphasized by an ID. Classes must be used when more than one element needs to be styled or manipulated. Semantically, is incorrect to use only classes inside a HTML page. But, this approach can be used, because no errors will occur.

Tables or DIVs?

In our days, the trend is to use DIV as a container and to keep separated the style properties for the HTML elements, and make the page layout “tableless”. Anyway, tables are good also, at least when it comes about forms. The elements are aligned better inside a form, when label and input are coming together, if they are placed inside a td element.

Conclusions

A good start, when you develop a website site, with solid knowledge as a foundation for HTML and CSS coding, will keep things clear and easy to understand for further improvements.

The idea presented in the article and in this post is to create data-based apps that enable users to extract the relevant information for them by using easy-to-use interactive features, and also to share via social network services like Facebook or Twitter the stories that they find through the online data exploration.

In the Ed-data app developed by ProPublica (http://projects.propublica.org/schools/), the analysis allows generating stories about the educational opportunities provided by high schools in the U.S. The educational opportunities are classified into five groups: Advanced Placement course, gifted-and-talented programs, and advanced math, chemistry and physics classes. The data comprises 85,000 schools representing 75% of all public high schoolers in the U.S. The user can get reports for specific schools, districts or states in a visual & interactive presentation of facts such as how many students are enrolled, the percentage of inexperienced teachers (i.e., two-year experience or less), the percentage or students that receive free or reduced-price school lunch (as an indicator of poverty), and the percentage of students attending AP and advanced math courses. Moreover, the user can compare these facts across neighboring schools, or compare to lower and higher poverty-ranked schools, or to specific schools.

In addition to providing easy access to meaningful content, the app also facilitates sharing this content via Facebook. The developers say about the interface of the app that “we were focusing a lot more on what behaviors we wanted to encourage” and that sharing was one of these behaviors.  This social aspect of the app was not however designed for its own sake, but to create an impact on both “a personal and a policy level”. Because data analysis is a time-consuming process (that starts with acquiring the data, cleaning it, and then making sense of it), it is important that the obtained information reaches those people that need that information and insight.

Thus, I think this app is a good model to follow for packaging and sharing information that is generated from large amounts of data, and which can be viewed from different perspectives and at different levels of detail based on the user interest.

The template was created using blue, green and white colors. It has a header area, a main content floating to the right, a sidebar floating to the left and a footer area. The design was built based on what I call a “pencil draw” simulation, used to create the corners of the containers and as background for various inpage elements. The header area has a search form, so the one in the sidebar is not necessary anymore.

The design

The design is not very complicated and/or graphic emphasized. The containers were built using 3 (three) <div> elements which overlap one over another to create the box effect. The DTD used for the HTML code is XHTML 1.0 Transitional. The fonts used for the template are Trebuchet MS and Georgia.

The header area

The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side I placed a search form.
The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.

The main content container

This container floats to the right. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator and by the author of the post are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements are not styled differently for even and odd classes. In the next version this will be added.

The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

The sidebar

The sidebar floats to the left and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3 (three) custom widgets declared: Custom Calendar, Custom Search Form and Custom Tag Cloud.

The footer

The footer has 2 functions which will generate a list of 3 (three) links for random posts and 3 (three) links for random pages. These two containers will float to the left, and on the right side are posted credentials for the template's author.

Credits

The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use.

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

Basically it has the backbone of the actual previous template of this blog. But, being developed based on an old WordPress template, requires a lot of code updates to meet the latest major version requirements. Anyway, after a week of reading, writing and designing and after a few more to wait for its approval, now it is ready to be distributed.

The design

The design is not very complicated and/or graphic emphasized. It has four main areas: the header, the main content container, the left sidebar and the footer. The containers were built using 8 (eight) <div> elements which overlap one over another to create the box effect. The style sheet formats almost all HTML elements (the drop-down list and the radio buttons are not, and a few more). Anyway, if you want to make some modifications, go ahead and do it. The DTD used for the HTML code is XHTML 1.0 Transitional. The font used for the main headings is Josefin Sans Std Light. The method used by Google seems to not be supported by old IE versions.

The header area

The header area contains a heading formatted as a link for the name of the blog, and the description of the blog goes under it. Those two elements are placed on the left side. On the right side there are 2 (two) images formatted as links which will give the possibility to your readers to subscribe to your articles using RSS 2 feeds and the Google Feedburner. For the last one you have to edit the header.php file and add the necessary link provided by Google. Maybe, in the near future I'll create a function to make this happened using the Dashboard.

The last element is the menu container. The template supports custom menus as it is emphasized in WordPress codex about wp_nav_menu(). As the documentation says, if no custom menu is defined the function will fallback to wp_page_menu, else if name argument has no value defined or the value defined doesn't match the name of any custom menu defined, the function's name argument will take the name of the first custom menu defined (with the lowest ID). To use any other custom menu you have to manually add the menu name in the functions.php file in the navigation menu section. The menu supports two levels deep navigation (the parent will have children, and the children will have children), which means that the style sheet formats the menu list elements to be displayed. If you want more you have to add the proper formatting for the third level and so on (i.e.: div#menu ul ul ul ...). You have to pay attention to the order the CSS properties are declared, as long as they are served to the HTML page from top to bottom of the style.css.
A snippet of the code is presented bellow.

Important!
In this area you have two icons on the right side. One points to the rss feed link and the other should pointed to you feedburner link. Read more here how to obtain your link. After this you have to edit header.php and add the link in the proper place.

The main content container

This container floats to the left. The main page file, index.php takes the while loop for the exiting posts and displays the entire content of the posts, not the excerpt. Based on the way the container is created, it was simple to add a conditional statement for the sticky post and with the help of the CSS properties to emphasized it on page. Another feature added, if I can say so, was to shrink the message "Enter your password to view comments." which is generated by comments_popup_link() function declared in comment-template.php file on line 973. The problem was if a password protected post exists and the password was not typed and used, instead of displaying "No comments" or "1 Comment" message, the page serve the "Enter your ..." message. This instance is only present in a WPMU environment all WP environment, based on what I experienced. So, shrinking the message assures that it will fit the container's width, otherwise will go under the place should be. The pages supports wp_link_pages() function which will add links to the next pages of one post, if it is split in more than one parts. Another function used is wp_list_pages() to add a link inside the page to the child pages of the current page. The page.php and single.php pages has the comment form built using the comments_template() function. Also I added a filter to change the messages of the input elements' labels. The template supports nested comments, three levels deep. If you want more, you have to add the proper style properties to achieve the desired effect. The comments made by the administrator (or by the main editor) are styled to be displayed different from the other comments. But, you have to modify in the style.css file the statements for the comment-author-administrator class, if your nickname, as it appears in the dashboard of your user admin (or editor) page, is different from administrator, and change it to the nickname you have. Otherwise, no change to the comment style. The comment li elements has different background for even and odd classes.

The template also has a 404.php, a search.php and an archive.php page. If you want to use the archive.php page read how to create an archive page.

The sidebar

The sidebar floats to the right and it supports widgets. By default it has 4 (four) custom widgets defined: Category, Blogroll, Archives (monthly) and Meta. Also in functions.php file has 3(three) custom widgets declared: Custom Calendar, Custom Search Widget and Custom Tag Cloud. Please use the Custom Calendar widget as it is formatted with a different background box.

The footer

The footer has 2 links for RSS feeds and a link for the author of this template. Also it has a simple custom function which will display a Welcome back, user first name user last name message if the user is logged in, or a Login link if the user is not logged in. Anyway, it will be a little change, the message will be formatted as a link to the admin page, in the next version of this template.

Credits

The template is released under GPL v3 license. You can use it as it is, modify it, for commercial or non-commercial use. A thank you message is all that I need, if you get some satisfaction using this template.

You can DOWNLOAD the template from WordPress site. A LIVE PREVIEW of the template is available also.

I hope you'll enjoy it .

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="#">Last Item</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 --</code>>
   <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 .