11 Replies Latest reply on Mar 25, 2010 7:27 PM by Christoph Micklon

    HELP! Dreamweaver layout looks different from Live site

    chris32882

      I decided to upload what I have so for this website I am working on for a friend. For some reason its not looking the way its suppose to. Much help is greatly appreciated.

       

       

      shizzycouture.com

       

       

      Im not sure what to change since it looks good through dreamweaver. I am currently using the latest version of firefox

        • 1. Re: HELP! Dreamweaver layout looks different from Live site
          Christoph Micklon Level 1

          Chris,

           

          Could you provide a screen capture  of what your site looks like in DreamWeaver.  I was able to view  http://shizzycouture.com/ with no problem, but since I need to have an  idea of what you think this WebPage should look like.

           

          I  took the source code and looked at this with DWcs4 and it did pretty  much appear the same, except the width was awkward because you are using  margins with % in the mainContent class.

           

           

          Also  I just noticed that the page falls apart when the user's screen falls  below a width of approximately 1100 which is rather big.   A fixed width  page should at lest be able to scale down to 800 pixels wide as many  users still utilize this resolution.  Don't worry there are many fixes  for this problem.

           

          If you need actual help, beyond a  regurgitated response, look no further.

           

           

           

          Christoph with Abacus Web | Design & Development

          WebSites developed with Substance

           

          http://AbacusWeb.com

          http://AbacusWeb.Blogspot.com

          1 person found this helpful
          • 2. Re: HELP! Dreamweaver layout looks different from Live site
            Nancy OShea Adobe Community Professional & MVP

            DW Design View is not 100% reliable owing to different browsers, end-user settings and display sizes. Test your site in ALL major browsers (Chrome, FF, IE7, 8, Opera...) with increased/decreased text and viewport sizes.

             

            Use valid markup and CSS code. Code errors often cause unexpected results in DW Design View and browsers.

             

            Code validation tools
            CSS - http://jigsaw.w3.org/css-validator/
            X/HTML - http://validator.w3.org/

             

             

            CSS Layouts can be either Fluid/Liquid (percentage based), Elastic (em based) or Fixed-width (pixel based).  These all have their plusses and minuses.  Deciding which one is appropriate for your particular project depends on:

             

            1) the amount of content you need to display per page,

            2) your target audience,

            3) the devices you wish to support (desktop/laptop/mobile...)

            4) client's/personal choices.

             

            Liquid layouts (%) can get unwieldy on super wide or super narrow displays. Thus, if I have a lot of content to display,  I prefer to use a semi-liquid layout - % based along with min- and max-width restrictions to keep the page contained.

             

            Elastic layouts resize text and images proportionally which some people really like. Personally I prefer being able to resize text only in my browser without it affecting page and image dimensions.  That said, elastic layouts can work well for graphics heavy web sites.

             

            Fixed-width, centered layouts IMO are the most convenient to work with.  I think that's why so many web designers use them.  The trick is finding the "right width" for your target audience.  For most desktop and laptop users, 900 to 1100px is probably a good range.  For mobile devices, 480px or lower may be required.

             

            Related links: 
            Google labs - Browser Size
            http://browsersize.googlelabs.com/

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            1 person found this helpful
            • 3. Re: HELP! Dreamweaver layout looks different from Live site
              chris32882 Level 1

              Here it is. Im familar with some web designing, but not the new ways and new rules. Could you help me get this corrected?

               

               

              The screen shot:

               

              website.PNG

               

              I hope this will help.

               

              My goal for the website:

               

              Clean and centered. I should of made it a fixed width of 900 px wide, but I started using liquid width and don't want to mess anything up what I already have.

               

              I was trying to float the PayPal logo next to the main logo up top.

              • 4. Re: HELP! Dreamweaver layout looks different from Live site
                Christoph Micklon Level 1

                When I placed the code currently at http://shizzycouture.com, DreamWeaver CS4 did not display a layout like the one you show in that screenshot.  It may be due to a version difference in DreamWeaver, but I doubt that since your code is all simplistic tables.

                 

                Are you sure the code you see in DreamWeaver has been pushed to the server?  Take a look at http://shizzycouture.com/ and view the page source, as this is what it is called in FireFox the browser you said you were testing it in.

                 

                Answer those few things and I can continue.  I will monitor this forum for an additional 2 hours.

                 

                Christoph with Abacus Web | Design & Development

                WebSites  developed with Substance

                 

                http://AbacusWeb.com

                http://AbacusWeb.Blogspot.com

                • 5. Re: HELP! Dreamweaver layout looks different from Live site
                  Christoph Micklon Level 1

                  As for the floating the paypal image, you need to use the position attribute, under the Positioning category.  To better understand how this attribute works review this Adobe help information here.  As a side note, in my opinion the paypal graphic is too large at 218pxX128px.  It draws too much attention and because it is floating, it will cross into the main logo at lower screen resolutions.  If you could make this a semi transparent .png you will avoid masking the main logo.  Also using a Z index, something like layers but not really can be used to ensure that your main logo is ontop, which in my opinion is more inportant than the paypal graphic.

                   

                  Christoph with Abacus Web | Design & Development

                  WebSites  developed with Substance

                   

                  http://AbacusWeb.com

                  http://AbacusWeb.Blogspot.com

                  • 6. Re: HELP! Dreamweaver layout looks different from Live site
                    chris32882 Level 1

                    Yes, Im sure it is on the server. There was nothing on the server till I uploaded it. I am currently running DreamWeaver CS4 as well.

                     

                    This is the code from index.html file in DreamWeaver:

                     

                    <!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">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                    <title>Untitled Document</title>
                    <style type="text/css"> 
                    <!-- 
                    body  {
                         font: 100% Verdana, Arial, Helvetica, sans-serif;
                         background: #666666;
                         margin: 5; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
                         padding: 0;
                         text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
                         color: #000000;
                         background-color: #FFE6FF;
                    }
                    .twoColLiqLtHdr #container {
                         width: 55%;  /* this will create a container 80% of the browser width */
                         background: #FFFFFF;
                         margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
                         border: 1px solid #000000;
                         text-align: left; /* this overrides the text-align: center on the body element. */
                    } 
                    .twoColLiqLtHdr #header { 
                         background: #FFFFFF; 
                         padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
                         text-align: center;
                    } 
                    .twoColLiqLtHdr #header h1 {
                         margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
                         padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
                    }
                    
                    .twoColLiqLtHdr #header2 { 
                         background: #FFFFFF; 
                         padding: 0 2px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
                         text-align: center;
                    }
                    
                    /* Tips for sidebar1:
                    1. since we are working in percentages, it's best not to use padding on the sidebar. It will be added to the width for standards compliant browsers creating an unknown actual width. 
                    2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColLiqLtHdr #sidebar1 p" rule.
                    3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
                    */
                    
                    .twoColLiqLtHdr #sidebar1 {
                         float: left;
                         width: 18%; /* since this element is floated, a width must be given */
                         background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
                         padding: 15px 0; /* top and bottom padding create visual space within this div  */
                    }
                    .twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
                         margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
                         margin-right: 10px;
                    }
                    
                    /* Tips for mainContent:
                    1. the space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
                    2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 430px or smaller (this includes images).
                    3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
                    */
                    .twoColLiqLtHdr #mainContent {
                         margin-top: 0;
                         margin-right: 10%;
                         margin-bottom: 0;
                         margin-left: 20%;
                    } 
                    .twoColLiqLtHdr #footer { 
                         padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
                         background:#FFFFFF;
                    } 
                    .twoColLiqLtHdr #footer p {
                         margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
                         padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
                    }
                    
                    /* Miscellaneous classes for reuse */
                    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
                         float: right;
                         margin-left: 8px;
                    }
                    .fltlft { /* this class can be used to float an element left in your page */
                         float: left;
                         margin-right: 8px;
                    }
                    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
                         clear:both;
                        height:0;
                        font-size: 1px;
                        line-height: 0px;
                    }
                    .paypal { 
                         float:left;
                         margin-top: 60px;
                         margin-bottom: 0px;
                    
                    }
                    --> 
                    </style><!--[if IE]>
                    <style type="text/css"> 
                    /* place css fixes for all versions of IE in this conditional comment */
                    .twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
                    .twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
                    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
                    </style>
                    <![endif]--></head>
                    
                    <body class="twoColLiqLtHdr">
                    
                    <div id="container"> 
                      <div id="header">
                        <div class="paypal" id="paypal"><!-- Begin Official PayPal Seal --><!-- End Official PayPal Seal --></div>
                        <span class="paypal"><a href="https://www.paypal.com/us/verified/pal=bwise1@stny.rr.com" target="_blank"><img src="images/Logo_Paypal.jpg" alt="Official PayPal Seal" border="0" /><br />
                        </a><strong>We Accept PayPal</strong></span><br /><img src="images/logotest.JPG" width="600" height="290" />
                    </div>
                      <div id="header2"><hr /><img src="images/links/home.gif" width="100" height="52" /><img src="images/links/aboutus.gif" width="100" height="52" /><img src="images/links/contactus.gif" width="100" height="52" /><img src="images/links/shipping.gif" width="100" height="52" /><img src="images/links/sizing.gif" width="100" height="50" /><hr /></div>
                      <div id="sidebar1">
                      <p><a href="bellybands.html"><center><img src="images/bellybands.gif" width="124" height="122" border="0" align="middle" /></center></a></p>
                    <p><a href="dresses.html"><center><img src="images/dresses.gif" width="124" height="122" border="0" /></center></a></p>
                    <p><a href="diapers.html"><center><img src="images/diapers.gif" width="124" height="122" border="0" /></center></a></p>
                    <p><a href="leashes.html"><center><img src="images/leashes.gif" width="124" height="122" border="0" /></center></a></p>
                    <p><a href="hats.html"><center><img src="images/hats.gif" width="124" height="122" border="0" /></center></a></p>
                    <p><a href="costumes.html"><center><img src="images/costumes.JPG" width="124" height="122" border="0" /></center></a></p>
                    <a href="harnesses.html"><center><img src="images/harnesses.gif" width="124" height="122" border="0" /></center></a>
                      </div><center>
                      <p><strong><em>Our Line of Products</em></strong></p>
                      <table width="600" border="0" cellpadding="2" cellspacing="2">
                        <tr>
                          <td align="center"><p><strong>Belly Bands</strong></p>
                          <p><a href="bellybands.html"><img src="images/bellybands/belllybandssmall.jpg" width="200" height="149" border="0" /></a></p></td>
                          <td align="center"><p><strong>Dresses</strong></p>
                          <p><img src="images/dresses/lefemme fatalesmall.jpg" width="200" height="166" /></p></td>
                          <td align="center"><p><strong>Diapers</strong></p>
                          <p><img src="images/diapers/paws01bsmall.jpg" width="200" height="165" /></p></td>
                        </tr>
                        <tr>
                          <td align="center"><p><strong>Costumes</strong></p>
                          <p><img src="images/costumes/poppy fairysmall.jpg" width="200" height="165" /></p></td>
                          <td align="center"><p><strong>Harnesses</strong></p>
                          <p><img src="images/harnesses/reversible 01small.jpg" width="200" height="147" /></p></td>
                          <td align="center"><p><strong>Leashes</strong></p>
                          <p>Coming Soon</p></td>
                        </tr>
                        <tr>
                          <td align="center"><p><strong>Hats</strong></p>
                          <p>Coming Soon</p></td>
                          <td align="center"><strong>More to come soon!</strong></td>
                          <td> </td>
                        </tr>
                        <tr>
                          <td> </td>
                          <td> </td>
                          <td> </td>
                        </tr>
                      </table></center>
                      <p><br class="clearfloat" />
                      </p>
                      <div id="footer"><hr />
                        <div align="center">
                          <p>Shizzy Couture © 2010 All Rights Reserved </p>
                        </div>
                      </div>
                    <!-- end #container --></div>
                    </body>
                    </html>
                    
                    
                    • 7. Re: HELP! Dreamweaver layout looks different from Live site
                      Christoph Micklon Level 1

                      I see a reason why your layout is going haywire.  Your graphics are filling in the spaces where you have created table cells.  Without the graphcis to force the size of each cell, the cells collapse into a mess, which is how FireFox is interpreting the page.  This is what I see in DreamWeaver, as I do not have the graphics loaded on my computer.  But a good design should hold up even if the graphics are not available.

                       

                      Now the qestion is how to solve this issue.  issue.jpg

                       

                      Are you hand coding this or primarily using Design view?

                       

                       

                      Christoph with Abacus Web | Design & Development

                      WebSites   developed with Substance

                       

                      http://AbacusWeb.com

                      http://AbacusWeb.Blogspot.com

                      • 8. Re: HELP! Dreamweaver layout looks different from Live site
                        chris32882 Level 1

                        I am currently doing this by hand and design view, but its not working in my

                        favor unfortunaly. How would I go abouts doing the table correctly?

                        • 9. Re: HELP! Dreamweaver layout looks different from Live site
                          Christoph Micklon Level 1

                          My initial response to how to do this right using tables is not to do it this way as tables have a bad way messing up when later down the road you want to make a small adjustment.  The plus side to them they are easy for people that have little experience to understand how to place things in particular spots in a layout.

                           

                          First thing is to remove all the links to the images, so the broken image icon appears.  This way you can be more certain of how the table will flow without a particular image nested inside a cell.  I should point out that using a width and hieght attributes in the <img> tag will force the cell to expand to that particular size.

                           

                          Christoph with Abacus Web | Design & Development

                          WebSites developed with Substance

                           

                          http://AbacusWeb.com

                          http://AbacusWeb.Blogspot.com

                          • 10. Re: HELP! Dreamweaver layout looks different from Live site
                            Christoph Micklon Level 1

                            Also in Design View you should see the target screen size that dreamweaver is displaying the page.  This information can be viewed and modified on the bottom of the DreamWeaver screen.  Note your current design falls apart even with a target resolution of 955x600 which is DreamWeaver's reccomondation for screen size of 1024x768.

                             

                            issue.jpg

                             

                             

                             

                            Christoph with Abacus Web | Design & Development

                            WebSites  developed with Substance

                             

                            http://AbacusWeb.com

                            http://AbacusWeb.Blogspot.com

                            • 11. Re: HELP! Dreamweaver layout looks different from Live site
                              Christoph Micklon Level 1

                              I just determined that the image "images/logotest.JPG" is not currently on the server as I post this.  This is the image that is the main logo.   The layout may look a little better with the missing image.  So try uploaded that file again.

                               

                               

                              Christoph with Abacus Web | Design & Development

                              WebSites developed with Substance

                               

                              http://AbacusWeb.com

                              http://AbacusWeb.Blogspot.com