Here's the HTML and CSS code for this page's menu and the menu's layout.
HTML
<html> <head> <link type="text/css" rel="stylesheet" href="style.css"> <title>Page Five</title> </head> <body id="pagefive"> <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: #0066c5;
}
body {
margin-top: 5px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
text-align: center;
width: 840px;
max-width: 840px;
color: #000000;
}
#wrapper {
width : 840px;
margin-top: 0px;
margin-bottom: 0px;
margin-left : auto;
margin-right : auto;
text-align : center;
}
/* 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: #F4469E; /* active button's colour*/
color:#000000;
border: 2px ridge #CDD5DA;
}
#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 {
float : left;
width : 136px;
text-decoration: none;
color : #b0c0ff;
font-weight : bold;
text-align : center;
border: 2px ridge #000000;
padding: 0;
background: #B90761; /* inactive button's colour*/
}
a:hover.ment {
color : #b0c0ff;
background: #F4469E; /* active button's colour*/
border: 2px ridge #0B218C;
}
a:active.ment {
color : black;
}
/* End of menu items */