6 Replies Latest reply: Apr 23, 2013 4:11 PM by AxiomaticChaos RSS

    How do I make my Spry Accordion menu scroll *with* my webpage?

    AxiomaticChaos

      Afternoon,

       

      I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.

       

      I want it to scroll within the confines on my div class="contentright"

       

      CSS for div class:

      .contentright {

          padding-top: 410px;

          float: left;

          width: 210px;

      }

       

      HTML of same div class:

      <div class="contentright">

                                  <div id="SpryAccordion1" class="Accordion" tabindex="0">

                                  <div class="AccordionPanel">

                                      <div class="AccordionPanelTab tabTop">

       

       

      My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;

       

       

      Any ideas?

        • 1. Re: How do I make my Spry Accordion menu scroll *with* my webpage?
          Nancy O. MVP

          I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;

          Absolute positioning is not necessary for 98% of what we do. It removes content from the normal document flow.  Default CSS positioning (none or static) will allow your menu to naturally fall beneath your header without additional code from you.   Keep things simple and you'll have fewer problems.

           

           

           

           

          Nancy O.

          • 2. Re: How do I make my Spry Accordion menu scroll *with* my webpage?
            AxiomaticChaos Community Member

            I understand that Absolute positioning isn't always necessary, but it was the only way to get my friends logo placed in that position without overlapping the main content of her page.

             

            But that isn't my issue, My padding-top: in my CSS will protect my SPRY Panel from overlapping... I want to know how to make it scroll within the space I have allotted in my:

            div class:

            .contentright {

                padding-top: 410px;

                float: left;

                width: 210px;

             

             

            Is that possible?

            • 3. Re: How do I make my Spry Accordion menu scroll *with* my webpage?
              Nancy O. MVP

              I'm sorry, but the code fragments you are posting don't tell us much.  It's impossible to give more complete answers without seeing a URL to the page in question.

               

               

              Nancy O.

              • 5. Re: How do I make my Spry Accordion menu scroll *with* my webpage?
                AxiomaticChaos Community Member

                Here is my HTML Coding

                <html>

                    <head>

                        <title>BetsyMarvin.com</title>

                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                        <meta name="description" content="" />

                        <link rel="stylesheet" type="text/css" href="stylesheet.css" />

                        <script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>

                        <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />

                </head>

                    <body>

                        <div class="container">

                            <div class="bannerArea">           

                                <div class="bannernav"><a href="#" >Privacy Policy</a>  |  <a href="mailto:betsym@cornerstonemi.org" >Contact Us</a>  |  <a href="#" >Site Map</a></div>

                                <span class="toplogo"></span>

                                <div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>

                            </div>

                            <div class="contentArea">

                                <ul class="leftnavigation">

                                    <li><a href="theme_02_design.html">Home Page</a></li>

                                    <li><a href="blog_design.html">Blog</a></li>

                                    <li><a href="lessons_design.html">Lessons</a></li>

                                   

                                </ul>

                                <div class="content">

                                    <div class="contentleft">

                                        <h1>Welcome to my Website</h1>

                                        <img class="imageright" src="images/faith reason.jpg" border="0" />

                                        <p>text</p>

                                    </div>

                                    <div class="contentright">

                <div id="SpryAccordion1" class="Accordion" tabindex="0">

                                            <div class="AccordionPanel">

                                                <div class="AccordionPanelTab tabTop">

                                                    <div class="accordion_340_tab">CONTACT ME</div>

                                                </div>

                                                <div class="AccordionPanelContent">

                                                    <div class="acontent">

                                                      <p> <a href "mailto:betsym@cornerstonemi.org"> Email</a></p>

                                                      <p> <a href="http://www.cornerstonemi.org">Church Website</a></p>

                                                      <p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>

                                                      <p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="AccordionPanel">

                                                <div class="AccordionPanelTab middleTab">

                                                    <div class="accordion_340_tab">ABOUT ME</div>

                                                </div>

                                                <div class="AccordionPanelContent">

                                                    <div class="acontent">

                                                        <p>text</p>

                                                    </div>

                                                </div>

                                            </div>

                                            <div class="AccordionPanel">

                                                <div class="AccordionPanelTab middleTab">

                                                    <div class="accordion_340_tab">PASSIONS</div>

                                                </div>

                                                <div class="AccordionPanelContent">

                                                    <div class="acontent">

                                                        <img class ="imageright" src="images/love.jpg" width="130" height="64" />

                                                             <p>text</p>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                        <div class="AccordionBottom"></div>

                                    </div>

                                    <div style="clear:both;"></div>

                                </div>

                                <div style="clear:both;"></div>

                            </div>                           

                            <div class="footerArea">

                                <div class="copyright">&copy; 2013 Betsymarvin.com | All rights reserved.</div>

                            </div>       

                        </div>

                <script type="text/javascript">

                <!--

                var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:2});

                //-->

                        </script>

                    </body>

                 

                 

                CSS Style Sheet

                 

                body {

                    margin: 0px;

                    color: #666;

                    font-size: 12px;

                    font-family: Arial;

                    font-family: Arial, Verdana, Univers;

                    background-color: #545454;

                    background-image: url(images/page_bkgd.jpg);

                    background-repeat: repeat-x;

                }

                 

                 

                h1 {

                    color: #4F6179;

                    font-size: 24px;

                    font-weight: normal;

                    margin: 3px 0px 25px 0px;

                }

                h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }

                 

                a          { color: #ba7007; }

                a:visited  { color: #ba7007; }

                a:hover    { color: black; }

                 

                 

                .container {

                    width: 980px;

                    margin-left: auto;

                    margin-right: auto;

                   

                    background-image: url(images/content_bkgd_tile.jpg);

                    background-repeat: repeat-y;

                }

                 

                 

                /* BANNER AREA */

                .bannerArea {

                    width: 980px;height: 145px;

                    background-color: #4971a2;

                    background-image: url(images/banner_bkgd.jpg);

                    background-repeat: no-repeat;

                }

                 

                 

                .bannernav {

                    padding-top: 10px;

                    padding-left: 10px;

                    float: left;

                    color: white;

                    font-size: 10px;

                    font-family: Arial, Helvetica, Verdana, sans-serif;

                }

                 

                .bannernav a {

                    color: white;

                    text-decoration: none;

                }

                .bannernav a:visited {

                    color: white;

                }

                .bannernav a:hover {

                    color: #ECBB7B;

                }

                 

                .toplogo {

                    position: absolute;

                    z-index: 100;

                    padding-right: 0px;

                    float: right; margin-left: 675px;

                    padding-top: 10px;

                   

                }

                 

                 

                 

                .content {

                    padding-top: 20px;

                    padding-bottom: 20px;

                    padding-left: 25px;

                    padding-right: 10px;

                    background-image: url(images/content_bkgd.jpg);

                    background-repeat: no-repeat;

                    z-index: 100;

                 

                }

                 

                 

                /* LEFT NAVIGATION */

                 

                 

                .leftnavigation {

                    width: 192px;

                    margin: 70px 0px 0px 0px;

                    padding-left: 8px;

                    float: left;

                    list-style-type: none;

                }

                 

                .leftnavigation a{

                    margin-left: 0px;

                    width: 156px;

                    padding-left: 15px;

                    padding-top: 5px;

                    padding-right: 20px;

                    padding-bottom: 5px;

                    float: left;

                    color: #CCA72F;

                    font-size: 10px;

                    font-weight: bold;

                    font-family: Verdana, Arial, Helvetica, sans-serif;

                    text-decoration: none;

                    background-image: url(images/nav_normal.jpg);

                    background-repeat: repeat-x;

                    background-position: 0px 0px;

                    border-bottom: 1px solid #999;

                }

                 

                .leftnavigation a:visited{

                    color: #5C4C17;

                }

                .leftnavigation a:hover{

                    color: #ffffff;

                    background-image: url(images/nav_down.jpg);

                }

                 

                 

                /* CONTENT AREA */

                 

                .contentleft {

                    width: 400px;

                    padding-left: 30px;

                    padding-right: 20px;

                    float: left;

                   

                 

                }

                 

                .contentright {

                    padding-top: 410px;

                    float: left;

                    width: 210px;

                }

                 

                .imageright {

                    margin-top: 10px;

                    margin-left: 10px;

                    float: right;   

                }

                .imageleft {

                    margin-right: 10px;

                    float: left;

                }

                 

                 

                /* FOOTER AREA */

                .footerArea {

                    width: 980px;height: 88px;

                    background-color: #cfcfcf;

                    background-image: url(images/footer_bkgd.jpg);

                    background-repeat: no-repeat;

                   

                }

                 

                .copyright {

                    border-top: solid;

                    border-color: #737a90;

                    border-width: 2px;

                    margin-left: 240px;

                    margin-right: 30px;

                    padding-top: 12px;

                   

                    color: #666666;

                    font-size: 10px;

                    font-family: Verdana,Arial, Helvetica, sans-serif;

                }

                 

                 

                 

                 

                 

                CSS for the SPRY Accordion

                .Accordion {

                    overflow: hidden;

                    width: 255px;

                }

                 

                .AccordionPanel {

                    margin: 0px;

                    padding: 0px;

                }

                 

                .AccordionPanelTab {

                    color: #CCA72F;

                    margin: 0px;

                    cursor: pointer;

                    padding: 10px 30px 10px 20px;

                    font-weight: bold;

                    -moz-user-select: none;

                    -khtml-user-select: none;

                    background-repeat: no-repeat;

                    background-image: url(../images/accordion_255_tab_normal.gif);

                }

                 

                .AccordionPanelContent {

                    overflow: auto;

                    margin: 0px 0px 0px 0px;

                    padding: 0px 0px 0px 0px;

                    background-image: url(../images/accordion_255_tile.gif);

                }

                 

                 

                .AccordionPanelOpen .AccordionPanelTab {

                    color: #d88a37;

                    background-image: url(../images/accordion_255_tab_down.gif);

                }

                 

                 

                .AccordionPanelTabHover {

                    background-image: url(../images/accordion_255_tab_over.gif);

                }

                 

                .AccordionFocused .AccordionPanelTab {

                    background-color: #000000;

                }

                 

                .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {

                    background-color: #000000;

                }

                 

                 

                /* Custom AUC classes */

                 

                #accordion_255 {

                    background-image: url(../images/accordion_255_tile.gif);

                    background-repeat: repeat-y;

                    background-position: 0px 0px;

                }

                 

                .tabTop {

                    background-position: 0px 0px;

                    padding-top: 15px;

                }

                .middleTab {

                    background-position: 0px -151px;

                }

                 

                .accordion_255_tab {

                    margin: 0px;

                    font-weight: bold;

                }

                 

                .acontent {

                    height:200px;

                    width:220px;

                    overflow: auto;

                    padding: 5px 10px 10px 20px;

                    useFixedPanelHeights = null;

                }

                 

                .AccordionBottom {

                    width: 255px;

                    height: 33px;

                    background-repeat: no-repeat;

                    background-position: 0px bottom;

                    background-image: url(../images/accordion_255_bottom.gif);

                }