Help please text is hard against image...

[sjh4200]

Hello
Just joined looks great.

I downloaded the Media template and copied the code in the right hand
"Media Coverage"

column (for the image and text) into the column on the left

"Visit Us"


but when I did the text runs up hard against the image?

this is the code I am talking about <h3>Sports </h3>
<img src="images/pic_2.jpg" width="103" height="79" alt="Pic 2" class="left" />
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>

I am pretty new to all this design but am using dreamweaver to edit the template.

Am viewing in Firefox

Help much appreciated.

Stephen

[ishkey]

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

<img src="images/pic_2.jpg" width="103" height="79" alt="Pic 2" class="left" />

now look at this one

<img src="images/pic_2.jpg" border="0" width="103" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">

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

<img src="images/pic_2.jpg" border="0" width="103" height="79" alt="Pic 2" hspace="4" vspace="4" align="middle">

image 1 = align left
image 2 = align middle

[sjh4200]

Nice One Thanks

Is it possible to add a link to this image.... images/header.jpg as I find a lot of people want to click on pictures. Normally images show the option to add a link in my Dreamweaver but I guess this is part of a bigger div holder so not sure where to go next?

Thanka

Stephen

[ishkey]

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

<h1><a href="http://www.wilmargraphite.net/" title="corp web" target="_blank"><img src="images/cleandecklogo.jpg" border="0" width="200" height="51" alt="Wilmar Graphite - Makers of CLEAN DECK"></a></h1>

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

<h1><a href="http://www.wilmargraphite.net/" title="corp web" target="_blank">

the second part is my graphic the link is hooked to

<img src="images/cleandecklogo.jpg" border="0" width="200" height="51" alt="Wilmar Graphite - Makers of CLEAN DECK"></a></h1>

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

[sjh4200]

Thanks again, but now the first question I had is screwing?

I wanted to put a series (about 10) of short intros with images in the "visit" div (MEDIA) and copied from the "right" div and edited as you suggested and had success with 1 only <p /p> but when I add more underneath some of them align on the right had side og the "vist" div?

I tried hard breaks but still ?

here is the code I am working on...

<div id="visit">
<h2>ABC Best Treatments...</h2>
<p>Here are the latest researched ABC Treatmets including special offers and discounts codes.</p>


<img src="images/pic_2.jpg" border="0" width="103" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">
<p>This is a <strong>template designed by</strong> free <span class="style3">-<br />
</span>website templates for you for free you can <span class="style3">-</span>replace all the text by your own text.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com"><strong>more...</strong></a></p>
<p class="more">
</p>
<img src="images/pic_3.jpg" border="0" width="103" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">
<p>This is a <strong>template designed by</strong> free <span class="style3">-<br />
</span>website templates for you for free you can <span class="style3">-</span>replace all the text by your own text.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com"><strong>more...</strong></a></p> THIS IS THE ONE THAT IS ALIGNING RIGHT

<img src="images/pic_4.jpg" border="0" width="60" height="79" alt="Pic 2" hspace="4" vspace="4" align="left">
<p>This is a <strong>template designed by</strong> free <span class="style3">-<br />
</span>website templates for you for free you can <span class="style3">-</span>replace all the text by your own text.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com"><strong>more...</strong></a></p>
</div>


Thanks


Stephen

[sjh4200]

Understand the image link info you gave me but am searching for the image in the html code?

I know that the image is called images/header.jpg beacase I have changed the image to another but where is the html code that I can put the ahref before?

Thanks

P.S. That was a really great header image you supplied!
When I click on the image I get this part of the code

[ishkey]

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

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

[ishkey]

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.

<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.

#wrapper {
 text-align: left;
 margin: auto;
 width: 728px;
  position: relative;
}

The next division "top-nav" shows what we are looking for.

#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.

<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.

<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

[sjh4200]

Thanks

Will do

S