No replies
retrosc
Offline
newbie
Last seen: 8 years 13 weeks ago
Timezone: GMT-5
Joined: 2011-10-25
Posts: 1
Points: 2

Hello all,

I opted to use a one page horizontal layout while using a script to power my navigation. It works well while full screen, but when in windowed mode, the main content's position seem to shift back to the top of the browser when I click on a link.

Best way is to see it in action: http://www.rp-ocampo.com/test/index_test.html#p1

In windowed mode, it scrolls to the content and then shifts up.
I've tried changing the position of the content div in absolute or relative, but it doesn't seem to work. Using the fixed position eliminates the scrolling the content, which I don't want.

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tinyscrolling.js"></script>
<style type="text/css">
 
</style>
</head>
 
<body>
 
 
<div id="scroll-buttons">
<table width="1000" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="#p1"><img src="http://www.rp-ocampo.com/test/images/nhc_button.png" width="100" height="40" /></a></td>
    <td><img src="http://www.rp-ocampo.com/test/images/blank.png" width="100" height="40" alt="blank" /></td>
    <td><img src="http://www.rp-ocampo.com/test/images/blank.png" width="100" height="40" alt="blank" /></td>
    <td><img src="http://www.rp-ocampo.com/test/images/blank.png" width="100" height="40" alt="blank" /></td>
    <td><a href="#p2"><img src="http://www.rp-ocampo.com/test/images/process_button.png" width="100" height="40"/></a></td>
    <td><a href="#p3"><img src="http://www.rp-ocampo.com/test/images/culture_button.png" width="100" height="40"/></a></td>
    <td><a href="#p4"><img src="http://www.rp-ocampo.com/test/images/work_button.png" width="100" height="40"/></a></td>
    <td><a href="#p5"><img src="http://www.rp-ocampo.com/test/images/contact_button.png" width="100" height="40"/></a></td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
 
<div id="container">
	<ul id="maincontent">
 
 
	  <li>
			<a name="p1" id="p1"></a>
        <p>Nipa</p>
</li>
 
		<li>
			<a name="p2" id="p2"></a>
			<p>Process</p>
		</li>
 
		<li>
        	<a name="p3" id="p3"></a>
			<p>Culture</p>
        </li>
 
<li>
        	<a name="p4" id="p4"></a>
			<p>Work</p>
      </li>
 
        <li>
			<a name="p5" id="p5"></a>
            <p>Contact</p>
	  </li>
 
  </ul>
</div>
</body>
</html>

CSS

@charset "utf-8";
 
 
body{
	background-image: url(<a href="http://www.rp-ocampo.com/test/images/background.png" rel="nofollow">http://www.rp-ocampo.com/test/images/background.png</a>);
	width: 8000px;
	overflow: visible;
	top: 20px;
	background-repeat: no-repeat;
}
/* CSS Document */
 
#container{
	width:8000px;
	height:800px;
	z-index: 1;
	top: 0px;
	position: relative;
	float: none;
}
 
#maincontent{
	left: 0px;
	border:0;
	margin:0;
	padding:0;
	top: 50px;
}
 
#maincontent li{
	line-style:none;
	width:1200px;
	height:800px;
	padding:20px;
	float:left;
	top: 100px;
}
#container #maincontent li p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #FFF;
}
 
#scroll-buttons{
	position:fixed;
	left: 0px;
	width: inherit;
	text-align: left;
	top: 0px;
	padding: 0px;
	background-color: #4B4B4B;
	vertical-align: middle;
	height: 40px;
	z-index: 100;
}
 
 
#scroll-buttons a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	text-decoration: none;
	text-align: center;
	color: #FFF;
}
#scroll-buttons table tr {
	left: 0px;
	top: 0px;
	position: absolute;
}
 
 
 
#home{
	position:fixed;
	left: 50px;
	font-family: Verdana, Geneva, sans-serif;
}
 
#home a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 9px;
	text-decoration: none;
}
#scroll-buttons a strong {
	color: #FC3;
}