Positionering

Jag sitter och jobbar med att få positionering på en sida att fungera, det går sådär...

Hur som helst. Jag har en sida med en bakgrundsbild. Bakgrundsbilden fungerar som en fond för innehållet på sidan. Problemet är att när fönstret minskar i storlek så stannar bakgrunden men mina divar följer med förminskning eller förstorning.

Jag vill att samtliga divar ska hänga samman med bakgrunden, så att när jag scrollar upp eller ner fönstret i storlek så ska de stanna kvar, så är inte fallet.

Det ska helt enkelt se ut som en helhet och inte som en massa olika objekt som flyter omkring helt oberoende av varandra.

Koden just nu ser ut som följer:

* { 
	overflow: hidden; 
	padding: 0; 
	margin: 0; }

img { 
	overflow: hidden; 
	border: 0; }

body { 
	color: black; 
	line-height: 1.3em; 
	font-size: 13px; 
	font-family: verdana, arial; 
	background-color: silver; 
	background-image: url(../img/bg.png); 
	background-repeat: no-repeat; 
	background-position: center; 
	position: absolute; 
	margin: auto; }

a:link, a:visited { 
	font-weight: normal; 
	color: #000; 
	text-decoration: none; 
	outline: none medium; 
	text-align: left; 
	overflow: hidden; }
.float { 
	overflow: hidden; } 
.clear { 
	overflow: hidden; } 
.overall { 
	background-color: #fff; 
	z-index: 1; 
	overflow: hidden; }
#container { 
	align: left; 
	width:1000px; 
	text-align: left; 
	height: 730px; 
	overflow: hidden; 
	margin: 0 auto; 
	border-style: none; }
#header { 
	background-color: purple; 
	background-image: url(../img/header2.png); 
	background-repeat: no-repeat; 
	background-position: center; 
	text-align: center; 
	position: absolute; 
	width: 400px; 
	height: 45px; 
	z-index: 11; 
	float: left; }
#menu { 
	color: black; 
	font-size: 9px !important; 
	background-color: red; 
	text-align: center; 
	position: absolute; 
	top: 70px; 
	right: 40px; 
	width: 500px; 
	z-index: 9999 !important; 
	float: right; 
	clear: right; 
	margin: 0; 
	padding: 0; }
#content { 
	color: black; 
	background-color: orange; 
	position: absolute; 
	width: 100%; 
	height: 520px; 
	z-index: 0; 
	overflow: auto; 
	float: left; 
	margin: 0 auto; 
	padding: 10px; }
#footer { 
	color: black; 
	font-size: 10px; 
	background-color: olive; 
	background-image: none; 
	text-align:center; 
	position: absolute; 
	width: 750px; 
	height: 35px; 
	z-index: 2; 
	float: left; 
	margin-top: 60px; 
	margin-right: 20px; 
	margin-left: 40px; 
	padding: 5px; 
	border-top: 1px solid #e2e2e2; }
#start { 
	font-size: 10px; 
	font-weight: bold; 
	background-color: yellow; 
	text-align: right; 
	vertical-align: text-bottom; 
	position: absolute; 
	left: 60px; 
	bottom: 25px; 
	width: 100px; 
	height: 45px; 
	float: left; 
	margin-top: 70px; }
h2 { 
	font-size: 12pt; 
	font-weight: bold; 
	text-align: center; }

jag antar att det är container som är den div som alla andra ligger i (lite svårt att veta utan att sett koden ;)) och att bg.png är bakgrundsbilden.

Lägg den som bakgrund på container istället för body. Sen kan du rensa upp din css en hel del. Du upprepar saker i på flera ställen, t.ex textfärg och textstorlek
Ett värde som sätts för ett överliggande element gäller ju även för child-element, tills något annat anges