Return to JournalXtra

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 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: #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 */