kalpetros kalpetros - 2 months ago 8
CSS Question

Remove space around clickable image

I'm trying to place a clickable image in the center using

padding
.

The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.

If I remove
padding
it works but then the image isn't were I want.

Is there a way to fix this?

My HTML:

<body>
<div class="page">
<div class="body">
<div id="clicktoenter">
<h1><a href="home.html" class="home" title="Home Link"></a></h1>
</div>
</div>
</div>
</body>


My CSS:

.body{
width:940px;
margin:0 auto;
padding:0 10px;
overflow:hidden;
}

.home{
margin-bottom: 10px;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
padding:200px 200px;
}

.home:hover{
background:url(../images/imageclick.png) center center no-repeat;
padding:200px 200px;
}

Answer

Change your margin to this and it will center, not using padding.

.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
Comments