How To Make A Horizontal Website!
Here is Demo #1 (simple as it gets)
Here is Demo #2 (with a little style)
I have some bad news folks - your going to see a lot more horizontal websites floating around the web now. CSS by me - JS by ScrollTO, LocalScroll, and jQuery - integrated together and made dead simple by me! Horizontally centered on any size screen (vertically centered also in demo #2). Works with JS on or off.
Download and link to jQuery >> download and link to horizontal-scroll.js >> copy and paste da code below >> load it up and watch the magic!
Da Code...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } How to make a horizontal website</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="horizontal-scroll.js"></script>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
* html {background:url(fake.jpg)}
* html #full {height:100%;}
</style>
</head>
<body>
<ul>
<li><a href="#one">ONE</a></li>
<li><a href="#two">TWO</a></li>
<li><a href="#three">THREE</a></li>
<li><a href="#four">FOUR</a></li>
<li><a href="#five">FIVE</a></li>
</ul>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>
</body>
</html>
