Question about CSS

[Tron]

On my board I have a Western motif, as you all probably know

The Challenge I have is this:

when I am writting a tute, I would like to use Bulleted lists and I would like an image of a six shooter to be the bullet, so the question;

can I create a style for <p> that will include the graphic of the six-gun at the start of each paragraph?

If so, what would the code look like,

I am pretty new to style sheets but I know some of you here are very good at it

If you don't understand what I'm after I will post an image to show what I mean.

Thanks

 

[lindaw]

Ok Rick first you don't use the <p> tag for lists. Here is the css code for an un ordered list which means it won't show a i, I, A, B, etc.

ul {
color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
padding-right: 2px;
padding-bottom: 4px;
list-style-type: square;
The color code is only if you need to change the color of the square

Here is the code for the actual list:

li.main {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #000000;
list-style-type: square;
Only use this if you have different lists in the site that need different colors or list types such as circles

Here is the list code to use an image instead of a square, circle etc.

ul {
font-size : 10px;
font-family : verdana, arial, helvetica, sans-serif;
color : #000000;
list-style-image: url(/graphics/bullet.gif);
}

This is the code you will use to have a gif as the bullet instead of the defaults. When using this code in the CSS there is no need to class out the list in the HTML. If you decide to change a normal bullet list from the defautl black square to a blue one then your html code would be:

<ul>
<li class="main">stuff here</li>
</ul>

The normal list HTML code if only changing the bullet to a gif:

<ul>
<li>stuff here</li>
</ul>

Just make sure you add the ul code in your CSS file.

:}

BTW both your sites are awesome Rick! Good work!!

 

[Tron]

Thanks Linda - you really are a web-guru (gurette) 8)) thanks for the quick reponse i will work on this. expect a PM :B :B

 

[lindaw]

You are most welcome! Let me know if you have any problems. :} :B