Having difficulties centering menu.

Poster: vikenk
Dated: Wednesday February 1 2006 - 18:02:22 GMT

Hello,

I'm trying to go frameless on one of my sites, but I'm having trouble centering the menu the way I want. Here's how it should look:

http://www.sayatnova.com

Notice how the menu is centered above the content? That's because the page that contains the menu is in a frame.

Here's the frameless version:

http://www.sayatnova.com/test_site/home.htm

Basically, I added a body left-margin and absolutlely positioned the logo, etc on the left. My problem is that I can't get the menu centered properly, and I'm having difficulties with Firefox vs IE.

1. Using screenposition="center"; doesn't work, because the menu ignores the body margin of 255px. Otherwise, this would have worked perfectly.

2. Using menualign="center"; seems to work, but differently in each browser.

3. You can see that in IE the menu acknowledges the body margin, but is left justified and is only as wide as it needs to be.

4. In FF, the menu is centered across the content box, but spans the entire width of the remaining screen and leaves "dead space" at each end of the menu, with all the menu items squished in the middle.

5. Ideally, I'd like to center it across right side of the page (it should look like the current site). However, it needs to be either A) centered, but only as wide as it needs to be, or B) Centered across the entire right side, but the menu items should be evenly distributed and no "dead space" at the ends.

The easy way out would be to put th menu in a table cell at the top of the page, but I want the menu to "followscroll", so putting it in a table is not really an option.

I'm afraid to see how it looks in Opera. :>)

Any suggestions?

Poster: Migru
Dated: Wednesday February 1 2006 - 19:48:22 GMT

Hi Vikenk,

did you try to specify a "menuwidth" property ? Another option would be to set individual item widths settings in each aI e.g. aI="text_...;itemwidth=107px;url=.......;");

Michael

Poster: vikenk
Dated: Wednesday February 1 2006 - 20:03:33 GMT

Michael,

Where have you been? I haven't "seen" you around lately :>)

Well, I tried menuwidth=100%, but that gave the same effect as before: menu stretches across, but leaves dead space at the ends and menu items squished in the middle.

Setting the menu items to 12.5% (100% / 8 menu items=12.5%) didn't do it, either. The menu items were all the same size and some of the text wrapped within the cell. I don't want to fix the menu size since I want the menu to expand at larger resolutions. If I fix the menu item width to a pixel size, it won't expand. See this example: http://www.sayatnova.com/home.htm This is the original (current) home page out of the its frame-page. View at different resolutions and see how the menu expands at 1280x1024, and shrinks down to 800x600 for instance.

I've been at this for some time and can't seem to find the answer yet.

Poster: Migru
Dated: Wednesday February 1 2006 - 23:39:44 GMT

Viken wrote



Well, Viken , Opera does not like this menu. The sub menus do not at all appear where they should be !!! This just for your information.

The reason might be your inline css code in the body tag. Try to replace it by standard settings or take the inline code into style settings in the head or in css files. This is just an idea. I have not tested that.

Michael

Poster: vikenk
Dated: Thursday February 2 2006 - 0:20:28 GMT



Yes, I know :>( Ruth and I discovered this when I first started using the menu.

For some reason, Opera applies the body margin to the submenus. Since I have a left-margin of 225px, Opera is offsetting the submenus by the same amount.

The trick is to use padding instead of margin to get the menu to look right in Opera. But, I can't always avoid using margins. I'm not sure if this is a menu bug or an Opera bug.

Thanks for letting me know, though.

Poster: Ruth
Dated: Thursday February 2 2006 - 1:02:35 GMT

Hi,

Dang, I totally misread what you asked. Skipping lines doesn't help you comprehend the problem

Did you get this fixed?

For information, menualign does not align the 'menu' it aligns the menu items inside the menu, it was designed for 100% menus to align the menu in that 100% span. IE seems to accept it to align the items even if the 100% isn't specified, some browsers won't that is probably the difference you see uing it. Screenposition sets the position of the menu on the page using keywords, top, left, center, bottom, middle or top left, top right etc.

Offset will offset the menu from whatever position you have, it can be used with top or left. Screenposition="center"; left="offset=255"; will center the menu and then shift it 255 pixels more toward the right. You can use negative numbers if you ever need to shift the menu more toward the left from the center position.

Hope that made more sense, and I think it does actually relate to what you asked. Geesh, have another drink, Ruth

Ruth

Poster: vikenk
Dated: Thursday February 2 2006 - 2:52:58 GMT

Nope, still doesn't work. A funny thing happens when I set left="offset=255px";

Take a look http://www.sayatnova.com/test_site/home.htm

See how the menu looks in IE? It stretches beyond the page borders. Here are the relavant settings:


This must have something to do with my use of negative margins in the <div> structure. I'll have rewrite the code and test later. I don't have time now.

Poster: Ruth
Dated: Thursday February 2 2006 - 4:24:44 GMT

Hi Vikenk,

This is truly not my night, and it's a good thing I'm not doing a set of blueprints.

Let's think about this, well let me think about it Your left div is going to be always 255 and the left position always 5, so that's 260 from the left side, right? If that is true, then have you tried just doing left=260; for the menu position?
Or is it that the #container is going to shift away from that left container when the resolution is higher? I'm at 800x600.

Ruth

Poster: vikenk
Dated: Thursday February 2 2006 - 4:35:31 GMT

Well, your resolution will make a difference. The site is designed around a 1024 x768 resolution. The liquid design of the container mean that you should see the entire div in your window. However, them menu will still stretch the page width at 800x600 resolution. That's something I chose to live with.

If you can, set your res to 1024x768 (just for testing purposes) to see the full effect of what's happening. For some reason, when I set the left offset to 255px, the menu seems to offset by *twice* that much. The left edge of the menu starts at the middle of the container div.

Weird. Im really beginning to wonder if it has to do with the use of negative margins. I'll have to recode tomorrow. I just got home from my night job and I'm tired. It's 11:30pm here in the eastern USA. :>)

Just curious Ruth: What part of the world are you in? I know that John is somewhere in Arizona, USA but I have no clue what time-zone you hail from :>)

