Okay so this is my first html/css/javascript website. I am not sure what’s going wrong basicly I used css to make the background image fit, then I tried to add an image link using
<div id="project_button" style="position:relative; top: 1000px; left: 1000px" >
the result being 1000 pixels of scroll room on the horizontal scroll bar.
There are similar results when I try to edit the location with
margin-left:1000px
margin-top: 1000px
Except it will be the vertical scroll bar that has extra room.
<html>
<head>
<title>Home Page</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var button1_up = new Image();
button1_up.src = "project1.gif";
var button1_over= new Image();
button1_over.src = "project2.gif";
}
function over_button(){
if (document.images) {
document["buttonOne"].src = button1_over.src
}
}
function up_button() {
if (document.images) {
document["buttonOne"].src = button1_up.src
}
}
//-->
</SCRIPT>
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute;
padding-right:800px;
margin-right:-800px;}
#project_button {position:static;}
</style>
<![endif]-->
</head>
<body>
<div id="page1" style='position: relative'>
<div id="bg"><img src="WebBacking.jpg" width="100%" height="100%" alt="">
</div>
<div id="project_button" style="position:relative; top: 1000; left: 1000" >
<a href="projects.html" onMouseOver="over_button()"
onMouseOut="up_button()">
<img src="project1.gif" alt="click me"
width="1800" height="200" name="buttonOne"
border=0>
</a>
</div>
</div>
</body>
</html>
This is the rest of my code. Any help is appreciated.
btw when I scroll vertically or horizontally the background still fits but because the image’s location is static it moves when scrolling. I should also mention that when i set
top: 0; left:0;
the scroll bar is removed. this also goes for top-margin.
If you don’t want a scroll bar at all in certain elements add
overflow:hiddento the css. this way everything outside the element will be clipped, and no scroll bars are visible.