SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to: add background image to button

    Hi all

    I have a demo here to illustrate.

    www.ttmt.org.uk/menu

    It's just a simple <ul> list containing <a> links.

    In each separate button I need to have a different graphic (the down arrow)

    In my example I'm doing it with a span in the <a> tag.

    I'm giving the span dimensions, positioning it and adding a background image using a sprite.

    My question is, is it possible to do this without the span.

    I'm creating this navigation in Wordpress and adding the span would be difficult.

    On a side note I tried to center the span (in this example) in button by positioning it absolute and giving it a left:50% but it doesn't appear in the center. Anyone know why.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    If you are going to use a sprite image, you need some containing element like a span with dimensions. The way to (almost) center it is with the extra line in red:

    Code:
    nav li a span {
    position: absolute;
    left: 50%;
    bottom: 15px;
    display: block;
    width: 13px;
    height: 7px;
    margin-left: -7px;
    }
    I say "almost", because it's 13px wide, so the margin can't quite be half its width.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m I thought I needed a containing element with dimensions but I wanted to check.

    I if didn't use a sprite but a separate image for button I could add it to the background and position it couldn't I ?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by ttmt View Post
    if didn't use a sprite but a separate image for button I could add it to the background and position it couldn't I ?
    Yes.


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
  •