[html/css] Make a div or span block clickable without the sides also being clickable

Red Squirrel

No Lifer
May 24, 2003
62,582
9,752
126
twitter.com
Say I have a span block, I want to make the entire block clickable. But NOT the sides. Ex: (too lazy to take screenshot and upload file so will use basic ascii)

[0000000088888888000000000]

The [ ] represent browser window, the 0's represent the entire page, the 8's represent the actual block.

I don't want to be able to click on the 0 part and still it being clickable. I want to have to click on the actual block. For some reason I can't figure out how to make this work. I tried using a div and span (I can never really figure out the difference between the two) but the result is the same. How do I get this to behave properly?

Here's my code:

HTML:
Code:
	<br>
	<a class="serviceselect" href="'.$GLOBAL['baseurl'].'&amp;act=regform&amp;serviceid='.$data['sid'].'"><span class="serviceselect"><font style="font-size:24px;text-decoration:none">'.$data['sname'].'</font><br>'.$data['sattendees'].'/'.$data['scapacity'].' filled </span></a> <br><br>
	<br>
CSS:
Code:
span.serviceselect
{
     width:500px;
     border:2px solid #333333;
     background:#2e6599;
     padding:10px; 
     color:#dddddd;
     display: block;
}

a.serviceselect
{
    text-decoration:none;
}
span.serviceselect:hover
{
    background:#1b3c5b;
}
 

mooncancook

Platinum Member
May 28, 2003
2,870
45
91
If you want what's inside the span to be clickable, just put the <a> inside your span like this <span><a>.....</a></span>, or just add onclick event to your span instead of using <a>.
 

Red Squirrel

No Lifer
May 24, 2003
62,582
9,752
126
twitter.com
I want the actual span to be clickable too though, like everything inside the border. But for some weird reason it's making even clicking BESIDE it clickable as well, basically it extends the clickable area to the width of the page instead of the div.


So it seems div and spans add a <br> before and after by default. With further testing I was able to solve it by adding to the class of the span:

Code:
display: table-cell
Block and inline did not work.
 
Last edited:

purbeast0

No Lifer
Sep 13, 2001
51,735
4,194
126
I'm not really sure what you are asking lol, but it looks like you're just hacking up any solution that will just work regardless of it being a good solution or not.

This is super easy to do though with minimal html/css.

 

Red Squirrel

No Lifer
May 24, 2003
62,582
9,752
126
twitter.com
This is basically what I was trying to do:



I want to be able to click on the entire button, but not the sides.

With the code I shown in my OP, the sides are clickable too. Putting display:table-cell fixed the problem though.
 

ASK THE COMMUNITY