4 Replies Latest reply on Oct 14, 2007 1:25 PM by barryobrien

    Slice tool help needed width expands and contracts

    barryobrien
      I recently did a header for my website and srinks and expands with different screen sizes I need a bit of help to undstand how and why this happens.

      I built it on a 19" screen fits perfectly on the page. Then on the 15" I'm using now its very small leaving gaps along the sides

      here's the problem
        • 1. Re: Slice tool help needed width expands and contracts
          pixlor Level 4
          Your header is a fixed-width table (800 pixels). The cells and images in the cells also have their widths specified. (Actually, there's a spacer cell on the right, so the table has 801 pixels of content. You might want to delete that right-most cell.)

          The content below your header is contained a div that has the width set to 81% of the width of the browser window. If 81% of the window is exactly 800 pixels, then the two sections - header and content - will line up. Otherwise, they will not. On your 19" monitor, set your browser so that it doesn't fill the screen, then change the width of the browser window and you'll see the effect dynamically.

          If you want your header and content to match in width, then you either need to set the width of the div containing your forum content to 800 pixels or design a header that can stretch and shrink as the browser window changes size.

          cheers!
          • 2. Re: Slice tool help needed width expands and contracts
            barryobrien Level 1
            "If you want your header and content to match in width, then you either need to set the width of the div containing your forum content to 800 pixels or design a header that can stretch and shrink as the browser window changes size."

            Do you mean a one piece image? not sliced I mean!
            • 3. Re: Slice tool help needed width expands and contracts
              pixlor Level 4
              No, I don't mean that your header should be all one image.

              Currently, your header is a table with a number of images inside it. The width of the table is "absolute." It is set to a fixed number of pixels (800). It won't change. What you see as smaller and larger on your different monitors is a result of the different resolution that the two monitors have.

              The forum content, on the other hand, is in tables with widths that are "relative." They are are a percentage of the width of the browser window (81%). These tables will change size depending on the size of the browser window. For just one perfect setting, everything will line up. For all other widths, you have a mess.

              You need your header table and your forum tables to match. Either your header needs to be designed differently, so that it can expand and contract gracefully when a browser window is a different size (in pixels), or you need to edit your forum so that the various parts are all 800 pixels wide instead of varying percentages.

              As for monitors, it isn't the physical size that is important here, it's resolution. It isn't the number of inches, it's the number of pixels. You can have a 21" monitor that's set to 800x600 pixels and you can have a 17" monitor set to 1600x1200 pixels. On a monitor with 800x600 pixel resolution, your header will be the full width of the screen and the forum content will be about 650 pixels, indented on both sides. On a monitor that is 1600x1200 pixel resolution, your header will be about half of the screen width and your forum content will be about 1300 pixels wide.