3 Replies Latest reply on May 21, 2010 10:37 AM by Nancy OShea

    How would I design this web page?

    Peter A. Forkes Level 1

      I want to design a web page that will do the following (I would have used a form, but I believe thatthese have now been superceded).

       

       

      • At the top of the web page will be a bit map that is the same width as the web page.

       

      • At the bottom of the web page is a footer with the copyright.

       

      • On the left of the web page will be a column that runs from the bottom of the header to the top of the footer.  It has a fixed width.  It will have links in it and as the user clicks on a link a different page will be shown to the right of the lefthand pane with the links.

       

      • The right hand page will be of a fixed height, with a scroll bar, if needed.

       

       

      How would i do this?

        • 1. Re: How would I design this web page?
          Nancy OShea Adobe Community Professional & MVP

          See the following 2-column, CSS layout (view source to see the code)

          http://alt-web.com/TEMPLATES/2-column-fixed-width-template.shtml

           

          To create the illusion of equal height columns, a 2-colored background image is applied to the #wrapper division and repeated vertically.

           

          http://alt-web.com/Images/grn-bg.jpg

           

          To add a scrollbar to the #Middle column, change the CSS code as shown in red:

           

          /** Middle column container **/
          #Middle {
              padding:10px;
              height: 500px;  /**adjust as needed**/

              overflow: scroll;
              width: auto;
              margin:0px 0px 0px 212px;
          }

           

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

          • 2. Re: How would I design this web page?
            jxlusa Level 2

            Just a suggestion based on personal preferences (and this do what you have in mind):

             

            Rather than have a scrollbar on the content consider the simpler solution of just letting the visitor use the regular browser scrollbar.

            I don't think it helps useability to have a second scrollbar inside the page.

             

            This would be done by simply removing the content hight and overflow rules (in red in Nancy O's excellent solution)

             

            If you wanted, and depending on your design, you could add

             

            { position: fixed;}

             

            to your left column menu to keep it in the same place when the rest of the page is scrolled.

             

            You can figure out a way to use this method to keep your header in view all the time if that is part of your objective with the internal scrollbar.

            • 3. Re: How would I design this web page?
              Nancy OShea Adobe Community Professional & MVP

              I agree with jxlusa.  Added scrollbars are confusing and can pose certain accessibility problems for people who don't have or can't use a mouse with their web device.

               

              On the other hand, browser default scrollbars are expected and pose no obstacles to users.

               

              One other thing I should mention, Bitmaps are not a web-friendly image type.  Using your graphics editor you would need to Save for Web as optimized JPEG, PNG or GIF.


              Good luck with your project,

               

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