Så här
kan ett markup-upplägg se ut.
Kod:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="content" content="editplus" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="master.css" type="text/css"/>
</head>
<body>
<div id="page">
<div class="wrapper">
<div id="header">
<h1>Donec ut augue et volutpat</h1>
</div><!-- #header end -->
<div id="content" class="content-left">
<h2>Etiam vestibulum nibh amet<br/>
rubrik på flera rader</h2>
<p>Morbi et nulla. Ut faucibus. Suspendisse potenti. Donec vestibulum enim. Cras id dolor sed ligula lacinia vehicula. Fusce ligula. Nunc condimentum ipsum ut dolor. Etiam malesuada. Nulla dictum congue nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pretium quam a massa.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam egestas metus vitae leo. Morbi elementum vulputate sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in mi at libero dignissim molestie. In malesuada lacinia nisi. Praesent placerat consequat nisl. Praesent mi nulla, pellentesque quis, mattis vel, iaculis quis, sem. Etiam congue mauris at massa. Nunc massa quam, commodo quis, malesuada non, elementum at, nibh. Nulla erat libero, malesuada id, vestibulum quis, nonummy in, dolor. Ut sapien nunc, placerat vel, faucibus sed, accumsan at, tellus.</p>
<h3>Nam lobortis viverra fusce</h3>
<p>Donec ornare ante semper nisl <a href="http://" title=""><span>sollicitudin vulputate</span></a>. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>
<h4>Cras vulputate mollis amet</h4>
<p>Morbi placerat odio eu turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tempor. Donec non lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur odio purus, posuere sit amet, porttitor ut, convallis sed, massa. Donec consequat lobortis ipsum. Sed imperdiet ipsum at elit. Integer eu metus. Duis sit amet magna. Nullam lacinia leo et est. Nam pretium. Duis et nisl. Etiam volutpat ante eget lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque urna neque, mattis non, euismod eget, hendrerit et, metus. Quisque tincidunt neque id libero laoreet placerat.</p>
</div>
<div id="secondary-content" class="content-right">
<div class="boxes">
<h3>Etiam vestibulum nibh amet</h3>
<p>Morbi et nulla. Ut faucibus. Suspendisse potenti. Donec vestibulum enim. Cras id dolor sed ligula lacinia vehicula. Fusce ligula. Nunc condimentum ipsum ut dolor. Etiam malesuada. Nulla dictum congue nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pretium quam a massa.</p>
</div>
<div class="boxes">
<h3>Nam lobortis viverra fusce</h3>
<p>Donec ornare ante semper nisl <a href="http://" title=""><span>sollicitudin vulputate</span></a>. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>
</div>
</div>
<div class="clearall"></div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<h3>Nam lobortis viverra fusce</h3>
<p>Donec ornare ante semper nisl <a href="http://" title=""><span>sollicitudin vulputate</span></a>. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>
</div>
</div>
</body>
</html>
Sedan css-filen bör vara bra strukturerad så man hittar.
Först bör man reseta alla stilar för att sedan ange de generella stilarna.
Sedan lägger man in undantagen, dvs rubrikerna i footern eller headern kanske inte skall se likadant ut som i content?!
Lite länkar:
http://meyerweb.com/eric/thoughts/2008/01/...esetting-again/
http://www.erraticwisdom.com/2006/01/18/5-...nizing-your-css