SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text in front of sprite

    Can't figure out how to get the text to go behind the menu sprite (left sidebar nav) on the <span><em> (active page) on these menu pages (lunch, dinner, brunch): charlotteswebservices.com/temp/http-stoneyknob/sustenance/brunch.html

    Also, wondering if you have a jquery suggestion for this scroller: charlotteswebservices.com/temp/http-stoneyknob/sustenance/images/scroller-capture.jpg

    Thanks so much!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Simply add "text-indent -9999px" as a property for your anchor element and the text will be pulled of the left side of the page but still visible for screen readers. As for the scrollbar take your pick, there are quite a few plugins for custom scrollbars.

    https://www.google.com/#hl=en&cp=14&...w=1680&bih=830

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Chris! For the active pages I don't use an a link:

    HTML Code:
    <li class="nav2"><span>sustenance<em></em></span></li>
    I thought I could use the same method as the top nav. See the code;

    Code:
    #nav li em {left:0 top:0;}
    On menu/leftsidebar nav (nav in question) it works fine (text is under sprite) on the non-active pages even on the hover. It's just the active page that it's not working.

    Which element would I add text-indent -9999px to?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Because you have multiple elements that change based on where you are within the site it would be easier to just add the text-indent property to the LI selector as it will remove the text no matter what element it exists within.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it. It's working. Added it to the wrong nav first. Thanks Chris!

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it!

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I just tried it using the link you posted above and it worked fine for me, which browser are you testing it in?

    EDIT: Just noticed you fixed it

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much!

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Karen,
    I would not use text-indent to hide the text. By doing that users with "Images Off" loose the ability to navigate since there is no visible replacement text.

    The empty element for the sprite image is what I normally call the sandbag. It gets set as position:absolute; and when comes after your text it naturally layers above it since it is a positioned element lower in the source order.

    Here is a simple example of a Sprite Nav with Replacement Text, just view the page source for complete code structure.

    I also remember Paul writing a detailed example for you in one of your older threads, have a look through it as well since it gives a better explanation of how to structure the html/css.
    http://www.pmob.co.uk/temp/sculleynav.htm

    EDIT:
    Keep in mind that you can reduce the amount of BG positions by setting a negative margin on the sandbag for hover/focus. The first link I gave uses that method.

  11. #11
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use Paul's examples for my sprites so I've gone over it quite a bit. I don't get why it works on the top nav but not the bottom. I'll look yours over.

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sculley View Post
    I use Paul's examples for my sprites so I've gone over it quite a bit. I don't get why it works on the top nav but not the bottom. I'll look yours over.
    You have the html wrong on the page you linked to.

    You have this -

    Code:
    <li class="menu3"><span><em>brunch</em></span></li>
    When it should be this -

    Code:
    <li class="menu3"><span>brunch<em></em></span></li>
    The sandbag needs to come after the text and it needs to be empty. It looks like there is a stray closing anchor tag in your code also.

  13. #13
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great call! Now it's working w/o the text-indent. Thanks so much!

    I'd like to make the top and bottom blue tabs with very small text in them deeper so that when users make text size bigger the text dictates the height so it doesn't break the layout. Tried setting a min-height but didn't seem to work. Thanks much!


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
  •