23 Replies Latest reply on Apr 26, 2010 1:00 PM by Zabeth69

    layout problem

    nehsurk

      I am using spry collapsible panels on a page created from a template using

      css -  I am wondering why the collapsible panels drop down on the page when the page is resized to accomodate different page resolutions/screen sizes.  How can I improve the layout to keep the panels in position.

       

      Here is a link to the page http://www.safetybath.com/practicedec09/FAQs.html.

       

      Thanks for your help

        • 1. Re: layout problem
          Zabeth69 Level 5

          I notice in your CollapsiblePanel CSS file that your class="CollapsiblePanel" is 700px wide, while your class="CollapsiblePanelTab" is 500px wide.

           

          But the difference is not what is making your panels drop, the width itself is. If you set the width of the container (CollapsiblePanel) to be auto (if you want it to go all the way across), and delete the width on CollapsiblePanelTab (and the Content pane, if you have a width on it...), your panels will adjust to the width available.

           

          If you don't want them to go all the way across, set a percentage width on the container (width: 75%; for example), and it will also adjust as you change the size of the window.

           

          Beth

          • 2. Re: layout problem
            pat@safetybath.com

            Thanks for your help Beth... I think I have corrected that problem.  My concern is making the site viewable in as many different browsers and resolutions as possible.  I see also that the spry menu bar folds over itself when the screen is resized.  Can this be prevented and if so how?

            • 3. Re: layout problem
              Zabeth69 Level 5

              Yes, of course, I do understand!

               

              You have a couple of choices:

              1. Make the text on the menu slightly smaller
              2. Reduce the left and right padding in the list item (menu)
              3. Make an auto width on the list item "li", that is to say, take the set width off the li, so it is based on the length of the text in each menu item. That will gain you a little horizontal leeway. Sometimes this leads to other problems.
              4. Make a proportional width on the list items (assign ids to each top-menu item) and set their widths with CSS. I do this by estimating the percentage width each menu item is in relation to the full width and make actual percentage widths, as li#home {width: 10%;}. That is just a demonstration, you'd need to find your own percentages. Make sure that they don't add to more than 98% or so, or you will automatically have a fold-over!

               

              Some combination of these strategies will get you there. Try them one at a time; change then check; change then check.

               

              Beth

              • 4. Re: layout problem
                pat@safetybath.com Level 1

                Thanks Beth...

                 

                I think I have solved that problem now as well.  I am not sure if an accurate way to view the site in different screen resolutions/sizes is to just resize the screen?  I find that when I do this the menu does not fold over, however, it extends past the side of the white background - not sure if this is what should happen.

                 

                I notice also that on this page http://www.safetybath.com/practicedec09/index.html I have a you tube video which is really out of place (hides other elements) when the page is resized as well as a right colum that has some aspects ( that extend beyond the page edge)... What can be done about that?

                 

                I fear that there is something very basic about layout that I am missing.

                 

                oOPS NOW i AM NOT SURE WHAT HAPPENED ON THAT INDEX PAGE ABOVE AS EVERYTHING IS OUT OF WHACK... WILL HAVE TO CLEAR THAT UP FIRST BEFORE YOU CAN TELL WHAT i AM TALKING ABOUT ... SORRY ABOUT THAT!

                • 5. Re: layout problem
                  pat@safetybath.com Level 1

                  Thank you Beth... I am not sure if this is the correct way to respond back to you with another question,.. after having followed your suggestions, I have I think solved the menu problem , but for some reason now everything is out of place when I use IE... Safari is fine... not sure what I did to cause this... perhaps you can help.

                   

                  As well on this page http://www.safetybath.com/practicedec09/index.html

                  I have lost my white background and I anot sure what happened to it either ( but only in IE)

                   

                  Thanks for your patience

                  • 6. Re: layout problem
                    pat@safetybath.com Level 1

                    Hello Beth,

                     

                    I posted a reply on the forum page and then it occurred to me that probably

                    I should just reply directly to you.

                     

                    I thought things had worked out quite well, however, I am finding that in

                    Firefox the page is now displaying as it should, but in IE, the page looks

                    terrible.  The menu bar has shifted over to the right of the window - and

                    now I am not sure if I have done anything to solve the problem and after

                    trying so many things I am totally confused.  My index page which is

                    http://www.safetybath.com/practicedec09/index.html is fine in Firefox but I

                    seem to have lost the background in one area and it fills the entire screen.

                     

                    Can you help?

                     

                    “Have a Safe Bath”

                     

                     

                     

                     

                     

                    Pat Krushen

                    Safety Bath Inc.

                     

                    1 877 826 6666

                    Email: pat@safetybath.com

                    Website:  http://www.safetybath.com

                    • 7. Re: layout problem
                      Zabeth69 Level 5

                      I think  you must have done more work on it since you wrote the last message. I'm seeing white background on all the browsers I checked, and the menubar condenses nicely.

                       

                      The only thing that disturbs me is the accordion, which must be in an absolutely positioned div, because it just sits there as copy runs behind it and the page flexes, but it doesn't! I think I'd take it out and put it in a div that floats left, so it interacts with the copy above it.

                       

                      Beth

                      • 8. Re: layout problem
                        pat@safetybath.com Level 1

                        Thanks for the help Beth.  Yes, I have been working on the site, which I

                        probably should not have done, since that makes it difficult for you to help

                        me. 

                         

                        There are still a couple of problems that I have still dealing with cross

                        browser compatibility and screen size.  (I usually just change the size of

                        my window to check screen size and am not sure if this is an accurate way to

                        do this?) Is there a minimum size that I should be thinking about?

                         

                        1. On that same index page I have a video on the right side as well as a

                        live support button and when the screen is resized, those items also

                        override the text... is there anything I can do about that?

                         

                        2. My page is set for 80% of the total screen width - is there value in

                        changing it to a fixed width of approx. 900 px or perhaps making it 90% to

                        allow for more room.

                         

                        The problem with the blue background was that I was using compatibility mode

                        on my computer!!!!  Sorry about that - however, I guess this does happen

                        with other people as well - is there a way to avoid this? 

                         

                        I appreciate your help !

                         

                         

                        “Have a Safe Bath”

                         

                         

                         

                         

                         

                        Pat Krushen

                        Safety Bath Inc.

                         

                        1 877 826 6666

                        Email: pat@safetybath.com

                        Website:  http://www.safetybath.com

                        • 9. Re: layout problem
                          Zabeth69 Level 5

                          Hi, Pat,

                           

                          No, your working on the site is not a problem! Just noted it in case I was not seeing what you were pointing out!

                           

                          I think changing the size of your window is fine; If you wanted to actually change resolution, too, that would give more information (but I've not done it!). I try to think of my viewer-audience when I think of screen sizes, not always fully successfully. I have a wide monitor, and it is hard not to get lulled into complacency on that part. For some background information (an educated guess, of course) on the sizes of monitors that are/might be in use...possibly based on sales figures, who knows...go to http://www.w3schools.com/browsers/browsers_display.asp

                           

                          But if you have an idea that your primary audience has older systems, you might aim at smaller monitor sizes.

                           

                          And you can be strategic on where you put your most important information...don't use a huge header that doesn't do anything besides look pretty, get your live content toward the top and left of your page ("above the fold", as they used to say in the news business).

                           

                          Pay attention to (NOT) using absolute positioned divs, if you can help it. When your page elements work with each other and change relative to each other, they don't overtake each other.

                           

                          You can set your page for 80% of screen width, sure, but remember that people with wider monitors will benefit, and people with already-smaller monitors will suffer. 80% of large is still large. 80% of small is smaller. I tend more to make a 'fixed width' div that floats in the middle of the page, rather than being totally liquid, though I like the 'flexibility' of liquid layouts, especially how widgets will adjust to fill/fit.

                           

                          You know, you don't have ANY control over how people set their browsers. No control at all. You can only do your best to make your site look good and not break easily!

                           

                          You're welcome to my help! Thanks!

                           

                          Beth

                          • 10. Re: layout problem
                            pat@safetybath.com Level 1

                            Thanks so much Beth, 

                             

                            I have decided to go with the fixed width 900 px as it seems the safest.

                            Since this is a site that is probably viewed by many older people who

                            perhaps have not updated browsers or computers, I thought this might be

                            best.

                            I too have a large screen and am finding it difficult to design on that

                            while accommodating for smaller screens and as well larger print.

                             

                            You have helped me greatly!!!!!!!

                             

                            “Have a Safe Bath”

                             

                             

                             

                             

                             

                            Pat Krushen

                            Safety Bath Inc.

                             

                            1 877 826 6666

                            Email: pat@safetybath.com

                            Website:  http://www.safetybath.com

                            • 11. Re: layout problem
                              pat@safetybath.com Level 1

                              “Have a Safe Bath”

                               

                               

                               

                               

                               

                              Pat Krushen

                              Safety Bath Inc.

                               

                              1 877 826 6666

                              Email: pat@safetybath.com

                              Website:  http://www.safetybath.com

                              • 12. Re: layout problem
                                Zabeth69 Level 5

                                Thanks!

                                and You're welcome!

                                Beth

                                • 13. Re: layout problem
                                  pat@safetybath.com Level 1

                                  Hi Beth,

                                   

                                   

                                   

                                  I do have another problem and have done some searching through spry forums

                                  to get an answer but can't seem to find or don't understand the solutions

                                  given.  I want to have the menu spry menu links show an active state as a

                                  different color on a given page. I am using a template, and am not sure how

                                  to go about this.

                                   

                                  http://www.safetybath.com/practicedec09/index.html

                                   

                                   

                                   

                                  "Have a Safe Bath"

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                   

                                  Pat Krushen

                                   

                                  Safety Bath Inc.

                                   

                                   

                                   

                                  1 877 826 6666

                                   

                                  Email: pat@safetybath.com

                                   

                                  Website:  http://www.safetybath.com

                                  • 14. Re: layout problem
                                    Zabeth69 Level 5

                                    Hiya, Pat,

                                     

                                    Here's a technique I post periodically in response to this question:

                                     

                                    Note first that this all refers to Spry Menu Bars, that come with extensive and specific CSS files.

                                     

                                    I periodically answer this question.

                                     

                                    Because your menu is "persistent", at least it looks like the same menu page to page, it is easy to think that you are looking at a way to make the menu item show "persistently." This is an incorrect assessment.

                                     

                                    You are actually looking at menus that are contextual to the page they are sitting on. This is easy to do by giving each page body (or menu-enclosing div) a unique id AND each menu item a unique id. I code them so they are similar:

                                     

                                    body#contactuspage

                                    ...

                                    li#contactus

                                     

                                    Then, in the CSS for the menubar, find the hover state (if that is the state you want to mimic) and ADD code (additional selectors to that rule) so that you have a selector like this:

                                     

                                    body#contactuspage li#contactus that "pinpoints" or focuses on the specific menu item on its own specific page.

                                     

                                     

                                    /* Menu items that are open with submenus are set to MenuBarItemHover
                                    with a blue background and white text */
                                    ul.MenuBarHorizontal a.MenuBarItemHover, 
                                    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, 
                                    ul.MenuBarHorizontal a.MenuBarSubmenuVisible,
                                    body#contactuspage ul.MenuBarHorizontal li#contactus a
                                    {
                                         background-color: #33C;
                                         color: #FFF;
                                    }
                                    
                                    

                                     

                                    Be sure to add commas between selectors (except after the last one before the rules). You will be styling the link (the a); because previous rules have set it to display:block; your entire list item should style.

                                     

                                    This method requires that every menu item that you want to affect get its own unique ID and that every page or enclosing container have an editable attribute, so you can put that different id on every page.

                                     

                                    Happy styling!

                                     

                                    If this not how you have built your navigation, the principle remains the same. If you have questions, ask!

                                     

                                    Beth

                                    • 15. Re: layout problem
                                      pat@safetybath.com Level 1

                                      Hi Bethe. more questions!!!!

                                       

                                       

                                       

                                      I have gone through and given each menu item a unique id (including the drop

                                      down menu items).  The only page not governed by a template is the index

                                      page and the menu is a part of a non-editable template so I am wondering how

                                      I would go about giving each page a unique id.  Perhaps I have set up my

                                      template incorrectly.

                                       

                                       

                                       

                                      Here is a link to the template

                                      http://www.safetybath.com/practicedec09/Templates/indexmar11.dwt

                                       

                                       

                                       

                                       

                                       

                                      "Have a Safe Bath"

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                       

                                      Pat Krushen

                                       

                                      Safety Bath Inc.

                                       

                                       

                                       

                                      1 877 826 6666

                                       

                                      Email: pat@safetybath.com

                                       

                                      Website:  http://www.safetybath.com

                                      • 16. Re: layout problem
                                        Nancy OShea Adobe Community Professional & MVP

                                        Add an editable region to your template's body tag like so.

                                         

                                        <!-- TemplateBeginEditable name="body" -->
                                        body class="about"
                                        <!-- TemplateEndEditable -->

                                         

                                        http://alt-web.blogspot.com/2010/03/making-persistent-page-indicator-on-css.html

                                         

                                         

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

                                        • 17. Re: layout problem
                                          pat@safetybath.com Level 1

                                          Thanks Nancy... seems like a simple solution only when I tried that it

                                          destroyed all the pages that use the template.. so perhaps there is another

                                          answer or else I have set things up incorrectly from the get-go.

                                           

                                          “Have a Safe Bath”

                                           

                                           

                                           

                                           

                                           

                                          Pat Krushen

                                          Safety Bath Inc.

                                           

                                          1 877 826 6666

                                          Email: pat@safetybath.com

                                          Website:  http://www.safetybath.com

                                          • 18. Re: layout problem
                                            Nancy OShea Adobe Community Professional & MVP

                                            Open your DWT file in code view.  Place your mouse next to the Body tag.

                                             

                                            Insert > Template Object >  Editable Region.

                                             

                                            Make sure the template code looks like my example below.

                                             

                                            <!-- TemplateBeginEditable name="body" -->
                                            <body>
                                            <!-- TemplateEndEditable -->

                                             

                                             

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

                                            • 19. Re: layout problem
                                              pat@safetybath.com Level 1

                                              Okay... I tried that and it seems a logical solution, only now I have

                                              body class="about" in text at the top of every page that uses the template

                                              when viewed in a browser so I must still not be understanding you

                                              correctly... sorry!

                                               

                                              “Have a Safe Bath”

                                               

                                               

                                               

                                               

                                               

                                              Pat Krushen

                                              Safety Bath Inc.

                                               

                                              1 877 826 6666

                                              Email: pat@safetybath.com

                                              Website:  http://www.safetybath.com

                                              • 20. Re: layout problem
                                                Zabeth69 Level 5

                                                That premise is accurate, but instead of making editable regions around the body tag (take out whatever coding you put in to do that), make the ID of the body tag an editable attribute:

                                                 

                                                1. Open the Template
                                                2. Place your cursor inside the body tag
                                                3. Modify > Templates > Make attribute editable...
                                                4. ADD ID
                                                5. Text property
                                                6. Give a default id or leave blank (it's ok blank)

                                                 

                                                On the child page:

                                                1. Modify > Template Properties
                                                2. ID
                                                3. Enter new page id. For body IDs, I tend to give ids like: id="contactuspage"
                                                  when you are giving a value for an editable attribute, you don't need the id= or the quotation marks

                                                 

                                                Pat, if this is unclear, let me know!

                                                 

                                                Beth

                                                • 21. Re: layout problem
                                                  pat@safetybath.com Level 1

                                                  I have probably done something incorrectly again as this is the code now in

                                                  my template

                                                   

                                                   

                                                   

                                                   



                                                   



                                                   



                                                   









                                                   



                                                   





                                                  And this is the code now in the horizontal menu bar css





                                                  }



                                                  /* Menu items that are open with submenus are set to MenuBarItemHover with a


                                                  blue background and white text */



                                                  ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal


                                                  a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal


                                                  a.MenuBarSubmenuVisible,body#faqpage ul.menuBarHorizontal li#faqpage a



                                                  {



                                                  background-color: #336699;



                                                  color: #FFF;



                                                  }





                                                  And this is the code on my faqs page





                                                   



                                                   



                                                   



                                                   









                                                   



                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                  So when one is on the faqs page you should expect the background of that

                                                  menu item to be a dark blue color. but it's not.

                                                   

                                                   

                                                   

                                                   

                                                   

                                                  I have uploaded the corresponding files to the server so perhaps you can

                                                  help e again.

                                                   

                                                   

                                                   

                                                  Thanks

                                                   

                                                   

                                                   

                                                  "Have a Safe Bath"

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                   

                                                  Pat Krushen

                                                   

                                                  Safety Bath Inc.

                                                   

                                                   

                                                   

                                                  1 877 826 6666

                                                   

                                                  Email: pat@safetybath.com

                                                   

                                                  Website:  http://www.safetybath.com

                                                  • 22. Re: layout problem
                                                    pat@safetybath.com Level 1

                                                    I am still having problems with this Beth.  I am not sure where to go from

                                                    here. 

                                                     

                                                     

                                                     

                                                    Here is the code for the template:

                                                     

                                                     

                                                     

                                                    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









                                                     





                                                     



                                                     



                                                     





                                                     

                                                     

                                                     

                                                    /* place css fixes for all versions of IE in this conditional comment */

                                                     

                                                    .twoColLiqRtHdr #sidebar1 { padding-top: 30px; }

                                                     

                                                    .twoColLiqRtHdr #mainContent

                                                     

                                                    /* the above proprietary zoom property gives IE the hasLayout it needs to

                                                    avoid several bugs */

                                                     



                                                     

                                                     

                                                    <!--

                                                     

                                                    function MM_validateForm() { //v4.0

                                                     

                                                      if (document.getElementById){

                                                     

                                                        var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;

                                                     

                                                        for (i=0; i<(args.length-2); i=3) { test=args[i2];

                                                    val=document.getElementById(args[i]);

                                                     

                                                          if (val) { nm=val.name; if ((val=val.value)!="") {

                                                     

                                                            if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');

                                                     

                                                              if (p<1 || p==(val.length-1)) errors='- 'nm+' must contain an

                                                    e-mail address.\n';

                                                     

                                                            } else if (test!='R') { num = parseFloat(val);

                                                     

                                                              if (isNaN(val)) errors='- 'nm+' must contain a number.\n';

                                                     

                                                              if (test.indexOf('inRange') != -1) { p=test.indexOf(':');

                                                     

                                                                min=test.substring(8,p); max=test.substring(p+1);

                                                     

                                                                if (num<min || max<num) errors='- 'nm+' must contain a number

                                                    between 'min' and 'max'.\n';

                                                     

                                                          } } } else if (test.charAt(0) == 'R') errors = '- 'nm+' is

                                                    required.\n'; }

                                                     

                                                        } if (errors) alert('The following error(s) occurred:\n'+errors);

                                                     

                                                        document.MM_returnValue = (errors == '');

                                                     

                                                    } }

                                                     

                                                    function MM_openBrWindow(theURL,winName,features) { //v2.0

                                                     

                                                      window.open(theURL,winName,features);

                                                     

                                                    }

                                                     

                                                    //-->

                                                     



                                                     

                                                     

                                                    #title

                                                     

                                                    a:link

                                                     

                                                    a:visited {

                                                     

                                                          text-decoration: none;

                                                     

                                                          color: #666;

                                                     

                                                    }

                                                     

                                                    a:hover {

                                                     

                                                          text-decoration: underline;

                                                     

                                                          color: #039;

                                                     

                                                    }

                                                     

                                                    a:active {

                                                     

                                                          text-decoration: none;

                                                     

                                                    }

                                                     

                                                    .style23

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    -->

                                                     



                                                     



                                                     



                                                     



                                                     









                                                     



                                                     




                                                    var flashvars = {};



                                                    flashvars.folderPath = "image_scroller_1/"



                                                    flashvars.settingsXML = "settings.xml";



                                                    var params = {};



                                                    params.scale = "noscale";



                                                    params.salign = "tl";



                                                    params.wmode = "transparent";



                                                    var attributes = {};



                                                    swfobject.embedSWF("image_scroller_1/scroller.swf", "ImagesScrollerDiv",


                                                    "700", "200", "9.0.0", false, flashvars, params, attributes);





                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                         

                                                    <br />

                                                     

                                                         

                                                     

                                                     

                                                         

                                                     

                                                     

                                                         

                                                    <br />

                                                     

                                                         

                                                     

                                                     

                                                         

                                                     

                                                    Video Comparison of Walk in Bathtubs

                                                     

                                                     

                                                    <span class="style66"><a href="../sitemap.html"><img

                                                    src="../images/newleyoutindexpage/images/sitemapbutton.png" alt="Site Map"

                                                    width="112" height="24" />

                                                     

                                                          Safety Bath Inc. are



                                                    approved for




                                                    Canada and the US







                                                     

                                                     

                                                     

                                                     

                                                     

                                                      <!-- TemplateEndEditable ><! TemplateBeginEditable name="Main Content"

                                                    -->

                                                     

                                                       

                                                     

                                                     

                                                         

                                                     

                                                     

                                                     

                                                         

                                                     

                                                     

                                                     

                                                         

                                                     



                                                     



                                                     



                                                     

                                                     



                                                     



                                                     





                                                     



                                                     










                                                    Home | FAQs | Request Info | Our Company | Business Opps | Serenity | Savanna | Solo | Door Kit & Seat | Supreme l SanSpa

                                                    Pixels & Paper Web Design
                                                    Copyright C 2004 Safety Bath Inc. All rights reserved. Revised: 12/12/09    

                                                     

                                                    <!--

                                                     

                                                    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",

                                                    );

                                                     

                                                     

                                                     

                                                    //-->

                                                     

                                                    </script>

                                                     

                                                    </body>

                                                     

                                                    </html>

                                                     

                                                     

                                                     

                                                    An example of a child page can be found at

                                                    http://www.safetybath.com/practicedec09/FAQs.html

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    "Have a Safe Bath"

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                     

                                                    Pat Krushen

                                                     

                                                    Safety Bath Inc.

                                                     

                                                     

                                                     

                                                    1 877 826 6666

                                                     

                                                    Email: pat@safetybath.com

                                                     

                                                    Website:  http://www.safetybath.com

                                                    • 23. Re: layout problem
                                                      Zabeth69 Level 5

                                                      Pat, I'm not able to read your posted code. I will email you.

                                                       

                                                      Beth