/    Sign up×
Community /Pin to ProfileBookmark

Custom List Indent & Bullet Image

Copy linkTweet thisAlerts:
Mar 07.2005

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: [url]http://www.stma.k12.mn.us/district_information/[/url] [i](Navigation list on the left. I listed a sub folder to show indenting.)[/i]

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. Thanks

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogMar 07.2005 — After a little trial-and-error, here's something I came up with that's not too far from your example:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang='en'&gt;
&lt;head&gt;
&lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'&gt;
&lt;title&gt;layout&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
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; }
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul class=nav&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class=current&gt;Item Two&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class=indent&gt;Two.One&lt;/a&gt;
&lt;li&gt;&lt;a href="#" class=indent&gt;Two.Two&lt;/a&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Item Four&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@rpanningauthorMar 09.2005 — 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:
&lt;ul&gt;
&lt;li&gt;Page&lt;/li&gt;
&lt;li&gt;Page&lt;/li&gt;
&lt;ul&gt;
&lt;li&gt;Sub-Page&lt;/li&gt;
&lt;li&gt;Sub-Page&lt;/li&gt;
&lt;/ul&gt;
&lt;li&gt;Page&lt;/li&gt;
&lt;/ul&gt;
It would be nice if each sub-list would indent itself automaticaly, so you would need to use a class like "indent1". Thanks
Copy linkTweet thisAlerts:
@pyroclasmMar 10.2005 — Well, for that you could use another CSS rule to only affect UL's in other UL's:

<i>
</i>.nav ul li {
...
}
Copy linkTweet thisAlerts:
@rpanningauthorMar 14.2005 — Unfortunately I had to settle with recursive ul statements to indent. I have an [url=http://admin.stma.k12.mn.us/navigation.html]example setup[/url] 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! Thanks
Copy linkTweet thisAlerts:
@rpanningauthorMar 16.2005 — Ok, 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 [url=http://admin.stma.k12.mn.us/navigation.html]the example[/url] again. Now all I would like to change is automatic indent instead of specifying each sub <ul>. Any ideas? Thanks
Copy linkTweet thisAlerts:
@rpanningauthorMar 16.2005 — ARG!!! 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..
Copy linkTweet thisAlerts:
@rpanningauthorMar 17.2005 — Ok, I've found a workaround! Since this only happens in IE on Windows I used the [url=http://wellstyled.com/css-underscore-hack.html]underscore hack[/url] to specify a width for each anchor. So, in edition to my [url=http://admin.stma.k12.mn.us/navigation.html]example[/url], the CSS code now looks like.
<i>
</i>#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;
}
...
×

Success!

Help @rpanning spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...