Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Chris Feltus
Chris Feltus
3,970 Points

Expanding Link Anchor Target Size (code pen inside)

Is there a way to expand the size of an anchor elements click target?

At the moment I have a navigation with some tabs. Currently, I have to specifically click the anchor text to visit the link, and show the tab as selected. The click target is very narrow as a result, represented by a pink rectangle in the image below.

As the site currently is: alt text

Is it possible to expand the anchors click target so it takes up the entirety of the tab? In other words, I would like to be able to click anywhere within the tab to visit the link.

Here is a mock up of how I would like it to work. Notice, if I mouse over anywhere within the tab it allows me to click the link, and how the click target (represented by a pink rectangle) is very wide, encapsulating the whole tab. alt text

Here is the codepen http://codepen.io/bluehabit/pen/KweBLY

Thanks in advance. I am fairly certain this can be done with CSS, but I haven't had much luck. I thought if I increased the padding of the a element that would work, but no dice.

3 Answers

rydavim
rydavim
18,813 Points
rydavim
rydavim
18,813 Points

If you remove the padding from your .tabs-menu li rule and add it to the link rule instead, I think that should do what you want.

EDIT - the display: block rule makes the padding behave like you want. That may be what was missing?

.tabs-menu li {
    display: inline-block;
    margin-left: 5px;
    background-image: linear-gradient(#0076f6, #0368d6);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    max-width: 15%;
    width: 15%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    text-decoration: none;
}

.tabs-menu a {
  display: block; 
  padding: 20px;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}
mtch
mtch
8,521 Points
mtch
mtch
8,521 Points

rydavim was quicker, I am posting the working pen anyway.

http://codepen.io/mtch/pen/OPEBbV

Alan Winfrey
Alan Winfrey
2,953 Points
Alan Winfrey
Alan Winfrey
2,953 Points

Edit: same answer as mtch

This may not be the preferred way, but it works. Reverse the nesting of the a and li elements to get a block-level link: e.g.

<a href='#' data-ogg='tab1'><li>Manipulation</li></a>

Then the anchor element has a clickable area equal to the li element. See link