• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 796
  • Last Modified:

Making clickable link area bigger, but using an image link

This really should be an easy question for you guru's, I'm just not sure what the problem is.

I found this page earlier and it details how to get something like that working:

http://v3.thewatchmakerproject.com/journal/154/simple-css-how-to-make-clickable-areas-bigger

However, it seems this method falls apart when using images. I'm using the image rollover technique where it just moves the image position... if I increase the padding size on the tag as it does in the tutorial, it reveals what part of the image is suppose to be hidden... not only that, but the clickable area get's aligned to the left when I need to be centered. Doing that, there is no additional room on the left to click the link unless you are moving over the image, and on the right there is a bunch of room.

I know it's possible to do this, I'm just not sure what I'm doing wrong. How would the tutorial be altered? Here's what I have:

         
<div>
     <ul>
          <li><a id="workbutton" href="#" title="Work"><span>Work</span></a></li>
          <li><a id="processbutton" href="#" title="Process"><span>Process</span></a></li>
          <li><a id="clientsbutton" href="#" title="Clients"><span>Clients</span></a></li>
          <li><a id="contactbutton" href="#" title="Contact"><span>Contact</span></a></li>
          <li><a id="homebutton" href="#" title="Home"><span>Home</span></a></li>
     </ul>
</div>

_______

ul {
    list-style-type: none;
    overflow: auto;
    padding: 0;
    margin: 0;
}
ul li {
    float: left;
    margin: 0px 10px;
}
ul li a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
ul li a:hover {
    text-decoration: underline;
}

#workbutton {
    float: left;
    display: block;
    width: 29px;
    height: 9px;
    margin-left: 30px;
    background: url(../images/buttons/work_button.png) no-repeat 0 0;
}

#workbutton:hover {
    background-position: 0 -9px;
}

#workbutton span {
    display: none;
}

#processbutton {
    float: left;
    display: block;
    width: 47px;
    height: 9px;
    background: url(../images/buttons/process_button.png) no-repeat 0 0;
}

#processbutton:hover {
    background-position: 0 -9px;
}

#processbutton span {
    display: none;
}

#clientsbutton {
    float: left;
    display: block;
    width: 38px;
    height: 9px;
    background: url(../images/buttons/clients_button.png) no-repeat 0 0;
}

#clientsbutton:hover {
    background-position: 0 -9px;
}

#clientsbutton span {
    display: none;
}

#contactbutton {
    float: left;
    display: block;
    width: 44px;
    height: 9px;
    background: url(../images/buttons/contact_button.png) no-repeat 0 0;
}

#contactbutton:hover {
    background-position: 0 -9px;
}

#contactbutton span {
    display: none;
}

#homebutton {
    float: left;
    display: block;
    width: 33px;
    height: 9px;
    background: url(../images/buttons/home_button.png) no-repeat 0 0;
}

#homebutton:hover {
    background-position: 0 -9px;
}

#homebutton span {
    display: none;
}

Open in new window

0
cdeforge
Asked:
cdeforge
1 Solution
 
acashokCommented:
please try with this:

ul {
    list-style-type: none;
    overflow: auto;
    padding: 0;
    margin: 0;
}
ul li {
    float: left;
    margin: 0px 10px;
}
ul li a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 5px;
      color:#000000
}
ul li a:hover {
    text-decoration: underline;
}

#workbutton {
    float: left;
    display: block;
    width: 29px;
      padding:20px;
    margin-left: 30px;
    background: url(../images/buttons/work_button.png) no-repeat 0 0;
}

#workbutton:hover {
    background-position: 0 -9px;
}

#workbutton span {
    display: none;
}

#processbutton {
    float: left;
    display: block;
    width: 47px;
      padding:20px;
    background: url(../images/buttons/process_button.png) no-repeat 0 0;
}

#processbutton:hover {
    background-position: 0 -9px;
}

#processbutton span {
    display: none;
}

#clientsbutton {
    float: left;
    display: block;
    width: 38px;
      padding:20px;
    background: url(../images/buttons/clients_button.png) no-repeat 0 0;
}

#clientsbutton:hover {
    background-position: 0 -9px;
}

