If anyone here is familiar with creating breadcrumb lists, such as the one created on A List Apart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists">http://www.alistapart.com/articles/taminglists</a><!-- m -->) I would like your assistance.
My list, found at <!-- m --><a class="postlink" href="http://iwdtestsite.com/oevas/test.htm">http://iwdtestsite.com/oevas/test.htm</a><!-- m --> doesn't seem to want to act right and I can't find the problem. Or better yet, I don't know what I'm doing. The styles are within the head tags.
A very good example of this type of list can be found at: Santa Cruz Montessori (<!-- m --><a class="postlink" href="http://www.scms.org/admissions.html">http://www.scms.org/admissions.html</a><!-- m -->) . I've looked at both their styles and the HTML coding. Being new to the game, it is all overwhelming.
Help would be greatly appreciated.
MagikeyThis is a menu list not a bread crumb list.
There was a nesting error, incorrect declarations and 'overkill' with declarations.
I think that this was the effect you were looking for, but it may still need tweeking.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Menu list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#nav {width: 160px; padding: 0; font: 70% Arial, Verdana, Helvetica, sans-serif;
margin: 0; background-color: white; vertical-align: top;
color: black; }
#nav ul {
list-style: none;
margin: 0 ;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #999933;
margin: 0;
}
#nav li.here{
border-top: 1px solid #999933;
margin: 0;
}
#nav li a {
display: block;
padding: 3px 0px 3px 3px;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
color: #000;
text-decoration: none;
}
#nav li a:hover {
border-left: 10px solid #999933;
border-right: 10px solid #999933;
background-color: #cc9;
color: #000;
}
#nav .sectionhead {display: block; color: #000;
background-color: #cc9;padding: 3px 0px 3px 3px;}
#nav .subsectionhead {display: block; color: #000;
background-color: #cc9;padding: 3px 0px 3px 2em;}
-->
</style>
</head>
<body>
<table width="100%" cellspacing="0">
<tr>
<td id="nav">
<ul>
<li class="here"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li class="sectionhead"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Us</a></li>
<li class="subsectionhead">Benefits</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Testimonials</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fees</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Request for Quote</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Terms</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site Map</a></li>
</ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Have a look at listamatic:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic2/index.htm">http://css.maxdesign.com.au/listamatic2/index.htm</a><!-- m -->
FYI: a breadcrumbs menu would be
Home > Products > Microwaves > Samsung
- basically it tells you where you are in the site and enables you to go back up the navigation tree.Thank you Fangs. That is almost the look I'm trying to get. I don't want the white borders that show up on the right and left of the About Us button. I want the very edge of the right and left borders to be the same color as they are when you mouseover the other buttons. I hope I'm making myself clear. Dave, I found just what I'm looking for in the list from the link you sent. Actually, I see a couple of other ones I would like to try to use instead.
Again. Thank you both for coming to my rescue.
Magikey
My list, found at <!-- m --><a class="postlink" href="http://iwdtestsite.com/oevas/test.htm">http://iwdtestsite.com/oevas/test.htm</a><!-- m --> doesn't seem to want to act right and I can't find the problem. Or better yet, I don't know what I'm doing. The styles are within the head tags.
A very good example of this type of list can be found at: Santa Cruz Montessori (<!-- m --><a class="postlink" href="http://www.scms.org/admissions.html">http://www.scms.org/admissions.html</a><!-- m -->) . I've looked at both their styles and the HTML coding. Being new to the game, it is all overwhelming.
Help would be greatly appreciated.
MagikeyThis is a menu list not a bread crumb list.
There was a nesting error, incorrect declarations and 'overkill' with declarations.
I think that this was the effect you were looking for, but it may still need tweeking.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Menu list</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#nav {width: 160px; padding: 0; font: 70% Arial, Verdana, Helvetica, sans-serif;
margin: 0; background-color: white; vertical-align: top;
color: black; }
#nav ul {
list-style: none;
margin: 0 ;
padding: 0;
border: none;
}
#nav li {
border-bottom: 1px solid #999933;
margin: 0;
}
#nav li.here{
border-top: 1px solid #999933;
margin: 0;
}
#nav li a {
display: block;
padding: 3px 0px 3px 3px;
border-left: 10px solid #fff;
border-right: 10px solid #fff;
color: #000;
text-decoration: none;
}
#nav li a:hover {
border-left: 10px solid #999933;
border-right: 10px solid #999933;
background-color: #cc9;
color: #000;
}
#nav .sectionhead {display: block; color: #000;
background-color: #cc9;padding: 3px 0px 3px 3px;}
#nav .subsectionhead {display: block; color: #000;
background-color: #cc9;padding: 3px 0px 3px 2em;}
-->
</style>
</head>
<body>
<table width="100%" cellspacing="0">
<tr>
<td id="nav">
<ul>
<li class="here"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li class="sectionhead"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">About Us</a></li>
<li class="subsectionhead">Benefits</li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Testimonials</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Fees</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Request for Quote</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Terms</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Site Map</a></li>
</ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Have a look at listamatic:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic2/index.htm">http://css.maxdesign.com.au/listamatic2/index.htm</a><!-- m -->
FYI: a breadcrumbs menu would be
Home > Products > Microwaves > Samsung
- basically it tells you where you are in the site and enables you to go back up the navigation tree.Thank you Fangs. That is almost the look I'm trying to get. I don't want the white borders that show up on the right and left of the About Us button. I want the very edge of the right and left borders to be the same color as they are when you mouseover the other buttons. I hope I'm making myself clear. Dave, I found just what I'm looking for in the list from the link you sent. Actually, I see a couple of other ones I would like to try to use instead.
Again. Thank you both for coming to my rescue.
Magikey