Solved

Making clickable link area bigger, but using an image link

Posted on 2010-09-22
16
782 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
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
 

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 7

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 7

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 7

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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 7

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 7

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 7

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 7

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

760 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now