tutorial - look ma! no tables

Page 2

Explanation of style sheet.

body{
background : url(img/work3_topslicef1.jpg);
background-color : #BCE6FE;
background-repeat : repeat-x;
margin : 0;
}

The body tag is defined to set the page background colour and the background graphic which repeats across the top of the page. Note the body margin set to 0px here. This is because while absolutely positioned elements <div> do not take any notice of browser default page margins, the content <div> is not absolutely positioned and measures its margins from the body - the same as tables. For this same reason the Margin Width and Margin Height are set in the body tag for NN4.

h1{
font-family : "Courier New", Courier, monospace;
font-size : 30px;
font-weight : bold;
color : #6600CC;
}

h2{
font-family : "Courier New", Courier, monospace;
font-size : 20px;
font-weight : bold;
color : #6600CC;
}

The h1 and h2 tags are defined with a monospace font, font sizes and colour, and set to bold as befits a heading.

p{
color : #333333;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
}

This style sets the font family, size, and colour for any text in a paragraph.

.box{
border : thin solid #CC9966;
font : 12px Verdana,Geneva,Arial,Helvetica,sans-serif;
margin-left : 10px;
margin-right : 10px;
padding-left : 10px;
padding-right : 10px;
padding-top : 5px;
padding-bottom : 5px;
}

The class .box is used to define the border you see around the style sheet definitions on this page and the previous page. The class in this case is applied to paragraph tags. The margin left and right specifies the spacing between the box border and the edges of the content area. The four padding values are to space the content of the box area away from the sides of the box.

#content {
color : #333333;
margin-top : 115px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 95px;
padding : 10px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
border : 1px solid #000000;
background : White;
}

The #content style sets the top of the content area at 100px from the top of the page to position it below the top graphic, and at 95px left to clear the side graphic. To allow the content area to flex, the width is not specified, instead it has the right margin set to 20px from the right side of the window. No height is set to allow the content area to expand down as necessary to accomodate the actual content but a small margin is added at the bottom to lift the content up slightly from the bottom of the window. Some padding is included to space the content material away from the sides.

And the 2nd style sheet which is imported into the page has only 1 small change, being a line height setting for the normal text, just because I think it looks better. You do not need this unless you are including other styles that NN4 does not like. Actually NN4 does understand the line-height but behaves quite unpredictably if any images are in a <td> or <p> tag that has a line-height set, so to be on the safe side I left them out of the main style sheet.

p{
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
color : #333333;
line-height : 18px;
}

Using 2 (or more) style sheets on a page:

The last style sheet in a series over-rides any styles declared in the previous style sheets, or adds new ones. Because NN4 does not recognise an imported style sheet this is used to advantage for including styles that cause NN4 to behave badly.

The main style sheet containing all the styles that are acceptable to all browsers, including NN4, are in the first linked style sheet. Further styles are added with an imported style sheet. On the page, the code looks like this:

<link rel="stylesheet" href="nn1.css" type="text/css">
<style type="text/css">
<!--
@import url(tut1b.css);
-->
</style>

For further reading and tutorials visit The Dreamweaver FAQ site.

You can see some "real" pages using this technique - The Cream Trip.

Continue for enhancements to this page.

Notes:

This tutorial uses a mixture of absolutely positioned <div>s (Layers in DW speak), and the content area positioned by setting the margins. I have found that this combination causes a problem in Netscape 6.1 by making it forget the top margin if the absolutely positioned layer code comes before the content area code on the page. Everything is okay as long as the layer code is at the end of the page.

<---- Back | Next ---->


Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | PSP 1 | PSP 2
No tables 1 | No tables 2 | No tables 3 | No tables 4 | No tables 5

Home | Photos | Photo Gallery | My Blog | Personal | Tutorials | Contact

Copyright © Denis Wilford 2001-2014.

Creative Commons License
This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Top graphic - Mt Ruapehu.
Side graphic.