2 Replies Latest reply on Jan 19, 2014 4:56 PM by cma cma

    Design view problem

    cma cma

      I have been working on changing the code and style sheet for my detail pages:



      The problem with the current design is that if the screen is smaller than around 19" or if the type is set a bit larger than normal, then the pictures meant to be side-by-side appear vertically stacked.


      So I got assistance from a top online CSS expert who correctly diagnosed the problem and came up with a brilliant solution so that the images will scale with the page and thus will always appear correctly side-by-side on any size display or whatever the font.


      Here is the correct solution.



      You can make the font-size larger in your browser and the side-by-side pictures remain side-by-side, unlike the situation currently on my website.


      The new design works great online (or in DW browser preview). That should be good enough, since that is what the web will see. The problem is that in DW design view (DW CS 5.5), the page looks all wrong and is almost unusable.


      Are there any changes in DW settings I can make that will retain image scaling but will appear correctly in DW design view?


      I have addedan attachment of a screen shot showing the page in DW Design View.Design_view.png


      Thanks for your expert advice.


      The style sheet and relevant code follow.


      html {height: 100%;

          padding-bottom: 1px;    }

      body {    width: 75%;

          max-width: 980px;

          margin: 0 auto;





          font: 1em/1.2 Verdana, Tahoma, Helvetica, sans-serif;    }

      #main {    margin: 0;    }

      .center,.images {    text-align: center;    }

      img {    max-width: 100%;

          height: auto !important;    }

      .center img.tall {    width: 100%;

          max-width: 400px;

          height: auto;    }

      .images span {    display: inline-block;

          overflow: hidden;    }

      .images .tall {    float: left;

          width: 49%;

          max-width: 400px;

          height: auto;    }

      .images .tall + img {float: right;    }

      .wordspace {    word-spacing: 5em;    }





      #bronze-bottom{width:100%;margin:1.3em auto .5em auto;background:#fc6;height:1em;}

      #cat-bottom{padding-top:0.2em;margin-top:.3em;padding-bottom:1em;font:400 1em/1.1 Verdana,Tahoma,Helvetica,sans-serif;text-align:center;}

      #cat-bottom a:link{color:#000;text-decoration:none;background-color:#fff;}

      #cat-bottom a:visited{color:#8B0000;text-decoration:none;background-color:#fff;}

      #cat-bottom a:hover{color:red;text-decoration:none;background-color:#fff;}

      #cat-bottom a.herelink:link,#cat-bottom a.herelink:visited{color:#000;background-color:#F5EBD6;}





      img.tall {width:400px;height:585px;}

      img.wide {width:600px;height:500px;}

      .bq{ width:80%;padding:.7em;font:italic medium/1.1 Georgia,Times,"Times New Roman",serif;margin-left:1em;}

      .cap {font-size: small;    font-style: italic;}





      <div id="main">

                <p><img src="images/Graphics/vt.gif" width="329" height="100" alt="vt gif" /></p>

        <p class="center"><img src="images/Couture/7371h.jpg" alt="Gatti Nolli couture" width="800" height="1170" class="tall" /><br /><br />

         <strong class="wordspace">#7371 $4,000</strong></p><br />

        <p><span class="lgbi">Gatti Nolli &quot;new&quot; couture evening gown</span></p>

        <p><a href="#bot">Gatti Nolli</a>, a relatively new luxury fashion house from Lebanon, has taken the eveningwear market by storm. Their designs shimmer, sparkle, and scintillate. With its pizazz and high-voltage sex-appeal, Nolli's eveningwear has become the talk of Milan, Paris, and New York.</p>


        It measures: 38&quot; bust, 29&quot; waist, 38&quot; hip, and 62&quot; from shoulder to front hem.</p>

        <p class="images"><span><img src="images/Couture/7371b.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371d.jpg" alt="" name="back" width="800" height="1170" class="tall" id="back" /></span></p>

      <p class="images"><span><img src="images/Couture/7371k.jpg" width="800" height="1170" class="tall" /><img src="images/Couture/7371p.jpg" alt="" width="800" height="1170" class="tall" /></span></p>

      <p class="center"><img src="images/Couture/7371l.jpg" width="1200" height="1000" class="wide" /></p>

      <p class="center"><img src="images/Couture/7371m.jpg" name="tree" width="1200" height="1000" class="wide" id="tree" /></p>

      <p class="center"><img src="images/Couture/7371n.jpg" name="layer" width="1200" height="1000" class="wide" id="layer" /></p>

      <p class="center"><img src="images/Couture/7371q.jpg" name="bot" width="600" height="524" id="bot" /></p></div>

      <div id="bronze-bottom"></div>