Hi, I am currently creating the template for a website I am working on. When I resize the window, the Links and the top right image move out of place. I need these to stay in place no matter what size the window is or what resolution is using. What am I doing wrong?
Here's my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="description" content="Bed Bug & Dust Mite Services - Mattress Doctor">
<meta name="keywords" content="bed,bug,dust,mite,mattress,cleaning,service,doctor,saint,george,utah">
<meta name="author" content="Mattress Doctor - We clean mattresses to destroy and remove dust mites and bed bugs!">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Mattress Doctors</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<style type="text/css">
#header{
height: 130px;
background:url(../img/header.gif);
width: 100%;
}
#headleft{
width: 40px;
height: 130px;
background:url(../img/header.gif);
float: left;
}
#logo{
width: 222px;
height: 130px;
text-align: center;
position: relative;
overflow: hidden;
}
#slogan{
width: 602px;
height: 130px;
float: left;
}
#schedule{
position: absolute;
right: 0px;
top: 20px;
width: 200px;
height: 130px;
text-align: center;
overflow: hidden;
}
#nav{
position: absolute;
top: 130px;
width: 100%;
height: 40px;
background:url(../img/nav.gif);
text-align: center;
}
#link{
float: left;
}
#container{
height: 600px;
background:url(../img/bg.gif);
}
body{
font-weight: bold;
margin: 0px auto;
}
img{
border: none;
}
</style>
</head>
<body bgcolor="#ffffff">
<!-- Header -->
<div id="header">
<div id="headleft"></div>
<div id="logo"><img src="img/logo.png" alt="Mattress Doctors"></div>
<div id="slogan"></div>
<div id="schedule">1-800-Bug-Free<br><a href="schedule.php"><img src="img/schedule.png" alt="Schedule Service"></a></div>
</div>
<!-- Nav -->
<div id="nav">
<a href="home.php"><img src="img/home.gif"></a>
<a href="problem.php"><img src="img/problem.gif"></a>
<a href="solution.php"><img src="img/solution.gif"></a>
<a href="process.php"><img src="img/process.gif"></a>
<a href="faq.php"><img src="img/faq.gif"></a>
<a href="contact.php"><img src="img/contact.gif"></a>
</div>
<!-- Content --> …
