Member Avatar for Smudly

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>
  • 3 Contributors
  • 2 Replies
  • 205 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by teedoff
Member Avatar for haranaboy

Try doing this.

Put them into element blocks (div), and create a hierarchy of those divs.

Example: have a div container (with defined position type). Inside it, have div elements such as header, body, navigation, etc... set those elements as position: relative. And define the coordinates of those divs.

Member Avatar for teedoff

First, you have a link to a stylesheet but didnt post your CSS code. Then you have an embedded stylesheet with some divs listed that I dont see defined anywhere in your html.

As for your problem, again we would need to see all your code, or better yet a link to your site.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.