Hello folks of coding foums

Below is code for a horizontal scrolling website i am trying to get together.

I have given you the bare bones of it.

The problem i am having is well apart from the obvious that is, is i want the nav bar and all the creatives ie top, left, right & bottom nbanners to remain fixed when i scroll using the arrows. I have actually managed to get the bottom and left creatives to do this using position:fixed in css but cannot seem to handle the rest.

Any help would be hugely appreciated.

I guess y'all are busy on other pet projects so i will be patient and check back later.

Thank you guys & dolls for your time.






html

Code:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<meta name=description content=.>
<meta name=keywords content=", , , , , , ">
<meta name=robots content=index>
<meta name=robots content=follow>
<meta name=google-site-verification content=""/>
<link rel=stylesheet type="text/css" href="css/style.css"/>
<link rel=stylesheet type="text/css" href="css/test.css"/>

<link rel="shortcut icon" type="image/x-icon" href=favicon.ico>
<script type="text/javascript" src="/javascript/pngFX.js"></script>    <script type="text/javascript">
        DD_belatedPNG.fix(' img, .logo a, .wrap-timer, .timer ');
    </script>
<script type="text/javascript">function downloadJSAtOnload(){var element=document.createElement("script");element.src="deferredfunctions.js";document.body.appendChild(element);}
if(window.addEventListener)
window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)
window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload;</script>
<style type="text/css">body{height:100%;width:100%;margin:0;padding:0;overflow:hidden;}
#wrapper{width:100%;height:100%;position:absolute;top:0;left:0;background-color:#A4D3EE;overflow:hidden;}
#mask{width:500%;height:100%;background-color:#A4D3EE;}
.item{width:20%;height:100%;float:left;background-color:#A4D3EE;}
.content{width:972px;height:592px;margin:0 auto;background-color:#000000;
position:relative;}
.selected{background:#fff;font-weight:700;}
.clear{clear:both;}</style>
<style type="text/css">p.c2{text-align:right}
div.c1{text-align:center}</style>


</head>
<?php flush(); ?>
<body>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<div id="top_banner">
<script type="text/javascript">
pb_cid='BAYBANNER468X60_1';
pb_type='banner_468x60';
</script>
<script src="http://clkads.com/banners/script/include_img_banner.js" type="text/javascript"></script>
</div>
<br>
<br>
<br>
<br>
<div id="navwrapper">  
<ul id=nav class=floatleft><li>
<a class=current href="#">Home</a></li>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
</ul>
<br class=clear>
</div>
<div id="left_banner">
<script type="text/javascript">
pb_cid='BAYBANNER120X600_1';
pb_type='banner_120x600';
</script>
<script src="http://clkads.com/banners/script/include_img_banner.js" type="text/javascript"></script>
	</div>
<div id="right_banner">
<script type="text/javascript">
pb_cid='BAYBANNER120X600_1';
pb_type='banner_120x600';
</script>
<script src="http://clkads.com/banners/script/include_img_banner.js" type="text/javascript"></script>
	</div>
<div class="c1" id="bottom_banner">
<script type="text/javascript">
pb_cid='BAYBANNER728X90_2';
pb_type='banner_728x90';
</script><script src="http://clkads.com/banners/script/include_img_banner.js" type="text/javascript"></script></div>
<div class="content"><a name="item1" id="item1"></a>

<p class=c2><a href="#item2" class=panel><img src="http://i48.tinypic.com/2rcy1zp.png" width=24 height=24 alt=arrow></a></p>
</div>
</div>

<div id="item2" class="item">
<br>
<br>
<br>
<br>
<div id="navwrapper">
<ul id=nav class=floatleft>
<li><a class=current href="#item1" class=panel >Home</a></li>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
</ul>
<br class=clear></div>
<div class=content><a name=item2 id=item2></a><p>

<a href="#item1" class=panel><img src="http://i49.tinypic.com/2i7obnq.png" width=24 height=24 alt=arrow></a>
<a href="#item3" class=panel><img src="http://i48.tinypic.com/2rcy1zp.png" align=right width=24 height=24 alt=arrow></a>
</div>
</div>

<div id="item3" class="item"><a name=item3 id=item3></a>

<br>
<br>
<br>
<br>
<div id="navwrapper">
<ul id=nav class=floatleft>
<li><a class=current href="#item1" class=panel >Home</a></li>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
</ul>
<br class=clear></div>
<div class="content"><a name="item3" id="item3"></a><p>
<a href="#item2" class=panel><img src="http://i49.tinypic.com/2i7obnq.png" width=24 height=24 alt=arrow></a>
<a href="#item4" class=panel><img src="http://i48.tinypic.com/2rcy1zp.png" align=right width=24 height=24 alt=arrow></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">$(document).ready(function(){$('a.panel').click(function(){$('a.panel').removeClass('selected');$(this).addClass('selected');current=$(this);$('#wrapper').scrollTo($(this).attr('href'),100);return false;});$(window).resize(function(){resizePanel();});});function resizePanel(){width=$(window).width();height=$(window).height();mask_width=width*$('.item').length;$('#debug').html(width+' '+height+' '+mask_width);$('#wrapper, .item').css({width:width,height:height});$('#mask').css({width:mask_width,height:height});$('#wrapper').scrollTo($('a.selected').attr('href'),0);}</script>
</body>
</html>

css

[code]

body {
margin:0 auto;
}

/*--navigation wrapper--*/
#navwrapper {
background-color: #000000;
}

#nav {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:4px;
}

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}

