| home / programming / css_style2 / 1 |   [next] |
|
|
|
By Stu Nicholls.
With this article I will show you how to style an unordered navigation list using CSS, then take it a step further and show you how to add a pop-up information box for each link item so that your visitors will get an indication of the content for the page link.
We begin with an unstyled unordered list (old masters again):
Part two will add a pop-up information box to produce a styled lists like this example list two. The third part of this tutorial will show you how (with just a small change of style), we can have the pop-up information box looking like this example list three.
Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages.
The (x)html for the basic unordered list is as below. This is a simple unordered list with no frills. The links would normally take you to another page giving information about each painter but I have used #nogo which will have no effect on this page.
<ul>
<li>
<a href="#nogo">Paul Cézanne</a>
</li>
<li>
<a href="#nogo">Henri Matisse</a>
</li>
<li>
<a href="#nogo">William Turner</a>
</li>
<li>
<a href="#nogo">John Constable</a>
</li>
<li>
<a href="#nogo">Claude Monet</a>
</li>
</ul>
The only change necessary to the above (x)html is to add a unique id to the <ul> tag. This is done so that we can target the list with our CSS.
So the (x)html list becomes:
<ul id="menu">
<li>
<a href="#nogo">Paul Cézanne</a>
</li>
<li>
<a href="#nogo">Henri Matisse</a>
</li>
<li>
<a href="#nogo">William Turner</a>
</li>
<li>
<a href="#nogo">John Constable</a>
</li>
<li>
<a href="#nogo">Claude Monet</a>
</li>
</ul>
The first step is to style the unordered list to remove the bullets and the indentation.
Browsers have different ways of doing this; Internet Explorer and Opera use margin values for the indentation whereas Mozilla/Netscape/Firefox all use padding values, so to cater to this we need to style the list as follows:
#menu {
padding:0;
margin:0;
}
#menu li {
list-style-type:none;
}
In the above example I have added a light grey background to the body and a white background to the unordered list so that you can see exactly what effect this styling has on the list.
The bullets are gone and the list is now left aligned with no indentation. The unordered list stretches the full width of the screen (the white background of the <ul> tag is 100% by default).
The next step is to style the <a> and the <a:visited> tags which will be identical and can be grouped together.
Firstly, we will give the links a width just wide enough to hold the text in one line. In this case I have chosen to use em values for all sizes so that the menu will stay in shape when larger or smaller text sizes are chosen. It is also possible to use pixel or percentage values.
We can also add a border to each link just to show the size chosen:
#menu a, #menu a:visited {
display:block;
width:9em;
border:1px solid #808;
}
The list items now have a fixed width and are enclosed in purple boxes. The unordered list is still the full width of the screen.
We can now style the font used for the links:
#menu a, #menu a:visited {
display:block;
width:9em;
border:1px solid #808;
font-family:arial, verdana, sans-serif; /* ADDED */
font-size:0.8em; /* ADDED */
text-align:center; /* ADDED */
text-decoration:none; /* ADDED */
}
Our text is now centered within the link box and we have lost the underline.
| home / programming / css_style2 / 1 | [next] |
| ||||||||||||||||||||
Created: March 27, 2003
Revised: July 08, 2005
URL: http://webreference.com/programming/css_style2/1
