"Out of the box"

The navigation menu at the bottom of this yellow box is the result of the default output of the extension.
All the CSS rules used for this document - except the ones related to this box - are listed below the Menu.

"TJKul" is the ID of the Unordered List we're using for the Navigation Menu.

Through these pages, I will:

• Show you the basics related to the CSS construct,
• Show you how inheritance can interfere with the Menu,
• Show you how to deal with inheritance to have the menu the way you want it,
• Show you how to use images instead of CSS declarations to tackle element's height and/or vertical padding,
• Show you how to edit some of the rules related to the Menu to better customize it,
• Show you which rules you should not edit,
• Show you how to use CSS hacks to achieve pixel perfect placement.

What do we have so far?

1. General Rules. They are here to style elements not related to our menu. For example, the first rule below sets some padding and declares a background-color for the document ("#fff" for white). The second rule is to style the H1 and the H2 (used to define our 2 sections).
2. Rules for the Menu: All these rules have been written by the extension after you ran the command to insert the menu. As you can see, the navigation links are styled to not show under lines.
3. Rules inside a Conditional Comment: They are here to fix MSIE5 Win's broken box model.

Note: Many web designers forget about setting a background-color for their documents, thinking that the default background-color of a document is white; when in fact it depends on the user's settings.

Next page:

• The place of the Unordered List (UL) in the document flow (find out why the tabs below come on top of the bottom of this yellow box).

body {background-color:#fff;padding:20px}
h1,h2 {font-size:1.1em;border-bottom:1px dotted #999}

#TJKul,#TJKul li {margin:0;padding:0;list-style:none}
#TJKul,#TJKul li,#TJKul a,#TJKul span {height:1.6em;line-height:1.6em}
#TJKul {border-bottom:1px solid #333}
#TJKul li {float:left;width:auto;position:relative;white-space:nowrap}
#TJKul a {position:relative;text-decoration:none}
#TJKul a:hover {background-color:transparent}
#TJKul a,#TJKul a span {padding-top:.7em;padding-bottom:.2em}
#TJKul a span {padding-right:10px}
#TJKul #current a,#TJKul #current a span {padding-top:1em;border-bottom:2px solid #fff;font-weight:600}
#TJKul #current a span,#TJKul a:hover span {background-image:url(up.gif)}
#TJKul .TJKL,#TJKul .TJKR {background-image:url(down.gif)}
#TJKul .TJKL {background-position:top left}
#TJKul .TJKR {background-position:top right}

#TJKul #current a {padding-top:.1em}
#TJKul a span {padding-top:.3em}
#TJKul a {cursor:hand;margin-bottom:-.7em}

Copyright © TJKDesign 2004 - All Rights Reserved.