A link problem revisited

[qim]

Hi

http://pintotours.net/TEMP1/

When I first coded the page above I was unable to make each of the three horizontal images (inside .row) act as a link without repeating the affiliate code redirection.

So, I left just the bottom blue bar as the link. What is the best way of being able to use the bar and image (or just the image) and keep the visual format as it is?

I tried something like this, but it does not work

<a><div class="box"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="/Pinto/Ads/Sandals.gif" alt="Sandals Resorts" width="250" height="250"></div><href="/request/index.php?id=Sandals" target="_blank"><div class="mgn"><p>CARIBBEAN</p></div></a>

[TechnoBear]

The code you have posted is invalid. (href is an attribute of the <a> tag; it isn’t a tag in itself.)

HTML5 allows you to nest a <div> within <a> tags, which was invalid in earlier versions.

<div class="row">
<a href="/request/index.php?id=Hilton" target="_blank">
<div class="box"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="/Pinto/Ads/Hilton3.gif" alt="Hilton Hotels" width="200" height="200">
<div class="mgn"><p>WORLDWIDE</p></div>
</div>
</a>
<a href="/request/index.php?id=Sandals" target="_blank">
<div class="box"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="/Pinto/Ads/Sandals.gif" alt="Sandals Resorts" width="250" height="250">
<div class="mgn"><p>CARIBBEAN</p></div>
</div>
</a>
<a href="/request/index.php?id=Emirates" target="_blank">
<div class="box"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAIAAAD9b0jDAAAAKElEQVRIx2P8//8/A7UBEwMNwKiho4aOGjpq6Kiho4aOGjpq6OAzFADRYgM18cIRtgAAAABJRU5ErkJggg==" data-src="/Pinto/Ads/Emirates.jpg" alt="Emirates Airline" width="250" height="250">
<div class="mgn"><p>FLY EMIRATES</p></div>
</div>
</a>
</div><!-- close row -->

You’ll need to adjust the CSS for .mgn.

(And why are you using <br> tags to control layout on that page?)

[qim]

Hi TechnoBear

Magic!

Sorry, I was out all afternoon.

I use <br>s to get it to look as I want; later I clean up as much as possible

Many thanks