1

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 background 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.

irishbuzz
  • 2,420
  • 1
  • 19
  • 16
  • 2
    this won't help, but nesting anchors like that would be invalid markup and could cause problems further down the line. I doubt it can be done with *conventional* means, but then SO is home to gods amongst men. I'd also suggest re-working the implementation if possible (i.e. using a clickable `div` which could easily support multiple links in this fashion) (but also appreciate the stubbornness of the "powers") – Ross Nov 24 '10 at 22:08

4 Answers4

6

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>
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Thanks Diodeus. This is certainly a possible solution alright [see here](http://jsfiddle.net/JLpsG/). I'm going to leave the question open for another while to see if anyone can possibly find a better answer but I'll accept if not. – irishbuzz Nov 24 '10 at 22:34
  • Ok this certainly looks like the best answer. The demo in my last comment uses `padding-bottom` on red clickable area element in order to stretch the area enough for the inner link to be moved into. It's actually easier to just add an extra `
    ` in the clickable area as this also achieves the perfect amount of space. Thanks again Diodeus     – irishbuzz Nov 25 '10 at 10:45
1

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.

Martin Algesten
  • 13,052
  • 4
  • 54
  • 77
  • +1 for working solution. Thanks Martin. I think Diodeus and Michael's solutions are possibly a little better as they do not require the 'bigred' link to use absolute position or have set width/height. – irishbuzz Nov 24 '10 at 22:41
1

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>
Michael
  • 1,201
  • 1
  • 8
  • 15
0

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

stevelove
  • 3,194
  • 1
  • 23
  • 28
  • This would be a normal situation but irishbuzz sed the following 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 tags – Michael Nov 24 '10 at 22:24
  • thanks for taking the time to answer. I addition to what Michael comments - the yellow clickable area can only cover the text of the 2nd link while the red background has to fill out the remaining room to the right. – irishbuzz Nov 24 '10 at 22:30