Here's the HTML and CSS code for this page's menu and the menu's layout.
HTML
<html id="one"> <head> <link type="text/css" rel="stylesheet" href="style.css"> <title>Page One</title> </head> <body id="pageone"> <div id="wrapper"> <div id="menu"> <div class="menuitem"><a id="itemone" class="ment" href="page_one.shtml" title="item one">Item One</a></div> <div class="menuitem"><a id="itemtwo" class="ment" href="page_two.shtml" title="item two">Item Two</a></div> <div class="menuitem"><a id="itemthree" class="ment" href="page_three.shtml" title="item three">Item Three</a></div> <div class="menuitem"><a id="itemfour" class="ment" href="page_four.shtml" title="item four">Item Four</a></div> <div class="menuitem"><a id="itemfive" class="ment" href="page_five.shtml" title="item five">Item Five</a></div> <div class="menuitem"><a id="itemsix" class="ment" href="page_six.shtml" title="item six">Item Six</a></div> </div> </div> </body> </html>
CSS
a img { border : none; } a:link img { border : none; } html { width : 100%; background-color: #000000; color: #ffffff; } html#one { background-image: url(smoke-background-page-one.jpg); background-position: top left; background-repeat: no-repeat; } html#two { background-image: url(smoke-background-page-two.jpg); background-position: top center; background-repeat: no-repeat; } html#three { background-image: url(smoke-background-page-three.jpg); background-position: top center; background-repeat: no-repeat; } html#four { background-image: url(fireworks-background-page-four.jpg); background-position: top center; background-repeat: no-repeat; } html#five { background-image: url(fireworks-background-page-five.jpg); background-position: top center; background-repeat: no-repeat; } html#six { background-image: url(fireworks-background-page-six.jpg); background-position: top center; background-repeat: no-repeat; } body { margin-top: 5px; margin-left: auto; margin-right: auto; margin-bottom: 5px; text-align: center; width: 840px; max-width: 840px; color: #ffffff; } #wrapper { width : 840px; margin-top: 0px; margin-bottom: 0px; margin-left : auto; margin-right : auto; text-align : center; } span { margin: 0; padding: 0; } .highlight { color: green; font-weight: bold; margin: 0; padding: 0; } /* Menu Items */ body#pageone a#itemone, body#pagetwo a#itemtwo, body#pagethree a#itemthree, body#pagefour a#itemfour, body#pagefive a#itemfive, body#pagesix a#itemsix { background: #000000; /* the active button's background colour*/ background-image: url(active-glossy-tab.jpg); repeat: repeat-x; color:black; } #menucase { display: block; clear: both; width: 840px; border: 0; background-color: transparent; text-align: center; } #menu { display: block; clear: both; width: 100%; padding: 0; margin-left: auto; margin-right: auto; text-align: center; } div.menuitem { display : inline; text-align:center; padding: 0; } a.ment { display: inline; float : left; width : 140px; padding: 0; background: #000000; /* the active button's background colour*/ background-image: url(inactive-glossy-tab.jpg); repeat: repeat-x; text-decoration: none; color : white; font-weight : bold; text-align : center; } a:hover.ment { background: #000000; /* the active button's background colour*/ background-image: url(active-glossy-tab.jpg); repeat: repeat-x; color:black; } a:active.ment { color : black; } /* End of menu items */