AndyGB4
Posts: 122
|
| Posted: 02/14/2013, 3:38 PM |
|
Hi everyone.
I have a <div> that has an image and some text inside it, and I'd like to make the whole div be clickable. Once clicked upon, I want to go to a different page.
Here's what the code looks like (simplified):
<a href="xxxxxxx">
<div class="iconBox">
<img src="images/imageName.png"><br>
Icon Name Here
</div>
<a>
The iconBox serves as a big button, kind of like the metro UI of Windows 8. So I want the entire box to be clickable, not just the image + text.
But here's where the problem is: this is all part of a Gallery style Grid. And the link for each icon is taken from the database. Now usually that's very easy to do with CodeCharge,
but in this case, I can't put a <div> inside the <a> because then CodeCharge starts freaking out and I'm not able to change the <a>'s href source from design view anymore, and when I publish, CodeCharge has problems with extra/missing </div>'s & </a>'s.
Any ideas how I can get a link from the database and have a whole div inside that link?
(and of course the whole would be inside a gallery style grid view)
Thanks!
|
 |
 |
Lucius
Posts: 220
|
| Posted: 02/15/2013, 12:05 PM |
|
Easy, use CSS.
Put a <A> link inside of a <DIV>. Other things, like your image also go inside the <DIV>. Make the link lead to your page, and for the text of the link put whatever you like.
Now the fun trick, in CSS define the <A> link as:
display: block;
height: XXXpx;
width: XXXpx;
font-size: 0px;
Of course make sure the width and height match the width and height of parent div.
If you have a problem with DIV being stretched by A, either set the DIV height and width, or use negative margin value on A.
If your link is not clickable (it is covered by some other elements inside of the DIV) use z-index values to make the A being set on top.
|
|
|
|
|
