In this part of the series I describe the HTML elements and their attributes. I do not talk about the events in this part; I will talk about the events in a later part. I will also talk about the CSS for the menu elements and sub menu elements. Throughout the series, we shall use the example that was described in the previous part.
Later in the series, I will give you the complete code for the example. In that code, and as you can see from the style sheet above, the BODY element has a background color of :#ff9933. There is an H1 element, and it is aligned at the center of the page. The third line in the CSS above applies to the cells with links in the main menu. For simplicity and consistency between browsers, the border width is zero, padding: zero, and margin: zero. The background color is brown. The width and height are also given.
The next statement is for the table cells that have the drop-down buttons. Note the properties and values. Again, for simplicity and consistency, we have zero border, zero padding and zero margin.
The next statement applies to the drop-down buttons. Note the properties and values. Again, for simplicity and consistency we have zero padding and zero margin. However, we now have a border of 1px with the dark-red color. We have also given the button a background color. The button then appears differently from a normal button. The appearance is chosen to match the looks of the menu. Recall that borders add extra size to the size of an element. You have to do your calculation well, so that the button fits into the table cell.
The next statement applies to the table cells in the DIV element. Note the properties and values. Again, for simplicity and consistency we have zero border, zero padding and zero margin. Now when the DIV element is displayed, only certain cell contents are displayed. The DIV element appears in front of the elements behind. For the cells whose contents are not displayed, their backgrounds have to be transparent so the user can see the elements behind them. So, in this statement the background is transparent. That is the initial value.
The rest of the statements in the style sheet apply to the links.
What we have done so far
Our aim is to come up with code for a menu that can work with most if not all modern browsers, without taking the peculiarities of any particular brand into consideration. We are elaborating the case where the main menu is a horizontal bar; after this we shall briefly look at the case where the main menu is a vertical bar.
In the previous part, we looked at the layout of the menu. In this part we have looked at the elements and their attributes. We have also looked at the CSS. You can put all of your CSS in the style sheet, but I advise you to put the initial dimension properties and their values in the attribute of the tag of the HTML element.
I'll see you in the next part.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
HTML5 Boilerplate Introduction
