CSS Alignment

Streetwise · Post by **Streetwise** » Mon Jan 10, 2005 1:21 pm

http://www.missionmeadows.org/new.php

I've gotten the menu to center fairly well (in FireFox) using CSS and 'auto' for right and left alignment, with a 700px width (same as the banner). However, it's still not quite right. How do I 'stretch' the nav to fit the space and have it perfectly centered?

When the page is looked at with IE6, it's absolutely dismal and very dissapointing. I don't know how you get the submenu items to stay with the placment of the menu?

Any suggestions? Is it possible to have it work with both FireFox and IE?

Thanks!

Dave Anderson

Post by **John** » Mon Jan 10, 2005 2:43 pm

Have you looked at http://milonic.com/cssbasedmenus.php?

Streetwise · Post by **Streetwise** » Tue Jan 11, 2005 12:16 am

Okay, I'm starting to understand it all now. I found the 'howtobuild.txt' file and that's a great help with style objects! Looks like I can add many different parameters...

Also, I got the menu to look good in IE, with the exception of those dang sub-menus...

1) How do I fix the submenu placement in IE?
2) How do I fix the Z layer so that the menu is in front?

All looks great in FireFox...

Thanks

Dave

Post by **John** » Tue Jan 11, 2005 2:57 pm

Z-layers tells me you have the menu in a div. It doesn't like that. Dump the div.

Streetwise · Post by **Streetwise** » Wed Jan 12, 2005 3:43 am

http://www.missionmeadows.org/new.php

Thanks for the help!

I moved the .js files to the body tag and it seems to work better. Here are a few more questions:

IE6:
Nav is not aligned properly, however submenus work great!

FireFox:
Nav is aligned perfectly. If I mess with alignement for IE6, then I will mess things up I'm afraid. Is there a happy medium somewhere?
Secondly, the submenu doesn't seem to work properly like IE does. The background colors are supposed to all be on when the menue expands. Instead, they only come on when moused over. I created a global substyle which seems to work good in IE6

edit: FireFox alignment looks different depending on if I have my browser's bookmarks viewable or not.

Here's my code for the global menu:

with(menuStyle=new mm_style()){
onclass="cssmouseon";
offclass="cssmouseoff";
onbgcolor="transparent";
oncolor="#FFFFFF";
offcolor="#990000";
offbgcolor="transparent";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=0;
separatorcolor="#000000";
separatorsize="1";
padding=5;
overfilter="Fade(duration=0.2);Alpha(opacity=70)";
outfilter="randomdissolve(duration=0.3)";
}

Thanks

Dave Anderson

Post by **Ruth** » Wed Jan 12, 2005 8:17 am

Well, you seem to have the call for the menus in a div at that link... so that may be some of the problem

Ruth

Streetwise · Post by **Streetwise** » Wed Jan 12, 2005 1:04 pm

Yes, I do have the calls in an align=left div so that the submenus would be left justified. However, even without putting the calls into the div tag, it still has alignment issues like I described in my earlier post.

It almost sounds like the CSS approach is more trouble than it's worth? I'm still learning though!

Thanks

Dave

P.S. I think I may have found the issue. I have the banner graphic set to 'center'.

Is it possible to center the nav menu as well? I only see where you put in top and left cordinates in the menu_data.js file...

Thanks!

Streetwise · Post by **Streetwise** » Thu Jan 13, 2005 3:38 am

Solved!

I discovered the issue:

Change this code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=220;
left=101;
alwaysvisible=1;
orientation="horizontal";

to this:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=220;
alwaysvisible=1;
orientation="horizontal";
screenposition="center";

This centers the whole menu nicely in *both* IE, and FireFox.

Thanks All! (more questions to follow, I'm sure...)

Dave