469,592 Members | 1,923 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,592 developers. It's quick & easy.

HELP! Multiple Bullet Styles using CSS and images NOT WORKING!

Greetings to everyone in ‘forum-land':

I have a problem that has plaguing me to no end. It is a CSS-related
question, and I have not seen this question posted anywhere in forums
or through Google search. So here is my problem:

I want to use CSS to apply images as bullet styles. However, I want
to be able to apply VARIOUS, MULTIPLE styles in the same document.
For example, let's assume I have a set of categorized hyperlinks on a
webpage. Lets also assume the categories are *Automobile* and
*Computer*. Under those cats, the sub cats are as follows:

----------------------------------------------------------------------------------------

Level1 --> [Automotive] [Computers]
| |
| |
+---------, |
| | |
Level2 --> [Cars] [Bikes] [Perl]

-----------------------------------------------------------------------------------------

In the example, the Level 1 items will have an <H2> tag applied, and
level 2 items will be <H3>.

Here are links to the samples I have created:

Non-Styled:
http://erichepperle.50megs.com/bulletTest_orig.html
Styled:
http://erichepperle.50megs.com/bulletTest_css.html

I care about standards & portability and such, but for now I just want
something that works in IE. With that in mind, what I want is as
follows:

1) ***NO BULLETS IN FRONT OF HEADINGS: The page is using nested
lists <LI><UL>, (Unordered Lists), which will normally represent as
bullets, round, hollow, square, etc. That function seems to work
properly as evidenced in my non-styled example. However, it is
important that no bullets show up in front of headings. There should
be no bullet in front of "Automotive" or "Perl", etc.

2) ***DIFFERENT BULLETS FOR DIFFERENT CATEGORIES:

- The "Cars" section should use CSS to place images
of a car as the bullet
- The "Bikes" section, likewise, should use and
image of a motorcycle

That's pretty much it. What seems to me the best thing to do is to
use a div elements and then use the css "list-style-image" tag with an
image as the URL. However, it is just not working properly. Here is
the complete code for the "bulletTest_css.html" file and the linked
css docs:
================================================== ==========
bulletTest_css.html
---------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
<TITLE>Codeslayer's Bullet Test (09-09-04)</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=windows-1252">
<LINK HREF="bulletTest_css_files/linkstyle.css" rel="stylesheet"
type="text/css" />
<LINK HREF="bulletTest_css_files/bulletList.css" rel="stylesheet"
type="text/css" />
</HEAD>

<BODY>

<H1>Codeslayer's Bullet Test (09-09-04)</H1>
<HR />
<UL><P>
<LI><H2>AUTOMOTIVE</H2>
<UL><P>
<LI><H3>Cars</H3>
<UL><P>
<LI>
<A HREF="http://auto.howstuffworks.com/chrysler-concept.htm"
Target="child1">
How Stuff Works - Chrysler ME Four-Twelve</A></LI>
<LI>
<A HREF="http://www.hasport.com/" Target="child1">
Hasport Billet Mounts</A></LI>
<LI>
<A HREF="http://www.kbb.com/" Target="child1">
Kelley Blue Book.com</A></LI>
</UL>
</LI>
<P>
<LI><H3>Bikes</H3>
<UL><P>
<LI>
<A HREF="http://mini-bikes.ridegear.com"
Target="child1">
RideGear.com - Mini-Bikes</A></LI>
<LI>
<A HREF="http://www.pocketbikesunlimited.com/"
Target="child1">
Pocket Bikes Unlimited</A></LI>
</UL>
</LI>
</UL>
</LI>
<P>
<!-- DIV HERE -->

<LI><H2>COMPUTERS</H2>
<UL class="comp"><P>
<LI><H3>Perl</H3>
<UL><P>
<LI>
<A HREF="http://www.perl.com/" Target="child1">
Perl.com</A></LI>
<LI>
<A HREF="http://www.w3.org/Style/CSS/" Target="child1">
W3.org CSS Section</A></LI>
<LI>
<A HREF="http://www.alistapart.com" Target="child1">
A List Apart - CSS List Resource</A></LI>
</UL>
</LI>
</UL>
</LI>

</UL>

<HR />

================================================== ==========
--- END ---
================================================== ==========
linkstyle.css
---------------------------------------------------------------------------------------------------------

/* STYLES APPLIED TO ALL HYPERLINKS & Body*/

/* - Change background color to beige
- Change text color to gray-blue
- Change font to Tahoma
*/
body {
background-color: #FBE7B7;
color: #8D8FB1;
font-family: "Tahoma";
margin-left: 50px;
}

a {
color: #438548;
text-decoration: none;
}

a:hover {
color: #438548;
text-decoration: underline;
background-color: #F3FF36;
}

================================================== ==========
--- END ---
================================================== ==========
bulletList.css
---------------------------------------------------------------------------------------------------------

/* Styles applied to BULLETED LISTS */

li h1 {
list-style-image: url();
}

li h2 {
list-style-image: url();
}

li h3 {
list-style-image: url();
}

ul.comp {
list-style: url(bullet4.gif) disc;
color: none;
}

ul.bikepurp {
list-style: url(bullet2.gif) disc;
color: green;
}

ul.bikegreen {
list-style: url(bullet3.gif) disc;
color: blue;
}

================================================== ==========
--- END ---
As I have already mentioned, this is the same code you will find in
the above examples. Now, you can see when you run the example, that
the output is not exactly what is intended. Here is a key for what
the bullets are:

