3 Replies Latest reply on Apr 24, 2010 4:56 PM by John Waller

    Positioning problem

    JonnyDL-HV74P1 Level 1

      I've been trying to build a page template with images and I can't seem to get the positioning right.

      I have an image that I have centered as a background image. it repeats downward. I'd like to place a banner on top.

       

      The problem is when I move shrink the window sideways smaller than the banners the banner stops moving with the background.

      it stops some odd pixles form the browsers left side. I can't seen to figure out the right combinations of attribute to get it right, to but

      flush up against the left frame when the window is shrunk.

       

      Hopefully this makes sence, and someone can help

        • 1. Re: Positioning problem
          John Waller Adobe Community Professional & MVP

          We're going to need a link to your website to see what you've already done.

          • 2. Re: Positioning problem
            JonnyDL-HV74P1 Level 1

            I'm having the positioning problem again....The last probllem with the banner I was able to fix. my new/simular problem is trying to place a  flash file, into a positionsed div.

            The adstage is using background image to place under the swf, I put another div in that div. I was trying to get swffile div to stay centered in the adstage div, and move with the div (when the window is being shrunk or scrolled). hopefully this is clear and someone can help

            here is tthe html

            (didn't think I should start a new sting?)

             

            <body>

            <div class="stage" id="top"></div>

             

            <div class="stage" id="middle">

            <div class="stage" id="header" ></div>

            <div id="adstage">

            <div class="stage" id="swffile">

            <script language="Javascript">

            document.write("<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 width="+width+" height="+depth+">");

                document.write("<param name=quality value=high />");

             

                var clickTAG=getURLParam('clicktag');

                var regexp = "http://";

                clickTAG=clickTAG.replace(regexp, "");

                document.write("<param name=movie value=http://ads.eagletribune.com/specads/proofs/" + orderno + ".swf?clickTAG=");

            document.write(clickTAG);

            document.write(" />");

            document.write("<embed src=http://ads.eagletribune.com/specads/proofs/" + orderno + ".swf?clickTAG=");

            document.write(clickTAG);

            document.write(" quality=high pluginspage=http://www.macromedia.com/go/getflashplayer  type=application/x-shockwave-flash width="+width+" height="+depth+"></embed></object>");

            </script>

            </div>

            </div>

            </div>

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

            </body>

             

            here is the style sheet:

            body {

            background-color: #999999;

            }

             

            .stage {

            margin-left: auto;

            margin-right: auto;

            width: 935px;

            }

             

            #top {

            background-image: url(Proofer/images/Stagetop.png);

            background-repeat: no-repeat;

            height: 25px;

            margin-bottom: 0px;

            margin-top: 0px;

            padding: 0;

            }

             

            #middle {

            background-image: url(Proofer/images/Stagetmd.png);

            background-repeat: repeat-y;

            height: 1000px;

            margin-bottom: 0px;

            margin-top: 0px;

            padding-top: 0px;

            }

             

            #bottom {

            background-image: url(Proofer/images/Stagebtm.png);

            background-repeat: no-repeat;

            height: 25px;

            margin-bottom: 0px;

            margin-top: 0px;

            padding: 0;

            }

             

            #header {

            width: 910px;

            height: 90px;

            margin-left: auto;

            margin-right: auto;

            background-repeat: no-repeat;

            background-image: url(Proofer/images/banner.png);

            }

             

            #adstage {

            width: 350px;

            position: static;

            height: 350px;

            background-image: url(Proofer/bigad.png);

            background-repeat: no-repeat;

            margin-left: 75px;

            margin-top: 35px;

            padding: 0

            }

             

            #swffile {

            margin-left: 26px;

            width:300px;

            height:250px;

            margin-right:auto;

            margin-leftt:60;

            margin-top:50px;

            margin-bottom:50px;

            height:250px;

            clear:left;

            position: fixed;

            }

            • 3. Re: Positioning problem
              John Waller Adobe Community Professional & MVP

              We're going to need a link to your website to see what you've already done.

               

              Pasting code here to explain a visual layout problem is of limited value to help us understand the issue and may not get many responses.

               

              Also validate your code before posting.

              http://validator.w3.org/ HTML

              http://jigsaw.w3.org/css-validator/ CSS

               

              The margin-left attribute below is spelt wrong (and will be ignored) and has no units e.g. 60px. The validator will identify those issues for you.

               

              #swffile {

              margin-left: 26px;

              width:300px;

              height:250px;

              margin-right:auto;

              margin-leftt:60;

              margin-top:50px;

              margin-bottom:50px;

              height:250px;

              clear:left;

              position: fixed;

              }