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
  • 217 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

The moving elements are a positioning-context problem. Absolute-positioned items are placed relative to the nearest ancestor that has a position other than static. In the posted CSS the top-right block is absolutely positioned but the header itself is not a positioned ancestor, so the element ends up positioned relative to the page/viewport and drifts when the window is resized. The simplest, least-invasive fix is to make the header a positioning context and avoid using absolute positioning for the nav bar.

A minimal change that will stabilise the header children:

#header {
  position: relative;
}

/* optional: center a fixed-width layout so elements don't shift across resolutions */
#wrapper {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

/* prevent images from overflowing when the viewport shrinks */
img { max-width: 100%; height: auto; display: block; }

Other practical notes: keep the nav in normal flow (no position:absolute with a hard-coded top value) so it always sits after the header; absolute positioning removes elements from the flow and requires extra maintenance when heights change. If a fixed layout is required across resolutions, wrap the header content in a centered fixed-width container and position children relative to that container. Also add a simple reset like html, body { margin: 0; padding: 0; } and use the browser inspector (outline boxes, computed styles) to confirm which element is forming the positioning context.

This complements ’s container idea and answers ’s call for the missing CSS detail: the header needs position: relative to anchor its absolutely positioned children (which is the root cause of ’s symptom).

Recommended Answers

All 2 Replies

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.