Use <Div> To Show Unique Image/Icon Per LI

Discussion in 'CSS' started by Swordfish, Aug 10, 2007.

  1. #1
    I am listing a bunch of articles on a page by title, date, etc. via bullets.

    I am using this div to show a standard bullet icon

    .article { background: url("images/icon_folder.gif") no-repeat; margin: 6px 0 10px; padding-left: 18px; min-height: 16px }


    ==

    What I want to do is to:

    - Show a unqiue thumbnail/icon that is sitting in the database to go along with each article when browsing the bullets.

    Can I do this without setting up a table and all in css?
     
    Swordfish, Aug 10, 2007 IP
  2. henryb

    henryb Member

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    Your "images/icon_folder.gif" should not be a static file, but a script that takes your image data from the database and serves it out. It does not need to have .gif extension. It may be something like "show_thumbnail.php?id=123".

    So basically write a script that

    set content "Content Type" to image/gif
    grabs binary image from the database and
    prints it out.

    Then just include this script as a source of your image.
     
    henryb, Aug 10, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    As HenryB said, if the image itself is not static and is stored in the DB, send it from the php - though I think that is NOT what you are actually asking.

    This situation is one of the few times I advocate inlining CSS - so long as your icons are all the same size, you're css would be:

    .article {
    background-position:0 0;
    background-repeat:no-repeat;
    margin: 6px 0 10px;
    padding-left: 18px;
    min-height: 16px;
    }

    In your CSS, instead of inlining it as a image tag, just assign it as a background to your .article DIV

    <div class="article" style="background-image:url(show_thumbnail.php?id=123);">

    This is one of the few times I would ever inline presentation like that.
     
    deathshadow, Aug 10, 2007 IP