| home / programming / css_style / 1 |   [next] |
|
|
| |||||||||||
By Stu Nicholls.
Most tutorials on the styling of CSS lists for menus use unordered lists, which, for people starting out with CSS, can be a little difficult to grasp as the use of unordered lists requires extra styling to remove the bullets.
In this tutorial I demonstrate how to style a Definition List, which is equally suitable for menus, but is a little easier to understand.
Here's how to begin, using the following Definition List ...
...and, with the minimum amount of extra code and a little CSS, end up with a stylish menu like this, which incidentally does not use any graphics:
The basic Definition List source code is shown below:
<dl id="gallery">
<dt>
Art Gallery
</dt>
<dd>
<a href="#nogo" title="Paul Cezanne">
Paul Cezanne
</a>
</dd>
<dd>
<a href="#nogo" title="Henri Matisse">
Henri Matisse
</a>
</dd>
<dd>
<a href="#nogo" title="Vincent van Gogh">
Vincent van Gogh
</a>
</dd>
<dd>
<a href="#nogo" title="William Turner">
William Turner
</a>
</dd>
<dd>
<a href="#nogo" title="John Constable">
John Constable
</a>
</dd>
<dd>
<a href="#nogo" title="Claude Monet">
Claude Monet
</a>
</dd>
</dl>
To add the curved corners and the white border we need to use an outer containing div and a group of <b></b> tags at the beginning and the end of the containing div.
Our finished Definition List source code will then look like this:
<div id="container">
<b class="top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>
<dl id="gallery">
<dt>
Art Gallery
</dt>
<dd>
<a href="#nogo" title="Paul Cezanne">
Paul Cezanne
</a>
</dd>
<dd>
<a href="#nogo" title="Henri Matisse">
Henri Matisse
</a>
</dd>
<dd>
<a href="#nogo" title="Vincent van Gogh">
Vincent van Gogh
</a>
</dd>
<dd>
<a href="#nogo" title="William Turner">
William Turner
</a>
</dd>
<dd>
<a href="#nogo" title="John Constable">
John Constable
</a>
</dd>
<dd>
<a href="#nogo" title="Claude Monet">
Claude Monet
</a>
</dd>
</dl>
<b class="bottom">
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</b>
</div>
This is all that is needed to be added to the Definition List source code.
If you don't want the curved corners then leave out the "top" and "bottom" classes.
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 definition list with NO styling will appear as below:
body {
font-family:arial, verdana, sans-serif;
font-size:0.8em;
background:#8be;
color:#fff;
}
The body style sets the font to arial as first choice, verdana as second choice and the generic sans-serif as default (you should always set a default generic font as the final choice in the font-family list). The default font size is set in ems to allow the text size to be user selectable. This menu can be infinitely resized and it will always stay in shape.
The background color is pale blue to show off the white border that will be applied to the list. The default text color is white.
| home / programming / css_style / 1 | [next] |
| ||||||||||||||||||||
Created: March 27, 2003
Revised: May 13, 2005
URL: http://webreference.com/programming/css_style/1
