+ Reply to Thread
Results 1 to 4 of 4
  1. #1
    Guru
    Join Date
    Feb 2002
    Posts
    1,177
    Thanks
    0
    Thanked 4 Times in 1 Post

    Question about CSS

    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

  2. #2
    Power User
    Join Date
    Feb 2002
    Posts
    356
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question about CSS

    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!!

  3. #3
    Guru
    Join Date
    Feb 2002
    Posts
    1,177
    Thanks
    0
    Thanked 4 Times in 1 Post

    Question about CSS

    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

  4. #4
    Power User
    Join Date
    Feb 2002
    Posts
    356
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question about CSS

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

 

 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Powered by vBulletin® Version 4.1.9
Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.
Content Relevant URLs by vBSEO 3.6.0
Copyright 2011 Photoshop Gurus Forum. All rights reserved.
All times are GMT -5. The time now is 07:46 PM.
vBulletin Skins