SitePoint Sponsor

User Tag List

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

    Text Behind Navigation Images

    Ralph was helping me(thank you) with the HTML/CSS for creating text behind navigation images so if you were to turn images off, the text links would still be there in the same position.

    I was discussing this with a developer buddy and he was questioning the use of this text behind nav images technique. He feels it is uneeded extra work when you could just use indent.

    So it got me thinking. What are the true benefits/purpose of text behind images? Is it for users who turn off images when they browse? Is it any more SEO friendly than using the indent feature?

    Words of wisdom?

    thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    There is no perfect method, but hiding the text behind the image is the most accessible version so far. Some people browse with images turned off (to save bandwidth, say on mobiles) and it's annoying to have lots of text missing. (I turn off images on the mobile while travelling, so I see this a lot.)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes as Ralph said it is the most accessible method around.

    Negative text-indent moves the text off screen so if you have a broken or missing image (or the user has turned images off) then the user gets nothing at all. Also if the element is a link (as in navigation elements) you can end up with the focus outline stretching off the side of the page into infinity and looking very strange (turning off the outline is not a good idea either as you will thwart keyboard users.)

    The text behind the image method works in any combination of css on/off or images on/off and the user will still get content (and so will search engines and screen readers) (apart from a bug in opera mobile that Ralph pointed out a while ago). The main drawback of the text behind the image is that you can't easily use transparent images because the text would be visible.

    There is also a minor point that as you are hiding nothing off screen then it can't be seen as an attempt to fool search engines although it has been stated that you should not be penalised for using properties in the normal way anyway.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanations - makes sense now.

    With the transparent images sometimes you have to be creative with using text properties - I was able to once get some text perfectly behind the transparent .png image I was using.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    you can end up with the focus outline stretching off the side of the page into infinity and looking very strange (turning off the outline is not a good idea either as you will thwart keyboard users.)
    It seems you can instead give the <a> overflow: hidden without any side effects (so far as I know).

    Quote Originally Posted by Bades View Post
    I was able to once get some text perfectly behind the transparent .png image I was using.
    That's likely to fail, though. Different browsers may position the text slightly differently, and if someone has their font sized bumped up, the text will also be in a different position.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It seems you can instead give the <a> overflow: hidden without any side effects (so far as I know).
    Yes I think that's working these days. IIRC there used to be a few bugs with overflow and outline but there are no problems in current browsers (that I can remember).


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
  •