Skip navigation
Dano4193
Currently Being Moderated

How to fix my horizontal spry menu...

Jul 11, 2012 7:44 PM

Hi all, and so sorry to have to post again as my first post has never had any responses except the initial ones. I want to do all the work myself but just need some coaching on what might be wrong..my site is wwwDOTselfdefenseproshopDOTcom.


Again any help or coaching is greatly appreciated...thank you..Dan

 
Replies
  • Currently Being Moderated
    Jul 11, 2012 10:06 PM   in reply to Dano4193

    The SpryMenuBar is contained within a div called sidebar1. The width of the sidebar has been set to 150px as in

     

    .thrColFixHdr #sidebar1 {

       float: left;

       width: 150px;

       background-color: #ebebeb;

       background-image: none;

       background-repeat: repeat;

       background-attachment: scroll;

       background-position: 0% 0%;

       background-clip: border-box;

       background-origin: padding-box;

       background-size: auto auto;

       padding-top: 15px;

       padding-right: 15px;

       padding-bottom: 15px;

       padding-left: 15px;

    }

    Simply place the menubar outside of the sidebar.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2012 3:00 PM   in reply to Dano4193

    Start by validating your code and fix the signficant errors in your menu code. 

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.selfdefen seproshop.com%2F

     

    Code is very confused towards the bottom of Sidebar1 and you're missing a closing </li> tag. 

    <h1>, <p>, <div> and <br> tags don't belong in your list menus.  So you can delete them in Code View.

     

    </ul>

        <h1 align="center"><br />

        </h1>

    <h1 align="left"> </h1>

        <ul>

          <div align="center"></div>

        </ul>

        <h1 align="left"> </h1>

        <p><br />

          <br />

        </p>

      </div>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2012 3:28 PM   in reply to Dano4193

    If you're on the web forum you'll see I used a strikethrough on the code you can delete.  Does that not help you?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 14, 2012 4:01 PM   in reply to Dano4193

    A lot of those validation errors are citing MM scripts and missing alt attributes on images.  Don't worry about them. 

     

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 15, 2012 11:50 AM   in reply to Dano4193

    Open your Template.dwt file.  Bad code in red, code changes in green.

     

    On line 183 - 186 you have duplicate <h1> tags.  Remove them.

     

    <h1 align="left">

    <h1 align="left"><a href="http://selfdefenseproshop.com/products.php?cat=53">Safety Kits</a> <br />

    </h1>

        </h1>

     

    On line 198 - 200, you have some more duplicate <h1> tags.  Remove them.

     

    <h1 align="left">

          <h1 align="left"><a href="http://selfdefenseproshop.com/products.php?cat=54">Diversion Safes</a></h1>

        </h1>

     

    On line 215, you have a duplicate <form> tag.  Remove it.

     

    <form method="post" action="mail.php">

     

    Line 217, you have this:

     

    <p><FONT style="BACKGROUND-COLOR: yellow">10 free informative reports on personal safety for women. Fill out your first name and email address and hit submit</FONT>. </p>

     

    Which should be expressed like this:

     

    <p style="background-color: #FF6">10 free informative reports on personal safety for women. Fill out your first name and email address and hit submit.</p>

     

    Don't worry about the MMcode for your rollovers.

     

    Nancy O.

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    Jul 15, 2012 5:08 PM   in reply to Dano4193

    The ALT attribute is required as you can see here http://www.w3schools.com/tags/tag_img.asp. If you have a look at the images used in the menu bar, you will see that you have used the ALT attribute albeit that they are empty.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 15, 2012 5:47 PM   in reply to Dano4193

    Just pretend that I am Nancy, hard to do since we are the complete opposites, she's knowledgable and nice.

     

    1. Place your cursor at the end of line #108 (</div>) and press enter. This will create a blank line #109

    2. Insert a SpryMenuBar horizontal.

     

    That's it!

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 15, 2012 6:21 PM   in reply to Dano4193

    Funny, this is what you had originally, except that you inserted a horizontal menubar instead of a vertical menubar..

     

    Forget what I said in my last reply and go to line #111 (just under <div id="sidebar1">) and insert a SpryMenuBar vertical.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 15, 2012 6:30 PM   in reply to Dano4193

    Please update the online page so that I can have a look.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2012 4:35 AM   in reply to Dano4193

    The first few lines of Columns.css look like

    @charset "utf-8";

    /* CSS Document */

    #sidebar1 h1 {

    font-size: 95%;

    font-weight: bold;

    }

    #sidebar1 ul {

    list-style-type: none;

    margin: 0px;

    padding: 0px;

    font-size: 85%;

    }

    Remove the highlighted.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2012 7:42 PM   in reply to Dano4193

    Lines 99 to 103 of Columns.css shows

    .thrColFixHdr #container #sidebar1 ul {

        list-style-type: none;

        margin: 0px;

        padding: 0px;

    }

    which I did not see before, my apologies.

     

    Just remove all of those lines.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 16, 2012 11:00 PM   in reply to Dano4193

    1-how can I center the menu like I have circled in red in my mocked up  picture below

    In SpryMenuBarVertical.css, change the value of line 16 to auto as in

    ul.MenuBarVertical

    {

        margin: auto;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        cursor: default;

        width: 8em;

    }

    2-can I color up the text at all on a Spry menu like this? I tried but it didn't seem to take.

    In the same CSS file, starting at line 81, change the highlighted values

    /* Menu items are a light gray block with padding and no text decoration */

    ul.MenuBarVertical a

    {

        display: block;

        cursor: pointer;

        background-color: #EEE;

        padding: 0.5em 0.75em;

        color: #333;

        text-decoration: none;

    }

    /* Menu items that have mouse over or focus have a blue background and white text */

    ul.MenuBarVertical a:hover, ul.MenuBarVertical 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.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

    {

        background-color: #33C;

        color: #FFF;

    }

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 4:57 PM   in reply to Dano4193

    The CSS has been heavily commented to help with these issues. Have a look at the followiing

    /********************************************************************* **********

     

    LAYOUT INFORMATION: describes box model, positioning, z-order

     

    ********************************************************************* **********/

     

    /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */

    ul.MenuBarVertical

    {

        margin: 0;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        cursor: default;

        width: 8em;

    }

    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

    ul.MenuBarActive

    {

        z-index: 1000;

    }

    /* Menu item containers, position children relative to this container and are same fixed width as parent */

    ul.MenuBarVertical li

    {

        margin: 0;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: relative;

        text-align: left;

        cursor: pointer;

        width: 8em;

    }

    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

    ul.MenuBarVertical ul

    {

        margin: -5% 0 0 95%;

        padding: 0;

        list-style-type: none;

        font-size: 100%;

        position: absolute;

        z-index: 1020;

        cursor: default;

        width: 8.2em;

        left: -1000em;

        top: 0;

    }

    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

    ul.MenuBarVertical ul.MenuBarSubmenuVisible

    {

        left: 0;

    }

    /* Menu item containers are same fixed width as parent */

    ul.MenuBarVertical ul li

    {

        width: 8.2em;

    }

    The reason why the main menu items have a 0.2em width difference is because of the borders in the sub menu items.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 7:06 PM   in reply to Dano4193

    Are you having the problem as I am?  While using IE8, click on the Boys Results button and rapidly move up and down with your cursor.

     

    http://gerberanalytics.com/tennis/tennis_header_test.php

     

    I called this error into Adobe Support today. They were not aware of it and they have not gotten back to me.

     

    I'll contact them tomorrow to see if they have made any progress.

     

    Scott

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 12:24 AM   in reply to Scott - Columbus, OH

    Have a look here and, after fixing the problems, start a new topic stating the remaining problem(s).

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 12:32 AM   in reply to Dano4193

    You are not using the latest Spry files

    The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 6:57 AM   in reply to Ben Pleysier

    Hi Altruistic.  I posted a question yesterday about why my drop-down menu won't work.  Is there any chance you would have time to help me out?  I'd really appreciate any help you can offer.  I'm using Dreamweaver CS5.5 on a Windows (Vista) computer, and the web site is; http://www.cglcontracting.com/index.html.  Thanks very much in advance for any help.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 7:26 AM   in reply to dixey-rose

    I will reply to your original post in the morning (Aussi time). Very complicated with the changes that you have made to SpryMenuBarHorizontal.css

     

    Loved BC, my favourite after Down Under.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 6:03 PM   in reply to Ben Pleysier

    Hi Gramps,

     

    Thanks very much for your offer to help.  Nice to hear that you've been in BC - where did you visit?  I've not been to Australia, but would like to visit some day.

     
    |
    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