CodeCharge Studio
search Register Login  

Visual PHP Web Development

Visually Create Internationalized Web Applications, Web Reports, Calendars, and more.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> .NET

 Making a <div> act as a <a> w/ link from database

Print topic Send  topic

Author Message
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!
View profile  Send private message
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.
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

MS Access to Web

Convert MS Access to Web.
Join thousands of Web developers who build Web applications with minimal coding.

CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.