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:
and fluid grid layout CSS for div is
The page in progress is at http://www.bedroomandmore.com/1_b_fluidGrid.html
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.
I had css for fluid grid layout div for menu bar with a defined width:
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:
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.
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.
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
Al Sparber - PVII
The Finest Dreamweaver Menus | Galleries | Widgets
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.
Europe, Middle East and Africa