A question about a link block

HTML & CSS
1

Hi there,

Dose anyone know how I could turn the following in to a single clickable block link, so when a user rolls over anywhere in the block it changes colour and becomes a link.

<div class="one_third">	
<h2><a href="#">News Letters Suday test post</a></h2>
<small>May 15th, 2011</small>
<div class="thumbnail"><a href="#" title="News Letters Suday test post"><img width="190" height="140" src="image_link.jpg" class="medium-thumbnail" alt="front-news" title="front-page3" /></a></div>	
<div class="entry">
<p><a rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/.">Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis</a></p>
</div>
</div>

I have done some css and I’ve got close to what I’m after but not quite there, the link elements work and block fades but is not active? (sorry for length of code)


.one_third small, .one_third_last small {
	font-size: 11px;
	margin-left: 20px;
}
.one_third, .one_third_last {
	float: left;
	width: 280px;
	margin-left: 34px;
	background-color: #eee;
	padding-bottom: 230px;
}

.one_third a, .one_third_last a {
	display: block;
}

.one_third h2, .one_third_last h2 {
	font-size: 16px;
	padding-left: 20px;
	padding-top: 10px;
}

.one_third h2 a, .one_third_last h2 a {
	color: #626262;
	display: block;
}

.one_third h2 :hover, .one_third_last h2 :hover {
	color: #a30ffc;
}

.one_third, .one_third_last {
-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
-moz-transition: background-color 500ms ease-in; /* FF3.7+ */
-o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
transition: background-color 500ms ease-in; /* futureproofing */
    background-color: #eff4ed;
    height: 186px;
	margin-top: -7px;
}
 
.one_third:hover, .one_third:focus {
    background-color: #f9fdfd;
}

.one_third_last:hover, .one_third_last:focus {
    background-color: #f9fdfd;
}

.entry {
	clear: both;
}

.entry a {
	margin: 0;
	padding: 10px 20px 0;
	font-size: 13px;
	line-height: 1.5em;
	color: #626262;
	display: block;
}

Thanks for your help, also the site is not online yet or I’d post a link to it.

2

Hi Nsokyi. Welcome to SitePoint. :slight_smile:

Not all of the links point to the same thing. Do you want everything there to point to the same destination?

You can’t really do this easily in HTML4, though HTML5 apparently will let you wrap a link around block level elements.

I’m not sure it’s such a good idea to have so many different links point to the same thing anyway. Perhaps take the heading out of the equation (i.e. de-link it) and do something like:

<style>
small, img, span, a {display:block;}
</style>

<div class="one_third">	
<h2>News Letters Suday test post</h2>
<p><a rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/"><small>May 15th, 2011</small>
<img width="190" height="140" src="image_link.jpg" class="medium-thumbnail" alt="front-news" title="front-page3" />
<span>Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis</span></a></p>
</div>
3

Hi ralph.m,

Thanks for your reply, yes all the links are going to the same place, at one point I did have it so that the title was just plane old h2 with no link and it kinda looked a little detached from the post excerpt but I might as well go back to it as I’m not having much joy with this.
I also read that html 5 will allow an anchor to wrap different elements that be handy when I get round to learning html5.

4

The easiest and most accessible way to make a link block clickable is to have a regular <a href=“/file.htm”> on the most obvious element (probably the title, that’s what’s most often clickable on that kind of teaser), and then have
<div class=“one_third” onClick=“window.open( ‘/file.htm’,‘_top’ ); return false;”>

That uses Javascript to make the whole block into a clickable block activating the link, but you’ve still got the regular link as a back-up for people who aren’t running Javascript.

5

Thanks Stevie, I’ll give that a go.