tutorial - look ma! no tables

Page 3

Refinements - Style sheet changes and adding a CSS navbar.

As you can see on this page we have made a few changes. The graphics are the same as used in the rest of the site, and there has been added a left side navigation bar. This navbar is created entirely with CSS - there are no images involved.

The first step is to move the positioning for the top and side <div>s into the style sheet, along with the page margins for NN4. This will require the use of 2 style sheets as the linked one will have a body margin "kludge" as NN4 ignores the {body margin: 0px;} that we use for all the others.

We add to our nn1.css file so that it looks like this for the body:

body{
background : url(img/work3_topslicef1.jpg);
background-color : #BCE6FE;
background-repeat : repeat-x;
color : #333333;
font : 12px Verdana,Geneva,Arial,Helvetica,sans-serif;
margin : -10px 0px 0px -10px;
}

Notice the margin for the top and left is now set at a negative number -10px. For reasons known only to itself, this causes NN4 to have body margins of 0px which is what we want.

To make a bit of space for the navigation buttons you may need to adjust the margin-left: 95px; in the #content style.

Add 2 new styles for the toplogo and sideleft <div>s. The # in front of the name specifies it as an ID and not a class. An ID can only be used once on the same page.

#toplogo{
height : 110px;
left : 0px;
position : absolute;
top : 0px;
width : 400px;
z-index : 1;
}

#sideleft{
height : 270px;
left : 0px;
position : absolute;
top : 110px;
width : 90px;
z-index : 1;
}

The HTML on the page for these 2 absolutely positioned elements is changed from:

<div id="topbg" style="position:absolute; left: 0px; top: 0px; width: 400px; height: 110px">
<div id="Layer2" style="position:absolute; width: 90px; height: 270px; left: 0px; top: 110px">

to just:

<div id="toplogo">
<div id="sideleft">

The div id name has been changed, but you can use any name you like as long as the name on the page matches the name in the stylesheet.

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

Graphics

Photos

Tutorials

Personal