7 Replies Latest reply on Aug 31, 2010 5:52 AM by osgood_

    setting up layers in dwcs3 using css

    new dreamweaver Level 1

      I am trying to set-up layers in dreamweaver cs3 using css. I am attaching what I want it to look like. I have down how to do the nav bar (dark blue vertical box) down from the picture, but i cannot figure out the coding for putting the picture over the blue bar that goes horizontal along the screen. I have played with z values and nothing seems to work the blue bar goes over the top of the vertical nav bar.

       

      As always any advice is greatly appreciated.

       

      layering image.jpg

        • 1. Re: setting up layers in dwcs3 using css
          MurraySummers Level 8

          Layers are not a layout tool.  Why not show us your whole layout design, so we can make some alternate suggestions?

          • 2. Re: setting up layers in dwcs3 using css
            new dreamweaver Level 1

            This is what I have so far. I am just beginning the actual coding based off the picture. Is there any way to give me ideas at this point?

             

            Thank you.

            • 3. Re: setting up layers in dwcs3 using css
              MurraySummers Level 8

              The picture is pretty vague as is your description.  But I can say with absolute certainty that layers would not be required.

              • 4. Re: setting up layers in dwcs3 using css
                new dreamweaver Level 1

                ok, I was using the term layers just as a descriptive to what I am trying to accomplish. The picture box needs to go over the light blue box. The nav bar, dark blue box, also needs to go over the light blue box. Then I want a box inside the dark blue vertical box to overlap the nav bar (dark blue box) and the white text box. Clear as mud I am sure. I know there is an easier way to do this, but I just am not figuring it out. Thanks again for any help.

                • 5. Re: setting up layers in dwcs3 using css
                  MurraySummers Level 8

                  Things that go behind should be background images.  Things that go in front would be foreground elements nudged into place with floats and margins.  Things that overlap should be 'faux overlaps', i.e., the overlapping part should be in the image that is being overlapped.  Other than that, you can build your page from simple, stacked containers (stacked in the normal flow - the plane of the page).

                  • 6. Re: setting up layers in dwcs3 using css
                    new dreamweaver Level 1

                    Thank you. Unfortunately, I'm still not getting it. Here is what I have. I have the picture and the nav bar overlapping like I want, but I cannot figure out how to get the vertical blue bar to go behind the photo.

                     

                    I don't know if this will help at all, but here is the div tag layout.

                     

                    <body>
                    <div id="wrapper">
                    <div id="maincontainer">
                      <div id="headerphoto">
                      <div id="navbar">
                        <p class="headerservices">Home </p>
                        <p class="headerservices">Services</p>
                      </div>
                    </div>
                    <div id="header1">Text to go here</div>
                    <div id="contentmaininterior">Text goes here.</div>
                    </div></div>
                    </div>
                    </body>

                    The div id "header 1" is the one that is not going behind the "headerphoto" and "navbar". I cannot put it within the headerphoto as it wouldn't go across the page then. so???? Thanks again for any help.

                    • 7. Re: setting up layers in dwcs3 using css
                      osgood_ Level 8

                      new dreamweaver wrote:

                       

                      Thank you. Unfortunately, I'm still not getting it. Here is what I have. I have the picture and the nav bar overlapping like I want, but I cannot figure out how to get the vertical blue bar to go behind the photo.

                       

                      I don't know if this will help at all, but here is the div tag layout.

                       

                      <body>
                      <div id="wrapper">
                      <div id="maincontainer">
                        <div id="headerphoto">
                        <div id="navbar">
                          <p class="headerservices">Home </p>
                          <p class="headerservices">Services</p>
                        </div>
                      </div>
                      <div id="header1">Text to go here</div>
                      <div id="contentmaininterior">Text goes here.</div>
                      </div></div>
                      </div>
                      </body>

                      The div id "header 1" is the one that is not going behind the "headerphoto" and "navbar". I cannot put it within the headerphoto as it wouldn't go across the page then. so???? Thanks again for any help.

                       

                      I'd ditch this design, it's not really intuitive for the web. It's more like a DTP layout. Overlapping things on the web can be a complex issue of using partly images and partly css.

                       

                      I'd try to come up with a less complex layout which is more suitable and cleaner for the web.

                       

                      If I wasn't so sure I may think you're just testing the water to see what can be achieved? Yes you can achieve most things but the more complex the original layout the more issues you will need to solve to get the desired effect. Using layers and z-index is an option but it's a false option because for all, apart from the most simplest of constructions, layers are not an advisable tool to be using.