Adding Home Link To Logo - Easy Question

Hi

I'm bit of a noob when it comes to CSS.

I'm just helping a friend with his website and am just wanting to make the top logo a clickable link to the homepage, just to help with usability - could someone please advise what I need to edit to do this?

His website is here.

I take it its just adding something in the css file?

Thanks in advance

 

Hi, Its not a matter of CSS.
What you need to do is that, 1st make the header image without the logo and create another image just the logo (suppose logo.jpg). Then within the "header" div, you need to add another div like this:

<div id="header">
    <div id="logo">
        <a href="home_url"><img src="images/logo.jpg"/></a>
    </div>
    <div id="nav">
    ....
    ....

Code (markup):

In this way you can have your logo linked. This can't be done by CSS.
You can also have it without a separate image of the logo and by placing a blank div just upon the logo position of the header image, but this technique is not at all recomended. So better you can do it as I mentioned earlier.

 

shahilroyhere is right, but there's a bit more to the picture then this.

The logo is part of the overal header background image:


So, the easiest thing to do here would be to use CSS to position a transpartent .gif over where the logo is and anchor that like so:

  <div id="header">
    <a href="FQ-URL"><img src="/images/myTransparentGif.gif" style="display:block" width="370" height="90"/></a>
    <div id="nav">
      <ul>
        <li><a title="the ultimate stretching aid" href="/">home</a></li>
  <li><a href="who-is-it-for.html">who is it for?</a></li>
        <li><a href="../testimonials.html">Testimonials</a></li>
        <li><a href="dynamic-stretching.html">dynamic stretching</a></li>
        <li><a href="stretch-to-the-max.html">What is Stretchaflex? </a></li>
        <li><a href="key-questions.html">key questions</a></li>
  <li></li><li><a href="order-now.html">order now</a></li>
      </ul>
    </div>
  </div>

Code (markup):

Then change the top padding on your header to subtract the 90px height:

#header{
 background-image:url(../images/header.jpg);
 background-position: top left;
 background-repeat: no-repeat;
 margin:0;
 padding:124px 0 0 10px;
 width:790px;
 height:32px;}

Code (markup):