9 Replies Latest reply on Jul 3, 2010 12:41 PM by Nancy OShea

    (CSS) Can this simple layout idea be better coded?

    jyeager11 Level 1

      Hi guys,

       

      I'm trying to build a very simple layout made slightly more complex via a background gradient that needs to be in sync with the foreground image.

       

      http://vilverset.com/murray.php

       

      As you can see, the layout is supposing a 1000px wide viewport, or bigger. The foreground image is 650px wide, and the text column next to it is 350px wide. This fills up our 1000px viewport.

       

      Now, normally, I would just apply the image as a background to the text column's container (and make that container 1000px wide), except that there are a few conditions to this layout that make that solution ill-advised.

       

      1. When there's enough content to fill it, the text column needs to stretch from the top to the bottom of the viewport, and trigger the main browser vertical scrollbar when exceeding this window.
      2. When there isn't enough content to fill the length of the column, the content should be vertically centered.
      3. The image on the left of the column should be vertically centered at all times, or it will lose its sync with the site's background gradient.
      4. The image on the left of the column should never scroll with the content. It should be fixated.
      5. The combination of the image and column should be centered in the viewport (both axis).

       

      You've seen how I did it @ the link above. Div class "image" has the main image as a background, and this image is padded to extend to fill the whole 1000px width of the site layout. It's the only way I could think of to offset the image from the center spot. Ditto the text column, which is in a 350px wide div, that has a 650px left side margin (totalling 1000px).

       

      The main negative side-effect of this method occurs when you reduce the viewport to less that 1000px in width. The image starts moving AWAY from the column (as you can see by trying it out at the link above).

       

      If there's a better way to get that image and that column into position, and the combination of both centered on the screen in both axis... I'm willing to try it!

        • 1. Re: (CSS) Can this simple layout idea be better coded?
          markerline Level 4

          I haven't seen the page or the code but from reading your post, have you tried using the "vertical-align" css property?

          • 2. Re: (CSS) Can this simple layout idea be better coded?
            jyeager11 Level 1

            Thanks. Although the vertical alignment is just a small portion of the challenge here.

            • 3. Re: (CSS) Can this simple layout idea be better coded?
              Nancy OShea Adobe Community Professional & MVP

              Yes.  You're making this WAY more complicated than it needs to be.

              See this test page:

              http://alt-web.com/TEST/2-col-CSS-test.html

               

              Gradient backround applied to the body element.

              Transparent PNG image inserted into left Sidebar.

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: (CSS) Can this simple layout idea be better coded?
                jyeager11 Level 1

                Hi Nancy,

                 

                You're using a GIF as a foreground element. These images need to be JPGs, because they will be fairly large and there will be dozens of them. That's why the background gradient needs to be in sync.

                 

                Also, your entire layout isn't vertically centered. It needs to be centered at both X and Y.

                 

                The contents of the right column also need to extend to fill the viewport (when there's enough text to do it) and the image on the left should not scroll with it when it does (it needs to be fixated).

                • 5. Re: (CSS) Can this simple layout idea be better coded?
                  Nancy OShea Adobe Community Professional & MVP

                  #1  There's no way to synch backgrounds as you plan.  Either use transparent foreground images or get rid of gradient backgrounds altogether.  I used a Gif from my server for a quick & dirty example. Photoshop does a very poor job of compressing transparent PNGs.  There are PS plug-ins that do a much better job.  Or use Fireworks if you have it.

                   

                  #2 Sorry,true Vertical Centering is not attainable with HTML sites unless you use strict percentages on an APdivs. See example:  http://alt-web.com/TEMPLATES/vertical-center.html

                   

                  Obviously, the above would NOT be viable for your use. The best you can do is fake it with some top margins or padding.

                   

                  HINT: Stop trying to build a Flash site in HTML.  You're life will be so much easier. 

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb

                  • 6. Re: (CSS) Can this simple layout idea be better coded?
                    jyeager11 Level 1

                    You tell me these things can't be done, but I've got foreground JPGs with gradients perfectly in sync with the background gradient, and neither of them scrolls with the text content. So not only can it be done, I've done it. Right there, at that link I posted in the OP. And it works in all major browsers, including Safari on Mac.

                     

                    I was just wondering if there was a BETTER way to do it. But if people are going to start telling me it simply can't be done, when the proof that it can is staring them in the face, then I guess I'll just count myself lucky that I achieved what I've achieved and stick with what I've got.

                    • 7. Re: (CSS) Can this simple layout idea be better coded?
                      Nancy OShea Adobe Community Professional & MVP

                      I'm glad you're pleased with your layout.     I'm having a few problems with it.

                       

                      When viewed on a narrow screen such as an iPhone in landscape mode, your image moves leftwards out of view.  And when device is scrolled horizontally to see content, text collides with the image.  Is this what you want to have happen? (see screenshot)

                       

                      mjyeager.jpg

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      http://alt-web.com/
                      http://twitter.com/altweb

                       

                       

                       

                       

                      mjyeager wrote:

                       

                      You tell me these things can't be done, but I've got foreground JPGs with gradients perfectly in sync with the background gradient, and neither of them scrolls with the text content. So not only can it be done, I've done it. Right there, at that link I posted in the OP. And it works in all major browsers, including Safari on Mac.

                       

                      I was just wondering if there was a BETTER way to do it. But if people are going to start telling me it simply can't be done, when the proof that it can is staring them in the face, then I guess I'll just count myself lucky that I achieved what I've achieved and stick with what I've got.

                      • 8. Re: (CSS) Can this simple layout idea be better coded?
                        jyeager11 Level 1

                        Good God, if I had to taylor my websites for iPhones, I'd shoot myself. ;-)

                         

                        That being said, while it would be NICE if someone had a solution that would downgrade more gracefully, I'm happy I have this working on the targeted 1000px viewports (or higher). After all, it will be a portfolio website, and very few people interested in viewing designer portfolios will elect to do so on their iPhones. ;-)

                        • 9. Re: (CSS) Can this simple layout idea be better coded?
                          Nancy OShea Adobe Community Professional & MVP

                          After all, it will be a portfolio website, and very few people interested in viewing designer portfolios will elect to do so on their iPhones. ;-)

                          You shouldn't make assumptions like that.  A lot of working professionals use smart phones, etc... for internet viewing now.  And the numbers are growing.

                           

                          If you're not going to use a fixed-width layout, you should add some min- and max width to your page to keep it under control.

                           

                          Best of luck with your project!

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb