Skip navigation
Currently Being Moderated

I need some spry help

Apr 6, 2013 2:00 PM

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>

 
Replies
  • Currently Being Moderated
    Apr 6, 2013 2:02 PM   in reply to mburns1973

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 2:11 PM   in reply to mburns1973

    What's the URL to your page?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 3:43 PM   in reply to mburns1973

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2013 7:26 PM   in reply to mburns1973

    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.

     
    |
    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