4

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;
}
JohnB
  • 18,046
  • 16
  • 98
  • 110
UserX
  • 1,295
  • 7
  • 25
  • 39
  • Here's some more suggestions for displaying your logo in HTML+CSS: http://stackoverflow.com/questions/10125335/what-is-the-proper-way-to-display-a-logo-with-css – JohnB Aug 20 '14 at 16:02

2 Answers2

7

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;
}
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • 1
    Isn't it expanding to the full width of the original container due to the parent lacking a defined width? – Frisbetarian-Support Palestine Aug 20 '14 at 15:50
  • @Frisbetarian the parent `DIV #logo` is a DIV element so a BLOCK-level element. IMG is an inline element, if you set it to display: block will act like it's a (so to say) a DIV element. Being now *block* it'll push the parent `A` element to the extremes available width. – Roko C. Buljan Aug 20 '14 at 15:55
  • @misterManSam AFAIK `img` tag is by default an `inline` -level element. – Roko C. Buljan Aug 20 '14 at 15:57
  • Its only covering the entire space because its parent div is also a block element with no defined width. Which means that its actually the parent thats covering the entire width and subsequently the image does too by being its child and a block element as well. I wouldn't set a width to an anchor tag with a picture in it. Better is it set the dimensions to the parent div. – Frisbetarian-Support Palestine Aug 20 '14 at 15:57
  • @Frisbetarian take a closer look, the IMG parent is an `A` (inline) element. If you set image to be `display:block` look what happens to the `A`nchor: http://jsbin.com/mevud/1/edit – Roko C. Buljan Aug 20 '14 at 16:03
  • @misterManSam what you just showed is a classical behavior for inline elements and a classical cextcontent "issue" where blank space / newline is accounted, if used. – Roko C. Buljan Aug 20 '14 at 16:04
  • @misterManSam also: http://stackoverflow.com/questions/9928211/why-does-image-use-display-inline-but-behaves-like-an-inline-block-element – Roko C. Buljan Aug 20 '14 at 16:06
  • @RokoC.Buljan And if you remove all the useless styling and just put a width value to logo which is the container of both the anchor tag and the image, all of its children will adjust to its size as opposed to the size of the main container http://jsbin.com/gowiviruqofa/1/edit – Frisbetarian-Support Palestine Aug 20 '14 at 16:10
  • @misterManSam also read closely: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente – Roko C. Buljan Aug 20 '14 at 16:10
  • @Frisbetarian sure... but why??? Why to set a parent width, than you need to set position and margin 0/auto and than you need to etc etc. Let's use CSS and HTML the way it's meant to be used and let's keep it simple. – Roko C. Buljan Aug 20 '14 at 16:13
  • @RokoC.Buljan Setting the width to the parent is a simpler solution than the one you provided as well as being more standards compliant and better practice as opposed to changing the display type of various elements and then settings a width attribute to the image. – Frisbetarian-Support Palestine Aug 20 '14 at 16:15
  • *settings a width attribute to the image* ? You did it! ...with the parent. I removed everything I could. – Roko C. Buljan Aug 20 '14 at 16:17
  • @RokoC.Buljan - I guess [this is why](http://jsbin.com/tefatu/2/edit) I would treat it as an inline-block element, even if technically inline. – misterManSam Aug 20 '14 at 16:36
4

Setting a width on logo fixes it

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

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

Frisbetarian-Support Palestine
  • 1,277
  • 1
  • 12
  • 27