Introduction

Here are some suggestions for basic xhtml page stying with a css style sheet using <div> tags (layers).

Sample code

This sample code employs a "container" <div> tag/box to contain and centre the whole site in a browser window, together with 3 <div> tag/boxes inside it (pagetitle, navigation, contentbox).

<div id="pagetitle">
<h1>Matt's Fish Shop </h1>
</div>

<div id="navigation">
<p><a href="sea.htm">Sea fish</a> </p>
<p><a href="freshwater.htm">Freshwater fish</a> </p>
</div>

<div id="contentbox">
<p>Welcome to the best fish shop on the net!</p>
</div>

</div>
</body>

Styles for the above code

Sizing and centering web site pages in a browser window

Create a ("container") div tag to define the site size and centre all your pages.

Positioning Type = relative

Width and Height = 760 x 490 (15" monitors) or 900 x 600 (17" monitors)

Margin left = auto

Margin right = auto

Background colour = choose a temporary colour so you can see the resulting box whilst you're making layout decisions

Body tag attributes/settings

Font (define the font for the whole site here)

Background colour (define the colour of the browser window)

Text tags

Style your paragraph text (p) and headings (h1, h2, h3 etc) with ...

Type size

Type weight

Line height

Type colour

Margin top

Margin bottom

If you have specified a site wide font in the body tag, you will not need to repeat that specification in individual text styles.

Additional div tags (nested within the "container" div tag) attributes/settings

Create boxes to position various page elements such as navigation bars, page title and content boxes. Our code uses "pagetitle", "navigation" and "contentbox".

Positioning type = absolute

Width = ?

Height = ?

Placement = use pixel values to place your box. Be careful NOT to specify left AND right or top AND bottom

Z-index = higher numbers are on top, lower numbers are underneath

Background colour = choose a temporary colour so you can see it whilst you're making layout decisions

Background image = select a jpeg or gif you have prepared and saved in your local site folder.