/*--main nav links style--*/
#nav a {
display:block;
padding:7px 7px 7px 7px;
color:#ccc;
text-decoration:none;
}

#nav a.dmenu {

}

#nav a.dmenu:hover {
color:#3366CC !important;
background-color: #fff !important;
}

#nav li {
float: left;
}

#nav li {position: relative;}

/* hide from IE, mac */
#nav li {position: static; width: auto;}
/* end hiding from IE5 mac */

/*--drop down menu styling--*/
#nav li ul {
position: absolute;
display: none;
margin-left:-1px;
padding-bottom:10px;
background-color: #FFFFFF;
border: 1px solid #bbb;
border-top:none;
-moz-box-shadow: 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #ddd;
box-shadow: 0 0 5px #ddd;
/*--make it top of all the elements on page, so that it can be visible--*/
z-index:5000;
}

#nav li:hover a, #nav a:focus,
#nav a:active {
padding:7px 7px 7px 7px;
color:#fff;
background:#444;
text-decoration:none;
}

#nav li ul, #nav ul li {
width: 10em;
}

/*--drop down menu styling is different from main nav, strict rule--*/
#nav ul li a {
color: #3366CC !important;
border-right: 0;
}
#nav ul li a:hover {
color:#3366CC !important;
background-color: #eef3fb !important;
border-right: 0;
}

#nav li:hover ul {
display: block;
}

#nav li:hover ul a{
color: #000000;
background-color: transparent;
}

#nav ul a:hover {
background-color: #606060!important;
color: #FFFFFF !important;
}

/*--used in drop down menu items--*/
.menuseprator{border-bottom:1px solid #ddd; margin:10px 0 10px 0;}

/*--for showing down arrow in drop down menu item--*/
.arrowdown{color#eee; font-size:0.5em;}

/*--for the left navigation menu--*/
.floatleft{float:left;}

/*--for the right options navigation menu--*/
.floatright{float:right;}

/*--clear all floating, left and right--*/
.clear{clear:both;}

a {
outline: 0;
}
a:hover, a:active, a:focus {
// styling for any way a link is about to be used
}


#top_banner
{
width:468px;
height:60px;
padding:10px;
float:right;
overflow:hidden
}

#left_banner
{
width:120px;
height:600px;
padding:12px;
float:left;
position:fixed;
overflow:hidden
}

#right_banner
{
width:120px;
height:600px;
padding:12px;
float:right;
overflow:hidden
position:fixed;
}

#bottom_banner
{
bottom:20px;
width:100%;
width:728px
height:90px;
z-index:999;
text-align:center;
position:fixed;
}


JS

jquery.scrollTo.js

jquery-1.3.1.min.js



I hope that my first thread is correctly done & renders well enough