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

[Red Squirrel]

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:

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

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]

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]

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:

display: table-cell

Block and inline did not work.

 

[purbeast0]

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.

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

 

[Red Squirrel]

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.

 

[purbeast0]

Yeah that's what I did in the jsfiddle I linked to.