Image Replacement and links - HELP needed!

Discussion in 'Web Design and Development' started by sk3pt1c, Apr 17, 2007.

  1. sk3pt1c macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #1
    i've used image replacement on a site i'm building to replace the links in <li> in a <ul> that i'm using for navigation with images.
    the idea was to keep the navigation accessible for people with no images and to provide cool looking fonts for those that are using normal browsers.
    but, the links don't work.
    can you not use image replacement for links?
    can someone reply a.s.a.p. please?!?!
    thanks
     
  2. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #2
    anyone?
    i really need some help here

    ps. i used the Levin method as described in "The zen of css design"

    any ideas?
     
  3. mnkeybsness macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #3
    you need to post some code examples for how you are actually doing it. otherwise all i can say is that, yes, image "replacement" does work.
     
  4. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #4
    ok, here goes
    this is the html
    HTML:
    <li class="replace" id="home"><a href="htttp://www.google.com">Home</a><span></span></li>
    and this is the css
    Code:
    .replace {
    	position:relative;
    	margin:0px;
    	padding:0px;
    	/* hide overflow:hidden from IE5/Mac \*/
    	overflow:hidden;	/**/
    }
    
    .replace span {
    	display:block;
    	position:absolute;
    	top:0px;
    	left:0px;
    	z-index:1;
    }
    #home, #home span {
    	height:28px;
    	width:61px;
    	background-image:url(images/home.gif);
    }
    
    the CSS is exactly off page 134-135 of the Zen of Css design
    when i preview the page, the image replacement works just fine
    but when i hover over it i don't get the link "hand", nor the "title" and
    of course i can't click on it.

    what gives?
     
  5. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #5
    My guess is that you're putting the span above the link (z-index: 1), and since the span isn't contained within the link, it's as if the anchor isn't even there.

    ...but that's more of a WAG than anything else.
     
  6. yellow Moderator emeritus

    yellow

    Joined:
    Oct 21, 2003
    Location:
    Portland, OR
    #6
    Wild Ass Guess?

    Never heard that one, but I likes it.
     
  7. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #7
    WAG does rock, but it does seem odd to me that a method put in a very popular book would fail to work on links...

    putting it above the link is the point in replacing the link with the image, but i want to keep the link's behavior and not the text.

    if i put the span in the link, it doesn't really work.

    should i add extra css to make it work or what?
     
  8. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #8
  9. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #9
    links seem to work with Thierry image replacement but when the style is disabled they disappear...
    hmmm
    can someone lend a hand here?
    hello?:)
     
  10. sk3pt1c thread starter macrumors 6502a

    sk3pt1c

    Joined:
    Nov 29, 2005
    Location:
    a simulacrum
    #10
    this just proves my point that CSS sucks!
    until it's a legal requirement or it gets better, there's absolutely no use spending so many hours trying to find the best hack to make it work...
     
  11. ambient macrumors member

    Joined:
    Apr 21, 2007
    #11
    css defiently doesnt suck once you get the hang of it.. i would deinfetly look at using maybe javascript for this effect css is more for layout sorta stuff..

    http://www.quirksmode.org/dom/fir.html

    maybe try this...
     

Share This Page