CODEWITHSUNDEEP
htmlcss
mountainclimber11
mountainclimber11

Reputation: 1400

keep link from expanding across entire page

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

Answers (2)

vimes1984
vimes1984

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

rhino
rhino

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

Related Questions