2 Replies Latest reply on May 15, 2010 1:38 PM by Bame1981

    2 Questions for Layout Help (new to DW)

    Bame1981 Level 1

      Hey All,

       

      I'm semi- new to dreamweaver, and although I know the basics, I'm having trouble creating the layout I had planned.

       

      Currently I'm working off a 2 column + header and footer template.

       

      I'm trying to make it so that the header, footer and sidebar are fixed, snapped to their respective sides of the browser no matter how the browser is resized. I would also like to make the main content offer a scroll bar if it exceeds the room between the header and footer. (so that the "room" look isn't ever changed. ie, the floor and ceiling, and dresser stay visable.)

       

      It looks pretty good here.

      figure A.)

      screen-capture.png

      Though here when I resize the browser the dresser comes off of the floor, and I don't know why.

      Figure B.)

      screen-capture-1.png

       

      So, most important questions are.

       

      1.) What kind of positioning method should I be using to keep the dresser snapped to the floor which is snapped to the bottom of the browser?

      2.) What should I change in the #mainContent CSS to offer a scroll bar if the content exceeds the room available?

       

      Bonus Questions if anyone feels extra awesome today.

       

      1.) I have 3 div boxes in the header, Roof_right, Roof_left are both absolutely positioned. The middle Div box has a background of the logo. If I resize the browser enough, the logo actually gets hidden behind the absolutely positioned pieces, which isn't good. How can I fix this?

      2.) I would like to stick the dresser about 50px down into the footer if possible, instead of sitting directly on top of it. Is this possible?

       

      Thank you

      B

        • 1. Re: 2 Questions for Layout Help (new to DW)
          Nancy OShea Adobe Community Professional & MVP

          It comes down to how you slice your layout.

          http://alt-web.com/DEMOS/Image-slices-in-a-CSS-based-layout.shtml

           

          I would avoid APdivs if at all possible as they take content out of the normal flow and can trip you up if you're not careful.  I would start with the following basic CSS layout.

           

          CSS:

           

          #Container {width: value in pixels; margin:0 auto; /**centers on screen**/; background: url (page-background.jpg) repeat-y;}

           

          #headerWrapper {width: value in pixels; min-height: value in pixels or ems; background: url (roof.jpg) no-repeat;}

          #header-left {float:left; width: 25%;}

          #header-right {float:right; width: 25%;}

           

          #mainContent {margin-left: value in pixels; height: value in pixels; overflow: scroll; /**scrolling division**/}

           

          #SideBar {float:left; width: value in pixels; background: url (middle-dresser.jpg) repeat-y}

           

          #footer {background: #FFF url {dresser-feet.jpg) top left no-repeat; min-height: value in pixels; text-align:center}

           

          2-column, fixed width, centered

          http://alt-web.com/TEMPLATES/2-col-fixed-layout.shtml


          Floats & Margins demo - 3-boxes

          http://alt-web.com/DEMOS/3-CSS-boxes.shtml

           


          Good luck,

           

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

          1 person found this helpful
          • 2. Re: 2 Questions for Layout Help (new to DW)
            Bame1981 Level 1

            Thanks for the reply Nancy!

             

            The CSS you gave me makes a lot of sense. Thank you for teaching me how to incorporate scroll for overflow. I also like your idea for adding the feet of the dresser as a seperate image into the footer. I'm going to make a new index and test your code and fool around with it, but before I do I thought I'd post one question.

             

            I'm not sure how your header code works? I have 2 roof images, a left and a right, both of which won't look good unless they're pressed against the sides of the page. Then I have a seperate logo image that goes in the middle. In your code I only see where 1 image would go, and you named it roof as if my roof was 1 image. I know I'm probably just not understanding something. Maybe you could elaborate on how that works?

             

            I appreciate the feedback. Going into DW to fool with what you gave me for now. Thanks again!

             

            B