# Solved: template problem



## 57corvette (Sep 7, 2012)

After 4 years I would like to redesign my website. I downloaded a free template and extracted all the files. Once extracted, I have a folder called "site." Inside the site folder I have the HTML files and another folder called "images." I have added new images into the site folder and edited the HTML files. When I open the HTML files from within the site folder, all looks great. So, I uploaded the HTML files and all the images to my website directory. But none of the images show up on the HTML file when published.

In fact, once I move the HTML files out of the "site" folder, nothing appears correctly. I tried to add a "site" folder in my website directory and added the HTML files to it, but still no luck. I even added an image folder into the site folder so my directory would appear the same as it does on my desktop....but still no luck.

I'm sure this is just a error on my part of setting up the path, but I can't get it to work .....did not have this problem when setting up my current site. I asked for help from the site I downloaded the template, but because it was a free template, no support would be given. I would appreciate any help you can give me.


----------



## allnodcoms (Jun 30, 2007)

If you could post the HTML for one of these images it would help us sort it out for you, but I suspect that you're providing an absolute path rather than a relative one. If your HTML is in the site folder, and the image is in the images folder, the relative address of the image will be something like:

```
"images/mypic.jpg"
```
You probably have something that begins with "C:".

I could be wrong, but that seems the most likely explanation...

Danny


----------



## 57corvette (Sep 7, 2012)

Thanks for your help Danny, I appreciate it. Below is part of the code I have for my example page.

example1.jpg" alt="Rat-Rod-Studios-Art"

[IMG]example2.jpg" alt="Rat-Rod-Studios-Art"

It appears to me that the path does not mention the site folder or the image folder. It does work when I click on the HTML file within the site folder, but not when removed. So I don't know why the images won't show up when uploaded to the directory. Thanks for any help you can give me.

Bob


----------



## JiminSA (Dec 15, 2011)

I rather think that all the content of your downloaded free template folder "site" should go into your website root folder, excluding the folder/directory "site", if that makes sense to you...


----------



## allnodcoms (Jun 30, 2007)

You're not closing the <img> tag Bob, you should have a > ('>') after your alt string.

The path doesn't need to mention 'site' if that's where the page is, but if the images are in the 'images' directory then it should be in there. 
Your first line of code would then be...

```
[IMG alt="Rat-Rod-Studios-Art"]images/example1.jpg[/IMG]
```
Can't see why it would work locally and not on the remote though, but that's the web for you!
Give it a go and let us know how you get on.

Danny


----------



## allnodcoms (Jun 30, 2007)

Oh yeah, just spotted it... Jim is correct, you should upload the complete contents of your 'site' folder to the root of your web server, but not the 'site' folder itself, just what's in it (including all folders).

That, plus the points noted above, should solve the problem.

Danny


----------



## 57corvette (Sep 7, 2012)

Thanks for your help ....much appreciate.

First, I uploaded all the files within the site folder to my directory. Tried looking at my web page, but still had problems. I then added a folder called "images" to my directory and added the background images into it. Still no luck. I am posting a link to the problem website page. (I hope that's OK in this forum) You can see all the background images are not there (except for one?) and the layout is not correct. Any help to get this corrected would be greatly appreciated.

http://www.ratrodstudios.com/links1.html


----------



## JiminSA (Dec 15, 2011)

When I browse your index1.html page not your links1.html it renders fine and the page links.html looks good too...

You may want to rename your landing page "index.html" (and all subsequent home links), which is a web standard for all browsers...


----------



## allnodcoms (Jun 30, 2007)

First off Bob, I have to say I love your artwork - very impressed!

Secondly, I've had a look at your page, and the .css file doesn't actually include any images, and neither does the main html. I'd start by taking a look at the css file, I'm guessing you've got another one lurking about somewhere with all the good bits in it!

Finally, your javascript isn't loading. It's looking for the files in a folder called "js", and the server is returning 404 (file not found), so I'm guessing (again) that you need to either upload the js folder or its content.

Keep us posted mate!

Danny


----------



## 57corvette (Sep 7, 2012)

Thanks all for your help on this ...... the technical end of this may be more than my pay grade, but I going to do my best to understand it and solve the problems.

JiminSA: I think you are looking at my current site which is working. This is the site I want to replace. The reason the links page is called links1.html is so I can keep it separate from my current links page. That one is indeed links.html. I just need to make sure I don't over-ride my current pages that are working with the new ones that are not.

Danny: Thank you for the kind comments on my artwork, much appreciated. You said "I've had a look at your page, and the .css file doesn't actually include any images, and neither does the main html. I'd start by taking a look at the css file." Is a css file different from the HTML files? I think I have uploaded all jpg files and the HTML files and see nothing that says css except there is a "cascading style sheet document" in the site folder. It has a lot of text on it, so I'm not posting it here, but should I be doing something with it? Maybe copying it and placing the verbiage in the HTML pages or uploading it to my directory?

You said "your JavaScript isn't loading." Not sure what the JavaScript is for .....there was a contact form on the contact HTML page, but I'm not using it. Also an articles HTML page that I'm not using. There was a total of five scripts in the folder. Do you think I should just delete the JavaScript text? There is a folder with scripts in it, but I did not upload it to the directory as I didn't think I was using it. But if I should keep it, I can upload it and see if that helps. Can I just upload the contents within the folder to my directory or do I need to add a folder to the directory and place the scripts in it?

If these are stupid questions I apologize. This isn't really my field and I'm trying my best to fix something I know nothing about.


----------



## JiminSA (Dec 15, 2011)

Bob, I don't want to steal Danny's thunder, but yes, you are correct in saying that you need to upload the 'js' folder to your website root folder - do that and then see how it looks...
P.S.
There are no dumb questions on this forum - the guys here are polite and very patient...:up:


----------



## allnodcoms (Jun 30, 2007)

Hi Bob,

You're welcome! Retouching and compositing was my first job after school. I worked for an ad agency in London, and in those days we used light boxes, dyes and bleaches working on original transparencies. If you screwed it up you had to talk really nicely to the photographic department. Over time the tech guys moved in with their shiny Macs and copies of Photoshop, and what used to take me all day could be done in minutes. That's how I got into this crazy industry we call computers... But I digress 

Yes, css (or, as you probably guessed "Cascading Style Sheet") is different from the HTML. HTML (to put it simply) describes where things go on the page in relation to each other and what those things contain (text and so on). CSS describes what things look like, their 'style'.
You don't need to do anything with the .css file except upload it to the same place as your HTML.

Javascript, in most modern sites, makes things move. If there is any animation in your template it's probably controlled by javascript. Best bet is just to upload the 'js' folder and its content to the same directory as your page files.

Give these a go and let us know how you get on...

Danny


----------



## 57corvette (Sep 7, 2012)

I think I'm almost there  ....... I uploaded the style page and still had the same results. But, once I uploaded the JS pages, all the images showed up.

Now, there is only one issue I need to correct. When I open one of the HTML pages from my desktop, I get this message: To help protect your security, IE has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options. When I click on it and press allow, the fonts along the top resize and fit properly.

When I click on the links HTML from my directory, I do not get this option and the words at the top are to large and don't fit. http://www.ratrodstudios.com/links1.html The hyperlink for the sitemap is too far to the right. Other than that, everything else seems to be OK. Is there a way to make the fonts/hyperlinks at the top fit correctly? Or is this a problem because of settings on my computer? Perhaps it looks OK on your computer??

Thanks again for all the help ..... never would have thought the JS would have anything to do with the appearance of the site.


----------



## allnodcoms (Jun 30, 2007)

Morning Bob,

The bit you need to edit is line 35 of your 'style.css' file. It sets the font size for the site-navav list:

```
.site-nav ul li {float:left;font-size:30px;line-height:1.2em;padding:0 47px}
```
You can change the 30px bit to something a bit more readable...

I'm still getting a 404 for your js files btw. Everything's looking pretty cool, I get the background images and so on, and once you drop the pixel size down a bit for the site navigation it should all fit. Looking a damn sight (or should that be 'site'?) better though mate!

Danny


----------



## 57corvette (Sep 7, 2012)

Thank you Danny ......I will try to edit it later today and report back. Not sure what to do about the JS....I have uploaded them all.


----------



## 57corvette (Sep 7, 2012)

That did the trick Danny ....thank you. I am only changing one page of my site at a time to make sure there are no problems and that I don't lose my ranking in Google. I started with the links page as I thought it was the easiest. Here is the link to the now working page:
http://www.ratrodstudios.com/links.html

My thanks to all for your help ....I'm sure other issues will arise as I ad more pages and hopefully I will be able to come back here and get the help I need. I would not have ever been able to do this on my own......you guys rock. :up:

Bob


----------



## 57corvette (Sep 7, 2012)

That did the trick Danny ....thank you. I am only changing one page of my site at a time to make sure there are no problems and that I don't lose my ranking in Google. I started with the links page as I thought it was the easiest. Here is the link to the now working page:
http://www.ratrodstudios.com/links.html

My thanks to all for your help ....I'm sure other issues will arise as I ad more pages and hopefully I will be able to come back here and get the help I need. I would not have ever been able to do this on my own......you guys rock. :up:

Bob


----------



## JiminSA (Dec 15, 2011)

Danny is right about the font size and I think you will have to change the absolute positioning line

```
.site-nav {position:absolute;left:36px;top:292px}
```
 as well - probably to about left:100px or thereabouts...


----------



## 57corvette (Sep 7, 2012)

I thought I had this completed, but I see I see have an issue. On my 26" monitor, the text looked fine. On my 19" monitor, the "site map" link is not on the right hand side, but rather under the "home" link. I will try to make the font size smaller and as Jim mentioned, move the position line.

Will post again once I see how it looks on both of my computers. Thanks Jim ......


----------



## 57corvette (Sep 7, 2012)

I have made the font size smaller and it now looks correct on my 19" monitor. On the 19" the text looks centered on the page. But on my 26" monitor, it looks like it's too far to the left. Is there way to set it on center instead of give it left and right positions?


----------



## JiminSA (Dec 15, 2011)

Yes, it rather looks like the original template may have had fewer menu items and was aligned accordingly... so you will have to "tinker" with the absolute:left and the padding to get it to look cool...
The padding I refer to is that between the menu items - viz:-

```
.site-nav ul li {float:left;font-size:20px;line-height:1.2em;padding:0 47px}
```
 the 47px will need to come down some.


----------



## JiminSA (Dec 15, 2011)

Bob, try these amended lines in your css...

```
.site-nav {position:absolute;top:300px}
.site-nav ul li {text-align:center;font-size:20px;line-height:1.2em;padding:0 20px}
.site-nav ul li a {text-decoration:none;color:#000}
.site-nav ul li a:hover {color:#6e6774}
```
 and maybe you can tweek the 20px padding (on the second line) for the amount of space between menu items, until you're happy with it...


----------



## 57corvette (Sep 7, 2012)

Will do Jim and thanks so much for the help ......much appreciated.


----------

