Header Image Link

There’s a Q&A at the Kubrick page. That solution unfortunately relies on JavaScript.

I put a link with no text in it (one space character) inside the header div and in CSS made the link very high and wide:
#header a:link, #header a:visited {
display:block; border: 0;
width: 380px; height: 118px;
}
Hope that helps ??
(those dimensions are not for Kubrick’s header, and it’ll probably work with just #header a)

Thanks, Minna. Unfortunately, that didn’t work for me:

https://www.tatteredcoat.com/

Ya gotta change the dimensions specified in the CSS to match those of your header image.

The problem, I think, is with the class “invisible” that says the element is “display: none”. I think that makes the element non-existent. If you removed the class=”invisible” from the <h1> in your <div id="header"> and removed the text you have inside the link there (replaced it with a space), it should work. So:
<div id="header">
<div id="headerimg">
<h1><a href="https://www.tatteredcoat.com"> </a></h1>
<div class="invisible">a paltry thing</div>
</div>
</div>
instead of what you’ve got there now (of course, you’ll have php in there, but you get the point ?? ) and then put something like
#headerimg a {
display: block;
height: 200px;
width: 100%;
border: 0;
}

in your CSS. You may need to make the height smaller because there are a lot of paddings

If you’re afraid of messing it up, just comment out the parts you’d remove

hold on–didn’t see your reply, Minna. I think you’re right about the invisible class…let me work on that.

well… um, try display: inline;

ok, Minna–you’ve definitely helped me move forward–I’m almost there.

Here’s what I don’t understand. The header image is 760×200. You had me set the header link in the style sheet to be 200 px high. But if you look at the site now, you’ll see that the image is a link around the coat, but not around the words that form the title of the blog. do you know why that’s happening?

thanks SO much for your help!

yup I do ?? there’s a humongous padding for the h1 (70px or something). Can’t remember where I saw it (there are several style definitions for h1 in the stylesheet) but it’s there somewhere. If you don’t have any other h1’s on the site (which I think you don’t), you could remove the top padding for h1

Here:
/* Begin Headers */
h1 {
padding-top: 70px;
margin: 0;
}

oh, you rock, Minna. Thanks so much.

woohoo!