Skip navigation
Currently Being Moderated

non-scrolling Sidebar

Oct 2, 2011 3:50 PM

How do I create a non-scrolling Sidebar?

 

There is an example at:

 

http://demo.themewarrior.com/?theme=picture-box

 

I am a rookie.  Please make it simple, if that is possible.  Thks

 
Replies
  • Currently Being Moderated
    Oct 3, 2011 2:22 AM   in reply to jds zigzag

    It looks to me that your using "FRAME SETS" ?

     

    It shoulb be easy in this case, if you can find something that looks like this <frame src="page.html" name="PageFrame" scrolling="Yes" noresize="noresize" id="PageFrame" title="PageFrame" />

     

    just change the scrolling="Yes" to scrolling="No"

     

    The other place you can find to change this setting is in the properties at the bottom of your dreamweaver page

     

    Gary

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 3, 2011 3:47 AM   in reply to jds zigzag

    The frames evident at that link are being used to create a viewer for the various themes, but not to create the sidebar.

     

    The non-scrolling sidebar is effectively created by position:fixed in the CSS in the following rule:

     

    http://demo.themewarrior.com/picture-box/wp-content/themes/picture-box /style.css

     

    #leftcol {

        float: left;

        font-size: 11px;

        height: 100%;

        left: 0;

        padding-right: 30px;

        position: fixed;

        top: 0;

        width: 230px;

        z-index: 100;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 4, 2011 12:16 PM   in reply to jds zigzag

    You can't float around postion:fixed elements. 

    You'll need to remove floats & add a margin-left:value to your content container. 

     

    See fixed positioning examples:

    http://alt-web.com/DEMOS/CSS2-Sticky-Text.shtml

    http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points