CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1327

The clickable area for my link is too large

I have an <img> logo that is wrapped inside a link, and the link is wrapped in a <div>.

My code below results in the clickable area for my link to extend 100% horizontally to both edges of the viewport.

How can I make the clickable area for my link to be the size of my logo?

My HTML:

<div id="logo-container">
    <div id="logo">
    <a href="dashboard.php"><img src="http://placehold.it/350x150" /></a>
    </div>
</div>

My CSS:

#logo-container{
    width:100%;
    float:left;
    height:auto;
    margin:0 auto 0 auto;
    background:#ECECEA;
}

#logo{
    margin:0 auto;
    height:auto;
}

#logo img {
    display:block;
    margin:6px auto 10px auto;
}

#logo img{
    width:330px;
    height:auto;
}

Upvotes: 4

Views: 7550

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

This is cause image is set to display: block;, such expands it to the full available width, pushing the A element boundaries to the extreme.

Instead, keep the logo image inline and use text-align:center; for the #logo parent: http://jsfiddle.net/wLbo6mjr/10/

#logo{
    text-align:center;
}

#logo img {
    margin:6px 0 10px 0;
}

Upvotes: 7

Frisbetarian-Support Palestine
Frisbetarian-Support Palestine

Reputation: 1309

Setting a width on logo fixes it

#logo{
    width: 330px;
    height: auto;
    margin: 0 auto;
}

http://jsfiddle.net/wLbo6mjr/8/

Upvotes: 4

Related Questions