I am trying to make a site similar to this http://www.alphatise.com/. You can scroll down with out the scroll bar just using the scroll arrow. I've tried setting overflow-x and y hidden but when I tried it it doesn't scroll. I might use target for this? Here is my jsfiddle http://jsfiddle.net/CB3DY/
Any help would be appreciated. Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="center">
<div id="header">
<ul>
<li>Google</li>
<li>Nexus 5</li>
<li>Inspiration</li>
</ul>
</div>
<div id="content">
<div class="img-1" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
<div class="img-2" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
<div class="img-3" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
>
<!-----thirdimageend----->
<!-----fourthimage--->
<div class="img-4" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
<div id="text" class="img">
<img src=""><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
</div>
<!-----fourthimageend---->
<div id="footer">
<h2></h2>
<div id="footercontent">
<ul class="footer1">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer2">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer3">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer5">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer4">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
</div><!-----footer content------------------------>
</div><!-----footer------------------------------->
<div id='footercopy'>
<p>Copyright patienthandling.com.au</p>
</div>
</div>
</div>
</body>
</html>
here is my css:
html
{
background:silver;
overflow-x:hidden;
overflow-y:hidden;
}
#center
{
width:1700px;
margin-right:auto;
margin-left:auto;
}
#header
{
width:1700px;
margin-right:auto;
margin-left:-10px;;
background:silver;
position:fixed;
top:0;
left:0;
z-index:2;
font-family: 'Poiret One', cursive;
}
#header li
{
display:inline;
margin-right:auto;
margin-left:auto;
padding-left:20px;
}
#content
{
background:white;
margin-left:-10px;
}
.img
{
padding:20px;
width:1024px;
margin-right:auto;
margin-left:auto;
position:relative;
top:-100px;
}
#text
{
min-height:800px;
}
.img p
{
margin-top:-700px;
position:relative;
left:400px;
width:400px;
font-size:20px;
line-height:40px;
font-family: 'Poiret One', cursive;
}
#content p
{
margin-right:auto;
margin-left:auto;
}
#content img
{
margin-right:auto;
margin-left:auto;
line-height:20px;
min-height:400px;
}
#fixed
{
background-attachment:fixed;
width:100%;
position:relative;
padding:25% 0;
background-repeat:no-repeat;
background-position:center center;
background-size:100%;
}
.img-1
{
background-image:url('http://www.google.com.au/nexus/images/introvideo-endframe_n5.jpg');
}
.img-2
{
background-image:url('http://images.anandtech.com/doci/6440/Nexus-4-10-4571.jpg');
}
.img-3
{
background-image:url('http://www.google.com.au/nexus/images/introvideo-endframe_n5.jpg');
}
.img-4
{
background-image:url('http://zshop.vn/images/nexus_10_01.jpeg');
}
q
{
font-size:10em;
}
h1
{
width:1024px;
margin-right:auto;
margin-left:auto;
margin-top:-300px;
color:white;
font-family: 'Poiret One', cursive;
font-size:50px;
}
#footer
{
width:1700px;
margin-right:auto;
margin-left:auto;
background:white;
clear:both;
min-height:400px;
margin-top:-23px;
min-height:300px;
margin-right:auto;
margin-left:auto;
text-align:center;
overflow:hidden;
font-family: 'Poiret One', cursive;
}
#footercontent
{
width:1100px;
font-weight:20px;
margin-right:auto;
margin-left:auto;
padding-top:100px;
font-family: 'Poiret One', cursive;
font-size:13px;
}
.footer1
{
float:left;
padding-right:4px;
text-align:left;
}
.footer2
{
float:left;
padding-right:4px;
text-align:left;
}
.footer3
{
float:left;
padding-right:4px;
text-align:left;
}
.footer4
{
float:left;
padding-right:4px;
text-align:left;
}
.footer5
{
float:left;
text-align:left;
}
#footercopy
{
background:white;
text-align:center;
padding:20px;
margin-bottom:-10px;
color:black;
font-family: 'Poiret One', cursive;
}
/*ipads landscape*/
@media only screen
and (min-width : 1024px){
#center{width:1224px;}
.img p
{
margin-top:-700px;
position:relative;
left:200px;
width:400px;
font-size:20px;
line-height:40px;
font-family: 'Poiret One', cursive;
}
#fixed
{
background-attachment:fixed;
width:100%;
position:relative;
padding:25% 0;
background-repeat:no-repeat;
background-position:top center;
background-size:100% 100%
}
#footer,#footercontent{width:1024px;}
#footercontent{text-align:center;}
h1
{
width:1024px;
margin-right:auto;
margin-left:auto;
margin-top:-200px;
color:white;
font-family: 'Poiret One', cursive;
font-size:50px;
}
.img-4
{
background-image:url('http://zshop.vn/images/nexus_10_01.jpeg');
background-attachment:fixed;
width:100%;
position:relative;
padding:10% 0;
background-repeat:no-repeat;
background-position:top center;
background-size:100% 50%;
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px){
#center,#fixed{width:1700px;}
[1]: http://jsfiddle.net/CB3DY/
