PDA

View Full Version : dropdown menus are messy?


Johnny Mac
09-20-2009, 11:16 AM
http://www.johnnymac.tv/my67/

Hello from newbieland...

I am rewriting an old FP site in DW. My submenus appear as 2 columns and I only want one :(

What rule controls the columns in a submenu? Is it IE related? How do I fix this?

The beta site link is above, thanks in advance!

JM

DWcourse
09-20-2009, 04:10 PM
Sorry, duplicate post. Please delete.

DWcourse
09-20-2009, 04:11 PM
Not sure I understand the question but your menus are unordered lists. A submenus is a list nested within the top level list. A sub-submenu (the second column) is a within a submenu list:

<ul>
<li>Top level
<ul>
<li>Submenu
<ul>
<li>Sub-Submenu</li>
</ul>
</li>
</ul>
</li>
<li>Top level</li>
</ul>

So, to avoid the second column of submenus, only nest your lists one-deep.

<ul>
<li>Top level
<ul>
<li>Submenu</li>
</ul>
</li>
<li>Top level</li>
</ul>

Johnny Mac
09-20-2009, 04:54 PM
I'm sorry, I'm lost and do think I understand your answer, but not sure how to apply it in my situation?

It seems all my submenus get split into 2 columns which over-writes/blocks other submenu choices?

I would just like all choices to drop down in a single column, and their flyout choices appear next to that.

I used the Property inspector (I hope that is the right term) at the bottom of the page to WYSIWYG building the menu structure. But since then I can't find the rule to stop the 2 column problem I've created.

thansk again.. your input is greatly appreciated.. forgive me if I still don't understand the answer.

coloeagle
09-20-2009, 05:18 PM
On a side note here. You have the menu inside an h1 tag.
Remove the h tags.

DWcourse
09-20-2009, 05:32 PM
Sorry, I missed your point. It's an IE thing and I was on a Mac.

Don't see an immediate cause but this might have something to do with it:

/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 6
.em;
float: none;
list-style-type: none;
}


The ".em" should be on the same line as the "6".

Still checking…

DWcourse
09-20-2009, 05:35 PM
Actually, that may be it. You submenus are 8.2em wide. If the submenu li rule is "broken" then submenu li width would be picked up from the top level li (4em) and so you'd get two columns of links.

Just a case of FireFox and Safari being more forgiving than IE.

Johnny Mac
09-20-2009, 09:12 PM
thank you DWcourse.. I would of never found that.. I only opened the sprymenubarhorizontial.css once a few weeks ago following a tutorial on the adobe website and didn't realize I changed anything there...

Coloeagle... I thought the sprymenu needed to be in the header so it appears on everypage.. do I just delete the h1 tag?

I tried to delete the accompying tag and move the </ul> "end of header tag" but everything went crazy, so I changed it back?

thanks

DWcourse
09-20-2009, 09:46 PM
Coloeagle... I thought the sprymenu needed to be in the header so it appears on everypage.. do I just delete the h1 tag?

I tried to delete the accompying tag and move the </ul> "end of header tag" but everything went crazy, so I changed it back?

Actually the call to the JS file and the CSS file (or the CSS itself) should be in the <head> of the document. Not within a header tag such as h1.

Delete the <h1> tag before the menu and the closing </h1> tag after the menu here:

</ul> <!-- end #header -->
</h1>

Don't move the closing </ul> tag

Johnny Mac
09-21-2009, 12:25 PM
thanks again, but now when I do that, it packs my menu bar into half the screen. I can't remember exactly how I spaced the menu choices apart, but I wanted to center the bar under the banner image and failed.

And I thought the template was the master design that updates all pages? However, the above mention changes didn't take place across all pages on the remote server? I uploaded the template, but also had to upload the index page again to see the change?

DWcourse
09-21-2009, 01:27 PM
The template is linked to files create based upon it. When you update the template and save, DW offers to update the pages based upon it. If you say yeas the pages update. You then have to upload all the pages that changed. It's not required to upload the template.

Johnny Mac
09-21-2009, 02:14 PM
ahh... uploading the changed pages required.. got it... the template actually does nothing on the remote server?

and so which rule centers the nav bar? I only find left, right, inherit and none?

thanks for everything.. with your help I've accomplished more in the past 24hrs than all of last week!

DWcourse
09-21-2009, 03:00 PM
Since your ul.MenuBarHorizontal li rule contains float:right (it has to float right or left) everything aligns to the right of the main ul which is 968 pixels wide (the same as your layout).

If you set the left and right margins of ul.MenuBarHorizontal to auto, the width to auto and get rid of the absolute positioning that might do it:

ul.MenuBarHorizontal
{
margin: 20;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
Since your ul.MenuBarHorizontal li rule contains float:right (it has to float right or left) everything aligns to the right of the main ul which is 968 pixels wide (the same as your layout).

If you set the left and right margins of ul.MenuBarHorizontal to auto, the width to auto and get rid of the absolute positioning that might do it:

ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
margin-right: auto;
margin-left: auto;
}

The width: auto should base the overall width of the menu on the combined width of the top-level list items.

The left and right margins set to auto, will center the ul in its container (div id=container in your case).

In a dreamweaver Spry menubar NEVER add or edit any position property unless you seriously know what you're doing.