Content moving when screen resizes

Smudly · October 27, 2010

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 -->
<div id="container">




</div>

<!-- Footer -->
<div id="footer">


</div>



</body>
</html>

haku · October 27, 2010

Get rid of all the absolute and relative positioning, and then do some tutorials on positioning with floats.

Sign In

Content moving when screen resizes

Recommended Posts

Smudly

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information