Need help with making clickable header

Let me know if u need to see more code from any specific pages to see how to integrate an invisible clickable header that sits atop large page background image

I copied the code directly… It didn’t start with <a href

it started with location.href=… do I still end it with </a>

I changed it to

<div id="blog-title .title" onclick="location.href='http://thejordanpease.com/test/'</a>;" style="cursor: pointer;">

link doesn’t work anymore – but whole page is still clickable.
no married to using the code above is someone has a better solution.

that restored the link, but whole page is still clickable

I got the code from another theme that I use. Works fine in that theme. Like I said – happy to use another solution if anyone has one.

pastebin url for header

pastebin url for stylesheet

I swapped my code for yours (replaced at the same spot in code) and it didn’t work. Caused whole page to shift down and killed the link that had been working.

Did i place the code in the wrong place? Where does it belong in the header file?

OK, i deleted that code from the header.php (which fixed the page shift).

Then I added it to index.php – added it within existing <div id="blog-title"was. It did not give me a clickable area.

<div id="blog-title">
        <span class="title"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></span>
        <span class="description"><?php bloginfo('description'); ?></span>
	onclick="location.href='http://thejordanpease.com/test/">
        </div>

I also tried completely replacing the existing code with the code you gave, didn’t work that way either.

The theme I’m using doesn’t have a graphic in the header. Image for header comes from page background, so there was no image to make clickable. So I uploaded an invisible.gif file and added it to the stylesheet.css – i need to make that clickable.

#blog-title {
	padding:46px 0 0 100px;
	font-size:11px;
}

#blog-title .title {
	display:block;
	width:400px;
	height:26px;
	background: url(images/invisible.gif) left bottom no-repeat;
	overflow:hidden;
	color:#000;
	font-size:24px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#blog-title .title a {
	color:#000;
	text-decoration:none;
}

I’m a graphic designer not really a programmer. I know enough to do some minor edits to code or add working code from other sources, but don’t know enough to write from scratch or retool code that doesn’t work the same was as the theme does.

I said the header was part of background image – that is the way the theme I’m trying to customize (graphics swap and minor CSS edits) is set up.

i don’t know enough to make a major edit like changing how the background image works to the theme – can’t I just place an invisible gif over the background where masthead should be and use that as the clickable item?

tried this…

<div id="blog-title">
        <span class="title"><a href="http://thejordanpease.com/test/"><img src="images/invisible.gif"></a></span>
        </div>

but didn’t work either 🙁