CSS Best Practices : Indentation Alignment
Contents |
[edit]
Scenerio
[edit]
Page A Mockup
... to come later (heh, how ironic)
[edit]
Page A Code
...
[edit]
Option 1: Indentation applied directly to text elements: H1, P, etc
... to come later
[edit]
Option 2(preferred): Indentation classes applied to blocks: DIV.indent
The result can be seen: http://www.chadlindstrom.ca/resources/examples/practices-margins/sampleA.html
<!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" xml:lang="en" lang="en" >
<head>
<title>Page A</title>
<style type="text/css">
@import url(../_global_styles/basic.css);
#main-content {}
</style>
</head>
<body>
<div id="content">
<h1>Page A Title</h1>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
<h2>Page A Sub-Title</h2>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
<h3>Page A Sub-Sub-Title</h3>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
</body>
</html>
[edit]
Page B Mockup
... to come later (heh, how ironic)
[edit]
Page B Code
...
[edit]
Option 1: Indentation applied directly to text elements: H1, P, etc
... to come later
[edit]
Option 2(preferred): Indentation classes applied to blocks: DIV.indent
The result can be seen: http://www.chadlindstrom.ca/resources/examples/practices-margins/sampleB.html
<!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" xml:lang="en" lang="en" >
<head>
<title>Page B</title>
<style type="text/css">
@import url(../_global_styles/basic.css);
#main-content {}
p.intro {
color:#777;
font-size:110%;
margin-bottom:2em;}
.alert {
border:0.1em solid red;}
.feedback {
margin:0;
padding:0;}
.feedback.alert {
border-width:1em;}
.feedback .content {
margin:1em;}
.feedback .content h4 {
font-weight:bold;}
.indentL1 {
margin-left:1em;}
</style>
</head>
<body>
<div id="main-content">
<div class="indent indentL1">
<h1>Page B Title</h1>
<p class="intro">
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
<div class="feedback alert">
<div class="content">
<h4>Inner Feedback Title</h4>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
</div>
<div class="indent indentL1">
<h2>Page B Sub-Title</h2>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
</div>
</body>
</html>
[edit]
Page C Mockup
... to come later (heh, how ironic)
[edit]
Page C Code
...
[edit]
Option 1: Indentation applied directly to text elements: H1, P, etc
... to come later
[edit]
Option 2(preferred): Indentation classes applied to blocks: DIV.indent
The result can be seen: http://www.chadlindstrom.ca/resources/examples/practices-margins/sampleC.html
<!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" xml:lang="en" lang="en" >
<head>
<title>Page C</title>
<style type="text/css">
@import url(../_global_styles/basic.css);
#main-content {}
.promo {
margin:0;
padding:0;}
.promo.text {
border-left:2em solid #DDD;}
.promo .content {
margin:1em;}
.promo .content h4 {
font-weight:bold;}
.indentL3 {
margin-left:3em;}
</style>
</head>
<body>
<div id="main-content">
<div class="indent indentL3">
<h1>Page C Title</h1>
<p class="intro">
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
<div class="promo text">
<div class="content">
<h4>Inner Feedback Title</h4>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
</div>
<div class="indent indentL3">
<h2>Page C Sub-Title</h2>
<p>
Dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit molestie consequat, vel
illum dolore eu feugiat nulla.
</p>
</div>
</div>
</body>
</html>
This page has been accessed 2,269 times. This page was last modified 06:06, 13 May 2006.