how do I make entire DIV clickable

Question

I am creating some pagination. Each page number contained within it's own DIV.

Currently the page number is clickable. Is it possible to make the entire DIV within which the number sits to be clickable?

Here's my CSS

#article_pagination{
float: left;
padding: 0px 4px 0px 4px;
margin: 0px 3px 0px 0px;
border: 1px solid #999999;
display:block;
cursor:pointer;
}

#article_pagination:hover{
border: 1px solid #333333;
background-color: #99C0F3;
}

#article_pagination a:hover{
color:#FFFFFF;
}

Here' my php/HTML for one of the pagination DIV's

'<div id="article_pagination"><a href="'.$base_url.'/article_view.php?channel='.$channel_view.'&page='.$Next_Page.'">Next >></a></div>'

Answer 1

The simple way is to put the div inside the a element:

'<a href="'.$base_url.'/article_view.php?channel='.$channel_view.'&page='.$Next_Page.'"><div id="article_pagination">Next &gt;&gt;</div></a>'

Note that I have also changed >> to >> to make your code valid.

You may think, "Hang on, a elements can't contain div elements." They can, under certain conditions. Basically, as long as the element inside the a element doesn't contain any interactive content (links, buttons, etc.), it works fine.

a is defined as what HTML5 calls a "transparent element" , so long as no interactive content is inside it. This means:

the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself (source)

Answer 2

you could add #article_pagination a{ display: block; } #article_pagination a{ display: block; } should work. Greetings, Kevin

Answer 3

Put it inside an <a> tag. Anything in such a tag is clickable and can have a link attached.

A better way is to use a little javascript. You can find some copypaste code :)

Answer 4

Place onclick="window.open('http://yourpage.com','_blank');" after the div. Remove ,'_blank' if you want it to open in the parent. Also, stylize it with style="cursor:pointer;cursor:hand;" if you want the mouse to change into a pointer.