Return to JournalXtra

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