Results 1 to 7 of 7
  1. #1

    * Display a simple Icon.. in CSS!

    Hi All,

    I've just been learning CSS on the fly and now I'm trying to do something that I thought would be quite straightforward..

    All I want to do, is display an icon next to a line of certain text in a list..


    o List Item 1
    o List Item 2
    o List Item 3 [i]
    o List Item 4

    Each List item is bulletted, but List Item 3 requires an icon next to it (denoted by the [i]).

    So far in my CSS sheet, I have the following:

    div.contentBox li {
    color: #000000;
    font-size: 80%;
    text-align: left;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style: url(li_list.gif) square;

    This is the HTML code i'm using for that:

    <div class="contentBox">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>

    What I have kludged so far to demonstrate what I want to do, is the following:

    <li>List Item 3 <img src="my_image.gif" alt="My Image"></img></li>

    This works great, except if I even come to change the "my_image.gif" to something else, I obviously have to go and change all my HTML.

    So, big question, how do I create a new class or div or whatever, so I can wrap that "List Item 3" and show an Icon next to it in CSS ?

    i.e. <li>List Item 3 <CSS.image> </li>

    I hope you understand what i'm trying to do..


  2. #2
    Join Date
    Dec 2003
    Vancouver BC, eh?
    div.contentBox ul {
    list-style: url(li_list.gif) inside;

    add this and take out the list-style in the li tag.

  3. #3
    Join Date
    Apr 2002
    The Stars!
    Check out the tutorials here:

    It will show you how to use IMG for your bullet. They have tutorial on just about any list type you need too.
    Sarah :c) - live remotely hosted cPanel & WHM demo hosting service.

  4. #4
    Join Date
    May 2004
    Pflugerville, TX
    Semantically speaking, it does not make sense to display your icon as a CSS background image. If the icon denotes something having to do with the item in that line, it should be displayed as an image. Otherwise, someone using a browser that does not display the image will see appropriate alternative text and will understand the significance of it being there. Ditto for printed pages (most browsers eliminate background images by default on print). If you want to change the icon site-wide later, just upload a new icon by that same name

    The inline "kludge" you presented is, in fact, the proper way to go about what you're trying to do. Except for one thing - there's no such thing as </img>. If you're trying to close your image tag to be XHTML compliant, add a slash into the end of the opening tag, like so <img src="..." alt="..." />
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  5. #5

    Smile Thanks!

    Just a note to say thanks to you *all* for your speedy replies!

    I shall have a go with each idea, and certainly check out that link for List Types - in the end i'll probably end up with what I started with (but at least I know its the right way to do it!! (thanks the_pm for explaining it!)

    Also, thanks for the </img> tag tip..!!


  6. #6
    Join Date
    Jul 2005
    Hmmm this is a little oftopic but what is the purpose of CSS? I thought it was just a sheet for for like text styles and stuff.

  7. #7
    Join Date
    May 2005
    CSS is fastly becoming, if not already, the standard for web design. The benefits of using CSS are huge.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts