Displaying a link within a hyperlinked area_问答_开发者

Have come against an interesting problem and I'm stumped.

Basically on one of our pages we have a couple of hyperlinked areas. These areas are not only clickable where they have text but throughout the entire backgro开发者_开发问答und by setting the link with display:block. You can see a simple example of such a clickable area here.

So recently the powers that be have asked me to add another link within this area. The inner link would have a different target to clickable area and will only be clickable for it's immediate text and the rest of the clickable area will wrap around it. You can see how this would fit together in this demo (the yellow bit represents the clickable portion of the inner link and the red represents the outer link). NOTE: I realise this looks a very messy implementation but I'm afraid it's out of my hands.

By design (and for good reason) I cannot simply nest my <a> tags like so:

<a href="#" class="clickable_area">
  <span>RED Background and clickable</span><br/>
  <span>RED Background and clickable</span><br/>
  <span>RED Background and clickable</span><br/>
  <a class="inner_link" href="#">Yellow background and it's own link</a><br/>
</a>

Trying to nest the tags like this causes the outer link to be closed prematurely by the first instance of </a> as seen here.

One solution may be to make the inner link a span element and then use onclick events to perform the hyperlink via JavaScript but I'm not too found of this approach and would really prefer to avoid any JavaScript workarounds.

I've tried a couple of workarounds with CSS etc. but as yet I've come up dry. I've a feeling that absolute positioning or negative margining could be key but I've never been any good at either.

If anyone could offer up any suggestions I'd be very appreciative.

You can't nest links. My suggestion is to absolutely position the inner link over top of the outer area, somewhat like this:

<div class="container" style="position:relative">
<a href="...">
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
<span>RED Background and clickable</span><br/>
</a>
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a>
</div>

You can't nest links, but use absolute positioning.

<div id="wrapper">
  <a id="bigred" href="...">Big clickable area</a>
  <a id="yellow" href="...">Yellow background link</a>
</div>

CSS

#wrapper {
  position: relative;
  height: 300px;
  width: 500px;
}

#bigred {
  background: #ff0000;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 500px;
}

#yellow {
  background: #ffff00
  position: absolute;
  top: 30px;
  left: 30px;
}

Both links will be clickable. Yellow is drawn on top of red because of source order. If you change the order you will need to use z-index to control which displays on top of which.

Here you go a working example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<style>
a {text-decoration:none; background-color:red}
.clickable_area{display:block;color:#000; padding-bottom: 20px;}
.container{position: relative;}
.inner_link{position:absolute; bottom: 0px; background-color:yellow}
</style>

    <div class="container">
        <a href="#" class="clickable_area">
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
            <span>RED Background and clickable</span><br/>
        </a>
        <a class="inner_link" href="#">Yellow background and it's own link</a>
    </div>

</body>
</html>

I'd use a div to wrap your links. Is this what you're going for? http://jsfiddle.net/wcCMC/3/