Solved

Making clickable link area bigger, but using an image link

Posted on 2010-09-22
16
791 Views
Last Modified: 2012-05-10
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
Comment
Question by:cdeforge
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
16 Comments
 
LVL 4

Expert Comment

by:acashok
ID: 33740807
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
 

Author Comment

by:cdeforge
ID: 33741709
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
 
LVL 3

Expert Comment

by:vimalraja
ID: 33741756
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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

Author Comment

by:cdeforge
ID: 33746593
No, I updated the site with your fix. It's still  having the same problem unfortunately. Check the link again =/
0
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 33748674
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
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 33748774
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
 

Author Comment

by:cdeforge
ID: 33748810
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
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 33756408
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
 

Author Comment

by:cdeforge
ID: 33761832
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
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 33763388
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
 

Author Comment

by:cdeforge
ID: 33767609
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
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 33773588
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
 
LVL 8

Expert Comment

by:Alicia St Rose
ID: 33773954
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
 

Author Comment

by:cdeforge
ID: 33775984
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
 
LVL 8

Accepted Solution

by:
Alicia St Rose earned 100 total points
ID: 33784845
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
 

Author Closing Comment

by:cdeforge
ID: 33828633
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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question