SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Clickable Icons

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2005
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clickable Icons

    I'm trying to add some .PDF icons to a list of articles for our website. I'm familiar with creating a bulleted list using images for icons, but how would I go about substituting a .PDF icon in place of text in the following bit of code.

    <ul>

    <li>May 7, 2007 - Summer Safety Begins With a Helmet [<a href="../pdfs/pressrel/helmets.pdf">pdf</a>]</li>

    </ul>

    So you can see, right now users click on a text link marked [PDF]. I'd like to have a visual cue of the icon instead.

    For the CSS, I tried making a basic div id called "pdf" and then defining the link style by using #pdf ul li a {background: url(pdficon.jpeg)}

    In the HTML I tried the good ol' <ul id="pdf"> to cascade the <a> rules specific to that div, but to no avail.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Kansas City, MO
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make <a> a block level element. I'd also suggest making .pdf a class of <a> elements so you can reuse it anywhere. <a href="" class="pdf">pdf</a>
    Code:
    a.pdf {
    display: block;
    width: 16px;
    height: 16px;
    background: url(pdficon.jpeg) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    }
    Something like that ought to work.


Bookmarks

Posting Permissions

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