10 Replies Latest reply on Jun 5, 2010 7:33 PM by Szaint

    Formatting Lost in Child Page

    Szaint

      I have created a template. When I create a child page from the template most of the formatting is lost. There is no bg image for the body, no bg images for my columns, and the footer floated off to the right somehow.

       

      I can't really provide a link for this because these are native files, but does anyone know what would cause a problem like this?

        • 1. Re: Formatting Lost in Child Page
          370H55V Level 4

          Three words:

           

          Incorrect file path.

           

          The child page for some reason is not pointing to the images or style elements.

          • 2. Re: Formatting Lost in Child Page
            garywpaul Level 5

            While you cant provide a link, some code would be a help.

             

            Second, where is this not showing up correctly? Design view? preview in browser?

             

            When you create a child page from a template, it creates the paths to your hard drive, which look something like this:

            background-image:url (c:f/////folder/folder/folder/sites/thissite/images/filename.jpg):

             

            When you save the child page, it is supposed to convert it to the path you have set up in your definitions.

             

            If it does not, you can go up to Modify | Templates | Apply Template to Page, which should clear you up.

             

            Gary

            • 3. Re: Formatting Lost in Child Page
              Szaint Level 1

              Which code should I provide for help with this problem: css or html?

              • 4. Re: Formatting Lost in Child Page
                John Waller Adobe Community Professional & MVP

                All of it.

                 

                HTML and CSS are as inter-related as the human need for food and water.

                 

                File paths (and most other issues) are found in both

                • 5. Re: Formatting Lost in Child Page
                  Szaint Level 1

                  lol. alright, here it goes:

                   

                  @charset "UTF-8";

                   

                  a:link {

                  text-decoration: none;

                  color: #999;

                  background: transparent;

                  }

                  a:visited {

                  text-decoration: none;

                  color: #006;

                  background: transparent;

                  }

                  a:hover {

                  text-decoration: none;

                  color: #fff;

                  background: transparent;

                  }

                  a:focus {

                  text-decoration: none;

                  color: #fff;

                  background: #6196BC;

                  }

                  a:active {

                  text-decoration: none;

                  color: #600;

                  background: transparent;

                  }

                   

                   

                  body {

                  font-family: Georgia, "Times New Roman", Times, serif;

                  font-size: 1em;

                  color: #000;

                  background-image: url(../images/gradientbg.jpg);

                  background-repeat: repeat-x;

                  background-color: #661F22;

                  }

                   

                  #container {

                  width: 960px;

                  padding-top: 5px;

                  padding-left: 5px;

                  padding-right: 5px;

                  overflow: hidden;

                  background-color: #FFF;

                  height: 540px;

                  margin-top: 0;

                  margin-right: auto;

                  margin-bottom: 0;

                  margin-left: auto;

                  }

                   

                  #banner {

                  height: 145px;

                  width: 940px;

                  background-image: url(images/banner_bg02.jpg);

                  padding-top: 35px;

                  padding-left: 20px;

                  }

                   

                  #navbar {

                  height: 35px;

                  width: 960px;

                  background-image: url(images/navbar_longbg.jpg);

                  }

                   

                  #main_image {

                  height: 320px;

                  width: 960px;

                  background-image: url(images/main_image02.jpg);

                  }

                   

                  #fauxcolumn_container {

                  width: 960px;

                  padding-left: 5px;

                  padding-right: 5px;

                  overflow: hidden;

                  background-color: #FFF;

                  background-image: url(images/column_bg.gif);

                  background-repeat: repeat-y;

                  background-position: 50%;

                  margin-top: 0;

                  margin-right: auto;

                  margin-bottom: 0;

                  margin-left: auto;

                  padding-top: 0px;

                  padding-bottom: 0px;

                  }

                   

                  #left_column {

                  float: left;

                  width: 540px;

                  margin-top: 0px;

                  margin-right: 5px;

                  padding-right: 30px;

                  padding-left: 30px;

                  line-height: 130%;

                  margin-bottom: 22px;

                  }

                   

                  #left_column h3 {

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

                  line-height: 140%;

                  font-size: 120%;

                  color: #000;

                  }

                   

                  #left_column h4 {

                  line-height: 140%;

                  font-size: 100%;

                  color: #333;

                  }

                   

                  #left_column p {

                  font-size: 90%;

                  }

                   

                  #column_container {

                  float: left;

                  width: 355px;

                  margin-top: 0px;

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

                  }

                   

                  #topright_column {

                  width: 305px;

                  padding-bottom: 12px;

                  padding-top: 0px;

                  padding-right: 25px;

                  padding-left: 25px;

                  font-size: 10pt;

                  line-height: 18pt;

                  color: #666;

                  margin: 0px;

                  background-image: url(images/colpractice.gif);

                  background-repeat: no-repeat;

                  }

                   

                  #topright_column p {

                  margin: 0;

                  padding: 0px 0px 6px 0px;

                  }

                   

                  #bottomright_column {

                  width: 305px;

                  padding-right: 25px;

                  padding-left: 25px;

                  background-repeat: no-repeat;

                  margin: 0px;

                  background-image: url(images/colcontact.gif);

                  padding-bottom: 12px;

                  }

                   

                  #bottomright_column p {

                  margin: 0;

                  padding: 0px 0px 8px 0px;

                  font-size: 10pt;

                  color: #666;

                  letter-spacing: 0.02px;

                  line-height: 12pt;

                  }

                   

                  #footer {

                  width: 960px;

                  padding-left: 5px;

                  padding-right: 5px;

                  overflow: hidden;

                  background-color: #300;

                  margin-top: 0;

                  margin-right: auto;

                  margin-bottom: 0;

                  margin-left: auto;

                  padding-top: 20px;

                  padding-bottom: 20px;

                  text-align: center;

                  font-size: 11px;

                  color: #C30;

                  line-height: 120%;

                  }

                  • 6. Re: Formatting Lost in Child Page
                    Szaint Level 1

                    This is the Source Code from the child page:

                     

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

                    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->

                    <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                    <!-- InstanceBeginEditable name="doctitle" -->

                    <title>J.Graves Associates</title>

                    <!-- InstanceEndEditable -->

                    <link href="jgraves.css" rel="stylesheet" type="text/css" />

                    <script type="text/javascript">

                    <!--

                    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>

                    <style type="text/css">

                    <!--

                    body {

                    background-image: url(images/gradientbg.jpg);

                    background-repeat: repeat-x;

                    background-color: #661F22;

                    }

                    -->

                    </style>

                    <!-- InstanceBeginEditable name="head" -->

                    <!-- InstanceEndEditable -->

                    </head>

                     

                    <body onload="MM_preloadImages('images/attorneys_down.jpg','images/attorneys_over.jpg','images/ contact_down.jpg','images/contact_over.jpg','images/employment_down.jpg','images/employmen t_over.jpg')">

                    <div id="container">

                      <div id="banner"><a href="index.html"><img src="images/jgraves_logo02.png" alt="JGraves Logo" name="Logo" width="435" height="55" id="Logo" /></a></div>

                      <div id="navbar">

                        <table border="0" cellpadding="0" cellspacing="0">

                          <tr>

                            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Employment','images/employment_down.jpg',1)" onmouseover="MM_nbGroup('over','Employment','images/employment_over.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/employment_up.jpg" alt="Employment Discrimination" name="Employment" width="346" height="35" border="0" id="Employment" onload="" /></a></td>

                            <td><a href="javascript:;"><img src="images/police_up.jpg" alt="Police Brutality" name="PoliceBrutality" width="227" height="35" border="0" id="Brutality" onload="" /></a></td>

                            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Attorneys','images/attorneys_down.jpg',1)" onmouseover="MM_nbGroup('over','Attorneys','images/attorneys_over.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/attorneys_up.jpg" alt="Attorneys" name="Attorneys" width="160" height="35" border="0" id="Attorneys" onload="" /></a></td>

                            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Contact','images/contact_down.jpg',1)" onmouseover="MM_nbGroup('over','Contact','images/contact_over.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/contact_up.jpg" alt="Contact Us" name="Contact" width="168" height="35" border="0" id="Contact" onload="" /></a></td>

                          </tr>

                        </table>

                      </div>

                      <div id="main_image"></div>

                    </div>

                    <div id="fauxcolumn_container">

                      <div id="left_column"><!-- InstanceBeginEditable name="LeftColumn" -->

                        <h4>Our attorneys are sympathetic to the legal needs of minorities. Count on our support to guide you through simple or complex legal matters you confront with your employer and any persons responsible for discrimination, sexual harassment, false arrest and police brutality.</h4>

                        <p>J. Graves Associates services clients in both the states of New York and New Jersey to primarily focus on civil rights matters and other matters that may affect your family. We provide a team of experienced attorneys dedicated to protecting your civil rights in the area of employment discrimination, sexual harassment, false arrest and police brutality. Our lawyers are committed to ensuring that you are well represented when faced with difficult legal matters that threaten your right to live independently and with dignity. When you are faced with a difficult legal issue and need the voice of an experienced advocate, contact J. Graves Associates. </p>

                        <p>As members of minority groups ourselves, we know that most workplace discrimination today may very well be subtle but it remains as harmful as even the most egregious cases of discrimination. We understand that when you are a victim of employment discrimination, police brutality or sexual harassment — it is not only your financial security at risk but your emotional well being as well. From your initial consultation through the final resolution of your case, we will provide you with a small, close-knit group of attorneys who will make sure that you will have someone who knows your case and is available to talk if you have questions or concerns. </p>

                        <p>Employment discrimination, sexual harassment, false arrest and police brutality are matters that require compassion for the victim and attorneys with the belief that obtaining justice for the client means helping you get money to resolve wrongs that affect you and your loved ones.</p>

                      <!-- InstanceEndEditable --></div>

                      <div id="column_container">

                        <div id="topright_column">

                          <p> </p>

                          <p> </p>

                          <p>Employment Discrimination<br />

                            Sexual Harassment<br />

                            Age Discrimination<br />

                            Disability Discrimination<br />

                            Equal Pay<br />

                            Retaliatory Discharge<br />

                            Pregnancy Discrimination<br />

                            Breach Of An Employment Contract<br />

                            Wrongful Discharge<br />

                          Family &amp; Medical Leave Act (FMLA)</p>

                        </div>

                        <div id="bottomright_column">

                          <p> </p>

                          <p> </p>

                          <p> </p>

                          <p><img src="images/consult.jpg" width="275" height="30" alt="Free Consultation" /></p>

                          <p> </p>

                          <p>Contact J. Graves Associates for a free initial consultation with an experienced civil rights lawyer. </p>

                    <p>We serve clients in Manhattan, Brooklyn, Bronx, Queens, Nassau County Long Island, and Northern New Jersey.</p>

                        </div>

                      </div>

                    </div>

                    <div id="footer">J. Graves Associates is located in New York NY and Newark NJ and serves clients in Manhattan, Brooklyn, Bronx, Queens, Nassau County Long Island, Northern New Jersey.<br />

                    © 2010 by J. Graves  Associates. All rights reserved.</div>

                    </body>

                    <!-- InstanceEnd --></html>

                    • 7. Re: Formatting Lost in Child Page
                      Szaint Level 1

                      Here are jpegs of the how the issue looks. One shows the correct format of the template and the other shows the formatting gone wrong in the child page.

                       

                      home page.jpg  test page.jpg

                      • 8. Re: Formatting Lost in Child Page
                        John Waller Adobe Community Professional & MVP

                        It'll be far easier to diagnose this if you upload all the files.

                         

                        However, check your file paths.

                         

                        Some begin "images..."

                         

                        Others begin "../images..."

                         

                        and so on.

                         

                        What does your local folder structure look like in the Files panel? Where is the CSS file?

                        • 9. Re: Formatting Lost in Child Page
                          Szaint Level 1

                          the css file is in the root folder a long with all the other files.

                          • 10. Re: Formatting Lost in Child Page
                            Szaint Level 1

                            The interesting thing is that the child pages display correctly on the web.

                             

                            http://www.jgraveslawyers.com/discrimination.html

                             

                            However, it still doesn't explain why the formatting is off in DW.