DWMX and CSS-P Tableless Tutorial

What no Tables? Why use CSS-P?

This is a tutorial using CSS to position a document. Using CSS to position a layout separates our document structure from our design in a logical manner, thus enabling a variety of browsers (such as text-only browsers or screen readers) to read the page in a logical order. When a text-only browser reads the contents of a table, it reads it as though it were a spreadsheet, working along row by row, and displaying the content on that basis. This may cause problems, especially if you're using complex, nested tables.

This tutorial is geared to be a no-fail instructional on creating one particular page. CSS positioning is complex and frustrating until you get the hang of it. This tutorial attempts to give you some insights into the whys and wherefores of positioning so that you your future implementations will be less frustrating.

Note: Browsers prior to version 4, will not display CSS-P (layer positioning), and Netscape 4.0 does not fully support CSS 2.

*Click here to see the finished page.

Why use XHTML?
XHTML is extensible HTML rewritten to be compliant with XML rules. HTML will eventually be phased out and replaced with XHTML/XML. XHTML pages can be read by all XML enabled devices. While waiting for the rest of the world to upgrade to XML-supported browsers, XHTML gives you the opportunity to write "well-formed" documents now — documents that work in all browsers and that are backward browser compatible!
(excerpt from: http://www.w3schools.com/xhtml/xhtml_why.asp)

Let's get started...

Create a new XHTML compliant document (Ctrl+N).

screenshot xhtml document

Save as: tableless_layout.html. Don't forget to title your document!

Add 1 heading: <h1>Dreamweaver MX</h1>
Add 2 paragraphs for content and insert some dummy filler text
Add 1 paragraph for the copyright text: <p>© 2005 - Your name</p>
Add 6 paragraphs for each link:
<p>Week 1</p>
<p>Week 2</p>
<p>Week 3</p>
<p>Week 4</p>
<p>Week 5</p>
<p>Week 6</p>

Your document should look like this:

< !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>Tableless Layout</title>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< /head>
< body>

<h1>Dreamweaver MX</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

Creating the Document Structure:

Next, add the <div> tag to each individual section, (wrapping each section in its own id).

We will have 2 id sections, named as follows:

id="content"
id="nav"

In Code View, go ahead wrap the 3 paragraphs, two for content and one for the copyright information inside the div tag with the id content, type in
<div id="content"> be sure to add the closing </div> tag after the copyright paragraph.
Next hand code a class style called copyright into the paragraph with the copyright text.
<p class="copyright">© 2005 - your name</p>
Wrap the 6 paragraphs for links with the <div id="nav"> tag, don't forget the closing </div> tag.
Next, hand code in a class style called navp to each paragraph enclosed within the nav id and add a null link to each week contained in the paragraph.
Example:
<div id="nav">
<p class="navp"><a href="#">Week 1</a></p>
<p class="navp"><a href="#">Week 2</a></p>
<p class="navp"><a href="#">Week 3</a></p>
<p class="navp"><a href="#">Week 4</a></p>
<p class="navp"><a href="#">Week 5</a></p>
<p class="navp"><a href="#">Week 6</a></p>
</div>
The last thing we need to do is add the Netscape Resize Fix. From the Menu bar go to Commands > Add/Remove Netscape Resize Fix. This fix aids NN4x to resize our layers correctly.

Here is what your code will look like now:

<body>

<h1>Dreamweaver MX</h1>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="copyright">© 2005 - Your name</p>
</div>

</body>
</html>

This completes the basic document structure.

We're now ready to format our page with CSS!

Create a new CSS document: File > New > Basic Page > CSS
Save as: tableless_style.css and attach (link) the CSS file to the document tableless_layout.html.
Let's define the body selector first.
Create the following:

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 100%;
color: #ffffff;
background-color: #003366;
background-image: url(bck_tableless.gif);
background-repeat: repeat-x;
}
What does this rule mean?
The background color is defined as #003366 (blue), and the background image is 20W x 95H, by defining the rule: background-repeat: repeat-x, I'm telling the background image to tile horizontally.
Next we need to define our font styles for our page.
Create the following:

div, p { font-family: Georgia, "Times New Roman", Times, serif;
font-size: 90%;
color: #ffffff;
}

What does this rule mean?
All the text within the p and div tags will have the font Georgia, with the font size of 90%, and the text color is #ffffff (white).
Next we need to define the h1 selector.
Create the following:

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #009900;
font-size: 150%;
margin-left: 35px;
margin-top: 25px;
padding: 0 0 5px 0;
}

