Skip navigation
Currently Being Moderated

Spry Menu Question

Jun 17, 2012 7:32 AM

Tags: #cs5 #help #dreamweaver

Hi,

 

Iamhaving issues with my Spry Menu. I am trying to put it above my container withmy pictures and for it to be in the middle of the page and of the same width as everything else however it seems to be at the bottomofthe page cut off

 

Regards,

 

Alex

 

www.newcityexplorer.com

 
Replies
  • Currently Being Moderated
    Jun 17, 2012 9:44 AM   in reply to alexisonsmith3

    I see that you are still working on your site and that you have fixed the menu problem.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 1:25 PM   in reply to alexisonsmith3

    Re-install the original SpryMenuBarHorizontal.css file and make the following changes

     

    ul.MenuBarHorizontal li {

        width: 20%;

        background-color: #CCC;

    }

    ul.MenuBarHorizontal a {

        background-color: #CCC;

        color: #000;

        font-family: "Comic Sans MS", cursive;

        font-weight: bold;

    }

    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {

        background-color: #33C;

        color: #FFF;

    }

    /* 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

    {

        background-color: #000;

        color: #FFF;

    }

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 1:49 PM   in reply to alexisonsmith3

    I do not see that you have made any change at all.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 1:57 PM   in reply to alexisonsmith3

    This is all I see for SpryMenuBarHorizontal.css. Where has the rest gone????

    ul.MenuBarHorizontal li {

        width: 20%;

        background-color: #CCC;

    }

    ul.MenuBarHorizontal a {

        background-color: #CCC;

        color: #000;

        font-family: "Comic Sans MS", cursive;

        font-weight: bold;

    }

    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {

        background-color: #33C;

        color: #FFF;

    }

    /* 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

    {

        background-color: #000;

        color: #FFF;

    }

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2012 6:18 PM   in reply to alexisonsmith3

    I am not a very good teacher, my apologies. We'll take another tack that will make it a bit easier for me.

     

    1. Change line number 13 from

     

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

     

    to

    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHor izontal.css" rel="stylesheet" type="text/css">

    This will ensure that we are talking about the same original SpryMenuBarHorizontal.css.

     

    2. Insert the following lines to your document starting at line 193 where it says </style>, in such a way that </style> gets pushed down to line 211


    ul.MenuBarHorizontal li {
        width: 20%;
        background-color: #CCC;
    }
    ul.MenuBarHorizontal a {
        background-color: #CCC;
        color: #000;
        font-family: "Comic Sans MS", cursive;
        font-weight: bold;
    }
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        background-color: #33C;
        color: #FFF;
    }
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
        background-color: #000;
        color: #FFF;
    }
    

     

    To make sure that the above has worked as intended, line 180 through to line 220 should look like

     

    }
    ul#bottom-nav a {
    display:block;
    text-decoration: none;
    padding: 4px;
    color: #000;
    font-weight: medium
    }
    
    #phone {
    font-weight:bold;
    color: #000;
    }
    ul.MenuBarHorizontal li {
        width: 20%;
        background-color: #CCC;
    }
    ul.MenuBarHorizontal a {
        background-color: #CCC;
        color: #000;
        font-family: "Comic Sans MS", cursive;
        font-weight: bold;
    }
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
        background-color: #33C;
        color: #FFF;
    }
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
        background-color: #000;
        color: #FFF;
    }
    </style>
    </head>
    
    
    <body>
    
    <div id="rightSidebar">
    <h3>This is top of #rightSidebar</h3>
    <div class="box">
    <h3>Box Title</h3>

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 5:25 PM   in reply to alexisonsmith3
    It is now at the top

    That is where you wanted it??? And it works???

     

     

    the drop down menu do not appear over the container.

    That is not because of the menubar. If you look at it in IE you will notice that they do appear. The reason they do not appear in compliant browsers is because you have placed the menu in a container that has the overflow set to hidden. hence anything that overflows, like the dropdown menu items, will be hidden. Give the container a height (eg. 300px) and you will see what I mean.

     

     

    Also the header text is above the drop down menu

    Exactly where you put it as in

     

    <header><div id="Logo"></div></header>

    <section>

      <header><h1>Where will you fly to next?</h1>

    </header></section>

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

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2012 5:52 PM   in reply to alexisonsmith3

    Have a look at line 25

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

    This should read

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

    Gramps

     
    |
    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