Positioning for layered submenus

ptrautwein · ptrautwein

I've been using Dreamweaver to create hidden layered submenus for a navigation
system.

Everything is looking and working perfectly, except that I'm locked into the
left/top position of the browser.

The position of the submenus seem to be linked to the style "position:
absolute;" with a left and top measurement indicating where it should appear.
That's fine, except I want the content - and menu system - to center itself
depending on the screen resolution of the user and the size of their browser
window.

When the menu bar shifts to accommodate the "center" tags, the submenus
remains in the original position. Is it possible to have my navigation system
float so that the hidden layers follow the main menu?

If so, how do I do it? Thanks.

Murray *TMM* · Murray *TMM*

It depends on how you are using absolute positioning on the page, as to
which method might be best, but in any event, this will work -

Change this -

</head>

to this -

<style type="text/css">

</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -

</div>
</body>

and see if that helps.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"ptrautwein" <webforumsuser@macromedia.com> wrote in message
news:dhka6i$kvt$1@forums.macromedia.com...

> I've been using Dreamweaver to create hidden layered submenus for a
> navigation
> system.
>
> Everything is looking and working perfectly, except that I'm locked into
> the
> left/top position of the browser.
>
> The position of the submenus seem to be linked to the style "position:
> absolute;" with a left and top measurement indicating where it should
> appear.
> That's fine, except I want the content - and menu system - to center
> itself
> depending on the screen resolution of the user and the size of their
> browser
> window.
>
> When the menu bar shifts to accommodate the "center" tags, the submenus
> remains in the original position. Is it possible to have my navigation
> system
> float so that the hidden layers follow the main menu?
>
> If so, how do I do it? Thanks.
>
>

ptrautwein · ptrautwein

Thanks for the help. Worked like a charm.

Murray *TMM* · Murray *TMM*

You're welcome. Now go study up on WHY it worked and you will have learned
something.

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind....

Position:absolute
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned*
element - in the absence of any explicitly positioned parent, this will
default to the <body> tag, which is always positioned *at 0,0 in the browser
viewport.

This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change. Furthe*rmore, the
space in which this element would have appeared were it not positi*oned is
not
preserved on the screen. In other words, absolutely positioned elements
don't take up any space on the page. In fact, they FLOAT over the page.

Position:relative
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the
code on the page, so it will use the spot where it would have* appeared
based
on its position in the code as its zero point reference. If* you then
supply top, right, bottom, or left positions to the style for this *element,
those
values will be used as offsets from its zero point.

This means that it DOES matter where in the code the relativ*ely positioned
element appears, as it will be positioned in that location (*factoring in
the offsets) on the screen. Furthermore, the space where this e*lement
would
have appeared is preserved in the display, and can therefore* affect the
placement of succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are two other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).

You can see a good example of the essential difference between absolute and
relative positioning here -

[url]http://www.great-web-sights.com/g_layersdemo.asp[/url]

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"ptrautwein" <webforumsuser@macromedia.com> wrote in message
news:dhkrj8$bj7$1@forums.macromedia.com...

> Thanks for the help. Worked like a charm.
>

ptrautwein · ptrautwein

Originally posted by: Newsgroup User
You're welcome. Now go study up on WHY it worked and you will have learned
something.

Yes... :)

Originally posted by: Newsgroup User
This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

I'm pretty clear on how each one works, I was just trying to figure out how to
break the "absolute" positioning away from the default x/y coordinates of the
body.

So by adding the "wrapper" div at the beginning and end of the file (in
between the <body> tags) it trumps the default and allows the width of the
#wrapper style to become the new default x/y coordinates - and anything placed
within will align accordingly?

Originally posted by: Newsgroup User
Position:fixed
------------------
A page element with this style will not scroll as the page c?ontent scrolls.
Support for this in elements other than page backgrounds is ?quirky

It seems to work on most browsers except IE on a PC.
Thanks again for the help and tutorial.

Murray *TMM* · Murray *TMM*

> So by adding the "wrapper" div at the beginning and end of the file (in

> between the <body> tags) it trumps the default and allows the width of the
> #wrapper style to become the new default x/y coordinates - and anything
> placed
> within will align accordingly?

I'm not sure you understand, yet.

Because a) absolute positioning is determined based on the reference
coordinates of the nearest positioned contaning block, and because b) the
wrapper div is a relatively positioned yet centering div, therefore all
interior 'layers' will key off the location of the centered wrapper div, no
matter where it centers.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"ptrautwein" <webforumsuser@macromedia.com> wrote in message
news:dhmq1a$pqg$1@forums.macromedia.com...

> Originally posted by: Newsgroup User
> You're welcome. Now go study up on WHY it worked and you will have
> learned
> something.
>
>
> Yes... :)
>
> Originally posted by: Newsgroup User
> This may help you understand positioning a bit -
>
> There are 4 different types of positioning:
> Absolute
> Relative
> Fixed
> Static
>
>
> I'm pretty clear on how each one works, I was just trying to figure out
> how to
> break the "absolute" positioning away from the default x/y coordinates of
> the
> body.
>
> So by adding the "wrapper" div at the beginning and end of the file (in
> between the <body> tags) it trumps the default and allows the width of the
> #wrapper style to become the new default x/y coordinates - and anything
> placed
> within will align accordingly?
>
> Originally posted by: Newsgroup User
> Position:fixed
> ------------------
> A page element with this style will not scroll as the page c?ontent
> scrolls.
> Support for this in elements other than page backgrounds is ?quirky
>
>
> It seems to work on most browsers except IE on a PC.
> Thanks again for the help and tutorial.
>
>
>
>

ptrautwein · ptrautwein

Originally posted by: Newsgroup User

> So by adding the "wrapper" div at the beginning and end of the file (in
> between the <body> tags) it trumps the default and allows the width of the
> #wrapper style to become the new default x/y coordinates - and anything
> placed
> within will align accordingly?

I'm not sure you understand, yet.

Because a) absolute positioning is determined based on the reference
coordinates of the nearest positioned contaning block, and because b) the
wrapper div is a relatively positioned yet centering div, therefore all
interior 'layers' will key off the location of the centered wrapper div, no
matter where it centers.

I get it, "trumping" was the wrong term - the wrapper div was being centered
by the body tag. The x/y coordinates were being drawn from the wrapper not the
body.

I messed around with the width of the wrapper and saw that it centered itself
on the body no matter how large or small I made it. I even added some margins
to the body to see what would happen. The wrapper - and thus my layers - moved
accordingly.

Thanks again.

Murray *TMM* · Murray *TMM*

You're welcome. I think you have it.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"ptrautwein" <webforumsuser@macromedia.com> wrote in message
news:dhna74$fgg$1@forums.macromedia.com...

> Originally posted by: Newsgroup User

> > So by adding the "wrapper" div at the beginning and end of the file (in
> > between the <body> tags) it trumps the default and allows the width of
> > the
> > #wrapper style to become the new default x/y coordinates - and anything
> > placed
> > within will align accordingly?

>
> I'm not sure you understand, yet.
>
> Because a) absolute positioning is determined based on the reference
> coordinates of the nearest positioned contaning block, and because b) the
> wrapper div is a relatively positioned yet centering div, therefore all
> interior 'layers' will key off the location of the centered wrapper div,
> no
> matter where it centers.
>
>
> I get it, "trumping" was the wrong term - the wrapper div was being
> centered
> by the body tag. The x/y coordinates were being drawn from the wrapper not
> the
> body.
>
> I messed around with the width of the wrapper and saw that it centered
> itself
> on the body no matter how large or small I made it. I even added some
> margins
> to the body to see what would happen. The wrapper - and thus my layers -
> moved
> accordingly.
>
> Thanks again.
>
>

Positioning for layered submenus

Thread Tools

Display

Positioning for layered submenus

Similar Questions and Discussions

spry submenus hidden behind image

spry menubar submenus appear behind everything in ie6

Submenus

Submenus images going white after publishing

please help - submenus

Re: Positioning for layered submenus

Re: Positioning for layered submenus

Re: Positioning for layered submenus

Re: Positioning for layered submenus

Re: Positioning for layered submenus

Re: Positioning for layered submenus

Re: Positioning for layered submenus

Posting Permissions