How to make header image clickable for home page

My header image is formatted in the css file as follows:

#header {
background: url(../images/header.jpg) no-repeat;
width: 722px;
margin-right: auto;
margin-left: auto;
margin-bottom: -30px;
height: 220px;
}

I want to make it clickable to return people to the home page, as is common with most sites. How can I go about doing this?

 

You have a couple of options...

1. You could wrap an anchor around the header div id (though this may cause you problems if you want to have an XHTML valid website).

2. You could put a 'spacer' (blank image) which fills the whole width and heioght of the header and put an anchor around that.

To be honest, I would have a header layed out like you hav done, but have a logo as a small image file nested in the header. The logo should always be an anchor which is clickable to the root of your website.

 

Thanks for the reply fri3ndly.

Am am new to this and not sure how to implement your solution.

 

Well, actually you can skip that part, and just have the a inside the #header and set to display: block and now you can set the height and width to match the header's size.

HTML:

<div id="header"> (I assumed header was a div)
<a href=" somewhere"> </a>
</div>

Code (markup):

CSS:

#header {
background: url(../images/header.jpg) no-repeat;
width: 722px;
margin: 0 auto -30px; (merged together)
height: 220px;
}
#header a {
  display: block;
  width: 722px; (or width: 100%)
  height: 220px; (or height: 100%)

(if there's text in the a, you might want to set stuff like:)
  text-decoration: nonel
  border: 0;
  color: #whatevercolouryouwantthetext;
}

Code (markup):

However, you may have other stuff IN your header, which might change what we can do with it. : )

 

Thanks for taking the time to reply Stomme poes - rep added.

Unfortunately it still isn't working for me.

Here is the full CSS file incase there is something else causing a problem:

body {
font: 80%/1.5 Verdana, Arial, Helvetica, sans-serif;
color: #8A8987;
margin: 0px 0px;
padding: 0px;
text-align: center;/*Centers the page in Internet Explorer*/
background: #333333;
}
#wrapper {
background: url(../ims/bg.jpg) repeat-y left;
width: 722px;
margin: 0px auto;
text-align: left;/*Reverses the above rule for the rest of the content*/
}
#header {
background: url(../ims/toppy.jpg) no-repeat;
width: 722px;
margin: 0 auto -30px;
height: 220px;
}
#container {
width: 550px;
background: url(../ims/background.jpg) repeat-y;
float: left;
}
#content {
margin-right: 40px;
margin-left: 30px;
}
#content p {
text-align: left;
}
#content a {
color: #cc0066;
text-decoration:none
}
#content a:hover {
color: #FBFBFA;
text-decoration:none
}
#sidebar {
width: 150px;
float: right;
margin-right: 11px;
margin-left: 10px;
text-align: left;

}
#sidebar ul {
margin: 0;
padding: 0;
font-size: 11px;
color: #3C3C3C;
font-weight: bold;
background: none;

}

#sidebar li {
margin: 0 0 10px;
padding: 0;
list-style-type: none;
background: none;
color: #3C3C3C;
font-weight: bold;

}

#sidebar a {
border-left: 10px solid #95927F;
padding: 4px 4px 4px 10px;
color: #FBFBFA;
display: block;
background: none;
width: auto;
text-decoration: none;
}

#sidebar a:hover {
border-left: 10px groove #FBFBFA;
color: #F50874;
background: none;
}

#currpage a {
border-left: 10px double #F50874;
color: #666666;
background: none;
}/*To highlight the current page - apply as necessary*/

#footer {
background: url(../ims/botty.jpg) no-repeat;
width: 722px;
margin-right: auto;

margin-left: auto#;
margin-top: -20px;
height: 92px;
text-indent: 40px;
text-align: left;
color: #666B64;
margin-left: auto;
}
#footer a {
color: #F50874;
text-decoration:none
}
#footer a:hover {
color: #FBFBFA;
text-decoration:none
}
h1 {
font: Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
font-size:16px;
font-weight: normal;
text-align: left;
}
h2 {
border-left: 15px solid #6A6A68;
padding-left: 1em;
font-size: 1em;
width: 40px;
margin: 20px 0 20px 0;
}

h3 {
font-size: 12px;
width: 40px;
color: #95927F;
text-decoration: none;
}

h4 {
border-left: 6px solid #6A6A68;
padding-left: 1em;
font-size: 1em;
width: 40px;
margin: 20px 0 20px 0;
}

ul {
margin: 10px;
padding: 0;
list-style: none;
}

ul li {
padding: 0 0 0 17px;
margin: 0 140px 5px 0;
background: url(../ims/listy.jpg) no-repeat;
line-height: 1.3em;
text-align: justify;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}/*Used here to clear the floated elements above*/

 

Oh yeh. I forgot that!

 

Ant,

