To help with speed of a website's download, search engine friendliness and accessibility, CSS navigation is no doubt the best solution.
So where do you start? The best thing to do is lay out your navigational links using an unordered list. You can then style this list any way you want using a linked CSS style sheet.
Here's the basic XHTML code for our navigation:
<body id="body_home">
<ul id="nav">
<li id="nav_home"><a href="index.html">Home</a></li>
<li id="nav_photo"><a href="#">Photography</a></li>
<li id="nav_gallery"><a href="#">Gallery</a></li>
<li id="nav_smap"><a href="#">Site Map</a></li>
<li id="nav_contact"><a href="#">Contact</a></li>
</ul>
</body>
To distinguish these links from any other navigation links on the page (e.g. in a footer or side navigation) an id of nav and nav_a suitable name have been added to the items in the list to make this set of links unique and also to help with CSS styling. An ID has also been added to the Body Tag to assist with CSS styling. This body tag will be different on each separate page and will provide visible proof of what page the visitor is currently viewing. So, for example, to highlight the Gallery page you should set the Body tag to <body id="body_gallery">
See the un styled navigation list.
The CSS markup below produces a basic vertical navigation block that works as expected in Firefox but not in Internet Explorer. To fix this Explorer bug a well know workaround is to float all the list items. That is why a float has been added to #nav; and to #nav li both a float and a 100% width.
To begin, open a blank page and save it as vertical.css
Now type (or copy and paste) the following into your stylesheet:
html {
font-family: Tahoma, Lucida Grande, Arial, Helvetica, sans-serif;}
body {
font-size: 85%;}
#nav {
padding: 0;
list-style-type: none;
background: #6699FF;
width: 180px;
float: left;}
#nav li {
margin: 0;
padding: 0;
float: left;
width: 100%;
border-bottom: 1px solid #FFFFFF;
}
#nav a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-left: 10px solid #666699;
}
#nav a:hover {
background: #666699;
#body_home #nav_home a,
#body_photo #nav_photo a,
#body_gallery #nav_gallery a,
#body_smap #nav_smap a,
#body_contact #nav_contact a
background: #666699 ;
color:#F5F5F5;
font-weight: bold;
}
What if you want to have horizontal navigation, what changes are needed? Not as many as you might think.
Because we have created an unordered list there will be no change to the HTML markup. There are only a few changes needed to the CSS to turn the vertical navigation into horizontal navigation.
The #nav changes like this:
#nav {
margin: 0;
padding: 0;
list-style-type: none;
background: #6699FF;
float: left;
width: 505px;}
#nav li {
margin: 0;
padding: 0;
float: left;}
The #nav a changes like this:
#nav a {
color: #FFFFFF;
text-decoration: none;
line-height: 2.5;
float: left;
width: 100px;
text-align:center;
border-right: 1px solid #FFFFFF;}
See the results of just a few changes.
A very simple enhancement is to add a thick line to the right of the vertical nav and underneath the horizontal nav
This is achieved just by making a simple change to #nav a.
#nav a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-left: 10px solid #666699;}
#nav a {
color: #FFFFFF;
text-decoration: none;
line-height: 2.5;
float: left;
width: 100px;
text-align:center;
border-right: 1px solid #FFFFFF;
border-bottom: 10px solid #666699;
You can easily change the colours of these CSS based navigation links, just by checking the CSS code for font colours e.g. #FFFFFF (white) and changing the values.
From the CSS articles published by QBS PC Help it's plain to see that we do not believe in using tables for web page design. We do however use tables for what they were really designed for - laying out tabular information.
Read more articles about PC repairs, Web design & SEO...