Menu
Alright I’m making a new website, and I started off with a header and a horizontal CSS navigation menu right underneath the header. I wanted a small white boarder around the header and down the sides of the whole site. Like this: [url]http://www.natural-nutrition.me.uk/
[QUOTE]
<style type=”text/css”>
#tabsE {
float:left;
width:100%;
background:#FFF;
font-family: Century Gothic,Helvetica,Arial,Geneva,sans-serif;
font size: 10px;
color: #000;
font-size:80%;
line-height:1;
}
#tabsE ul {
margin:0;
padding:0px 0px 0 0px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url(“images/tableftE.gif”) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url(“images/tabrightE.gif”) no-repeat right top;
/* To change the size of the navigation boxes change the padding below */
padding:9px 19px 8px 10px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
body {
background-color: #143D55;
}
</style>
</head>
<body>
<table width=”800″ border=”0″ align=”center” cellpadding=”0″>
<tr bgcolor=”#FFFFFF”>
<td colspan=”2″><img src=”images/header_guy.gif” width=”800″ height=”170″ hspace=”6″ vspace=”6″ /></td>
</tr>
<tr bgcolor=”#FFFFFF”>
<td colspan=”2″><div id=”tabsE”>
<ul>
<li><a href=”#” title=”home”><span>HOME</span></a></li>
<li><a href=”#” title=”recipies”><span>RECIPIES</span></a></li>
<li><a href=”#” title=”diet”><span>DIET</span></a></li>
<li><a href=”#” title=”training”><span>TRAINING</span></a></li>
<li><a href=”#” title=”press”><span>PRESS</span></a></li>
<li><a href=”#” title=”order”><span>ORDER</span></a></li>
<li><a href=”#” title=”contact”><span>CONTACT</span></a></li>
<li><a href=”#” title=”help”><span>HELP</span></a></li>
</ul>
</div> </td>
</tr>