* bullet4.gif = an image of a computer
* bullet2.gif = an image of a purple motorcycle
* bullet3.gif = an image of a green motorcycle (actually, a
pocketbike)

In the bulletList.css stylesheet, the "li h…" portion is mine. What I
am trying to do is to make sure that nothing shows up in front of the
"h" headings. It partially works -- no images show up in front of
headings, but the standard circle, hollow circle, and square bullets
do. That, as I stated previously, is NOT DESIRED.

The last half of the same stylesheet uses an alteration of what I
found on the following page:

http://www.sens.buffalo.edu/assistan...e/bullets.html

I have done so many Google searches, and forum and groups searches to
no avail. I have visited great sites like http://www.alistapart.com,
all to no avail.

I have tried to be as thorough as possible. Can some, kind,
knowledgeable soul please help explain how to get this to work. It
does not work from the website, and it does not work on my PC. I have
worked on this problem a total of 7 days, @ 4hrs/day and I am going
out of my mind in frustration.

Thank you in advance for your assistance!

Codeslayer
Jul 20 '05 #1
7 6652
On 13 Sep 2004 11:30:11 -0700, codeslayer wrote:
http://erichepperle.50megs.com/bulletTest_orig.html
Styled:
http://erichepperle.50megs.com/bulletTest_css.html

I care about standards & portability and such, but for now I just want
something that works in IE.


Aim for something that works in the validator
as a first step, and put IE aside* before it
hurts more people, please..
<http://validator.w3.org/check?uri=http://erichepperle.50megs.com/bulletTest_orig.html>

* as a web-page 'testing tool',
at the very least.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 20 '05 #2
codeslayer wrote:

http://erichepperle.50megs.com/bulletTest_css.html

What seems to me the best thing to do is to
use a div elements and then use the css "list-style-image" tag with an
image as the URL. However, it is just not working properly.


One thing that is probably making it "not work properly" is the size
(dimensions) of the images. They are enormous, far larger than anything
I would normally consider a bullet. The computer "bullet" image is
288x277px! I can't imagine how you expect them to render.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 20 '05 #3
kchayka <us****@c-net.us> wrote
codeslayer wrote:

http://erichepperle.50megs.com/bulletTest_css.html

What seems to me the best thing to do is to
use a div elements and then use the css "list-style-image" tag with an
image as the URL. However, it is just not working properly.


One thing that is probably making it "not work properly" is the size
(dimensions) of the images. They are enormous, far larger than anything
I would normally consider a bullet. The computer "bullet" image is
288x277px! I can't imagine how you expect them to render.


Thank you for providing utterly useless information. What would have
helped more would have been something at the end to the effect of:

"...and here is how you can fix it...", as that is the spirit of
this post.

But, then again, maybe this kchayka is just a troll, with no usefull
information to help with.
Jul 20 '05 #4
kchayka <us****@c-net.us> wrote
codeslayer wrote:

http://erichepperle.50megs.com/bulletTest_css.html

What seems to me the best thing to do is to
use a div elements and then use the css "list-style-image" tag with an
image as the URL. However, it is just not working properly.


One thing that is probably making it "not work properly" is the size
(dimensions) of the images. They are enormous, far larger than anything
I would normally consider a bullet. The computer "bullet" image is
288x277px! I can't imagine how you expect them to render.


Thank you for providing utterly useless information. What would have
helped more would have been something at the end to the effect of:

"...and here is how you can fix it...", as that is the spirit of
this post.

But, then again, maybe this kchayka is just a troll, with no usefull
information to help with.
Jul 20 '05 #5
Andrew Thompson <Se********@www.invalid> wrote
On 13 Sep 2004 11:30:11 -0700, codeslayer wrote:
http://erichepperle.50megs.com/bulletTest_orig.html
Styled:
http://erichepperle.50megs.com/bulletTest_css.html

I care about standards & portability and such, but for now I just want
something that works in IE.


Aim for something that works in the validator
as a first step, and put IE aside* before it
hurts more people, please..
<http://validator.w3.org/check?uri=http://erichepperle.50megs.com/bulletTest_orig.html>

* as a web-page 'testing tool',
at the very least.


While I thank you for the link to the validator, this does not in any
way solve, or help solve my problem of how to create multiple bullet
styles in the same css document and implement them in a web page.

If anyone else out there actually has information germane to the issue
at hand, any helpful responses are welcomed.

Codeslayer
Jul 20 '05 #6
On 22 Sep 2004 21:23:06 -0700, codeslayer <we************@yahoo.com> wrote:
Thank you for providing utterly useless information. What would have
helped more would have been something at the end to the effect of:

"...and here is how you can fix it...", as that is the spirit of
this post.

But, then again, maybe this kchayka is just a troll, with no usefull
information to help with.


"Mommy, Mommy, the mean people won't help me!"

We're not your goddamn 24-hour help desk. Fuck off. Plonk.
Jul 20 '05 #7
codeslayer wrote:

Thank you for providing utterly useless information.
So you feel that you got your money's worth, then?
maybe this kchayka is just a troll, with no usefull
information to help with.


Maybe. But as kchayka has been around for a while, as a useful
contributor, maybe not. Maybe instead, you've just been added to
a few killfiles.

*plonk*

--
Brian (remove "invalid" to email me)
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Tom | last post: by
4 posts views Thread by Sarir Khamsi | last post: by
6 posts views Thread by d.warnermurray | last post: by
3 posts views Thread by lord.zoltar | last post: by
reply views Thread by suresh191 | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.