Forums

Blackhawkso

I'm using HTML5BP on a project and I have a h1 with the .ir applied to it for the site logo.

  <h1 class="ir">Welcome To Foo Bar</h1>

What I would like to do is add a link to the logo but it don't seam to be working.

If i do it this way the link doesn't work.

  <h1 class="ir"><a href="http://www.mysite.com/">Welcome To Foo Bar</a></h1>

but if I do it this way the image doesn't show up.

  <a href="http://www.mysite.com/"><h1 class="ir">Welcome To Foo Bar</h1></a>

This is the css of the HTML5BP .ir class

.ir {
  background-color: transparent;
  background-repeat: no-repeat;
  border: 0;
  direction: ltr;
  display: block;
  overflow: hidden;
  text-align: left;
  text-indent: -999em;
}

Does anyone have an idea which one should be working and what might be wrong please help cheers.

ChrisP

@Blackhawkso, you need to make the anchor a block element and add width 100% and height 100% for the link to work.

.ir a {
    display: block;
    height: 100%;
    width: 100%;
}

Blackhawkso

Right got it cheers @ChrisP

treehouse : what would you like to learn today?

Forums

[Solved] HTML5BP .ir with a link