Hi, this is probably very easy but i'm not thinking straight this morning.

I have a <div> tag with a border and contained inside is a <h3> tag and a <img> /picture, i have put <a> before and after the <div> to make the whole <div> into a clickable link. Also added a:hover to change the color of the <div> border when hovering. Validation can't happen though as you can't have a block level element inside an inline element.

What do i need to do to make the whole div clickable and still be able to validate?

 

Thanks

Get rid of the div and make the a style display: block; with a width and/or height. See the bottom of item 3b Empty Links here:-

http://www.wickham43.net/specialeffects.php

 

Then try adding the border to the a tag style (as it's now a block element).

Try this:

 

CSS:

a.large, a.large:visited{
   display:block;
   width: 250px; /* Change as necessary */
   height: 150px; /* Change as necessary */
   padding:0; /* Change as necessary */
}
a.large:hover, a.large:visited:hover{
   background:#ffc; /* Color for hover in hex / text */
}

 

HTML (remove your div tags):

<a class="large" href="#"><h3>H3 Tag Here</h3><img src="#" alt="SEO" /></a>

 

EDIT: Ahh Wickham got in before me when posting

Edited February 16, 201016 yr by andyl

I thought you couldnt have a h3 inside an <a> ?

I thought you couldnt have a h3 inside an <a> ?

 

True, you could swap out the H3 for another styled tag, though with some obvious SEO drawbacks.

Great fast help, thanks guys.

Just put the <h3> tag outside of the <a> tag.

Now had chance to play around and as mteam said i still can't have an h3 inside the <a> as it is exactly the same problem as before - block element inside an inline element. Was hoping to still use the h3 as it's a product category section on the homepage so quite important. I have now 4 equally sized <a> tags changed to display block and floated left with pictures of product categories inside. I just need to be able to label each category with the h3 tag which is easy inside the <a> but harder to position if outside the <a> as Gareth has suggested.

Now had chance to play around and as mteam said i still can't have an h3 inside the <a> as it is exactly the same problem as before - block element inside an inline element. Was hoping to still use the h3 as it's a product category section on the homepage so quite important. I have now 4 equally sized <a> tags changed to display block and floated left with pictures of product categories inside. I just need to be able to label each category with the h3 tag which is easy inside the <a> but harder to position if outside the <a> as Gareth has suggested.

 

I had this issue and what I did was have the h3 title before the link and set it to display:none.

 

This is what I use on my site and it worked:

 

<div class="experience_title">
           <h3>Our Experience: Why you're in safe hands</h3><a href="aboutus.html" title="Click to find out more"></a>
           </div>

 

.experience_title {width: 280px; height: 40px;padding-bottom:10px; border-bottom: 1px solid #999999; }
.experience_title a {display:block;background: url(images/index_3nav.gif) no-repeat 0 0; width: 150px; height:40px; }
.experience_title a:hover {background-position: 0 -40px; }
.experience_title h3 {display:none;}

 

Not sure if that helps or not.....

 

If you want to see what it looks like, my site is here. It's the titles of the 3 blocks.

Edited February 16, 201016 yr by mrsminkie

Play about with the positioning, vertical-align and text-align properties. Also, top, right, bottom and left.

 

Give the h3 tag a class or id and position that within your CSS. Keep experimenting. You'll get there.

or simply ad "onclick="location.href='yourlinkhere';" style="cursor:pointer" to the div?!!