relative positioning for different browser sizes / screen resolutions

[TB]

Hi everybody:

I have just created a menu structure using layers and behavior properties,
but I have one problem. When the page (please check out
www.lacanela.com/menu.htm) is open in a 800x600-sized browser window (the
target screen resolution of my web) the menu items appear where intended.
But how do I ensure that the menu items appear in the same spot if another
screen resolution is used (short of writing different scripts for different
screen sizes)? Currently, when resizing the browser to say, 1024x768, the
menu items are displaced, because all the positioning is absolute.

Any suggestions would be most welcome. Thanks

TB

 

[Jim Buyens]

Howdy.

If you're going to center the main menu bar, it's
inevitably going to move left or right as you change the
size of the browser window.

If you position the menu leafs absolutely, they *won't*
move left or right in sync, and you get the behavior
you're seeing. The alternatives are:

1. Don't center the main menu bar. Keep it positioned at
the top left corner.
2. Don't use FrontPage behaviors. Instead, write your own
JavaScript code that reads the position of the main
menu item and positions the leaf accordingly.
3. Use a third-party menu generator.

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------

 

[TB]

Thanks for your reply. My reply between the lines
Thanks again for any suggestions.

Howdy.

If you're going to center the main menu bar, it's
inevitably going to move left or right as you change the
size of the browser window.

If you position the menu leafs absolutely, they *won't*
move left or right in sync, and you get the behavior
you're seeing. The alternatives are:

1. Don't center the main menu bar. Keep it positioned at
the top left corner.

Of course that is always a possibility, but at a design trade-off

2. Don't use FrontPage behaviors. Instead, write your own
JavaScript code that reads the position of the main
menu item and positions the leaf accordingly.

You are right. The problem is that I don't know how to write my own code
from scratch. The nearest I come to that is tweaking already generated code.
BTW, I thought that the FP behavior function actually generated Javascript
code.

3. Use a third-party menu generator.

That is always a possibility, but you see, the reason for going through all
that trouble is actually that I need a specific (graphic) texture of my
drop-down menu - something which is not possible with the generators.. My
menu is therefore composed of small GIF "bricks".

 

[Jon Spivey]

Why would you not position the sub menus relative to their triggers? Eg
<div style="position:relative.....">
menu trigger - image or whatever
<div style="position:absolute;top:10px;left:0....>
sub menu
</div>
</div>

This way the sub menus will move "in sync" with the menu triggers. Of course
it would be possible to write script to keep the sub menus in sync with
their triggers but why go to the trouble - position:relative fills this need
very nicely without needing any script.

 

[Jim Buyens]

Ever since NN4, I've never trusted positioning of one DIV within another.

Do you feel this is fixed in *all* other browsers, now?

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------

 

[Jon Spivey]

NN4 did have a very specific bug with nesting positioned divs. For example
something like this would probably fail in NN4
<div style="position:absolute....
stuff....
<div style="position:absolute....
more stuff
</div>
</div>

The fix is very easy though - just move the nested div styles up to the
stylesheet. To get a better understanding of this issue look at the code on
one of the examples of my scroller behaviors
http://www.roksteady.net/scroll/examples/news/index.html
this technique makes use of nested divs and works just fine in NN4 with the
fix I've outlined. Any modern browser will handle nested divs just fine. Of
course to get true NN4 support one would need a little script to redraw the
page if the browser is resized (another NN4 bug) but I couldn't be bothered
to do it

Position relative will work without issue in any browser you're likely to
encounter. The point is applying position:relative to a div allows a nested
div to be positioned within it's parent and is a very easy answer to the
question the guy originally asked. Using a script to position the divs would
certainly be doable but would be far from trivial.

 

[Jim Buyens]

Using a script to position the divs would certainly

be doable but would be far from trivial.

No kidding. I've tried it.

A complicating factor, for me, is that I'm fascinated with DHTML menus
that don't use any graphics. They just use css text rollovers. Why?
because then I don't have to tediously create (and download) 25 or 50
little graphics for the menu options.

Of course, with text, you never know in advance how wide the menu
options are going to be, and so you pretty much have to script the
menu leaf positions. And that probably clouds my mindset.

Acutally, it would be interesting to use css expressions for setting
the menu leaf positions. I just haven't taken the time to play with
that.

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------