SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Confused on which css image replacement method to use for horizontal nav?

    Hello,

    I usually never do image replacements, but it has been awhile since I have developed a website. I starting to get back into the swing of things but was wondering if anyone can help me understand which method would be more beneficial for a horizontal nav bar with the links in an unordered list.

    1. Technique #1
    - http://www.sitepoint.com/new-css-ima...ent-technique/

    2. Technique #2
    - http://nicolasgallagher.com/css-imag...eudo-elements/

    I have read multiple articles but people choose one over the other for different reasons and even the same reasons, so I really am quite confused on what I should utilize.

    The Nav Images are transparent. Using Method #1, the text appears behind the image, and using technique 2 doesn't seem to work for me at all as the text appears to the right of the image. I am applying the class to the <a> tag.

    Thank you in advance

    Edit:
    Technique 1 works if I make the if I apply a display:block to the class I assign to the <a> tag .

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Technique 1 is not so good, because it fails if images are off. But method two looks OK. I'd go for the Gilder/Levin method unless you need transparent images, though. Avoiding this method because of an extra span is purity gone too far, IMHO.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Thank you for taking the time to reply. At the risk of thinking I am over complicating things, I was wondering if you could clarify one more thing for me.

    When doing a horizontal nav, should I even go through the trouble of replacing the text with am image using the above or similar methods? Meaning, is this purely for a SEO or accessibility concern? Should I just use images and place the tag in the title or alt tags? I know this may be personal preference, but I am starting to wonder if I have the wrong idea on when I should actually utilize this lol. It looks like everyone just uses it for things like logos and headers, and not links like I am attempting to do.

    Thank you again in advance!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by 4SeeN View Post
    Should I just use images and place the tag in the title or alt tags?
    Image replacement is often used for menus, so certainly don't let that stop you. But the problem with using alt attributes as a fallback is that some browsers (Safari, ?Chrome) don't display them if the image fails.

    My preferred method is the Gilder/Leven replacement, demonstrated here:

    http://www.pmob.co.uk/temp/headerreplacement3.htm

  5. #5
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that clarifies a lot and thank you for the link. Doesn't seem like that method will work well with transparent images though, but I will continue looking around to see how everyone else is doing it.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by 4SeeN View Post
    Awesome, that clarifies a lot and thank you for the link. Doesn't seem like that method will work well with transparent images though, but I will continue looking around to see how everyone else is doing it.
    The second link you posted looks pretty good, especially as it seems to account for transparent images (though I can't quite work out how just yet!). I'd not seen that one before, so would be interested in what other CSS experts think of it, such as @Paul O'B ("other" than the author, that is!).

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The second link you posted looks pretty good, especially as it seems to account for transparent images (though I can't quite work out how just yet!). I'd not seen that one before, so would be interested in what other CSS experts think of it, such as @Paul O'B ("other" than the author, that is!).
    It's very similar to the CSS quiz we had a few years ago where an image was used in the html to push the text out of the way. The image can be supplied via the content property for modern browsers as mentioned in the quiz and saves any extra mark up. If the image is missing then the text just slides back into view.

    It's a good technique and will work with transparent images. A few years ago it wasn't worth the extra effort as support was limited but these days it is probably a worthwhile alternative.
    Edit:


    I didn't mention the downside in that you get the broken image icon in chrome and webkit should the image be missing. I've put up a demo here which solves that problem although the image has to be doctored to make it work.
    Last edited by Paul O'B; Jun 25, 2012 at 06:59.


Tags for this Thread

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
  •