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.
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.
[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
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]
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.
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.
[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:
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]
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;}
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.