PDA

View Full Version : .png disappears when create new from template


joesp
12-12-2009, 02:29 AM
I am using a .png file for the background of my footer. If I simply save my template as an .htm file, it looks perfect. If I actually try to use the template like it is supposed to be used, file/new/from_template, the .png disappears from the footer. In code it is still in place, but isn't coming through visually. I'm using CS3 and have never used a .png before, so I may be missing something very obvious.

The code from the template follows:
.twoColFixLtHdr #footer {
background:#768E90;
padding-top: 12px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(../Images/kc-png-footer.png);
height: 62px;
background-repeat: no-repeat;

The code from the .htm created from the template follows:
.twoColFixLtHdr #footer {
background:#768E90;
padding-top: 12px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(Images/kc-png-footer.png);
height: 62px;
background-repeat: no-repeat;

Everything looks identical except the "../" preceeding Images in the url path. Since it's locked by the template, I don't know how to change the path it is the problem.

Any thoughts or suggestions would be appreciated.

joesp
12-12-2009, 03:10 AM
If this helps. . .

Here's the page saved as .htm from the template .dwt file (notice the white footer background image with radius corners): http://www.kidscountpeds.net/01-KCP-template.htm

Here's the page that was created when I went File>New>From Template (notice there is no white .png background image):
http://www.kidscountpeds.net/01-KCP-from_template.html

gentleone
12-12-2009, 12:16 PM
Its because you're pointing in two CSS rules to the images folder on your local hard disc.
.twoColFixLtHdr #sidebar1 {background-image: url(file:///C|/Websites/Kids Count/Images/kc-mc-background.gif);}

.twoColFixLtHdr #footer {background-image: url(file:///C|/Websites/Kids Count/Images/kc-png-footer.png);}

joesp
12-12-2009, 12:39 PM
Still trying to get a grasp of CSS. Thank you for your help.

joesp
12-12-2009, 01:39 PM
Its because you're pointing in two CSS rules to the images folder on your local hard disc.
.twoColFixLtHdr #sidebar1 {background-image: url(file:///C|/Websites/Kids Count/Images/kc-mc-background.gif);}

.twoColFixLtHdr #footer {background-image: url(file:///C|/Websites/Kids Count/Images/kc-png-footer.png);}

Is it that they shouldn't be in the CSS, or is it that they should point to their own url on the server? I haven't been able to get them to point to the non-C:drive URL.

Corrosive
12-12-2009, 01:41 PM
They should point to a file in the site structure or a full url path. Not your C Drive. Have you defined your site correctly as this is the normal cause of errors like this?

joesp
12-12-2009, 03:10 PM
In the Site Definition, should the Links be relative to Document or Site Root? I have selected document. I don't even know if this path would be considered a link.

The problem exists as soon as create a new page from template on the local drive, so shouldn't the file path to the image file still work at this point. The background png in the footer disappears immediately.

Corrosive
12-12-2009, 03:14 PM
Site root I believe

DWcourse
12-12-2009, 09:16 PM
For the most part it doesn't make a difference whether your links are relative to the document or site root. There is an exception however. When you link to a background image in a style rule within a template, that link is not updated in files created from the template (as all other links are).

There are two solutions:

Define all of your style rules in an external style sheet rather than in your HTML pages (which is what you should be doing anyway).
If you insist on leaving your styles in the pages and are using a template, make sure links to files within the style rules are relative to the root folder (begin with a slash).

joesp
12-13-2009, 03:00 AM
That's what I was looking for, DWcourse. Thank you. I was able to work around this problem by creating a new file, then going to Modify>Templates>Apply Template to Page. For some reason this worked when the File>New>From Template did not. I greatly appreciate your explanation as this made no sense whatsoever.

I know I need desparate CSS help, but the begin with a slash suggestion is key to getting this setup correct. Thank you again.