PDA

View Full Version : Horizontal Scrolling Site..Not working :(



threedash
Apr 8th, 2010, 09:00 PM
Hi there,

I am working on a horizontal scroll site and I am using

http://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html

as my guide.

http://threedash.com/READING/

I can't seem to get the scrolling feature to scroll.

(also does anyone know how i can center the nav so it strolls over the "box" at the center, as seen in the image)

_khai

this is a reference jpg
http://threedash.com/READING/reading01.jpg
http://threedash.com/READING/reading02.jpg
http://threedash.com/READING/reading03.jpg

Excavator
Apr 8th, 2010, 09:51 PM
Hello threedash,
Here's one way -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #000 url(http://threedash.com/READING/img/bg_smaller.jpg) repeat-x;
}
* {
margin: 0;
padding: 0;
}
#navigation {
height: 198px; /*for demo only*/
width: 650px;
margin: 0 0 0 -325px;
position: fixed;
top: 0;
left: 50%;
background: #f00; /*for demo only*/
}
#container {width: 4200px;}
.box {
background: url(img/darkbg.png) repeat;
border: 2px solid #181818;
width: 850px;
height:500px;
float: left;
margin: 300px 92px 0 92px;
padding: 0;
}
</style>
</head>
<body>
<div id="navigation">
<h2>Navigation</h2><!-- Don't delete this heading. It's here for accessibility purposes -->
<ul>
<li id="portfolio"><a href="#box3">Portfolio</a></li>
<li id="headshots"><a href="#box2">HeadShots</a></li>
<li id="bio"><a href="#box1">Biography</a></li>
<li id="videos"><a href="#box4">Videos</a></li>
</ul>
<!--end navigation--></div>
<div id="container">
<div id="box1" class="box">
<h2><a name="box1"><img src="img/h1biography.png" width="167" height="53" alt="bio" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box1--></div>
<div id="box2" class="box">
<h2><a name="box2"><img src="img/h1headshots.png" width="169" height="36" alt="headshots" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box2--></div>
<div id="box3" class="box">
<h2><a name="box3"><img src="img/h1portfolio.png" width="137" height="46" alt="portfolio" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box3--></div>
<div id="box4" class="box">
<h2><a name="box4"><img src="img/h1vidoes.png" width="90" height="44" alt="videos" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box4--></div>
<!--end container--></div>
</body>
</html>

Excavator
Apr 8th, 2010, 09:59 PM
Probably a better way -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #000;
}
* {
margin: 0;
padding: 0;
}
#wrap {
height: 836px;
width: 1034px;
margin: 0 0 0 -517px;
position: fixed;
top: 0;
left: 50%;
background: url(http://threedash.com/READING/img/bg_smaller.jpg);
border: 1px solid #fff;
overflow: auto;
}
#navigation {
height: 198px; /*for demo only*/
width: 650px;
margin: 0 0 0 -325px;
position: fixed;
top: 0;
left: 50%;
background: #f00; /*for demo only*/
}
#container {width: 4200px;}
.box {
background: url(img/darkbg.png) repeat;
border: 2px solid #181818;
width: 850px;
height:500px;
float: left;
margin: 300px 92px 0 92px;
padding: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="navigation">
<h2>Navigation</h2><!-- Don't delete this heading. It's here for accessibility purposes -->
<ul>
<li id="portfolio"><a href="#box3">Portfolio</a></li>
<li id="headshots"><a href="#box2">HeadShots</a></li>
<li id="bio"><a href="#box1">Biography</a></li>
<li id="videos"><a href="#box4">Videos</a></li>
</ul>
<!--end navigation--></div>
<div id="container">
<div id="box1" class="box">
<h2><a name="box1"><img src="img/h1biography.png" width="167" height="53" alt="bio" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box1--></div>
<div id="box2" class="box">
<h2><a name="box2"><img src="img/h1headshots.png" width="169" height="36" alt="headshots" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box2--></div>
<div id="box3" class="box">
<h2><a name="box3"><img src="img/h1portfolio.png" width="137" height="46" alt="portfolio" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box3--></div>
<div id="box4" class="box">
<h2><a name="box4"><img src="img/h1vidoes.png" width="90" height="44" alt="videos" /></a></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet
erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt
gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis
elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit
ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus,
at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.
</p>
<!--end box4--></div>
<!--end container--></div>
<!--end wrap--></div>
</body>
</html>

threedash
Apr 8th, 2010, 10:10 PM
THe first option is what i am looking for in the project.

threedash
Apr 8th, 2010, 10:11 PM
btw, what program do you use to "fix the html" codes? because it looks very orangized...

Excavator
Apr 8th, 2010, 10:14 PM
btw, what program do you use to "fix the html" codes? because it looks very orangized...

No program... I hand code it into DreamWeaver Code View.

threedash
Apr 8th, 2010, 10:15 PM
really i am using dreamweaver as well but is it your indexing that gets it looking clean?

threedash
Apr 8th, 2010, 10:25 PM
hey i noticed you did this.

* { margin: 0; padding: 0;}

lol.. i look at that and im like DUH! of course you can do that. I know there are a css reset articles out there and css reset files (and why it's bad and good, and i've read both arguments) but stuff like what you did seems to me are little tid bits you pick up as you start to code css more and more. (im on my 4th site) I was wondering if there are places i can find more information on those type of tid bits/short handed/common css practices..etc..?

deXypher
Apr 8th, 2010, 11:08 PM
really i am using dreamweaver as well but is it your indexing that gets it looking clean?

The white space used is dependent on every coder. The neater you format your code, the more organized it looks. That's pretty much it.

Excavator
Apr 9th, 2010, 12:50 AM
really i am using dreamweaver as well but is it your indexing that gets it looking clean?

I do that by hand too. DreamWeaver has an "Apply Source Formatting" that can automatically indent your code for you but I don't like how it does it.

Excavator
Apr 9th, 2010, 12:53 AM
hey i noticed you did this.

* { margin: 0; padding: 0;}

lol.. i look at that and im like DUH! of course you can do that. I know there are a css reset articles out there and css reset files (and why it's bad and good, and i've read both arguments) but stuff like what you did seems to me are little tid bits you pick up as you start to code css more and more. (im on my 4th site) I was wondering if there are places i can find more information on those type of tid bits/short handed/common css practices..etc..?

That's in a snippet that is loaded every time I start a new page. I've started moving away from using any reset at all, if you've read the pro's and con's then you already know some reasons why not to use a reset.

I can see I need to update my preset snippet :cool:...

threedash
Apr 9th, 2010, 11:03 AM
do you mind if i take a peak at your preset snipets?
=)