SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about sprites...

    I've used sprites three time so far, however this new set of navigation that I designed, as you can see in the picture, the links do have gaps between each other. How do I account for those gaps in the css? margin or padding?

    The other sprites I've done the links have been right up next to each other and I would do something like this to denote the anchors:
    Code:
    #nav a.home{width:75px;}
    #nav a.design{width:75px;}
    #nav a.development{width:207px;}
    #nav a.webmarketing{width: 103px;}
    And those widths I'd set for the anchors would basically just be right next to each other...i tried doing a margin and a padding in the code above but that really didnt work
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I'm not clear on whether you want the gaps or not. Anyhow, it would be best to post your full HTML and CSS.

    If you are using list items and want a space to the right of each, use something like

    Code:
    li {margin-right: 20px;}

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess a margin-left could work, the padding left didnt work.

    Is this the best way?

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, yeah the pic I posted in the first post is how I want it too look

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bades View Post
    Sorry, yeah the pic I posted in the first post is how I want it too look
    That's still not very clear. Post your HTML and full CSS. Does the picture show the unhovered state at the top and hovered state at the bottom?

  6. #6
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Does the picture show the unhovered state at the top and hovered state at the bottom?
    yes, ok let me work on getting my mark up on here

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just use a margins as Ralph said at the start.

    Size each link to match the state of the hovered link and then space them out with margins.

    It should be straight forward


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
  •