CODEWITHSUNDEEP
htmlcssimagehyperlink
user1462362
user1462362

Reputation: 13

Issues with an image link

Two days ago I spontaneously bought myself a domain. The day before that, I hardly even knew what a domain really was. Since then, I've been trying to teach myself HTML for the very first time. Basically what I'm trying to say is, I'm very new - and will probably be poor in my explanations.

I just succeeded in making an 'image-button', sorta. It's where I make a button-like image and then use it as navigation on my website (just like a regular link). My issue is that the link 'border' itself is bigger than the image, so you can press an inch outside the image itself and it will work. How do I make the invisible link 'border' the same size as the button?

This is my site: http://www.djeveln.com

On the test page (djeveln.com/test) is where I test things. There's the button I'm talking about, in case you can't understand my explanation very well.

Here's my HTML:

<a class="ButtonLink" href="http://www.djeveln.com" title="Home"> 
<img src="/images/button.png" class="TestButton"></a>

Here is the CSS I use for the image position and size: 

img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/ 
    position: absolute; 
    width: 100px; 
    height: 75px; 
    top: 400px;
    right: 250px; 
}

Hope you can help me! :P

Upvotes: 1

Views: 147

Answers (2)

bfavaretto
bfavaretto

Reputation: 71918

Your button image contains a large transparent area (with the actual button more or less in the center), and that's what is causing the "borders".

Although there are CSS workarounds for that, I'd recommend you just open the image in Photoshop (or any other image editor), and crop the transparent area away. Make your image the exact size of your button.

One more tip, that can make your life way easier as your learn: use a debugging tool like the Chrome Developer Tools, or Firebug (if you're on Firefox). With those, you can inspect any element on your HTML (right click it and choose "inspect"), check the CSS applied for them (and also modify it on-the-fly for testing), and much more. That's how I spotted the transparent border on your image.

Upvotes: 4

Geoffrey Wiseman
Geoffrey Wiseman

Reputation: 5637

At a quick glance, it looks like you've simply made the image too large. There's a lot of transparent image outside the button that is part of the click target. How are you making the button?

If you made it in Photoshop, for instance, you should crop the image to be tight to the border of the button.

You could do that in CSS, but you'd be making work for yourself -- I'd modify the source image.

Upvotes: 0

Related Questions