tutorial - look ma! no tables

Page 1

This page has been made with no tables, using only CSS to position the page elements. With thanks to MaKo for inspiration from her CSS Tutorials at http://www.mako4css.com/

Some changes had to be made to the original design using tables, because there are no longer table cells to put background graphics inside, and the 3 graphics used needed a small change from the original graphics. The white area on the top and side graphics, and the top background graphic have a blue border instead of a white border to match the body background colour which sets the surrounding colour.

To make this page I have used 2 absolutely positioned <div> elements to hold the top and left side graphics. The page content area position is defined in the style sheet. Instead of using a fixed position, I have set the top, left and right sides, and bottom positions by setting the margins from each side. By using relative side positions allows the content area to expand or contract with the browser window. The top background graphic is actually the page background, set to repeat only across the page. Remember, no table cell for a background now.

First, set up the 2 absolutely positioned <div> elements on the page. In common parlance, and in Dreamweaver, <div> tags using CSS positioning are known as "Layers", not to be confused with the proprietary Netscape 4 <layer> tag.

Drag out two layers on to the page, set the first one so:
Top = 0px
Left = 0px
Width = 400px
Height = 110px

and the second one so:
Top = 110px
Left = 0px
Width = 90px
Height = 270px (or the height of your side image)

Insert the top graphic in the first layer, and the side graphic into the 2nd layer. The rest of the page is set up in an external style sheet linked to the page. I have actually used 2 style sheets to allow for a couple of Netscape 4 vagaries. The first linked style sheet has all the styles defined that will work for Netscape 4, and other CSS capable browsers, with a 2nd style sheet imported that has a slightly different style. Since Netscape 4 does not recognise an imported style sheet, styles that would otherwise upset NN4 can be included here for the other browsers

The main linked style sheet is listed here:
(without the URL link styles to keep it clearer).


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

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;
}

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

.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;
}

#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;
}


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.


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


Care needs to be taken with the path in the stylesheet to the body background image - the correct path should be read from the stylesheet location, but Netscape 4 reads it from the page location. In this case, the stylesheet is in the same directory as 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.

Mt Ruapehu, New Zeland.