...

View Full Version : Content moving when screen resizes



Smudly
10-27-2010, 04:05 AM
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>

Mad_Designer
10-27-2010, 12:15 PM
by saying you want them to stay in place do you mean you want them as static?
because at the moment they are dynamic?

Smudly
10-27-2010, 05:44 PM
Basically I need it to be fluid. Yes I think static is what I need. Right now, for example, this one image will be on the top right, but when the screen resizes, instead of just hiding the image because the window is too small, it moves the image onto the next line.

teedoff
10-27-2010, 05:53 PM
If I understand you correctly, you should look into fluid layouts. Instead of using pixels for widths and heights of elements, percentages work much better.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum