HTML Help please text is hard against image...

You will need to brush-up on your coding http://www.w3schools.com/ The style sheet tells the browser how things are layed out, the html describes what.
Take a look at the line

now look at this one

The hspace and vspace properties can be used with align to set the distance between the image and the surrounding text.
hspace and vspace sets the white space around an image, in the above it is set to 4 pixels.
align is used for alignment relative to the space the image is assigned
try this code which changes align

image 1 = align left
image 2 = align middle

 

yes you can add a link to a graphic. It can be done with dreamweaver or any other editor, it's all in your understanding of the html code not the css code.
an example of code from my webpage

the first part of the code this is the link, open it in it's own page

the second part is my graphic the link is hooked to

wrap the whole thing with the <a foobar code </a> and you got yourself a clickable graphic.

 

I can not duplicate your problem, here is the code, I just copied it in.

Code:

[COLOR=red]<!-- start code -->[/COLOR]
[SIZE=1][B]<div[/B] id=[B]"visit">[/B] [/SIZE]
[SIZE=1][B]<h2>[/B]ABC Best Treatments...[B]</h2>[/B][/SIZE]
[SIZE=1][B]<p>[/B]Here are the latest researched ABC Treatmets including special offers and discounts codes.[B]</p>[/B][/SIZE]
 
[SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_2.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
[SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
[SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
[SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
[SIZE=1][B]<p[/B] class=[B]"more">[/B][/SIZE]
[SIZE=1][B]</p>[/B][/SIZE]
[SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_3.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
[SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
[SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
[SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B][SIZE=1] THIS IS THE ONE THAT IS ALIGNING RIGHT[/SIZE]
 
[SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_3.jpg"[/B] border=[B]"0"[/B] width=[B]"60"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
[SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
[SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
[SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
 
[SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_2.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
[SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
[SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
[SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
[SIZE=1][B]<p[/B] class=[B]"more">[/B][/SIZE]
[SIZE=1][B]</p>[/B][/SIZE]
[SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/pic_3.jpg"[/B] border=[B]"0"[/B] width=[B]"103"[/B] height=[B]"79"[/B] alt=[B]"Pic 2"[/B] hspace=[B]"4"[/B] vspace=[B]"4"[/B] align=[B]"left">[/B][/SIZE]
[SIZE=1][B]<p>[/B]This is a [B]<strong>[/B]template designed by[B]</strong>[/B] free [B]<span[/B] class=[B]"style3">[/B]-[B]<br[/B] [B]/>[/B][/SIZE]
[SIZE=1][B]</span>[/B]website templates for you for free you can [B]<span[/B] class=[B]"style3">[/B]-[B]</span>[/B]replace all the text by your own text.[B]</p>[/B][/SIZE]
[SIZE=1][B]<p[/B] class=[B]"more"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"><strong>[/SIZE][/B][SIZE=1]more...[B]</strong></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></p>[/SIZE][/B]
 
[SIZE=1][B]</div>[/B][/SIZE]
[COLOR=red]<!-- end code -->[/COLOR]
[SIZE=1][B]<div[/B] id=[B]"subs">[/B][/SIZE]
[SIZE=1][B]<div[/B] id=[B]"subs-left">[/B][/SIZE]

 

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:

[B][SIZE=1]<body>  <![COLOR=red]-- start of code -->[/COLOR][/SIZE][/B]
 
[SIZE=1][B]<div[/B] id=[B]"[COLOR=darkgreen]wrapper[/COLOR]">[/B][/SIZE]
[SIZE=1][B]<h1>[/B]...The [B]<strong>[/B]Worldwide[B]</strong>[/B] Media...[B]</h1>[/B][/SIZE]
[SIZE=1][B]<div[/B] id=[B]"[COLOR=darkgreen]top-nav[/COLOR]">[/B][/SIZE]
[SIZE=1][B]<ul>[/B][/SIZE]
[SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]faq[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B][SIZE=1] | [B]</li>[/B][/SIZE]
[SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]site maps[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li>[/SIZE][/B]
[SIZE=1][B]</ul>[/B] [/SIZE]

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([COLOR=green]images/header.jpg[/COLOR]) 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:

[SIZE=1][B]<div[/B] id=[B]"wrapper">[/B][/SIZE]
[SIZE=1][B]<h1>[/B]...The [B]<strong>[/B]Worldwide[B]</strong>[/B] Media...[B]</h1>[/B][/SIZE]
[SIZE=1][B]<div[/B] id=[B]"[COLOR=green]top-nav[/COLOR]"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.wilmargraphite.net/[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"[/SIZE][/B][SIZE=1] title=[B]"corp web"[/B] target=[B]"_blank"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/header.jpg"[/B] border=[B]"0"[/B] width=[B]"266"[/B] height=[B]"269"[/B] alt=[B]""[/B] align=[B]"baseline"></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B]
[SIZE=1][B]<ul>[/B][/SIZE]

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:

[B][SIZE=1]<ul> [COLOR=red]<-- start of links code -->[/COLOR][/SIZE][/B]
[SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]faq[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B][SIZE=1] | [B]</li>[/B][/SIZE]
[SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.freewebsitetemplates.com[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]">[/SIZE][/B][SIZE=1]site maps[B]</[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li>[/SIZE][/B]
[SIZE=1][B]</ul>[/B] [COLOR=red]<!-- end of links -->[/COLOR][/SIZE]
[SIZE=1][B]<[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"[/B][/SIZE][U][SIZE=1][COLOR=#0000f0][SIZE=1][COLOR=#0000f0]http://www.wilmargraphite.net/[/COLOR][/SIZE][/COLOR][/SIZE][/U][B][SIZE=1]"[/SIZE][/B][SIZE=1] title=[B]"corp web"[/B] target=[B]"_blank"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/header.jpg"[/B] border=[B]"0"[/B] width=[B]"266"[/B] height=[B]"237"[/B] alt=[B]""[/B] align=[B]"baseline"></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]>[/SIZE][/B]
[SIZE=1][B]</div>[/B][/SIZE]

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