How to create a clickable block?

Question

I have a view in Drupal 7 that displays 4 user field of the currently logged-in user. I rewrote the output to the following code:

<div>[field-1]</div>
<div>[field-2]</div>
<div>[field-3]</div>
<div>[field-4]</div>

I can add some CSS classes to the fields to let everything look a little bit better, but I'm stuck at a certain point: I'd like to add a link to the block that redirects the user to his/her profile page (the url is user/[uid]). To be completely clear, I'd like the whole block to function as some kind of "button" (just like the "button" in the top menu of this website), so I don't want the seperate fields to be linked to the profile page (I know how to do that anyway).

Can this be achieved with CSS and/or HTML?

Answer 1

Try wrapping the 'div' in an 'a' element:

<a href="/user/id"><div>[field...]</div></a>

Edit: This will make all the text appear as a link, so might want to add some CSS. Example:

HTML:

<a class="link-box" href="/user/id"><div>[field...]</div></a>

CSS:

.link-box {
  color: #000;
  text-decoration: none;
}