What does this rule mean?
The font-family is Georgia, the text color is #009900, the font-size is 150%, the left margin is set at 35 pixels, the top margin is set at 25 pixels, the top, right and left padding are set at zero, the bottom padding is set at 5 pixels to add a little space underneath the heading. Padding is used to add space around the element.
Note: You may be wondering why the font is being defined again instead of inheriting from a parent element. Too many browsers, Netscape 4 in particular, don't follow the rules of inheritance correctly. Rather than run the risk that some or all browsers will honor rules of inheritance, many developers choose to code more conservatively by specifying fonts for each element in a stylesheet.
Now we need to define the content id.
Create the following:

#content {
position: absolute;
left: 180px;
top: 135px;
padding-right: 60px;
padding-left: 15px;
border-left-width: 1px;
border-left-style: dashed;
border-color: #ffffff;
}

What does this rule mean?
The content is positioned at 180 pixels to the left and from the top at 135 pixels. I've added padding to the right of 60 pixels, padding left of 15 pixels. I've added a border style to the left which creates a nice separating line between the nav buttons and the content area. The dashed border does not work in NN4x instead you will see a solid border line.
Now we need to define the navigation area contained within the id nav.
Create the following:

#nav {
position: absolute;
left: 40px;
top: 135px;
width: 125px;
padding-right: 10px;
}

What does this rule mean?
The navigation area is positioned at 40 pixels to the left and from the top at 135 pixels. The width is defined as 125 pixels. I've added some padding to the right of 10 pixels.
Each link is contained within a set of p tags and we need to define a class style for that p tag.
Create the following:

.navp {
width: 120px;
height: 25px;
text-align: center;
border: 1px solid #ffffff;
background-color: #009900;
color: #ffffff;
}

What does this rule mean?
The class style is called navp. The width for each p tag will be 120 pixels and the height is 25 pixels. The text within this area will be centered. Each p tag area will have a 1 pixel white border. The background color is #009900 (green), and the text color is #ffffff (white).
Now we need to create a style for our links.
Create the following:

.navp a {/*/*/
display: block;
/**/ }

What does this rule mean?
The links are set to display: block which creates the entire area within our link to be clickable. I found if you don't add this rule you won't be able to hover the link style correctly in Netscape 7, Opera 7 and Mozilla. We have added the double comment tags around this rule to block out NN4x which has problems rendering this rule correctly.
Create the following rules which define our contextual pseudo links:

.navp a:link, .navp a:visited {
width: 120px;
height: 25px;
text-decoration: none;
color: #ffffff;
background-color: #009900;
}

What does this rule mean?
The width and height for our links are set at 120W x 25 H pixels. The text-decoration is set to none which takes out the underline in our links. The text color is #ffffff (white) and the background color is #009900 (green).

.navp a:hover {
color: #009900;
width: 120px;
height: 25px;
background-color: #ffffff;
text-decoration: none;
}

What does this rule mean?
The hover link text color is set at #009900 (green). The width is set at the same size as the links above. The background color is set at #ffffff (white) and the text-decoration is set at none which takes out the underline in our links. The hover style does not work in Netscape 4x, and doesn't fully work in Opera 6. It does work in IE 6, Netscape 7, and Opera 7.
Next we need to create a style for the copyright text.
Create the following:

.copyright{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
font-weight: bold;
color: #00cc00;
text-align: right;
padding-top: 4px;
padding-bottom: 10px;
}

What does this rule mean?
The copyright paragraph is defined with the font Verdana, the font size is set at 75%, the text will be bold, the font color is #00cc00 (green), the text will be aligned right. I've added a some top padding of 4 pixels which creates a little space between the border and the text and a bottom padding of 10 pixels to add some space underneath.

That's all there is to this page; not a table to be found, nor did I have to create a separate style sheet for Netscape 4x! My goal here was to create a simple page using CSS positioning; as you know this can be quite complex and frustrating to accomplish, especially when trying to make your page compatible with different browsers. This page has been tested in the following browsers: IE 6.0, Netscape 7, Netscape 4.79, Mozilla, and Opera 7.11.

Note: One last thing, Modify this page at your own risk! You can change the background image and background color, and the font styles, and you can add more content, but don't modify the navigation buttons. A word of warning, I have found when testing this page that adding borders to certain elements can cause a lot of problems.

Resources
Now that you have your feet wet, there are some excellent CSS tutorials that you might like to try:

[ Top ] ~ [ JaybirdsWeb ]

Enjoy,

Jaybird

DREAMWEAVER MX CSS-P Tutorial

What no Tables? Why use CSS-P?