Skip navigation
Eric1676
Eric1676 Calculating status...
Currently Being Moderated

Need Horizontal Spry Menu Bar to Left Justify

Aug 2, 2012 1:54 PM

I'm using DW CS6.  Horizontal Spry Menu Bar is in a fluid grid layout div tag. 

 

The horizontal menu bar floated left until I made a CSS change (I think).  It now floats right and I can't figure out how to get it back to float left.  Does anyone know a fix? 

Spry Menu CSS is:

ul.MenuBarHorizontal

{

           margin: 0;

           padding: 0;

          list-style-type: none;

          font-size: 100%;

          cursor: default;

          width: auto;

}

 

and fluid grid layout CSS for div is

 

#menuHorizontal {

          clear: both;

          float: left;

          margin-left: 0;

          display: block;

}

 

The page in progress is at http://www.bedroomandmore.com/1_b_fluidGrid.html

 

Thanks Much!

903 Views   6 Replies   Latest reply: Eric1676, Aug 3, 2012 1:20 PM
 
Replies
  • Al Sparber
    Currently Being Moderated
    1. Al Sparber,
    Aug 2, 2012 2:05 PM   in reply to Eric1676
    Report

    Hi Eric,

     

    You might want to validate your page first:

    http://validator.w3.org/

     

    There are quite a few errors and correcting those will make it much

    easier for someone to help you.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Eric1676
    Currently Being Moderated
    2. Eric1676,
    Aug 2, 2012 4:31 PM   in reply to Al Sparber
    Report

    Thanks Al,

     

    Using the w3 validator I fixed everything except one item, which stated there was a string of code when in fact there was only my closing </html> tag at the bottom of the page.

     

    . . . still can't seem to get the Spry horizontal menu bar to go back to left justify though.

     

    Correction:

     

    I had css for fluid grid layout div for menu bar with a defined width:

     

    #menuHorizontal {

              clear: both;

              float: left;

              margin-left: 0;

              width: 100%;

              display: block;

    }

     

     

    Thanks,


    Eric

     
    |
    Mark as:
  • Al Sparber
    Currently Being Moderated
    3. Al Sparber,
    Aug 2, 2012 5:03 PM   in reply to Eric1676
    Report

    You have an element sitting in the way . In my opinion, the Adobe fluid grid "system" is very poorly thought out. It seems to have been cribbed from various popular articles on responsive design, which my company reviewed and deemed a bit ridiculous. This is all you need to do to make a responsive layout:

     

    http://www.projectseven.com/products/staging/adaptations/

     

    And it has the added benefit of actually displaying in a readable text-size on smartphones. The above page is a prototype for an upcoming product, but feel free to browse the code and learn from it.

     

    The CSS for your page, on the other hand, is way over the top and falling into the abyss. Perhaps someone with more patience and who sees redeeming value in the Adobe grid can help you. My advice would be to ditch it.

     

    I would also add that if you want a truly responsive and usable layout that your horizontal menu should change, at the smallest breakpoints, to a vertical display with each root link spanning its container.

     
    |
    Mark as:
  • Eric1676
    Currently Being Moderated
    4. Eric1676,
    Aug 2, 2012 5:49 PM   in reply to Al Sparber
    Report

    Hi Al,

     

    I don't see an element or anything else that might be sitting in the way to make that space before the menu bar.  Do you see specifically what it is?  I see the menubar floating right in div outline in Dreamweaver when live view is turned off. To display my product properly, I'll need the horizontal menu.  I might end up dropping Spry and just make a more simple fluid nav bar.

     

    I'm pretty impressed with DW fluid Grid, but I guess it is still in development and hasn't fully accounted for Spry and the like.

     

    Your adaptations reponsive or fluid layout looks great.  I'll study the css and see if I can apply it.

     

    Thanks again,


    Eric

     
    |
    Mark as:
  • Al Sparber
    Currently Being Moderated
    5. Al Sparber,
    Aug 2, 2012 6:01 PM   in reply to Eric1676
    Report

    Just a note - if you assign the wrapper you have placed around the menu

    a negative left margin, it will pull over. However, your address stuff

    is in the way. Responsive layouts are easy. Adobe's is simply not good -

    in my opinion. But if you like it, you are certainly entitled to your

    own opinion. I would test your page quite thoroughly in all browsers

    using real browsers instead of BrowserLab and I would also test iPad and

    iPhone and perhaps Androids before signing off on that page

     

    Good luck!

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • Eric1676
    Currently Being Moderated
    6. Eric1676,
    Aug 3, 2012 1:20 PM   in reply to Eric1676
    Report

    I found the problem:  Somehow in boilerplate.css -> ul,ol  -> padding the margin setting was at 40 px.  This shifted my menu ul.

     

    When using DW fluid grid layout, I guess it's important to be thorough in using the CSS control and properties panel to search out any problems.

     

    Best,


    Eric

     
    |
    Mark as:
Actions

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