I don't see anything immediately that would cause a problem, so could you post the HTML -- at least just past the header? I've used the above code on my own pages without problem. You're right, there could be something else interfering...

Wat is the page doing? Is there a clickable area at all? One trick I do to see invisble things is either give them a border (watch out, that changes their widths and heights) or a background colour. like
#header a {
background-color: #f00;
}

is a good one. If you see no red, or the red is in the wrong place, you know positioning is off. I also wonder if the a needs a little z-index help possibly.

 

Thanks for taking the time to help me on the Stomme - it's much appreciated.

Here is the html for the template I have created:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>website title</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="false" />
<link href="../css/shroom.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper"><!--Every thing enclosed in this div-->
<div id="header">
</div>
<!--The logo is held in this div -->
<!-- TemplateBeginEditable name="EditRegion1" -->
<div id="container">
<!--Div to hold the content div -->
<div id="content">
<!--Main text area -->
<h1>Heading</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<!--End Content -->
</div>
<!-- TemplateEndEditable -->
<!--End Container -->
<div id="sidebar"><!--Place to store menu and secondary content -->
<ul>
<li><a href=" "> </a></li>
</ul>
</div><!--End Sidebar -->
<div class="clearing">&nbsp;</div><!--Div to clear the floats above -->
<div id="footer"><!--Div for copyright info etc -->
<p>&nbsp;</p>
<table width="500" border="0" cellpadding="4">
<tr>
<td>&nbsp;</td>
<td><a href="../index.html">Home</a></td>
<td>Basket </td>
<td>Contact</td>
<td>FAQ</td>
</tr>
</table>
</div>
<!--End Footer -->
</div><!--End Wrapper -->
</body>
</html>

 

At the moment it doesn't seem to be doing anything - the cursor doesn't even change state when moved over the header area.

 

Yeah, it wouldn't do anything.. I don't see anything changed at all.

What you should have... or something similar:

<div id="header">
<a href=" somewhere"> </a>
</div>

Code (markup):

What you have:

<div id="header">
</div>

Code (markup):

Your header div is empty, so there's nothing to click. Or am I missing something?

Then I don't see any CSS for an "a" inside the header... so even if you had the anchor in the #header, it would only do browser default (likely blue border around the header or something).

 

Im running late for school, but if you look up "image-replacements" that should help you greatly. What stomme poes is doing would work, but Im not sure if you would get much SEO use out of that, plus if you do this, people who have images disabled (screen readers), or those that have their stuff read to them won't know it's your logo.

Regards,
Nick

 

You're right, Hades, I should have thought of it like this:
<div id="header">Header text here, covered by image<a href=" somewhere"> </a>
</div>

 

Actually, it'd be like this:

<div id="header">
  <h1>
     <a href="#">
       Header Text
     </a>
  </h1>
</div>

HTML:

Here is the css for it:

#header h1 {
  background:#XXXXXX url(images/logo.gif) no-repeat;
  width:##px;
  height:##px;
  text-indent:-1000em;
}

#header h1 a {
  width:100%;
  height:100%;
  display:block;
}

Code (markup):

 

Hades - That is exactly what i was looking for and it has worked perfectly. Thanks you.

Presumably I can now put some keywords in for the header text to help my seo.

Thanks to everyone got your help, this forum is a great resource.

 

Arse - not working in Firefox

 

can i see your site?

regards,
Nick

 

Nick,

I don't do this:

<div id="header">
  <h1>
     <a href="#">
       Header Text
     </a>
  </h1>
</div>

Code (markup):

because then the text of the a will sit on top of the a's background image. I'm assuming the text is to be hidden underneath the image, only showing when the image is teh g0ne.
I use it on our scooter site:
<h1>scooter<span class="kleur">verzekeren.com</span><a href="default.php"> </a></h1>
The span is only for a colour change, and the a is empty to keep the text hidden underneath. Text-indent defeats the reason you want text in the first place-- if I'm surfing on dial up and have images off, I would presumebly still have CSS on-- meaning the text is still indented off-screen.

 

Try this...

HTML:

<div id="header">
<h1><a href="#"><span>TITLE</span></a></h1>
</div>

Code (markup):

CSS:

#header h1 a
{
background:url('your_images') top left no-repeat;
display:block;width:00px;height:00px;
text-decoration:none
}

#header h1 a span
{
visibility: hidden
}

Code (markup):

Codes above will hide your TITLE text and replacing it with defined image on CSS.
Don't forget to replace 00px with your actual image size.

 

That'll work, but it adds an extra element which isn't actually needed (usually we do use a span to hold the image but here we have a perfectly good anchor to do the chore for use : )

 

I'd like to see your css for the way you do it, because im not exactly sure how that would work exactly. (I don't doubt you, but i just want to see it cause i have no clue)

Regards,
Nick