It works, but there are a couple of issues still:
firstly my whole navigation column background is 620px long, but the only part that is shown is the part with the actual links.
Secondly - I cannot position the text links, using padding ends up increasing the size the navigation background
Thridly - without setting the margin to -40px the background does not appear as far left as possible.
The site is
http://www.presspointproofing.co.uk/easton/
The wayfinder call is;
[!Wayfinder?startId=`0`&rowIdPrefix=`nav-`!]
I have a chunk caleld navigation that contains the follow: (is ths needed?)
<li id="nav-1"><a href="#" title="HOME"></a></li>
<li id="nav-2"><a href="#" title="ABOUT US"></a></li>
<li id="nav-3"><a href="#" title="SERVICES"></a></li>
<li id="nav-4"><a href="#" title="RECRUITMENT"></a></li>
<li id="nav-5"><a href="#" title="CONTACT US"></a></li>
and the css is:
html, body {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background: #d5d5d5;
}
#page-container {
width: 960px;
margin: 0px auto;
background-color:#ffffff;
}
/****** layout columns ******/
#header {
height: 200px;
width: 960px;
background: #ffffff url(../images/header.jpg) no-repeat;
}
/* VERTICAL NAVIGATION BAR
/////////////////////////////////////*/
ul#nav {
width:225px;
list-style:none;
height:620px;
float: left;
margin-left: 0px;
margin-top: 0px;
padding: 0px;
}
ul#nav li {
display:block;
text-decoration:none;
height: 50px;
margin-left: -40px;
}
ul#nav li a {
width : 225px;
display : block;
font-size: 12px;
color: #ffffff;
text-decoration : none;
}
ul#navigation li a span {
float:left;
display:block;
padding: 15px 0px 0px 10px;
}
ul#nav li#nav-1 a {
height:50px;
background:url(../images/nav1.jpg) no-repeat 0 0px
}
ul#nav li#nav-1 a:active,
ul#nav li#nav-1 a:hover {
background-position: -225px 0px
}
ul#nav li#nav-2 a {
height:50px;
background:url(../images/nav1.jpg) no-repeat 0 -50px
}
ul#nav li#nav-2 a:active,
ul#nav li#nav-2 a:hover {
background-position: -225px -50px
}
ul#nav li#nav-3 a {
height:50px;
background:url(../images/nav1.jpg) no-repeat 0 -100px
}
ul#nav li#nav-3 a:active,
ul#nav li#nav-3 a:hover {
background-position: -225px -100px
}
ul#nav li#nav-4 a {
height:50px;
background:url(../images/nav1.jpg) no-repeat 0 -150px
}
ul#nav li#nav-4 a:active,
ul#nav li#nav-4 a:hover {
background-position: -225px -150px
}
ul#nav li#nav-5 a {
height:50px;
background:url(../images/nav1.jpg) no-repeat 0 -200px
}
ul#nav li#nav-5 a:active,
ul#nav li#nav-5 a:hover {
background-position: -225px -200px
}
/******************* end nav **************************/
#sidebar {
height: 470px;
width: 230px;
float: right;
margin: 50px 50px 50px 25px;
}
#content {
height: 570px;
width: 400px;
line-height: 18px;
margin-left: 225px;
margin-right: 230px;
background: #ffffff;
}
#footer {
margin-left: 225px;
height: 50px;
}
/******* content styles *******/
#content h1 {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding-bottom: 15px;
font-weight: 400;
font-size: 22px;
color: #981c1e;
}
#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
color: #981c1e;
}
#content p {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
#content a {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #981c1e;
text-decoration: none;
}
.padding {
padding: 50px 25px 10px 25px;
}
.footerpadding {
padding: 5px 50px 10px 25px;
}
Thanks for the help so far. Fortunately next week we have a propper web guy in the office, for now i have to do it.
