I'm hoping someone here can help. I've tried everything.
So I used rollover buttons similar to described here:
http://www.monkeyflash.com/archives/...avbar/#navlist
The only problem is.. that it moves the background of my button fine but it also moves the main background div. As you can see below.
Here is the required css:
Code:
#main {
display:block;
background-image:url('../images/bk.jpg');
background-repeat: no-repeat;
background-position: top left;
}
#chapter {
padding-top:157px;
margin-bottom:5px;
padding-bottom: 24px;
text-align:left;
border-bottom:1px solid #5A3D1C;
}
#chapter ul {
float: right;
font: bold 10px/1.5em Verdana;
margin:0;
padding:0px 20px 0 0px;
list-style:none;
}
#chapter li {
display:inline;
margin:0;
padding:0;
}
#chapter a {
float:left;
background:url("../images/tableft2.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#chapter a span {
float:left;
display:block;
background:url("../images/tabright2.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#5A3D1C;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#chapter a span {float:none;}
/* End IE5-Mac hack */
#chapter a:hover span {
color:#5A3D1C;
}
#chapter a:hover {
background-position:0% -42px;
}
#chapter a:hover span {
background-position:100% -42px;
}
#chapter #current a {
background-position:0% -42px;
}
#chapter #current a span {
background-position:100% -42px;
}
And the html:
Code:
<div id="main">
<div id="chapter">
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="Module1/01_01_01_e.asp"><span>Raising Awareness</span></a></li>
<li><a href="Module2/02_01_01_e.asp"><span>Putting Values into Action</span></a></li>
<li><a href="Module3/03_01_01_e.asp"><span>Case Studies</span></a></li>
<li><a href="Module4/04_01_01_e.asp"><span>Values Toolkit</span></a></li>
</ul>
</div><br class="c"> ........
|
