2 Replies Latest reply on May 2, 2010 10:21 AM by JonnyDL-HV74P1

    Dreamweaver Display difference

    JonnyDL-HV74P1 Level 1

      I'm fairly new to dreamweaver, I've heard there are some visual differences between what you see in the design view (something to do with Dreamweavers default margins), and the actual preview. I just built a page that looks really different from the design view and the preview. I tinkered with it so the acutal page is what I want. Has any one else had this issue, and have any sugestions to get the two visually closer

      (is the visual problem in dreamweaver componded by trying to layer images?)

        • 1. Re: Dreamweaver Display difference
          Ben M Adobe Community Professional

          First, what version of Dreamweaver are you using?

           

          Second, it has a lot to do with the code.  If you post a link to your page I could explain in further detail what I mean here.

          • 2. Re: Dreamweaver Display difference
            JonnyDL-HV74P1 Level 1

            I'm working on CS4. I though code might be helpful, but wasnt sure. I don't have anything to serve it off of (I've been doing it all locally). I will give the code  right hear  (sorry). you can copy and paste them if you need to experiment that way. I'm fairly new and trying to discover new ways of doing things.

            The goal is to have layered objects ontop of each other with javascript commands I can show and hide them.  Thanks for the help! (i've been trying to figure out the problem for two days)

             

            Code:

            (html)<!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>

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

            </head>

             

            <body>

            <div id="content">

              <div id="stageHeader">Header

                <div id="headerImage">header imgae background and text</div>

              </div>

              <div id="stageMiddle">

                <div id="sizeLayout">

                  <div id="leaderSize"></div>

                  <div id="skySize"></div>

                  <div id="medrecSize"></div>

               </div>

               <div id="adLayout">

                  <div id="leaderAd"></div>

                  <div id="skyAd"></div>

                  <div id="medrecAd"></div>

              </div>

               <div id="instruction">Content for  id "instruction" Goes Here</div>

              </div>

              <div id="stageFooter">bottom stage</div>

            </div>

            </body>

            </html>

             

            (css)

            @charset "UTF-8";

            body {

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

            margin: 0px;

            padding: 0px;

            background-color: #999999;

            }

            #content {

            background-color: #FFFFFF;

            width: 935px;

            margin-right: auto;

            margin-left: auto;

            text-align: left;

            }

            #stageHeader {

            background-color: #FFCC00;

            margin: 0px;

            padding: 0px;

            height: 150px;

            }

            #stageMiddle {

            background-color: #FF9966;

            margin: 0px;

            padding: 0px;

            height: 800px;

            }

            #stageFooter {

            margin: 0px;

            padding: 0px;

            height: 25px;

            }

            #headerImage {

            background-color: #CCCCCC;

            margin: 0px;

            padding: 0px;

            width: 920px;

            }

            #sizeLayout {

            background-color: #00FF33;

            margin: 0px;

            padding: 0px;

            height: 610px;

            width: 790px;

            position: relative;

            left: 40px;

            top: 40px;

            }

            #adLayout {

            background-color: #FFCC99;

            margin: 0px;

            padding: 0px;

            height: 610px;

            width: 790px;

            position: relative;

            top: -570px;

            z-index: 7;

            left: 40px;

            }

            #leaderSize {

            background-color: #000000;

            margin: 0px;

            padding: 0px;

            height: 90px;

            width: 728px;

            z-index: 1;

            position: relative;

            }

            #medrecSize {

            background-color: #CCFFFF;

            padding: 0px;

            height: 250px;

            width: 300px;

            top: -690px;

            z-index: 3;

            position: relative;

            }

            #skySize {

            background-color: #990000;

            padding: 0px;

            height: 600px;

            width: 160px;

            position: relative;

            z-index: 2;

            top: -90px;

            }

            #leaderAd {

            background-color: #CCCC66;

            margin: 0px;

            padding: 0px;

            height: 90px;

            width: 728px;

            z-index: 5;

            position: relative;

            }

            #skyAd {

            background-color: #CCCCCC;

            margin: 0px;

            padding: 0px;

            height: 600px;

            width: 160px;

            position: relative;

            z-index: 6;

            top: -90px;

            }

            #medrecAd {

            background-color: #666666;

            margin: 0px;

            padding: 0px;

            height: 250px;

            width: 300px;

            position: relative;

            z-index: 7;

            top: -690px;

            }

            #instruction {

            background-color: #6699FF;

            margin: 0px;

            padding: 0px;

            height: 550px;

            width: 375px;

            position: relative;

            z-index: 8;

            top: -1025px;

            left: 500px;

            }