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
