SitePoint Sponsor

User Tag List

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

    Help with Navigation

    The navigation always seems to be my most time consuming and troubling part of CSS. I've only done a handful of websites and it seems every site has something different with it's navigation so I haven't necessarily done the same CSS Nav twice.

    With the attached image of my sprite, what would be the best approach to css this?


    The one thing I want to do is have the text links placed behind the sprite image, so I believe this where I start to run into problems. I don't want text links to be margin-left:-1000px. Basically if you were to turn off images I want the links to be right behind the sprite image. So I started off with having a <span> for each <li> and applied the sprite image to the <span> and made it position:absolute and used background positioning and margins to place the sprite correctly. But so far it seems very messy and convoluted.

    Plus I have the front and end caps (what I call 'caps') of the sprite image that also needs to shown. Would I give them their own <li> and just not apply an <a> tag?

    Sorry for the rant - what approach would you use? I think I could do it myself but it would just be messy...

    http://badesdesign.com/images/navSprite.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bades View Post
    I started off with having a <span> for each <li> and applied the sprite image to the <span> and made it position:absolute and used background positioning and margins to place the sprite correctly.
    You are on the right track ... except for the margins. Don't worry about them. Give the <a> and the span a width and height to match the area of the sprite you want seen. Give the <a> position: relative, so that the <span> will be placed in relation to it. Or you can give position: relative to the li itself, but also give it the width and height of the span.

    Here's an example of the method:

    http://www.pmob.co.uk/temp/headerreplacement3.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because my widths differ for each nav item that means I need separate CSS for each link's width in regards to its <a> and <span>?

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried applying widths to each link's <a> and the <a>'s width is only as wide as the text links. And won't seem to take to the width I'm setting forth on it.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Example

    <li><a class="home" href="index.html">Home<span></span></a></li>

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Bades View Post
    Because my widths differ for each nav item that means I need separate CSS for each link's width in regards to its <a> and <span>?
    Yes, a separate width will be needed on each item, so give each li a special class. Set the li, <a> and span all to the same width and height, and give them display: block for good measure.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My nav is left to right, so I applied a display:inline; like this

    #nav li, #nav li a, #nav li span{
    height: 46px;
    position: relative;
    display: inline;
    }

    Because you mentioned display:block, should I change my inline to a inline-block?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I'd be more inclines to float the LIs. I find that float works better than display: inline, and then you don't have the conflict of displays either. Inline-block is very handy, but sometimes leaves gaps between elements, which is annoying if you don't want those gaps—which I expect is the case here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •