8 Replies Latest reply on Sep 11, 2007 5:17 PM by Newsgroup_User

    Is this achievable, with current technology?

    Level 7
      I have an idea for a layout, but was wondering if it was technically
      achievable.

      Easy part :

      - Centered fixed-width design (let's say 770px wide, 100% high).

      - Left side (335px) is empty. Right side (335px) is a text column.

      - Normal browser vertical scrolling to accomodate long pages.

      So far so good -- but here's where it gets touchy...

      - The background image is actually much larger than 335px. It extents
      off-screen to the left, so that if you pull the browser wider, more of it
      becomes uncovered (naturally, because it's a centered design, an equal
      amount of "blank" becomes uncovered to the right of the text).

      - The background image must not generate any scrollbars.

      - The image should never slide under the text -- but it can slide away from
      it if need be. This means that no more than 335px of it can slide into the
      centered layout... more than that, and it touches the text column.

      ---

      Can this be done? The closest I've come to succeeding is left-justifying a
      huge background image with no-repeat, but this doesn't stop it from sliding
      under the text.

      Should I be centering an enormous background with half of it being
      transparent information? That's the only other way I can think of... but to
      even do that would mean using PNGs, and the file size would be ridiculously
      huge, since it would have to be twice the width of the tree image itself.


        • 1. Re: Is this achievable, with current technology?
          Level 7
          Mike J.S. wrote:

          > I have an idea for a layout, but was wondering if it was technically
          > achievable.
          >
          > Easy part :
          >
          > - Centered fixed-width design (let's say 770px wide, 100% high).
          >
          > - Left side (335px) is empty. Right side (335px) is a text column.


          Wheres the other 100px come into play ie 770 - 670 = 100





          • 2. Re: Is this achievable, with current technology?
            Level 7
            On 11 Sep 2007 in macromedia.dreamweaver, Mike J.S. wrote:

            > - The background image must not generate any scrollbars.

            Background images never generate scrollbars.

            > - The image should never slide under the text -- but it can slide
            > away from it if need be. This means that no more than 335px of it
            > can slide into the centered layout... more than that, and it touches
            > the text column.
            >
            > ---
            >
            > Can this be done? The closest I've come to succeeding is
            > left-justifying a huge background image with no-repeat, but this
            > doesn't stop it from sliding under the text.

            Just make the image 2 * X wide, and put the portion you want revealed
            to the left of center. Then set it to position "top center"
            (vertical/horizontal), thus:

            body {
            background-image : url(myimage.png) ;
            background-repeat : repeat-y ;
            background-position : top center ;
            }

            --
            Joe Makowiec
            http://makowiec.net/
            Email: http://makowiec.net/contact.php
            • 3. Re: Is this achievable, with current technology?
              Level 7
              "Osgood" <notavailable@thisaddress.com> wrote in message
              news:fc5ffh$jqc$1@forums.macromedia.com...
              > Mike J.S. wrote:
              >
              >> - Centered fixed-width design (let's say 770px wide, 100% high).
              >>
              >> - Left side (335px) is empty. Right side (335px) is a text column.
              >
              > Wheres the other 100px come into play ie 770 - 670 = 100

              er.. I.. umm.. was never very good at math. :-$

              Okay, so 385px per side (sheepish look).

              Mike


              • 4. Re: Is this achievable, with current technology?
                Level 7
                "Joe Makowiec" <makowiec@invalid.invalid> wrote in message
                news:Xns99A83B4A51AE9makowiecatnycapdotrE@216.104.212.96...
                >
                > Just make the image 2 * X wide, and put the portion you want revealed
                > to the left of center. Then set it to position "top center"
                > (vertical/horizontal), thus:
                >
                > body {
                > background-image : url(myimage.png) ;
                > background-repeat : repeat-y ;
                > background-position : top center ;
                > }

                I thought of that, but the resulting image would be GIGANTIC. I was
                wondering if there was a way to do it with only the left half (the one with
                actual image data).

                The actual background of the site is a vertical gradient (not a solid
                color). A single GIF with 200 hues making up a gradient, 1px wide, repeating
                on X only, and only 7k in weight. So if I tried it the obvious way (the one
                you suggested) it would have to be a gigantic GIF (so the colors match --
                when one background ends, the other picks up) or a JPG (compression would
                almost ensure the gradient be banding at that size) or, finally, a PNG (I
                could use alpha channels here to make most of the image invisible, thus
                taking care of the gradient vs gradient problem... but can you imagine a
                1600x1200 PNG file? It must easily be over a meg large).

                Ideally, I'd place the PNG a bit to the left, with only the part with actual
                data on file (800px instead of 1600). But I'm not sure there's a way to do
                "center image, but make it 400px off-axis to the left" so as to "feign" the
                presence of 800 invisible pixels on the right of the image.

                Sorry if I'm not being as clear as I'd like, I'm just not used to explaining
                this type of stuff. It's all very clear in my head, honest. :-)

                Mike


                • 5. Re: Is this achievable, with current technology?
                  Level 7
                  On Tue, 11 Sep 2007 16:18:44 -0400, "Mike J.S." <no@spam.com> wrote:

                  >"Joe Makowiec" <makowiec@invalid.invalid> wrote in message
                  >news:Xns99A83B4A51AE9makowiecatnycapdotrE@216.104.212.96...
                  >>
                  >I thought of that, but the resulting image would be GIGANTIC. I was
                  >wondering if there was a way to do it with only the left half (the one with
                  >actual image data).

                  Just set the image as the background for the left column and set it to
                  align to the right:

                  #leftcolumn {
                  background-image : url(myimage.png) ;
                  background-repeat : repeat-y ;
                  background-position : right ;
                  }
                  • 6. Re: Is this achievable, with current technology?
                    Level 7
                    On 11 Sep 2007 in macromedia.dreamweaver, Mike J.S. wrote:

                    > I thought of that, but the resulting image would be GIGANTIC. I was
                    > wondering if there was a way to do it with only the left half (the
                    > one with actual image data).

                    If your description is correct... I just did a png image, 1000 wide by
                    600 high. The left 500x600 is a vertical gradient, the right is pure
                    white. Exported as a 24-bit png, it comes out to a whopping 3522 bytes.

                    http://makowiec.net/test/bkg.png ('Standard' png, not a FW png)

                    --
                    Joe Makowiec
                    http://makowiec.net/
                    Email: http://makowiec.net/contact.php
                    • 7. Re: Is this achievable, with current technology?
                      Level 7
                      "Gary White" <reply@newsgroup.please> wrote in message
                      news:jp5ee3pui5ba0kesi9ctecr2chahgmctth@4ax.com...
                      >
                      > Just set the image as the background for the left column and set it to
                      > align to the right:
                      >
                      > #leftcolumn {
                      > background-image : url(myimage.png) ;
                      > background-repeat : repeat-y ;
                      > background-position : right ;
                      > }

                      But the left column is only 385px wide (the containing div is 770px) and I'd
                      like the bgr to extend BEYOND that 385px column if the browser extends to,
                      say, 1600x1200.


                      • 8. Re: Is this achievable, with current technology?
                        Level 7
                        Are you serious? You got a gradient that big to fit in less than 5k?? Swear
                        to me right now that the black arts were not in any way involved.

                        In all seriousness, I underestimated the possibilities of a gigantic PNG
                        running behind the layout from end-to-end. Thanks, I'll try exploring that
                        option further.

                        Mike

                        "Joe Makowiec" <makowiec@invalid.invalid> wrote in message
                        news:Xns99A8BC9DE7554makowiecatnycapdotrE@216.104.212.96...
                        > On 11 Sep 2007 in macromedia.dreamweaver, Mike J.S. wrote:
                        >
                        >> I thought of that, but the resulting image would be GIGANTIC. I was
                        >> wondering if there was a way to do it with only the left half (the
                        >> one with actual image data).
                        >
                        > If your description is correct... I just did a png image, 1000 wide by
                        > 600 high. The left 500x600 is a vertical gradient, the right is pure
                        > white. Exported as a 24-bit png, it comes out to a whopping 3522 bytes.
                        >
                        > http://makowiec.net/test/bkg.png ('Standard' png, not a FW png)
                        >
                        > --
                        > Joe Makowiec
                        > http://makowiec.net/
                        > Email: http://makowiec.net/contact.php