#clientsbutton span {
    display: none;
}

#contactbutton {
    float: left;
    display: block;
    width: 44px;
      padding:20px;
    background: url(../images/buttons/contact_button.png) no-repeat 0 0;
}

#contactbutton:hover {
    background-position: 0 -9px;
}

#contactbutton span {
    display: none;
}

#homebutton {
    float: left;
    display: block;
    width: 33px;
      padding:20px;
    background: url(../images/buttons/home_button.png) no-repeat 0 0;
}

#homebutton:hover {
    background-position: 0 -9px;
}

#homebutton span {
    display: none;
}
0
 
cdeforgeAuthor Commented:
Nope, that didn't work. Here's a link to the site so you can see the problem better: http://michaeldeforge.com/backend/landgraff/index.html

Sorry I didn't give that to you earlier. I just uploaded it.
0
 
vimalrajaCommented:
I hope this fixes your problem. Add "overflow:auto;" to #menu.
#main {
display:table;
margin:70px auto auto auto;
width:806px;
overflow:auto;
}

Open in new window

0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
cdeforgeAuthor Commented:
No, I updated the site with your fix. It's still  having the same problem unfortunately. Check the link again =/
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hi cdeforge,
1. take out the 20px padding from each button in acashok's code.
2. Re-do your sprites in photoshop. You are neglecting to take into account the tail of the "p" in "process".
Redo all other buttons EXCEPT "process". Use the process button as the guide.
A good way to do this is to open the process sprite and create the others in different layers and reduce opacity to check that letters such as "a" "e" "c" etc are level with those in the process layer. Also, use your guides.

This should fix the problem.




0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Oh and give each button a height in your css. The height of 1/2 of your sprite.
Another tip,
get rid of the spans and indent your link text.
Place the first line in this code near the top of your style sheet. This gets rid of that silly box firefox likes to add to links.

you'll have to adjust the height of your buttons and the background position. The process sprite will be taller by a couple of pixels. Better to make all sprites the same height.
/* place this near top of style sheet */

a {outline: none;}

/* one button as example */

#homebutton {
    float: left;
    display: block;
    width: 33px;
    height: 9px;
    background: url(../images/buttons/home_button.png) no-repeat 0 0;
}

#homebutton:hover {
    background-position: 0 -9px;
}

#homebutton a {
    text-indent: -9999px;
}

Open in new window

0
 
cdeforgeAuthor Commented:
Thanks for catching that =] I'll redo the buttons. I'm debating on whether or not to just simply remake the button sizes bigger, but I'd like to get this way working if possible.

It's still not working the way I want it to. I made a video to reproduce the results. See how the clickable area just ends up to the right of the button? It's not below it either. Obviously it's not on top because the button is right on the top there, but you get the idea.

Is this doable? If not, I guess I'll just go back and expand my buttons while I'm fixing that "P" issue.

http://screencast.com/t/OTc3NGI0NT
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Sorry, I see your problem:

In order for the link area to be bigger you need to give a width and height to the anchor.
The anchor is what's clickable. It's usually an inline element and can only be activated by clicking on the actual words. By making it a block element you can now give it height and padding and whatnot, You can't do with inline elements.
So give #homebutton the same height and width of your image. Each button's anchor will have a different width but same height. The anchor gets the background image as well.
Please note the addition of the anchors to the code. It's often forgotten that the anchor is creating the actually button and NOT the list item.

Also to get your list to show up side by side use display: inline. You don't have to float the list items.

It's a game changer working with CSS when you grasp the difference between inline and block. Your coding life becomes infinitely easier.

The code below should display your menu properly. You'll have to add the different widths for each ul li a and the height is probably different now too.


ul {
    list-style-type: none;
    overflow: auto;
    padding: 0;
    margin: 0;
}

ul li {
    display: inline; 
    text-indent: -9999px;}

ul li a {
    display: block; 
    height: 9px; 
    background-repeat: no-repeat; 
    background-position: 0 0;}

ul li a:hover {
    background-position: 0 -9px;
}