With the internet, the world in truly a local community :>)

Poster: vikenk
Dated: Thursday February 2 2006 - 4:45:10 GMT


Can left=260; be used in conjuntion with screenposition? I thought that if I used screenposition I had to use an offset value for top/left instead of the fixed top/left positions.

Poster: Ruth
Dated: Thursday February 2 2006 - 4:53:30 GMT

Hi Vikenk,

I'm in North Carolina right now, but am moving sometime in the next couple of weeks it looks like. I'm going back to CA, though it's a lot too liberal for me, but still I lived there 30 years and I'm used to the weather, the restuarants and the food in the grocery stores. It's much too humid here, though I was born in MI. Still different humidity here, much heavier.

Anyway, the reason for the shift going to far when using screenposition="center" is because when it's centered the left offset shouldn't be 255 because part of the menu is already beyond the left edge. After setting it that way, the 255 goes from the left edge of the menu, not the left side of the page.

I'll try doing higher resolution, hopefully it doesn't rearrange my desktop files all over the place.

Ruth

Poster: Ruth
Dated: Thursday February 2 2006 - 6:41:28 GMT

Hi Vikenk,

OK, I've been experimenting. I can't solve this Usual I can find some solution/workaround but not this time.

This is what's happening.
All browsers are reading menuwidth=100%; itemwidth="100%"; menualign="center, and are accepting the body tag style coding for the left-margin:255px;

But, IE reads that margin and subtracts it from the page width [which as far I can figure it should since items are not supposed to go into the margin] and then makes the menu 100% of what the real width is without that 255 margin; the other browsers seem to be reading and accepting that margin, putting the menu at that 255 starting point, but then they seem to include that margin in the page width so the menu expands 255px beyond the right margin.

Maybe from that you can figure something out. This is one thing I tried.

Shifting the left div down so the top was 35px, creating a second div 35px high using all the rest of the code you have for the container but border being 1px and red, then removing the border from the main menu, adding a new 1st item with a transparent image put in with html coding Then setting the menuwidth to 100% and itemwidth 100%, menualign="center"; hoping that would shift everything over so that the home item would be over the container div. That was a real mess But, maybe you can figure out some way to do that. I was hoping that way that div border would look like it went around the menu.

Anyway, sorry for the long explanation, but perhaps it will give you some ideas.

Ruth

Poster: vikenk
Dated: Thursday February 2 2006 - 18:49:02 GMT

Thanks for experimenting Ruth. I really don't think that my frameless design is going to work the way I want with the Milonic menu. I think that if I really want to go frameless, I have to make some concesssions or some changes.

It doesn't look like I'll get the menu to behave the way I want in all brower platforms. I guess these are my options:

1. Use an iframe instead of a regular frames page. I wanted to avoid this. I want to validate to HTML strict and an iframe requires HTML Transitional.

2. Just allow the menu to float dead center. It doesn't look good that way, though.

3. Place the menu in a div or table at the top. I didn't want to do that because I want to be able to use followscroll.

Either way, it looks like I have to concede on a design issue. Before I do that, I'm going to try to re-code and not use the negative margins. I'll see if that has any effect. Actually, I can do that now by just using a blak page with only a body margin in it and find out what happens. Hmmmmm....I'll have to go and try that!