Making the header clickable in CSS

Using a cool WP theme that has only one problem, I want people who click on the header to be taken to the homepage, at the moment is not clickable.


Code:
------------------------------------------------------------------


#top { /* used in header.php */

width:967px;

height:126px;

background-color:#000;

background-image:url(images/banner-top3.gif);

background-repeat:no-repeat;

margin-right: auto;

margin-left: auto;

padding: 0px;

}

..........................................................
I want people clicking on "/banner-top3-gif" to be taken to http://www.example.com

Any idea of what should I do for this?

Thank you

 

Send me your url so I can take a look. In wordpress, as a default, your header image, or at least the logo should be clickable.

 

For something to be clickable, it must be wraped in an anchor tag, i.e. <a href="your home page.php"> ... </a> however, a <div> element can't be wrapped in <a>...</a> so you'd need to take the background out and make it a <img /> which can be wrapped in <a> ... </a>

If you tell us what theme it is we would give more precise ideas.

 

I have now sent via PM my URL to "HQ Content" and "qazu", I am starting to think from the replies that
this is not a CSS issue? I thought I could specify that through CSS.

All I want is the header (background-image:url(images/banner-top3.gif)to be clickable.

 

try this on your stylesheet

#top
{
     width:967px;
     height:126px;
     overflow:hidden;
     text-indent:-2000px;
     background:#000000 url('images/banner-top3.gif') 0 0 no-repeat;
}
#top a
{
    width:100%;
    height:100%;
    display:block;
}

HTML:

and your html

<div id="top">
      <a href="./">any text here this will be hidden anyway</a>
</div>

HTML:

 

Thanks a lot, I did not know it would be so complicate, I thought it was something trivial, like a line of code or so.

I have now applied that style CSS and HTML and the header has become clickable, but it goes out of place.

Here goes the screenshot, so there is no need for anyone to visit the site.





I think I am getting closer...At least now the header is clickable. If you think it is getting too difficult
to solve I will just play a little more time. Maybe now the problem is related to a different CSS part
other than the top. I am newbie at webdesign sorry, I mostly do marketing.

 

I just realised you had Imagejug at your sig for hosting images Spawny...If I had seen it before I would have
used it instead of the other one.

OK, here goes a marketing tip for you, try and make the sentence longer, something like
"Free and easy high quality Image hosting", the longer the sentence the harder it is
to miss it. It works for me at least..

 

You can't do links in CSS because CSS only handles the appearance.

The link has to go in your HTML file. Like someone said, put the <a href="xxxx"> #header or .header </a> and it makes it into a link. If any weird boxes show up after you do this, then you need to go back into your CSS and make sure the <a> tag has nothing set for it.