ul li #homebutton a {
    width: 33px;
    background: url(../images/buttons/home_button.png) no-repeat 0 0;
}


ul li #workbutton a {
    width: 33px;
    background: url(../images/buttons/work_button.png) no-repeat 0 0;
}

ul li #processbutton a {
    width: 33px;
    background: url(../images/buttons/process_button.png) no-repeat 0 0;
}

ul li #clientbutton a {
    width: 33px;
    background: url(../images/buttons/client_button.png) no-repeat 0 0;
}

ul li #contactbutton a {
    width: 33px;
    background: url(../images/buttons/contact_button.png) no-repeat 0 0;
}

/* you don't need:

ul li a {
    text-decoration: none;
    text-align: center;
    padding: 5px;
} 

That's probably why your links are clicking in odd places, especially since you didn't indent the text. */

Open in new window

0
 
cdeforgeAuthor Commented:
We're so close to getting this! I can feel it. I've implemented your solution but now nothing comes up. Maybe it doesn't like trying to show the background on the anchor?

Here is the link again: http://michaeldeforge.com/backend/landgraff/index.html

If you mouse over it, it seems like they are there, just invisible. It also looks like the buttons are somehow repeating? Home is in a few places, as are the others. What's happening?
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Yes, very close. If I stop making silly cut and paste mistakes!
Look at the code below. Notice how I've changed ul li #clientbutton etc. to  ul li#clientbutton.
Lame mistake on my part.

You must give your li the id and not your anchors in the html.

it should look like this:

<li id="workbutton"><a href="#" title="Work">Work</a></li>

You can also take away overflow: auto; since your no longer floating the list items.

Sorry.
Yes, we are almost there!



ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul li {
    display: inline; 
    text-indent: -9999px;}

ul li a {
    display: block; 
    height: 9px; 
    background-repeat: no-repeat; 
    background-position: 0 0;}

ul li a:hover {
    background-position: 0 -9px;
}

ul li#homebutton a {
    width: 33px;
    background: url(../images/buttons/home_button.png) no-repeat 0 0;
}


ul li#workbutton a {
    width: 33px;
    background: url(../images/buttons/work_button.png) no-repeat 0 0;
}

ul li#processbutton a {
    width: 33px;
    background: url(../images/buttons/process_button.png) no-repeat 0 0;
}

ul li#clientbutton a {
    width: 33px;
    background: url(../images/buttons/client_button.png) no-repeat 0 0;
}

ul li#contactbutton a {
    width: 33px;
    background: url(../images/buttons/contact_button.png) no-repeat 0 0;
}

Open in new window

0
 
cdeforgeAuthor Commented:
After adding an s to "clientbutton" so it's "clientsbutton", I was able to see my buttons finally!

However, how do I now add a margin in between them all that would space them all out and make the clickable area bigger than the buttons? I know you know what I'm trying to do, just thought I'd restate it. I tinkered around with it for a while, and while I could make the buttons space out, the clickable area never expanded with the margins. I thought for sure adding the margin code inside the ul li a definition would work.

http://www.michaeldeforge.com/backend/landgraff/index.html
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Give each li item right or left margin to get space.

ul li {
    display: inline;
    text-indent: -9999px;
}


Why do you want the clickable area to be bigger than the buttons?
From a usability standpoint it makes more sense to click the actual words.
Are going to give these buttons a background color? or a divider? Then that would make sense. But if you are leaving them as is, it's best to have the words be the clickable area.

Adding a margin will not widen the clickable area of the anchor.
Your anchors widths are specified for each button according to it's image width. Only THAT area can be clickable. A margin adds invisible space OUTSIDE the box.

Are you familiar with the Box Model?
This will help you trememdously (another game changer):

http://www.w3schools.com/css/css_boxmodel.asp

block elements use the box model. That is why we changed the anchors to block elements instead of leaving them as default inline elements. Now, we can apply margins and padding  and widths and heights. The width and height expands the anchors clickable area. Padding nor Margin do NOT do this.

0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
For some reason the above post was cut off: Here it is in full

____________________________________________________

Give each li item right or left margin to get space.
For now take out "display: inline" if you are floating left. It's not doing anything. It doesn't mess up your code, I just realized it's superfluous.

