Question

I am not good with CSS but have downloaded a template off the net and need to work with that.

I am sure this is a pretty simple thing to do, basically in my html file I have this code:

<div id="topbar"></div>

and in the CSS file I have this code:

#topbar {
    height: 104px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: left top;
}

My question;

1. how do I make the image/logo into a link (without a border of course) so that people can click it and come back to the homepage?

2. please recommend a good tutorial to make “table-less” based layouts for html pages.
   I am kind of old school and only know how to make a layout with a table, I think i need to upgrade my skills 🙂

Answer 1

I think you could make the logo into a link like this:

HTML:

 <div id="topbar"><a href="index.html"><img src="images/logo.png" alt="logo"></a></div>

CSS:

#topbar a {
color: #ffffff;
border: 0;
}

Note: Background images can’t be formatted as links.