PDA

Click to See Complete Forum and Search --> : CSS Rollover horizontal list-Tutorial *HELP*

mike_kati
09-14-2006, 08:44 AM
http://css.maxdesign.com.au/listamatic/horizontal02.htm

I am NEW to CSS, and found this CSS Tutorial online, I cant get this to work

what do you need to get this Tutorial to work...

When I go it... I dont get the colour just links.....


Many thanks
Kravvitz
09-14-2006, 08:52 AM
Why don't you show us what you tried?
WebJoel
09-14-2006, 09:20 AM
I can just imagine that if you're new to CSS and saw this incredibly simple example at Listmatic, you might try to put everything in your HTML file 'below' the opening <body> tag, not knowing that CSS' <style> belongs before the closing </head> statement. So, here is exactly what listmatic has, with notations of what does what.

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
</style>

<!-- Next: styles to make horizontal list change color on-hover -->
<style>
ul#navlist
{margin-left:0; padding-left:0; white-space:nowrap;}/* No margin-left, no padding-right, and do not 'line-break' on spaces between items (keeps all on same line) */

#navlist li
{display:inline; list-style-type:none;}/* causes links to display "horizontally", and NO "bullets" for <li>s */

#navlist a {padding:3px 10px;}/* pads 3-px above anchor, and 10-px padding for right, bottom and left sides*/

#navlist a:link, #navlist a:visited
{color:#fff; background-color:#036; text-decoration:none;}/* color of text, color of background for anchor link, and previously visited, -and underline="no". Option for "text-decoration:" are "underline" and "none" */

#navlist a:hover
{color:#fff; background-color:#369; text-decoration:none;}/* color of text, background color, underline="no" for "hover" */
</style>

</head>

<body>
<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>
</body>
</html>