16 Replies Latest reply on Aug 4, 2013 4:14 PM by gem17

    Preview Looks Nothing Like Live View`

    gem17 Level 1

      I used a 3 column fixed header and footer template in DW CS6 and when I preview it in Chrome or IE all of my columns are gone and the page is lined up like I don't have any columns-does anyone know why? I'm all ears!!!

       

      Live View

      live_view.png

      Chrome Preview

      live_chrome.png

        • 1. Re: Preview Looks Nothing Like Live View`
          Jon Fritz II Adobe Community Professional & MVP

          Looks like a problem with the css.

           

          Could you post a link to the page so we can see the code?

          • 2. Re: Preview Looks Nothing Like Live View`
            gem17 Level 1

            It's not live yet but here's the code. I want to use this as the template for the rest of the site so your help is really appreciated!

             

            <!doctype html>

            <html>

            <head>

            <meta charset="utf-8">

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

            <title>PCC Template</title>

            <!-- TemplateEndEditable -->

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

            <!-- TemplateEndEditable -->

            <link href="/www.ocpcc.org/pcc_template.css" rel="stylesheet" type="text/css">

            <style type="text/css">

            body {

                      background-color: #ffffff;

            }

            </style>

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

            <script src="../ajxmenu.js" type="text/javascript"></script>

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

            <style type="text/css">

            a:link {

                      color: #0000FF;

            }

            a:visited {

                      color: #660000;

            }

            a:hover {

                      color: #000000;

            }

            a:active {

                      color: #0000FF;

            }

            h1 {

                      font-size: 16pt;

                      color: #000000;

            }

            h2 {

                      font-size: 14pt;

                      color: #000000;

            }

            h3 {

                      font-size: 12pt;

                      color: #000000;

            }

            </style>

            <script src="../pcc_nav.js" type="text/javascript"></script>

            </head>

             

             

            <body>

             

             

            <div class="container">

              <div class="header"><a href="#"></a>

                <!-- end .header --><img src="/www.ocpcc.org/images/banner_orig.png" width="960" height="115" alt="PCC Banner"></div>

              <div class="sidebar1">

                <ul class="nav">

                  <li>

                    <div class="AJXCSSMenuBaUdNOD"><!-- AJXFILE:../pcc_nav.css -->

                      <ul>

                        <li class="tfirst"><a id="AJXCSSMenuBaUdNODitem_0" href="#">Welcome</a></li>

                        <li><a href="#">Who We Are</a></li>

                        <li><a href="#">Sermon Series</a></li>

                        <li><a href="#">Worship Schedule</a></li>

                        <li><a href="#">Calendar of Events</a></li>

                        <li class="tsub"><a class="ajxsub" href="#">Getting Connected</a>

                          <ul>

                            <li class="sfirst"><a href="#">Children's Ministries</a></li>

                            <li><a href="#">Student's Ministries</a></li>

                            <li><a href="#">Women's Bible Study</a></li>

                            <li class="slast"><a href="#">Retired Men's Group</a></li>

                          </ul>

                        </li>

                        <li><a href="#">Staff</a></li>

                        <li><a href="#">Fellowship</a></li>

                        <li class="tlast"><a href="#">Pastor Tim's Blog</a></li>

                        <li class="timg"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""></li>

                      </ul>

                      <br >

                    </div>

                  </li>

                </ul>

                <!-- end .sidebar1 --></div>

              <div class="content">

                <h1> </h1>

                <h1>Content</h1>

                <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>

                <h2>Clearing Method</h2>

                <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>

                <h3>Logo Replacement</h3>

                <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>

                <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>

                <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>

                <p> </p>

                <p> </p>

                <p> </p>

                <!-- end .content --></div>

              <p> </p>

              <p class="container.titleorange"><em><strong>Special Upcoming Events</strong></em></p>

              <p> </p>

              <p>Angels Game 8/17</p>

              <p>  <img src="/www.ocpcc.org/images/angels_oval.png" width="117" height="192" alt="Angels Game"></p>

              <p>All Church Picnic</p>

              <p>     <img src="/www.ocpcc.org/images/volleyball_thumb_border.jpg" width="128" height="106" alt="Picnic"></p>

              <p>The Story</p>

              <div class="footer">

                <blockquote>

                  <blockquote>

                    <blockquote>

                      <blockquote>

                        <blockquote>

                          <blockquote>

                            <blockquote>

                              <p>Presbyterian Church of the Covenant<br>

                                2850 Fairview Rd<br>

                              Costa Mesa, CA 92626

                              <br><strong>Email:</strong> Click <a title="Email Natalie" href="#mailto:Natalie@pccov.org" target="_blank">here</a> to send us an email<br><strong>Phone:</strong> <span id="gc-number-0" title="Call with Google Voice">(714) 557-3340</span><br>

                              </p>

                            </blockquote>

                          </blockquote>

                        </blockquote>

                      </blockquote>

                    </blockquote>

                  </blockquote>

                </blockquote>

                <!-- end .footer --></div>

              <!-- end .container --></div>

            </body>

            </html>

            • 3. Re: Preview Looks Nothing Like Live View`
              gem17 Level 1

              BTW I'm using DW CS6 not CC so if this isn't the right place just let me know.

              • 4. Re: Preview Looks Nothing Like Live View`
                Jon Fritz II Adobe Community Professional & MVP

                The link to your css in the <head> looks malformed...

                 

                <link href="/www.ocpcc.org/pcc_template.css" rel="stylesheet" type="text/css">

                 

                Should be either http://www. to start out (for absolute links) or just href="pcc_template.css" if it's in the same folder as the page you took the code from.

                 

                If you could upload your pages and post a link, that would be far better for debugging purposes.

                • 5. Re: Preview Looks Nothing Like Live View`
                  gem17 Level 1

                  When I do either one of those the page lines up in DW and in the preview. I'll add the page to my teknote website and send you the url. Thanks for helping.

                  • 6. Re: Preview Looks Nothing Like Live View`
                    gem17 Level 1

                    This is interesting...the Web URL in the site has two http prefixes and when I take one out the formatting is lost and it looks in DW like it does in preview (no columns). Do you happen to know when someone uses the DW Templates do they need to find the template files and add them into their own web folder?

                     

                    Local Info

                     

                    adv_opt.png

                     

                    Relative Path Option

                     

                    rel_paths.png

                    • 7. Re: Preview Looks Nothing Like Live View`
                      Jon Fritz II Adobe Community Professional & MVP

                      http://http:// is most definitely not correct. I'm guessing a combination of that incorrect path and the other incorrect paths within your code are causing some issue. Remove the first http:// and then we can take a look at the page code to see what's happening there.

                       

                      Terminology is very important when talking about "Templates" in DW.

                       

                      A "DW Template" is a .dwt file (dreamweaver template). Basically, when you are creating a site and plan to use a .dwt Template file, you create a single page to your liking, define several "Editable Regions" and then save it into a Templates folder within your Defined Site. From that point on, you may choose File > New > Page From Template and use that .dwt as the base for any new page. All links (images, .css, .js files) will automatically update themselves to point to the correct info when the page is saved. Each page's content is then added to the Editable Regions defined in the .dwt file. All .dwt files will need to be stored locally within the Defined Site's Templates folder (it's automatically created). That folder does not get uploaded as the files are not used by the server, just DW.

                       

                      If you are talking about anything other than the above, you are not using the Dreamweaver Template Feature, in which case, that checkbox would be meaningless to you.

                      1 person found this helpful
                      • 8. Re: Preview Looks Nothing Like Live View`
                        gem17 Level 1

                        Hi John,

                         

                        That's what I was trying to do but I couldn't insert any editable regions so I gave up. My thought was to modify one page and save as different pages since I can't seem to add any editable regions...what's the point of having a template if I can't edit it? Anyway no matter what I do the formatting is trashed when I preview. Here's the URL for grins...http://pccov.sdz1wni1e0.site.aplus.net/

                        • 9. Re: Preview Looks Nothing Like Live View`
                          antmeeks13

                          I took a look at the link you posted.

                           

                          The first problem I would address before trouble shooting anything else is:

                           

                          <link href="/www.ocpcc.org/SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

                          <link href="/www.ocpcc.org/SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

                          <script src="/www.ocpcc.org/SpryAssets/SpryAccordion.js" type="text/javascript"></script>

                          <script src="/www.ocpcc.org/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                           

                          The doc you uploaded isn't formatted because the formatting CSS & JS files can't be found based on what you've typed above.

                           

                          Your stylesheet & JS sources need to point to valid files, either as a correctly formatted absolute URL or relative URL from the HTML doc.

                           

                          Do you understand what I mean here?

                          • 10. Re: Preview Looks Nothing Like Live View`
                            Jon Fritz II Adobe Community Professional & MVP

                            Your links are still malformed and acting like site root relative links, with absolute addresses. When you put a leading / in front of an address in a link, that tells the browser to place your domain, in this case http://pccov.sdz1wni1e0.site.aplus.net/ in front of the remainder of the address in the link. Right now, all of your .css and .js files are showing a doubled up address, which is obviously incorrect.

                             

                            You should change all of the links on your site to document relative, unless you have a very specific need to have them be site root relative.

                             

                            Go to Site > Manage Sites > Advanced Tab > Local Info > Check the Links relative to Document radio button

                            • 11. Re: Preview Looks Nothing Like Live View`
                              gem17 Level 1

                              Yes make perfect sense, however I didn't move files anywhere, is it because the files need to be saved to a specific place? The actual dwt file is in a folder called Templates while the js files are in the root so that could be it. I could place the dwt file in the root and see if that works.

                              • 12. Re: Preview Looks Nothing Like Live View`
                                Jon Fritz II Adobe Community Professional & MVP

                                No, the .dwt must stay in the Templates folder and nothing else should be there.

                                 

                                When you create a new page from the template, you need to go to File > New and choose Page From Template, then select the .dwt file from the list. If you are doing it just about any other way (like Save As from the .dwt), it will break.

                                 

                                Follow the instructions above to make your links document relative and that "should" clear up the link path issues. If not, you'll need to change the links to Document Relative within your .dwt file manually so it updates across your Defined Site.

                                1 person found this helpful
                                • 13. Re: Preview Looks Nothing Like Live View`
                                  antmeeks13 Level 1

                                  I think you need to back up a few steps...

                                   

                                  You need to be working in a regular HTML doc in Dreamweaver and get that right first, BEFORE turing it into a template.

                                   

                                  So let's say your doc is named 'index.html'.

                                   

                                  This should be your site folder heirarchy on your computer, where 'site-root' is the name of your site folder:

                                   

                                  /site-root/index.html

                                  /site-root/SpryAssets/SpryAccordion.css

                                  /site-root/SpryAssets/SpryMenuBarVertical.css

                                  /site-root/SpryAssets/SpryAccordion.js

                                  /site-root/SpryAssets/SpryMenuBar.js

                                   

                                  In the head of your index.html document, the links to your CSS & JS should read like this:

                                   

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

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

                                  <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>

                                  <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                                   

                                  Now if you have any inline images or images in your CSS, we'll have to correct those as well.


                                  1 person found this helpful
                                  • 14. Re: Preview Looks Nothing Like Live View`
                                    gem17 Level 1

                                    Jon the initial problem was that the DW template wouldn't allow me to enter any Editable Regions so I saved it as a htm file. I'll probably just create my own htm doc and save it as a template this weekend, hopefully that works.

                                    • 15. Re: Preview Looks Nothing Like Live View`
                                      gem17 Level 1

                                      Thanks for clarifying the files and how they read in the actual html doc. nice!!!

                                      • 16. Re: Preview Looks Nothing Like Live View`
                                        gem17 Level 1

                                        Anyone know how to find out if DW is 32 or 64 bit.