Contrast : smhill

Author: S.M.Hill

Comments: "I like to try to use contrast as a design element, so I made a nav bar with several examples of contrast. (size, quality, case, etc...)"

Browser support chart

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navlist
{
background: #FFCC00;
margin: 0px;
padding: 0px;
height: 16px;
border: 1px solid #FFEA93;
}

#navlist li
{
display: inline;
float: left;
margin: 0px;
padding: 0px;
list-style: none;
}

#navlist li a:link, #navlist li a:visited
{
font: bold 24px/18px Georgia, "Times New Roman", Times, serif;
color: #FFEA93;
text-decoration: none;
display: block;
padding: 0px 0px 0px 3px;
margin: 0px;
height: 16px;
overflow: hidden;
width: 135px;
text-align: center;
}

#navlist li a#current
{
color: #FFFFFF;
font-style: italic;
}

#navlist li a:hover, #navlist li a:active
{
color: #FFFFFF;
text-decoration: none;
background: #CC3333;
text-align: left;
text-transform: uppercase;
font: bold normal 10px/16px "Lucida Sans Unicode", verdana, lucida, arial, helvetica, sans-serif;
}


ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.