html - hjælp til layers - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #14698 @ 13.02.09 13:00

Hej alle,

Jeg sidder og arbejder på et website.

Mit design består af en wrapper som altid centrerer layoutet midt i browseren.

Link

Som vist på billedet (linket) ligger der en grå boks (markeret med de blå pile) henover mit layout.

Jeg ved at jeg skal hen og arbejde med layers & postisions, men har aldrig rigtig forsøgt mig med det før.. (Har altid arbejdet med floating)

Mit spørgsmål er:

Hvordan får jeg layoutet til altid at være centreret, samtidig med at den grå boks altid ligger OG følger mit "hovedlayout".

Har lagt en side op her hvor det kan ses...
Vil gerne have den grå boks til at følge med resten af layoutet

Eksempel

Håber min forklaring kan forstås

Mikkel

Indlæg senest redigeret d. 13.02.2009 13:17 af Bruger #14698

Bruger #5789 @ 13.02.09 13:31

640

prøv:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Untitled Page</title>
	<style type="text/css">
		@import 'http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css';
		
		html
		{
			height: 100%;
			background-color: Gray;	
		}
		
		body
		{
			padding-top: 150px;			
			height: 100%;		
		}
		
		#Menu, #MainContent
		{
			width: 960px; 
			margin: 0 auto;
		}	
	
		
		#Header
		{
			width: 100%;
			height: 150px;
			position: absolute;
			top:0px;
			padding:0px;		
			border-bottom: 1px solid red;		
		}
		
		#Menu li
		{
			margin-top: 120px;
			float:left;
			height: 30px;
			background-color: Black;
			color: White;
			margin-right: 10px;		
			padding: 0px 3px;		
		}
		
		.Content
		{
			min-height: 300px;
			background-color: #ccc;
			position: relative;
		}
		
			.Content .SpecialBox
			{
				position: absolute;
				border:1px solid blue;
				width: 400px;
				height: 300px;
				bottom: -100px;
				right: 100px;
			}			
		
		.Footer
		{
			margin-top: 10px;
			min-height: 200px;
			background-color: red;
		}
		
		.ClearFix:after{	content:".";	display:block;	height:0;	clear:both;	visibility:hidden;} /* WinIE7 only */*:first-child+html .ClearFix{	height:1%;} /* WinIE6 and below *//*¥*/* html .ClearFix{	height:1%;}/**/ /* MacIE only *//*¥*//*/.ClearFix{	display:inline-table;}/**/
		
	</style>
</head>
<body class="ClearFix">	
	<div id="MainContent" class="ClearFix">
		<div class="Content">
			Indhold
			<div class="SpecialBox">
				Indhold
			</div>
		</div>
		<div class="Footer">
			Footer
		</div>		
	</div>	
	<div id="Header" class="ClearFix">
		<ul id="Menu" class="ClearFix">
			<li>Menu Item</li>
			<li>Menu Item</li>
		</ul>			
	</div>					
</body>
</html>

hjælp til layers

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler