8 Replies Latest reply: Apr 6, 2013 7:26 PM by Ben Pleysier RSS

    I need some spry help

    mburns1973

      I'm building a page and it all works great, except my spry menu. It's not seeing the css, I'm not sure why!!!! Here is my html

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

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

      <title> Home Page</title>

      <style type="text/css">

      #wrapper {

                background-image: url(photoshop/background.jpg);

                height: 680px;

                width: 1000px;

                position: relative;

                left: auto;

                right: auto;

                background-repeat: no-repeat;

                margin-right: auto;

                margin-left: auto;

      }

      #main {

                background-image: url(photoshop/center_background.jpg);

                height: 407px;

                width: 695px;

                position: relative;

                z-index: 1;

                left: auto;

                top: 40px;

                right: auto;

                margin-right: auto;

                margin-left: auto;

      }

      #nav {

                height: 35px;

                width: 695px;

                padding-top: 0px;

                position: relative;

                top: 55px;

                margin-right: auto;

                margin-left: auto;

      }

      #footer {

                font-family: "Times New Roman", Times, serif;

                color: rgba(255,255,255,1);

                height: 30px;

                width: 695px;

                position: relative;

                text-align: center;

                top: 90px;

                margin-right: auto;

                margin-left: auto;

      }

      </style>

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

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

      <style type="text/css">

      body {

                background-color: rgba(0,0,0,1);

      }

      </style>

      </head>

       

       

      <body>

      <div id="wrapper">

        <div id="main"></div>

          <div id="nav">

            <ul id="MenuBar1" class="MenuBarHorizontal">

              <li><a href="#">Home</a>        </li>

              <li><a href="#">About us</a></li>

              <li><a href="#">Gallery</a>        </li>

              <li><a href="#">Contact </a></li>

              <li><a href="#">Links</a></li>

            </ul>

          </div>

          <div id="footer">CopyRight 2010-2013</div>

      </div>

      <script type="text/javascript">

      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

      </script>

      </body>

      </html>

        • 1. Re: I need some spry help
          osgood_ CommunityMVP

          mburns1973 wrote:

           

          I'm building a page and it all works great, except my spry menu. It's not seeing the css, I'm not sure why!!!!

           

          Are you viewing your page locally or remotely?

           

          Are the links to the spry css and js correct?

           

          I'm guessing youre viewing this remotely and have not uploaded the spry css or js files?

          • 2. Re: I need some spry help
            Nancy O. CommunityMVP

            What's the URL to your page?

             

             

            Nancy O.

            • 3. Re: I need some spry help
              mburns1973 Community Member

              it's not up on the web yet

              • 4. Re: I need some spry help
                mburns1973 Community Member

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

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

                <title> Home Page</title>

                <style type="text/css">

                #wrapper {

                          background-image: url(photoshop/background.jpg);

                          height: 680px;

                          width: 1000px;

                          position: relative;

                          left: auto;

                          right: auto;

                          background-repeat: no-repeat;

                          margin-right: auto;

                          margin-left: auto;

                }

                #main {

                          background-image: url(photoshop/center_background.jpg);

                          height: 407px;

                          width: 695px;

                          position: relative;

                          z-index: 1;

                          left: auto;

                          top: 40px;

                          right: auto;

                          margin-right: auto;

                          margin-left: auto;

                }

                #nav {

                          height: 35px;

                          width: 695px;

                          padding-top: 0px;

                          position: relative;

                          top: 55px;

                          margin-right: auto;

                          margin-left: auto;

                }

                #footer {

                          font-family: "Times New Roman", Times, serif;

                          color: rgba(255,255,255,1);

                          height: 30px;

                          width: 695px;

                          position: relative;

                          text-align: center;

                          top: 90px;

                          margin-right: auto;

                          margin-left: auto;

                }

                </style>

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

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

                <style type="text/css">

                body {

                          background-color: rgba(0,0,0,1);

                }

                </style>

                </head>

                 

                 

                <body>

                <div id="wrapper">

                  <div id="main"></div>

                    <div id="nav">

                      <ul id="MenuBar1" class="MenuBarHorizontal">

                        <li><a href="#">Home</a>        </li>

                        <li><a href="#">About us</a></li>

                        <li><a href="#">Gallery</a>        </li>

                        <li><a href="#">Contact </a></li>

                        <li><a href="#">Links</a></li>

                      </ul>

                    </div>

                    <div id="footer">CopyRight 2010-2013</div>

                </div>

                <script type="text/javascript">

                var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                </script>

                </body>

                </html>

                • 5. Re: I need some spry help
                  Nancy O. CommunityMVP

                  it's not up on the web yet

                  Upload everything to a TEST folder on your remote server or some other public web space you control. This is the best possible way for us to help you.

                   

                  In the meantime, why are you using position:relative on everything in your CSS?  Positioning is rarely if ever needed in primary layouts. 

                   

                   

                   

                  Nancy O.

                  • 6. Re: I need some spry help
                    mburns1973 Community Member

                    I'm working on it locally. I checked the links they look right.

                     

                     

                     

                    Sent from my Galaxy S®III

                    • 7. Re: I need some spry help
                      mburns1973 Community Member

                      I don't have a server to test on yet. Should I not use postion realtive. I'm still learning. 

                       

                       

                      Sent from my Galaxy S®III

                      • 8. Re: I need some spry help
                        Ben Pleysier CommunityMVP

                        With reference to the menu-bar, there is nothing wrong with the code that you have shown, as long as the paths to the support files (JS and CSS) are correct.

                         

                        As far as position:relative (RP) is concerned, on its own it does nothing. It does count for position:absolute (AP) elements contained within RP container. It merely positions the AP relative to the RP rather than to the browser window.

                         

                        For normal layouts, the default value (static) for positioning is sufficient, hence you can forget position.