This page uses CSS to present the content in the best possible manner. If you can see this message, then CSS (or JavaScript) is not enabled in your browser, and the page will not appear as intended.

tutorial - look ma! no tables

Page 5

CSS for the nav buttons.

First of all we set up a basic button shape - this is in the linked style sheet for NN4.

.nav1 {
background-color : #FFFFF0;
border : 1px solid;
font-family : Verdana, Arial, Tahoma, Helvetica, sans-serif;
font-size : 15px;
font-weight : 600;
margin : 0.1px;
padding : 2px 2px 5px 5px;
width : 95px;
}

Then the link styles, again only for NN4.

.nav1 a{
color : #2F4F4F;
text-decoration : underline;
}

.nav1 a:visited{
color : #2F4F4F;
text-decoration : underline;
}

That is all we need for NN4 since it does not understand the other states. I have left the links underlined to make it clear to the visitor that only the actual text is the link. In IE, NN6 and Opera the whole button is clickable just like a graphic button.

Turning our attention to the real buttons in the @import style sheet.

A couple of changes to the .nav1 class for the button shape:

.nav1 {
background-color : #B2D8EF;
border : 2px ridge #32CD32;
font-family : Verdana, Arial, Tahoma, Helvetica, sans-serif;
font-size : 15px;
font-weight : 600;
margin-bottom : 5px;
margin-top : 0px;
padding : 0;
width : 95px;
}

In the NN4 style I have used a lighter background, and a solid border because it looked better in NN4 than the border and background color I really wanted.

Now we get to the more interesting link behavious - making the buttons act like rollover buttons.

.nav1 a{
background-color : #B2D8EF;
color : #2F4F4F;
display : block;
padding-bottom : 1px;
padding-left : 3px;
padding-top : 1px;
text-decoration : none;
width : 93px;
}

This sets up the basic link button, the <a> tag - the trick to making the whole button act as a link is the display:block;

You will notice that we have defined the <a> tag, and not a:link as we would normally do when defining the set of 4 link states. This is needed for the whole button to be clickable in Opera as in IE and NN6.

The width is adjusted to less than the .nav1 button size to allow for the padding of 3px on the left. You can adjust this as you wish, of course, but to keep it neat you will need to pay attention to the relationship between the width set in this style and the width set in the basic button style, set in .nav1.

All we need for the other 3 states is any change in background color or text color.

.nav1 a:visited{
color : #2F4F4F;
text-decoration : none;
}

.nav1 a:hover{
background-color : #EEE8AA;
color : #2F4F4F;
text-decoration : none;
}

.nav1 a:active{
color : #2F4F4F;
text-decoration : none;
}

You can use a graphic for the background of the basic button as I have done at The Cream Trip, and you could also use a different graphic for the a:hover state if you wished. Because the graphic is a background it can be small as it repeats, it does not need to be as large as the button and is not going to add very much to the loading time of the page at all.

Here are the 2 style sheets used on this page. Open them, save them, study them, as well as the source code of this page.

Linked style sheet nn1a.css
Imported style sheet tut1c.css

Have fun playing around with these.

Note: These style sheets include extra styles for the boxes etc used in this tutorial. Study those as well.

I have since noticed another quirk of NN4 - while these pages look acceptable in NN4 they won't print properly. The borders added on parts of the page cause NN4 to misbehave with printing. You can get NN4 to print more or less properly by not having borders on anything, but then another NN4 quirk rears its ugly head - you no longer get the white background on the content div, you would have to set a page background of white and create your top images with white edges also.

Update: This tutorial was written when NN4 (Netscape Navigator 4) was still in relatively common use but now - 2007 - you don't really need to consider this browser when designing web pages.

<---- Back |


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.