5 Replies Latest reply: Mar 8, 2011 2:58 PM by Nancy O. RSS

    3 Column Divs & Background Image Height - CSS & Dreamweaver

    Shan-Dysigns Community Member

      I'm sure there is a better title for what my issue is.

       

      I've stripped down a version of a website I'm building and placed enough elements for purpose of this post at http://www.shan-dysigns.com/userForums/3-div-background/homeTEST.htm

       

      Here is a screenshot of the issue http://www.shan-dysigns.com/userForums/3-div-background/3-div-background.jpg

       

      I have 3 div's: left, center, right. The center div is a fixed width (988px) with a background image (the wood - which is 608px x 1200px) and repeats-x. The left div contains the same background image (but is positioned (css) so it appears the right edge of the left div is exactly butted up against the left edge of the center div). The similar thing happens with the right div. I did this instead of using one instance of the background image across the whole body background was because the navigation menu (not shown) has a glow applied to a rollover state in which I had to include part of the wood background for that image in order to keep that effect. The glow was based on a layer blend, so it just had to be done this way - which had really made this website difficult - I still kick myself for making it so difficult.

       

      Now to the issue (at least the current one): If you look at the screen shot, you will see red circles outlining where the left and right background images begin to disappear when the browser window is resized (height). Of course no one is going to resize the browser like this, but once I place content into the center div, the left and right backgrounds get masked once the overall height of the website is reduced to a certain point. Click on the first link given, resize your browser's height until you see something similar to my screen shot. You can "view source" on that page and see the css styles I've used to define these divs.

       

      What I'm looking for is to NOT have the left and right backgrounds get "covered up" so-to-speak when the height of the browser window is minimal. I'm sure it's just a matte of either div structure or a few left out lines of css, but I just can't figure it out. If anyone can shed some light, I would appreciate it.

        • 1. Re: 3 Column Divs & Background Image Height - CSS & Dreamweaver
          Nancy O. CommunityMVP

          Yikes.  Where did you get the CSS code for this?

           

          1) Start with a pre-built CSS layout.  And apply your wood paneling to the body element.  That's it.  This will fill the page.

          2) Don't position elements.  Use default CSS positioning which is none/static.

          3) Height of divisions is determined by content inside it.

          4) Add some Lorem Ipsum or dummy text to your HTML.  This will give you a better idea of how your layout holds up.

           

          See example of 2 image web page:  View source code

          http://alt-web.com/TEMPLATES/2-image-web-design.shtml

           

           

           

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

          • 2. Re: 3 Column Divs & Background Image Height - CSS & Dreamweaver
            Shan-Dysigns Community Member
            Yikes.  Where did you get the CSS code for this?

            Well, that's a passive-aggressive way of implying none of that code could possibly be relevant.

             

            I'm not even sure you understood my issue. I can't just simply place a background image across the body because then the center div edges wouldn't align properly with the div panels on either side (especially if their monitor is a different resolution than mine). Your example background (which triggered a migraine) isn't anything similar to the issue I have. I don't just have a small graphic that can randomly tile itself all over the browser. In my issue, the background images in the divs must align to where all three divs appear to be one single background image.

            • 3. Re: 3 Column Divs & Background Image Height - CSS & Dreamweaver
              Nancy O. CommunityMVP

              Well, that's a passive-aggressive way of implying none of that code could possibly be relevant.

               

              Not passive-aggressive.  Your code is overly complex for such a simple layout.

               

              I can't just simply place a background image across the body because then the center div edges wouldn't align properly with the div panels on either side (especially if their monitor is a different resolution than mine).

               

              Sure you can.  You're not designing a printed brochure, you're building a web page.

              Example using your background image on the body.

              http://alt-web.com/TEST/wood.html

               

               

               

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

              • 4. Re: 3 Column Divs & Background Image Height - CSS & Dreamweaver
                Shan-Dysigns Community Member

                I still think you are missing the point.

                 

                If you look at http://www.shan-dysigns.com/userForums/3-div-background/menu.htm

                 

                you will see there is a glow effect applied to the button rollover - made using blend modes in Photoshop. In order to maintain that effect, I have to include the wood pattern behind each button. I can't duplicate that effect using "normal" blend modes on the Photoshop layers - I'm sure I could come close, but I'm trying to work this out - at this point it's more a matter of making it work rather than going backwards to doing it how I know it will work - the effect just won't be nearly as appealing, and in doing things the unconventional way sometimes, one can learn different techniques/effects. I hardly ever work in conventional ways.

                 

                Because I have to include the wood behind the buttons, I have to have a center div in which its background image (wood) aligns exactly with these buttons (as I created everything in Photoshop) - like I said - one thing leads to another... now because the center div has a background image which must be exact, the left and right divs must also align their background images - like I mentioned before.

                 

                I may very well go backwards and redo these buttons using normal blend modes just to solve several issues, but because I'm so close to the end, I want to make sure there isn't a solution for how I have it now.

                • 5. Re: 3 Column Divs & Background Image Height - CSS & Dreamweaver
                  Nancy O. CommunityMVP

                  I detest image rollovers for menus.  They are a pain in the neck to maintain and they're  NOT web friendly for mobile device users who pay for KB usage.

                   

                  A pure CSS menu would do almost the same thing without all those images and MM Rollover scripts.

                  http://alt-web.com/TEST/wood.html

                   

                  That said, use whichever methods work best for you.

                   

                  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