Add Link to DIV AND to Link Inside DIV

Get Started
1

Hi,

I am trying to add a link to a DIV and to an individual link within the DIV. However as soon as I add a link to something within the DIV it cancels out the link to the DIV.

Any suggestions please?

<a href="/profilepages/profilehost.php?ID=<?php echo $row['ID']; ?>"  rel="nofollow" >
<div id="homepagemarketplacecompany">
<div id="homepagemarketplaceheader">
<a href="/profilepages/profilehost.php?ID=<?php echo $row['ID']; ?>"  class='marketplacelinks' rel="nofollow" ><?php echo $row['company']; ?></a>
</div>
<div id="homepagemarketplaceinfo">
<b>Venue Type:</b> <?php echo $row['category']; ?>
</div>
<div id="homepagemarketplaceinfo">
<b>About Venue:</b> <?php echo $row['aboutvenue']; ?>
</div>
</div>
</a>
2

Yeah, it’s one or the other. Wrapping a link around block elements is a new thing in HTML5, but is illegal in older versions of HTML. Although allowed in the latest version, it’s better avoided if you can.

3

Thanks,

So if I remove the inner link to make the outer link work how would I add a mouseover affect to a single piece of content within the DIV?

I am trying to add a mouseover affect just to the company name.

4

[font=verdana]I’m not quite clear what you’re trying to achieve here (it’s better if you can post the HTML output rather than the raw PHP, so we can see more clearly what’s going on).

If the link around the whole <div> is pointing to the same place as the link within the <div>, the easiest way to achieve that is with Javascript. Just add

onClick="window.open( 'file.htm','_top' ); return false;"

to the <div>, with the appropriate filename and path there, and any browser that supports JS will make the entire <div> clickable, without messing things up for people without JS.[/font]

5

Is it possible just to apply a CSS class to piece of text so it appears it has a link without actually having a link.

6

Well yes, if you really want to confuse people, just style it in the same way as you style links … but I can’t see why you would want to do that …

7

When I style it with a link it removes the link from the DIV so its like Catch-22.

When I add a link to the DIV I cant style the text inside, when I style the text I cant add a link to the DIV.

Any suggestions on how I cant style the text without adding <a href </a> brackets?

www.peopleperhour.com use on their site. It works okay.

8

I’m still not at all clear on what you are trying to do, so it makes it hard for us to help. Perhaps create a screen shot of what you want to see (in normal and hover states) and we can suggest how to go about it. It wasn’t clear what part of that page you linked to was the relevant bit.

9

Apologies if Im not explaining it well.

If you go to www.peopleperhour.com and go half way down to “Marketplace at a Glance” there are personal profile areas of members. You can mousover a cell which changes colour but also one piece of text changes colours and underliners. I can do the mouseover for the cell but not the mouseover affect for the text.

Thats the affect I am looking to use.

10

[font=verdana]Right, I think I’m getting there now. What I’m seeing (IE8) is that when you :hover over the block, the colour of the block changes and the colour of the title text changes. That means it’s all linked to :hover on one <a> tag.

What you’re suggesting – having a separate <a> tag for the title text in the block – would mean that the name would only be highlighted in a different colour when you :hovered over the name itself, but not anywhere else in the block.

The way to do that, assuming you’re using HTML5 and so can have an <a> surrounding a <div>, is to put the company name in straight into <div class=“homepagemarketplaceheader”>, and then target that element with CSS along the lines of:

a:hover .homepagemarketplaceheader {color:red; text-decoration:underline;}

Another point to note is that you’ve used id rather than class, which is wrong because you are using the same names over again. The code I’ve given above is for class rather than id.[/font]

11

Another way to do this (leaving aside all HTML5 stuff) is to do something like set a background color for the div on hover, and also a color for the link when the div is hovered. E.g.

.homepagemarketplacecompany:hover {background: #e7e7e7;}
.homepagemarketplacecompany:hover a {color: #F5891D;}

So a full example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
.homepagemarketplacecompany:hover {background: #e7e7e7;}
.homepagemarketplacecompany:hover a {color: #F5891D;}
</style>
	
</head>
<body>

<div class="homepagemarketplacecompany">
  <div class="homepagemarketplaceheader">
    <a href="/profilepages/profilehost" class="marketplacelinks">Text</a>
  </div>
  <div id="homepagemarketplaceinfo">
    <b>Venue Type:</b> 
  </div>
  <div id="homepagemarketplaceinfo">
    <b>About Venue:</b>
  </div>
</div>
</body>

</html>
Off Topic:

Man, do your class names have to be so long? :smiley:

12

Hi,

Sorted it, I added a text mouseover affect to “homepagemarketplaceheader” This DIV is just for t title which is what I wanted to change colour on mouseover. So it now has the desired affect I was looking for.

Many thanks.