ul li {
    text-indent: -9999px;
    float: left;
    padding: 10px;
}  


Why do you want the clickable area to be bigger than the buttons?
From a usability standpoint it makes more sense to click the actual words.
Are going to give these buttons a background color? or a divider? Then that would make sense. But if you are leaving them as is, it's best to have the words be the clickable area.

Adding a margin will not widen the clickable area of the anchor.
Your anchors widths are specified for each button according to it's image width. Only THAT area can be clickable. A margin adds invisible space OUTSIDE the box.

Are you familiar with the Box Model?
This will help you trememdously (another game changer):

http://www.w3schools.com/css/css_boxmodel.asp

block elements use the box model. That is why we changed the anchors to block elements instead of leaving them as default inline elements. Now, we can apply margins and padding  and widths and heights. The width and height expands the anchors clickable area. Padding nor Margins do NOT do this.
So in order to make wider clickable area give each button additional width. Your image position will now have to be centered. 0 0 means it starts in the top left corner of the anchor. Now it will be center 0.

I did not do that in the code below.
Also, notice that I took out the background-position and background repeat from each individual button. That was overriding the a:hover due to specificity (Guess what? this is another game changer.)

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

Okay, seriously, the following code should work. I even linked to your images and tested in on my local machine.

Come on let's do this!!

A~



ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul li {
    display: inline; 
    text-indent: -9999px;
		float: left;
		padding-right: 20px;
}

ul li a {
    display: block; 
    height: 9px; 
    background-repeat: no-repeat; 
    background-position: 0 0;
}


ul li#homebutton a {
    width: 33px;
    background-image: url(http://www.michaeldeforge.com/backend/landgraff/images/buttons/home_button.png);
}


ul li#workbutton a {
    width: 29px;
    background-image: url(http://www.michaeldeforge.com/backend/landgraff/images/buttons/work_button.png);
}

ul li#processbutton a {
    width: 47px;
    background-image: url(http://www.michaeldeforge.com/backend/landgraff/images/buttons/process_button.png);
}

ul li#clientsbutton a {
    width: 38px;
    background-image: url(http://www.michaeldeforge.com/backend/landgraff/images/buttons/clients_button.png);
}

ul li#contactbutton a {
    width: 44px;
    background-image: url(http://www.michaeldeforge.com/backend/landgraff/images/buttons/contact_button.png);
}

ul li a:hover {
    background-position: 0 -9px;
}

Open in new window

example.html
0
 
cdeforgeAuthor Commented:
I guess call me OCD, but I wanted my clickable area to be bigger than the image because it's just wasted space. Plus I'd be able to change it on the fly and see what spacing looks best instead of making the button images bigger in photoshop. I know, kind of silly =P

I saw this and thought it was possible: http://37signals.com/svn/posts/1048-padded-link-targets-for-better-mousing

It looks to me like they are doing exactly what I was trying to do, I just don't know what voodoo magic their using, because I can't reproduce the results. Maybe your expert eye can tell me what the differences are. It sure seems like they are doing what I'm thinking at least!

If something like this isn't possible, that's fine. I can always see how things look in Photoshop and go from there. The last bit of code did the trick! Thanks for all your help thus far. I'm going to increase the point value to 100 if it lets me as a thanks.
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hi Cdeforge,


Just take away the 20px right padding from the list items and add it to the anchors.

Now you have to center your image:
Change background-position of these selectors: ul li a from 0 0 to center 0, ul li a:hover from 0 -9px to center -9px. Otherwise, your image will get hung up in the top left (0 0) corner of each anchor where it is currently residing.

ul li a {
    display: block;
    height: 9px;
    background-repeat: no-repeat;
    background-position: center 0;
    padding: 0 10px;
}

ul li a:hover {
    background-position: center -9px;
}



That's very sweet of you to attempt to up the points.

I love helping folks on this forum. So many have helped me. What an amazing resource, eh?




0
 
cdeforgeAuthor Commented:
Great! That was exactly what I was looking for. Thank you for all your hard work! Sorry it took so long to accept the solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now