Number 3-07-01
Creating a CSS Based Link Structure
The creation of a CSS based link structure as opposed to one utilising other technologies (Javascript) can solve a number of problems and give a much cleaner finish whilst still providing a visual appeal.
This tutorial forms the basis of a link system which incorporates either background colours or images and can be applied either horizontally or vertically depending on the requirements of your design. For the tutorial, you will only require Notepad (or Dreamweaver in code view) and a browser.
To start, build an html page with a standard navigation area defined. This is where we will be working.
For the beginning of the exercise we will start with our basic navigation
division code and take it from there.
<div id="nav">
</div>
Next we will add some links and we will style them from there.
Create the following links between your div tags.
<div id="nav">
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact Us</a>
<a href="orders.html">Orders</a>
<a href="products.html">Products</a>
</div>
This resultant display for the code above would be horizontal series of links which does not suit our
Purposes at all. We need the links to appear in a vertical row, to achieve this we would create an
unordered list and have each link as an item within that list.
<ul>
<li<a href="index.html">Home</a</li>
<li<a href="about.html">About Us</a</li>
<li<a href="contact.html">Contact Us</a</li>
<li<a href="orders.html">Orders</a</li>
<li<a href="products.html">Products</a</li>
</ul>
Our items now appear as a list but have taken on the bulleted property of a list, it is time to use some CSS to format our links and get them to display in a more attractive manner.
ul {list-style-type:none;
margin-left:0px;
}
a {
text-decoration:none;
display:block;
} / This rule removes the bullets from the list and tells the link to display for the full width of the block, not just the width of the text. It also aligns links to the left.
This rule removes the underlining from the links. /
a:link, a:visited {
color:#f00;
background-color:#ff0;
}
a:hover {
color:#ff0;
background-color:#f00;
} / The rules here change the colours applied to the links in their various states.
When the page loads or when the links have been visited they are Red text on a yellow background.
When moused over, the text changes to Yellow and the background colour changes to Red /
We could also define an a:active state for when the mouse is clicked on the link.
T o add further enhancement to the display of the list, we could add a 1px bottom border to each link to give the appearance of a box…ie
Within the #nav a rule, apply the following.
Border-bottom:1px solid #ccc;
We could also add padding to each link to space them out more, practice applying styles to create bespoke navigation menus.