Reputation: 1400
I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo: http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!
Upvotes: 0
Views: 786
Reputation: 1693
this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property. DISPLAY https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position To style: you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}
Upvotes: 0
Reputation: 13921
You should put the <a>
tag inside <h2>
. By default, headings have display
set to block
, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a>
into <h2>
, then it wraps only the text and not the entire heading.
<h2 class="page services"><a href="#p1">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></h2>
Upvotes: 3