So far, we've explored using CSS for some aspects of page layout- using width, padding, and float attributes. Let's look at some more advanced CSS placement techniques, and also some legacy methods for arranging content on your pages.
Using Dreamweaver's starter pages (CSS pages)
Fortunately, as CSS becomes more challenging, we have the option of using many preformatted page designs in Dreamweaver.
1. Create a new site project with a new root folder, and title it with today's date.
2. Go to File-New. From the list of layouts, choose '2 column, elastic, left sidebar, header and footer'. Set the 'Layout CSS button to 'Create New File' and click 'Create'.
3. Save "twoColElsLtHdr.css" to your root folder. A new untitled document will open on your screen with the specified layout. Save it to your root folder as 'index.html'
4. Examine the CSS in the CSS Styles panel. Notice how the styles 'cascade' downwards from body, to .twoColElsLtHdr #container, etc.
5. Change the view of your document from 'Design' to 'Code' view. Notice how text itself is formatted using the standard tags (p, h1, h2, etc.) inside of the custom positioning tags (container, header, sidebar1, etc).
Here is a modified view of the code. The standard tags are in blue, quotes (notes about the code) in grey, and visible text in bolded black.
For purposes of clarity, the body tag and positioning tags have been color coded differently, and line breaks inserted between the different areas of the page. (your document will look different in Dreamweaver).
Note the quoted (grey lines beginning with /*) section in the head of the document that describes how to make the css code Internet Explorer compatible. The Conditional comment referred to starts with <!--[if IE]> and ends with <![endif]-->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="twoColElsLtHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body class="twoColElsLtHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Notice how the body tag is followed by the container tag, and all other styling elements open and close inside this container.
At the end of the document, we close out the container, and then the body. This is referred to as a nested page structure.
Now, go back to 'index.html' and examine the individual styles in the CSS Styles panel.
Notice how the body is set to margin=0, padding=0. This overrides any defaults that might interfere with with the centering our layout. The body style also defines the font family that the page will display (this can be overriden within the other div elements).
The container defines the box that encloses our header, sidebar, mainContent, & footer div elements.
Now examine these other css styles. Note how each positioning element contains background, margin, padding and other properties.
Experiment with adding or modifying the properties to customize the page.
Next: Tables