CODEWITHSUNDEEP
csshtmlclick
Ruf1
Ruf1

Reputation: 179

how do I make entire DIV clickable

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>'

Upvotes: 0

Views: 143

Answers (4)

Daerik
Daerik

Reputation: 4277

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.

Upvotes: 0

spacegospod
spacegospod

Reputation: 25

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 :)

Upvotes: 0

Wavemaster
Wavemaster

Reputation: 1814

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

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237837

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 &gt;&gt; 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)

Upvotes: 1

Related Questions