Opdeling af body

Body parts

<body>
	<div id="page">
		<div id="header">
		</div> <!--end header-->
		<div id="globalnav"> 
		</div> <!--end globalnav-->
		<div id="main"> 
		</div> <!--end main-->
		<div id="footer"> 
		</div> <!--end footer-->
	</div> <!--end page-->
</body>

Body flesh

Lidt tekst indhold i forskellige formater

<div id="page">
	<div id="header">
		<h1>header </h1>
	</div> <!--end header-->
	<div id="globalnav">
		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">link2</a></li>
			<li><a href="#">link3</a></li>
		</ul>
	</div> <!--end globalnav-->
	<div id="main">
		<h1>main </h1>
		<h2>main </h2>
		<h3>main </h3>
		<p>main afsnit<br />
			main efter linieskift </p>
		<p>main nyt afsnit </p>
		<ul>
			<li>liste punkt 1</li>
			<li>liste punkt 2</li>
		</ul>
	</div> <!--end main-->
	<div id="footer">
		<p>footer</p>
	</div> <!--end footer-->
</div> <!--end page-->

Body paint

layouts-1a

De første 2 regelsæt er overordnet formatering, de kan selvfølgelig ændres (og undværes). De sørger dels for en grundformatering af elementer og dels for en gennemgående ensartethed på tværs af browsere.

Alle div’s med id har hver især fået en min-height: værdi; og en background-color: værdi;, for at gøre dem synlige med fylde og farve, selvom du skulle have valgt at lade dem være tomme for indhold. Uden noget indhold eller styling ville de ellers forblive usynlige.

/*Sæt generelle font-egenskaber for dokumentet*/
body {
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 12px;
	line-height: 150%;
	margin: 0px;
	padding: 0px;
	background-color: #4a0b01;
}
/*Neutraliser vigtigste browser-font-forskelle*/
h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 10px 20px;
}
#page {
	background-color: #999;
}
#header {
	min-height: 100px;
	background-color: #78B;
}
#globalnav {
	min-height: 80px;
	background-color: #FD6;
}
#main {
	min-height: 300px;
	background-color: #FFF;
}
#footer {
	max-height: 50px;
	background-color: #D44;
}

Komposition

#page i browseren

Siden er “flydende” i browseren, det ses ved at trække i dens nederste hjørne.
Følgende figurer viser ændringer foretaget udelukkende ved at style på “#page”-selectoren.
Forskellige kombinationer af width-værdi og margin-værdi. Se om du kan ramme tilsvarende kombinationer..

Indenfor #page

De løse dele, som alle ligger i #page, ompusles i variationer. Dette gøres her først og fremmest med en kombination af width og float på den ene side og margin på de “float-påvirkede” elementer, samt “clear:both;” på de elementer, der skal gå fri af omløbet.