tutorial - look ma! no tables

Page 4

Changes to the second imported stylesheet.

Since we have changed the body margins in the first style sheet to -10px for NN4 we need to add a body style in the @import style sheet for newer browsers that do understand the body margins correctly.

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

Because of the cascading propery of stylesheets we could just have the changed margin setting and left out the other declarations that are unchanged from the first style sheet, but I have them all included for clarity.

The navbar

Using only CSS to build a rollover navbar is a very interesting exercise. The rollover effect doesn't work in NN4, but never the less the buttons still look good enough.

The buttons are positioned on the page using an absolutely postioned <div> set up in the linked style sheet:

height : 200px;
left : 5px;
position : absolute;
top : 200px;
width : 115px;
z-index : 10;

A z-index of 10 has been included just to make sure it sits on top of everything else.

The navigation buttons are all set up in the style sheet - one class for the button shape and style, the 4 psuedo classes for the link states of unvisited, visited, hover, and active. All you will see in the page source for these nav buttons is a set of paragraph tags with links.

<div id="nav">
<p class="nav1"><a href="../../index.html">Home</a></p>
<p class="nav1"><a href="../index.html">Graphics</a></p>
<p class="nav1"><a href="../../photo/index.html">Photos</a></p>
<p class="nav1"><a href="../../web/index.html">Web</a></p>
<p class="nav1"><a href="../../personal/index.html">Personal</a></p>

Very nice and tidy, no? Simplicity itself to change or add links - just type them in and hey presto, the nav buttons are there for you.

Let's now look at the CSS needed to make it all work.

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