Skip navigation
jds zigzag
jds zigzag Calculating status...
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

1215 Views   7 Replies   Latest reply: jds zigzag, Oct 4, 2011 4:44 PM
 
Replies
  • ghiadobe
    Currently Being Moderated
    1. ghiadobe,
    Oct 3, 2011 2:22 AM   in reply to jds zigzag
    Report

    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:
  • John Waller
    Currently Being Moderated
    2. John Waller,
    Oct 3, 2011 3:47 AM   in reply to jds zigzag
    Report

    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:
  • jds zigzag
    Currently Being Moderated
    3. jds zigzag,
    Oct 3, 2011 7:31 AM   in reply to ghiadobe
    Report

    Gary, thanks for the reply.  I am not using Framesets.  Don't know what they are.  But perhaps the example that I found on the web and provided the Link apparently is.  Will spend more time on it and get back.

    jds

     
    |
    Mark as:
  • jds zigzag
    Currently Being Moderated
    4. jds zigzag,
    Oct 3, 2011 7:33 AM   in reply to John Waller
    Report

    John, thank you.  I will try to figure out how to implement the .css script.  I assume that I can start with a canned two column template from the Dreamweaver panel and then tie in a .css with your script included.  Right?  Any other tips?

    jds

     
    |
    Mark as:
  • jds zigzag
    Currently Being Moderated
    5. jds zigzag,
    Oct 3, 2011 11:27 AM   in reply to John Waller
    Report

    John, I used the Dreamweaver "2 column fixed, left sidebar" Blank Page to create my page.

     

    I then inserted the single line in the css to indicate "position:fixed"

     

    Screen shot 2011-10-03 at 11.19.13 AM.png

     

    The Sidebar now does not scroll.  This is good.

     

    That is the only change I made to your stock page.

     

    But the "Content" section has now slid behind the Sidebar:

     

    Screen shot 2011-10-03 at 11.27.18 AM.png

     

    What do I do to solve this problem?

     

    Thanks.

    Jim

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

    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:
  • jds zigzag
    Currently Being Moderated
    7. jds zigzag,
    Oct 4, 2011 4:44 PM   in reply to Nancy O.
    Report

    Nancy, thank you very much.  It was quite simple with your comments.  When it got complicated was when I went to the "see fixed positioning examples:"  But the removal of floating and adding margin-left seems to have done the trick.  Now on to the next step.

    Jim

     
    |
    Mark as:
Actions

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