Sounds easy hu? But I cannot find anything to help with my specific setup. In short, I am converting a design and cannot get the Navigation right. Check out the existing here: <!-- m --><a class="postlink" href="http://www.stma.k12.mn.us/district_information/">http://www.stma.k12.mn.us/district_information/</a><!-- m --> (Navigation list on the left. I listed a sub folder to show indenting.)
A few things to note are; the top & bottom border must 100% wide and there is a "custom" bullet. It's just a table with the width set but I am converting it to a list. The bullet will become a image and everything but I am having trouble getting the indenting and border correct. I have been trying to make it "self indent" so I don't have to use sub_list like classes.
Any help, ideas, RTFM, whatever would be great. ThanksAfter a little trial-and-error, here's something I came up with that's not too far from your example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>layout</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
ul.nav {
margin: 0;
padding: 0;
width: 170px;
font: small arial, sans-serif;
font-weight: bold;
background-color: #eee;
list-style-type: none;
}
.nav li {
border-top: solid 1px #fff;
border-bottom: solid 1px #ddd;
margin: 0;
padding: 0;
}
.nav a {
display: block;
width: 100%;
margin: 0;
background: #eee url("http://www.basictips.com/imgart/goldbullet.gif") no-repeat 2px 40%;
padding: 1px 1px 1px 15px;
text-decoration: none;
}
.nav a:link, .nav a:visited { color: gray; }
.nav a:hover, .nav a:active { color: #36f; }
.nav a.current:link, .nav a.current:visited { color: #c00; }
.nav a.current:hover, .nav a.current:active { color: #36f; }
.nav a.indent {
padding-left: 25px;
background-position: 12px 40%;
}
.nav a.indent:link, .nav a.indent:visited { color: #00c; }
.nav a.indent:hover, .nav a.indent:active { color: #36f; }
-->
</style>
</head>
<body>
<ul class=nav>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=current>Item Two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=indent>Tw
ne</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=indent>Two.Two</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item Four</a></li>
</ul>
</body>
</html>Ok, I'm back, busy lately. Well, that's a start but I'll have sub-lists to indent, not just one long list. Ex:
<ul>
<li>Page</li>
<li>Page</li>
<ul>
<li>Sub-Page</li>
<li>Sub-Page</li>
</ul>
<li>Page</li>
</ul>
It would be nice if each sub-list would indent itself automaticaly, so you would need to use a class like "indent1". ThanksWell, for that you could use another CSS rule to only affect UL's in other UL's:
.nav ul li {
...
}Unfortunately I had to settle with recursive ul statements to indent. I have an example setup (<!-- m --><a class="postlink" href="http://admin.stma.k12.mn.us/navigation.html">http://admin.stma.k12.mn.us/navigation.html</a><!-- m -->) if you would like to take a look, code is below the example. There are two concerns of mine, I HATE the recursive ul statements and the nested span tag. I feel like there should be a better way to do this. Any ideas would be great! ThanksOk, I'm stupid. The reason I had the <span> inside <a> was because when I added the padding-left, the box was getting pushed out on the right. Turns out I had <a> styled with display: block; AND width: 100%;. The 100% was pushing it out the right side.
Needless to say, I've cleaned up the code some. Take a look at the example (<!-- m --><a class="postlink" href="http://admin.stma.k12.mn.us/navigation.html">http://admin.stma.k12.mn.us/navigation.html</a><!-- m -->) again. Now all I would like to change is automatic indent instead of specifying each sub <ul>. Any ideas? ThanksARG!!! In IE on Windows there seems to be an extra space between <li>. It looks fine on other browsers and OS's. What the heck!!
I found that when I put in a width:XX it looks fine but then pushes the box to the right. Is there a way to fix this? Hack maybe?? This is anoying..Ok, I've found a workaround! Since this only happens in IE on Windows I used the underscore hack (<!-- m --><a class="postlink" href="http://wellstyled.com/css-underscore-hack.html">http://wellstyled.com/css-underscore-hack.html</a><!-- m -->) to specify a width for each anchor. So, in edition to my example (<!-- m --><a class="postlink" href="http://admin.stma.k12.mn.us/navigation.html">http://admin.stma.k12.mn.us/navigation.html</a><!-- m -->), the CSS code now looks like.
#Navigation ul a {
background-position: 3px .5em;
padding-left: 12px;
_width: 188px;
}
#Navigation ul ul a {
background-position: 15px .5em;
padding-left: 24px;
_width: 176px;
}
#Navigation ul ul ul a {
background-position: 27px .5em;
padding-left: 36px;
_width: 164px;
}
...
A few things to note are; the top & bottom border must 100% wide and there is a "custom" bullet. It's just a table with the width set but I am converting it to a list. The bullet will become a image and everything but I am having trouble getting the indenting and border correct. I have been trying to make it "self indent" so I don't have to use sub_list like classes.
Any help, ideas, RTFM, whatever would be great. ThanksAfter a little trial-and-error, here's something I came up with that's not too far from your example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>layout</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
ul.nav {
margin: 0;
padding: 0;
width: 170px;
font: small arial, sans-serif;
font-weight: bold;
background-color: #eee;
list-style-type: none;
}
.nav li {
border-top: solid 1px #fff;
border-bottom: solid 1px #ddd;
margin: 0;
padding: 0;
}
.nav a {
display: block;
width: 100%;
margin: 0;
background: #eee url("http://www.basictips.com/imgart/goldbullet.gif") no-repeat 2px 40%;
padding: 1px 1px 1px 15px;
text-decoration: none;
}
.nav a:link, .nav a:visited { color: gray; }
.nav a:hover, .nav a:active { color: #36f; }
.nav a.current:link, .nav a.current:visited { color: #c00; }
.nav a.current:hover, .nav a.current:active { color: #36f; }
.nav a.indent {
padding-left: 25px;
background-position: 12px 40%;
}
.nav a.indent:link, .nav a.indent:visited { color: #00c; }
.nav a.indent:hover, .nav a.indent:active { color: #36f; }
-->
</style>
</head>
<body>
<ul class=nav>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=current>Item Two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=indent>Tw
ne</a><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class=indent>Two.Two</a>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item Four</a></li>
</ul>
</body>
</html>Ok, I'm back, busy lately. Well, that's a start but I'll have sub-lists to indent, not just one long list. Ex:
<ul>
<li>Page</li>
<li>Page</li>
<ul>
<li>Sub-Page</li>
<li>Sub-Page</li>
</ul>
<li>Page</li>
</ul>
It would be nice if each sub-list would indent itself automaticaly, so you would need to use a class like "indent1". ThanksWell, for that you could use another CSS rule to only affect UL's in other UL's:
.nav ul li {
...
}Unfortunately I had to settle with recursive ul statements to indent. I have an example setup (<!-- m --><a class="postlink" href="http://admin.stma.k12.mn.us/navigation.html">http://admin.stma.k12.mn.us/navigation.html</a><!-- m -->) if you would like to take a look, code is below the example. There are two concerns of mine, I HATE the recursive ul statements and the nested span tag. I feel like there should be a better way to do this. Any ideas would be great! ThanksOk, I'm stupid. The reason I had the <span> inside <a> was because when I added the padding-left, the box was getting pushed out on the right. Turns out I had <a> styled with display: block; AND width: 100%;. The 100% was pushing it out the right side.
Needless to say, I've cleaned up the code some. Take a look at the example (<!-- m --><a class="postlink" href="http://admin.stma.k12.mn.us/navigation.html">http://admin.stma.k12.mn.us/navigation.html</a><!-- m -->) again. Now all I would like to change is automatic indent instead of specifying each sub <ul>. Any ideas? ThanksARG!!! In IE on Windows there seems to be an extra space between <li>. It looks fine on other browsers and OS's. What the heck!!
I found that when I put in a width:XX it looks fine but then pushes the box to the right. Is there a way to fix this? Hack maybe?? This is anoying..Ok, I've found a workaround! Since this only happens in IE on Windows I used the underscore hack (<!-- m --><a class="postlink" href="http://wellstyled.com/css-underscore-hack.html">http://wellstyled.com/css-underscore-hack.html</a><!-- m -->) to specify a width for each anchor. So, in edition to my example (<!-- m --><a class="postlink" href="http://admin.stma.k12.mn.us/navigation.html">http://admin.stma.k12.mn.us/navigation.html</a><!-- m -->), the CSS code now looks like.
#Navigation ul a {
background-position: 3px .5em;
padding-left: 12px;
_width: 188px;
}
#Navigation ul ul a {
background-position: 15px .5em;
padding-left: 24px;
_width: 176px;
}
#Navigation ul ul ul a {
background-position: 27px .5em;
padding-left: 36px;
_width: 164px;
}
...