Adobe Community: template background image disappears when I make a new page from the template

Currently Being Moderated

1. Nancy O.,

Dec 31, 2012 1:47 PM in reply to bdab

Report

Did you save & name the newly created child page yet?

Usually, when you save it, DW reconciles the path to images and other assets for you.

Nancy O.

|

Mark as:

Currently Being Moderated

2. bdab,

Dec 31, 2012 2:20 PM in reply to Nancy O.

Report

Yes but it still doesn't appear. I did try to validate things and I got several messages like "the tag img does not have an attribute: "onload" in currently active versions" but these messages have to do with the images in my navigation bar, not the image where the background image is at. I copied the whole code below since I don't know what might apply.

TEMPLATE NEW PAGE

This code is for the template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<!--

body {

background-color: #CCC;

}

#container {

width: 780px;

margin-right: auto;

margin-left: auto;

border-right-color: #122e72;

border-left-color: #122e72;

border-top-style: none;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-right-width: 25px;

border-left-width: 25px;

background-color: #FFF;

background-repeat: no-repeat;

font-family: Arial, Helvetica, sans-serif;

color: 58585a;

font-size: 12px;

font-style: normal;

border-bottom-width: 40px;

border-top-color: #122e72;

border-bottom-color: #122e72;

}

#main content {

width: 780px;

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

font-style: normal;

font-weight: normal;

font-variant: normal;

color: 122e72;

}

#footer {

background-color: #CCC;

text-align: right;

vertical-align: middle;

white-space: normal;

font-size: 11px;

line-height: 13px;

font-family: Arial, Helvetica, sans-serif;

padding-top: 10px;

padding-right: 25px;

padding-bottom: 50px;

height: 65px;

margin-top: 0px;

top: 0px;

margin-right: 0;

margin-bottom: 0;

margin-left: 0;

}

#header {

border-top-width: 7px;

border-top-style: solid;

border-top-color: #58585a;

margin: 0px;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 3px;

padding-left: 0px;

}

#header0 {

margin-top: 0px;

padding: 0px;

}

#container div p #logo {

vertical-align: bottom;

padding-top: 50px;

}

#apDiv1 {

position:absolute;

width:119px;

height:22px;

z-index:1;

left: 515px;

top: 166px;

margin: 0px;

padding: 0px;

}

-->

</style>

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_nbGroup(event, grpName) { //v6.0

var i,img,nbArr,args=MM_nbGroup.arguments;

if (event == "init" && args.length > 2) {

if ((img = MM_findObj(args[2])) != null && !img.MM_init) {

img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;

if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();

nbArr[nbArr.length] = img;

for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

if (!img.MM_up) img.MM_up = img.src;

img.src = img.MM_dn = args[i+1];

nbArr[nbArr.length] = img;

} }

} else if (event == "over") {

document.MM_nbOver = nbArr = new Array();

for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {

if (!img.MM_up) img.MM_up = img.src;

img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);

nbArr[nbArr.length] = img;

}

} else if (event == "out" ) {

for (i=0; i < document.MM_nbOver.length; i++) {

img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }

} else if (event == "down") {

nbArr = document[grpName];

if (nbArr)

for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }

document[grpName] = nbArr = new Array();

for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {

if (!img.MM_up) img.MM_up = img.src;

img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;

nbArr[nbArr.length] = img;

} }

}

//-->

</script>

</head>

</div>

<tr>

</tr>

</table>

</div>

<p>Nute Engineering<br />

907 Mission Avenue<br />

San Rafael, CA 94901<br />

P 415.453.4480<br />

F 415.453.0343<br />

info@nute-engr.com</p>

</div>

</body>

</html>

|

Mark as:

Currently Being Moderated

3. Nancy O.,

Dec 31, 2012 2:51 PM in reply to bdab

Report

The relevant CSS code is this:

#container {

}

If you saved your child page to the site root (where your index.html is located), the path to your background image should look like this without the leading dots and slash ../

If that is correct, I'm guessing the leading underscore _ in your img folder name is creating an unwanted problem. You should rename your _img folder to just img or image.

Nancy O.

|

Mark as:

Currently Being Moderated

4. bdab,

Dec 31, 2012 3:16 PM in reply to Nancy O.

Report

Thanks. I took the underscore out of the _img file.

Here is the difference between the two scripts in the container. They obviously look different but I can't tell where they are both looking for the image.

1) from template

2) from new file

background-image: url(file:///C|/Users/Barbara/Desktop/local_sites/2102 Nute website/img/edited-Water_drk_blue.jpg);

Also, I am wondering if, because I am trying to save it as my index.html file if I'm not allowed to make my home page from a template?

|

Mark as:

Currently Being Moderated

5. Nancy O.,

Dec 31, 2012 3:47 PM in reply to bdab

Report

That path is pointing to files on your local hard drive instead of your local site folder.

file:///C|/Users/Barbara/Desktop/...

Are you working within a defined site in DW?

Without this critical first step, DW cannot properly manage site assets for you.

Go to Site > Manage Sites > New...

Tell DW where to find & save your local site files.

After you're finished defining your site, the Files Panel in DW (F8) should resemble this basic set-up:

YourSiteName (C:\YourSiteName)

about.html

contact.html

index.html

-Templates

main.dwt (your main template file)

- Img

edited-Water_drk_blue.jpg

+ SpryAssets

+ Styles

+ Scripts

Nancy O.

|

Mark as:

Currently Being Moderated

6. bdab,

Jan 2, 2013 11:48 AM in reply to Nancy O.

Report

Yes, my site is defined as far as I can tell. Here's what things look like.

|

Mark as:

Currently Being Moderated

7. Nancy O.,

Jan 2, 2013 1:37 PM in reply to bdab

Report

Open your child page in code view.

Manually correct the path to your background-image as described in my earlier post. Save. Preview in browser.

Did this help?

Nancy O.

|

Mark as:

Currently Being Moderated

8. bdab,

Jan 2, 2013 1:54 PM in reply to Nancy O.

Report

thank you. I took out the ".." before the /img in the Template and that worked. I thought I had to take it out in the Child Page but because it was built on a template and the image was in an uneditable region it was greyed out so I couldn't figure it out.

Anyway, Thanks for your help!

Barbara

|

Mark as:

Currently Being Moderated

9. megasena,

Jan 2, 2013 6:20 PM in reply to bdab

Report

be smart about where you are saving your files made from the model, because if you save some folder inside the dreamwever not follow the same path. I've not used the site models in my [link removed], and also do not recommend using these unless they are absurdly large.

|

Mark as:

Dreamweaver

template background image disappears when I make a new page from the template

Dec 31, 2012 1:24 PM

More Like This

Bookmarked By (0)

Answers + Points = Status