Answer to "where is the code" -
Think about what you just said. You can not find the image in the html code, that means you are looking in the index.html file. You found the header image in the images directory and changed it. That's 2 out of 3 ??? When you downloaded the template and un-zipped it you found those two items plus the style.css file (the one you have not looked in) we do not count the psd file if there is one, that's another story.
When viewed in the browser you can see the header.jpg ( the girl on the top left), the menu and other things on top, so we know when viewing the code in the index.html file it should be one of the first things we see.
Code:
<body> <!-- start of code -->
<div id="wrapper">
<h1>...The <strong>Worldwide</strong> Media...</h1>
<div id="top-nav">
<ul>
<li><a href="http://www.freewebsitetemplates.com">faq</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">site maps</a></li>
</ul>
But all that is there is 2 division and 2 links, so this gives us an idea where to look in the style.css file. All the wrapper gives is what it names states (wrap around everything with) so it's not here.
Code:
#wrapper {
text-align: left;
margin: auto;
width: 728px;
position: relative;
}
The next division "top-nav" shows what we are looking for.
Code:
#top-nav {
position: absolute;
top: 15px;
left: 414px;
width: 266px;
height: 269px;
background: #6D7481 bottom left url(images/header.jpg) no-repeat;
}
Since we can not put the html code in the style sheet to make a link, what if we comment the graphic out of the style sheet and call the graphic from the index.html instead. Let's put our line of code right after the "top-nav" division.
Code:
<div id="wrapper">
<h1>...The <strong>Worldwide</strong> Media...</h1>
<div id="top-nav"><a href="http://www.wilmargraphite.net/" title="corp web" target="_blank"><img src="images/header.jpg" border="0" width="266" height="269" alt="" align="baseline"></a>
<ul>
That didn't work, picture is to tall and we moved our 2 links down below the graphic.
Un-comment the the graphic in the style sheet and let's try putting our line of code after the links in the index.html file.
Code:
<ul> <-- start of links code -->
<li><a href="http://www.freewebsitetemplates.com">faq</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">site maps</a></li>
</ul> <!-- end of links -->
<a href="http://www.wilmargraphite.net/" title="corp web" target="_blank"><img src="images/header.jpg" border="0" width="266" height="237" alt="" align="baseline"></a>
</div>
That worked but for some reason the graphic is to long and drops below the navigation, so we will have to adjust the height in the code we put in the index.html file. A height of 237 pixels looks right.
Now we could have made a spacer graphic (something that just takes up space) to replace the one in the css file which would be of the same size but matching the background color or even other coding methods, but this did what we wanted it to.
Remember in a css file objects follow a flow, they take up space, if you remove one, then the one below moves in to take it's place ( at least in the way this template is coded).
Also put into your mind a template is like a floorplan of a house (fixed), if you walk inside you would see all walls, now put a graphic in a floorplan and that is like putting in a window which you can look out of. You can put grapics in both the css and html files.
Now that you are understanding it - please try to help someone else on the forum and be sure to list your website in the Wesite Review section.
If you do others will give you great feed back.
I think that about covers it.
David