Hey guys i'm trying to make a site but Ive run into a few issues. I cant get my site to look like the one shown on the tutorial page below
http://woork.blogspot.com/2009/02/useful-tips-to-design-horizontal.html
*The demo/downloadable tutorial is dead so the only thing I have to work with is what he posted.
Although I've gotten it to look "horizontal" i cant figure out how to make it move as shown in the pictures provided (No boxes are present although I guess the text could be it, and you have to click the bottom scroll bar to navigate, the links used to navigate are placed on top of the page and when clicked do nothing.
Could it be i misplaced something or not have the proper jqueary file maybe even missed something completely. To put it simply I want to make it look like the picture I've attached. Is it possible with the tutorial link above or do I have to look elsewhere?
Thanks for your time
Below is the code I currently have (Apologize for the wall of text)
<html>
<head>
<style>
<script type="text/javascript" src="thw.js"></script>
</style>
</head>
<style>
#scroll-buttons{position:fixed;}
p{font-family:"Ariel";}
body {background-color:#b0c4de;}
#container{
width:3000px;
height:400px;
}
#maincontent{
border:10;
margin:0;
padding:0;
}
#maincontent li{
line-style:none;
width:50px;
height:50px;
padding:100px;
float:left
;
}
body{
background:url(mybg.jpg) no-repeat fixed;
}
</style>
<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a>
<a href="#p5">Go to the section 5</a>
<div id="container">
<ul id="maincontent">
<li >
<a name="p1" id="p1"></a>
UPCOMING EVENTS
</li>
<li >
<a name="p2" id="p2"></a>
ABOUT US
</li>
<!-- Add all boxes you want-->
<li>
<a name="p3" id="p3"></a>
FORUMS</li>
<li>
<a name="p5" id="p5"></a>
Media</li>
<li >
<a name="p10" id="p10"></a>
CALENDAR
</li>
</ul>
</div>
</html>
