Collected by
Elizabeth Janson
Home Page

A new Navigation bar

 

Navigation Bars with CSS

Commonly, where a site comprises a number of pages, or sections, a "navigation bar" is placed at the top and or the bottom of each page that allows readers to easily go to other sections of the site which interest them. A navigation bar can be distinguished by its background color, distinctive link appearance, and by a border which separates it from the surrounding page.

To create such a navigation bar we need to create a paragraph which contains the links to be navigated, then add to our style sheet so that the bar has the required features.

In the HTML, our navigation bar only needs to be a paragraph, with the necessary links. The one addition is that the paragraph should be of a particular class, so that we can apply style to that paragraph alone, and not the other paragraphs in the page. For this page, our navigation bar HTML looks like this

<p class="navigation-bar"> <A HREF="01intro.html">Intro</A>, | <A HREF="02syntax.html">Syntax</A>, | <A HREF="03selector.html">Selectors</A>, | <A HREF="04css.html">Style</A>, | <A HREF="05font.html">Font</A>, | <A HREF="06text.html">Text</A>, | <A HREF="07colour.html">Colour</A>, </p>

The paragraph

background color using -
P.navigation-bar {color: white; background-color: firebrick;}

text alignment using -
P.navigation-bar {color: white; background-color: firebrick;
text-align: center}

borders using -
P.navigation-bar {color: white; background-color: firebrick;
border: medium gold solid;
text-align: center}

padding is needed to aid legibility, so that there is some space between the edges of the element and the text.
P.navigation-bar {color: white; background-color: firebrick;
border: medium gold solid;
padding: 1%;
text-align: center}

The links

We still need to create the style sheet rule for the links in our navigation bar. We can't simply apply style to all the links on our page, as not all of them are in the navigation bar. You might think that we need to create a new class for the links in the navigation bar. But wouldn't it be nice if we could select only links inside paragraphs of class navigation bar? Well we can (you knew I was going to say that didn't you?)

Here it is. We need a slightly different type of selector. This one lists the container element, then the element that is contained inside it. In this case

P.navigation-bar A:link
P.navigation-bar A:visited

and so on.

Then we create the properties to finalize our navigation bar. In this case, white text, which, when the mouse is over it changes to black text, with the background color pink, just for contrast.
P.navigation-bar A:link { color: white; text-decoration: none}
P.navigation-bar A:visited { background: transparent; color: yellow; text-decoration: none; }
P.navigation-bar A:hover {background-color: #ffb0d3; color: black; text-decoration: none}

So we have:-

Intro, | Syntax, | Selectors, | Style, | Font, | Text, | Colour,

Done with
P.navigation-bar {color: white; background-color: firebrick; border: medium gold solid; padding: 1%; text-align: center}
P.navigation-bar A:link {color: white; text-decoration: none}
P.navigation-bar A:visited { background: transparent; color: yellow; text-decoration: none; }
P.navigation-bar A:hover {background-color: #ffb0d3; color: black; text-decoration: none}

Back to Left-side panels, or on to colouring the right-sidebar.

Email
CSS begins here
Back to buttons or on to right side-bar colours.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.