Results 1 to 3 of 3

Thread: menu and frames

  1. #1
    Join Date
    May 2005
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default menu and frames

    this could go in many different topics, but i put it here because the effect i am trying to accomplish is similar to a simple frameset. I dont care for frames for various resons, but i am trying to duplicate one of the effects of frames.

    I am trying to make a website with the menu on the left and content on the right. I want the menu to remain in the same position even if you scroll (as if it was in a frame)

    my problems:
    1. the page is centered but the menu column is smaller than the content column so i cant make the frames because the widths are always changing and the percentages are changing also.

    2. the background doesnt scroll, and there is a 25px margin at the top so i cant have the scrollbar go to the top

    3. i dont want to use one of those floating menu scripts because they are either jumpy or have a delay which i think is a distraction.


    any suggestions would be greatly appreciated. Thank You

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Set the body's overflow to hidden and use a div to emulate the scroll effect:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    body {
    margin:0px;
    padding:0px;
    overflow:hidden;
    }
    .menu {
    width:15&#37;;
    height:100%;
    float:left
    }
    .content {
    width:85%;
    height:100%;
    float:left;
    overflow-y:scroll
    }
    </style>
    </head>
    <body>
    <div class="menu">
    	menu content
    </div>
    <div class="content">
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
    </div>
    </body>
    </html>
    - Mike

  3. #3
    Join Date
    May 2005
    Posts
    141
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •