5 Replies Latest reply on Feb 27, 2010 2:36 PM by panfried

    Header Width 100% - Split between two backgrounds

    panfried Level 1

      I'm very new to DW CS4 (just popped it out of the box today ). I've been searching lynda.com and the web to find an answer to this questions, with no success.

       

      Using div tags, how can postiion the attached header to scale relative to the white content box? I would like the area where the green and the black portions meet, to remain relative to the white content area below.

       

      I apologize for not phrasing this question properly - feel free to throw sticks and stones.

       

      Help is greatly appreciated.

       

      Thank you!

       

      Picture 1.jpg

        • 1. Re: Header Width 100% - Split between two backgrounds
          Zabeth69 Level 5

          A few probing questions:

           

          • Are you working with a liquid layout?
          • What is the structure of the page essentially?
          • Can you describe how this page would 'act' when the browser viewport is enlarged or made smaller?
          • Is the white content area a static size, or does it get wider/narrower?
          • In your screenshot/sketch, are we seeing the header area actually stretching across the entire viewport, while the wood grain fills the rest of the body and the white content area sits centered on the viewport?

           

          If you can describe how the page will act under these different circumstances, we can take a stab at suggesting how you might accomplish it!

           

          Beth

          • 2. Re: Header Width 100% - Split between two backgrounds
            panfried Level 1

            Thanks, Zabeth69.

             

            "In your screenshot/sketch, are we seeing the header area actually stretching across the entire viewport, while the wood grain fills the rest of the body and the white content area sits centered on the viewport?"

             

            That is exactly correct.

             

            The white area is a fixed width.

             

            The header will stretch the length of the browser when resized.

             

            My problem is keeping the header area where the green and the black meet, fixed to a point relative to the white content area.

             

            Does that help?

            • 3. Re: Header Width 100% - Split between two backgrounds
              Zabeth69 Level 5

              This may not be the neatest solution to your puzzle, but it seems to work:

              http://www.gravenimagedesign.net/headerTest/headerTest.html

               

              Method:

               

              The woodgrain is the background for the whole body (forgive my  rough approximation!).

               

              Underlying band at the top of the page consists of two 50% wide divs, one of each background given. 50%, because the center of the page will always be under the container div, no matter where specifically the visual break is.

               

              So I made two divs, one with just a background color (left) and one with a background image (the green gradient on the right).

               

              Then I made a "topContainer" div that sits on "top" of the top bands, but sizes them to match your essential offset. They will not move around. The red border is merely so you can "see" them in this example.

               

              The actual Container div sits 10px below the top bands, centered on the page, as is the topContainer div.

               

              There may be a simpler solution, but this seems to work.

               

              Put your navigation into the (now) red-bordered, green gradient div.

               

              I can't figure out how to attach the file! It must have been a long week...

               

              Beth

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>Untitled Document</title>
              <style type="text/css">
              <!--
              #logo {
                  background: #272727;
                  height: 73px;
                  padding-right: 132px;
              }
              body {
                  background-image: url(wood_bg.gif);
                  margin: 0;
                  padding: 0;
              }
              #topContainer {
                  width: 368px;
                  height: 83px;
                  margin: 0 auto;
                  padding-top: -83px;
              }
              #container {
                  width: 368px;
                  height: 300px;
                  margin: 0 auto;
                  margin-top: 10px;
                  background-image: url(body_bg.gif);
                  background-repeat: repeat-y;
                  z-index: 5;
                  overflow: hidden;
                  top: 0;
              }
              .left_top, .right_top {
                  float: left;
                  margin: 0;
                  padding: 0;
                  height: 73px;
                  position: fixed;
                  }
              .left_top {
                  background: #272727;
                  background-image: none;
                  width: 50%;
                  color: white;
                  right: 50%;
              }
              .right_top {
                  background-image: url(right_top_bg.gif);
                  background-repeat: repeat-x;
                  width: 50%;
                  left: 50%;
              }
              #topContainer .left_top {
                  width: 133px;
                  left: 0;
                  background-image: url(logo.gif);
                  background-repeat: no-repeat;
                  background-position: right;
                  position: relative;
                  border: solid 1px red;
              }
              #topContainer .right_top {
                  width: 231px;
                  left:0;
                  position: relative;
                  border: solid 1px red;}
              -->
              </style>
              </head>

              <body>
              <div class="left_top">Here is the left top div</div>
              <div class="right_top">Here is the right top div</div>
              <div id="topContainer">
                  <div class="left_top">logo here</div>
                  <div class="right_top">nav here</div>
              </div>
              <div id="container">
                  </div>
              </body>
              </html>

              • 4. Re: Header Width 100% - Split between two backgrounds
                panfried Level 1

                Thank you very much!

                 

                I really appreciate you taking the time to work on this. Very cool!

                 

                Thank you!!!!

                 

                 

                 

                • 5. Re: Header Width 100% - Split between two backgrounds
                  Zabeth69 Level 5

                  I hope it holds across browsers. It was fun to think about.

                  Beth