Dreamweaver - vertical flyout menu and left justification

Author

vertical flyout menu and left justification

pleaseno

2004-08-23, 7:16 pm

I am attempting to create a vertical flyout menu on my own. I have it
working well, except when I resize my browser, then the positioning
gets messed up.

For the vertical flyouts to work properly does the site have to be
left justified? My site is centered and I am trying to determine if I
need to change the design if I want to go with the flyouts.

Thanks.

Osgood

2004-08-23, 7:16 pm

pleaseno wrote:
> I am attempting to create a vertical flyout menu on my own. I have it
> working well, except when I resize my browser, then the positioning
> gets messed up.
>
> For the vertical flyouts to work properly does the site have to be
> left justified? My site is centered and I am trying to determine if I
> need to change the design if I want to go with the flyouts.
>
> Thanks.

Go here, www.projectseven.com and look at the tutorials for positioned
menus.

'Snap layers' is the extention that you need, its free to download from
the extentions page on that site.

pleaseno

2004-08-23, 7:16 pm

Thanks Osgood.

I am attempting to do this without the use of extensions. If there a
place you can recommend where I could see the code for this working
properly, specically the part where I want the postion to stay.

Thanks.

On Mon, 23 Aug 2004 17:19:26 +0100, Osgood
<notavailable@atthisaddress.com> wrote:

>pleaseno wrote:
>
>Go here, www.projectseven.com and look at the tutorials for positioned
>menus.
>
>'Snap layers' is the extention that you need, its free to download from
>the extentions page on that site.

Murray *TMM*

2004-08-23, 7:16 pm

If you want it to work without using extensions, then you will have to use
CSS.

Here is a good demonstration -

http://www.roast-horse.com/tutorial...tent/index.html

And here is some code -

(inline styles used for clarity)

STYLESHEET -
body { text-align:center; } /* for IE5/IE5.5 */
#wrapper { text-align:left; }

BODY -
<div id="wrapper" style="width:760px; top:0; margin:0 auto;
position:relative;">
<div id="layer1" style="width:200px; top: 25px; left:140px;
position:absolute;">blah</div>
<div id="layer2" style="width:180px; top: 136px; left:23px;
position:absolute;">blah</div>
</div>

Try that - an outer relatively positioned division with a width and auto
left and right margins. All interior AP divisions will be centered, yet
retain the
same relative positioning. These would be your menu and its submenus.

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

"pleaseno" <pleasenoemail@ohno.com> wrote in message
news:412a1e04.8839531@forums.macromedia.com...
> Thanks Osgood.
>
> I am attempting to do this without the use of extensions. If there a
> place you can recommend where I could see the code for this working
> properly, specically the part where I want the postion to stay.
>
> Thanks.
>
>
> On Mon, 23 Aug 2004 17:19:26 +0100, Osgood
> <notavailable@atthisaddress.com> wrote:
>
>

Osgood

2004-08-23, 7:16 pm

pleaseno wrote:

> Thanks Osgood.
>
> I am attempting to do this without the use of extensions. If there a
> place you can recommend where I could see the code for this working
> properly, specically the part where I want the postion to stay.

I dont think there is a specific page which will show you how this is
achieved when using flyout menus. Murray has given you a general page
which should help you along.

What you will have to do is house your text links in their own <divs>
which have a positioning of relative. Within these relative <divs> you
can insert absolutely position <divs> or other relatively positioned <divs>

The nested <divs>, either absolutely positioned or relatively positioned
will move when the main structure of the page moves in accordance with
the widening or narrowing of the browser window.

You can insert relatively positioned <divs> inside of table cells if you
are using a table construction to bulit the main framework of your page.

Osgood

2004-08-23, 7:16 pm

Osgood wrote:

> I dont think there is a specific page which will show you how this is
> achieved when using flyout menus.

Cut the code below, paste into a new DW document. It might give you some
idea of how this works.

It still uses the auto and auto hide layers extentions from PV11 but no
snapping.

Im not sure you will be able to get something to work cross browser if
you are just trying to use pure css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
body {
font-family: arial, verdana, helvetica;
font-size: 12px;
color: #fff;
}
a {
display:block;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
padding: 4px 0 4px 6px;
}
#navholder {
width: 150px;
margin: 0 auto;
}
#linkone, #linktwo, #linkthree, #linkfour {
background-color: #000;
color: #fff;
position: relative;
}
#subone, #subtwo, #subthree, #subfour {
background-color: #ab1;
color: #fff;
position: absolute;
top: 0;
left: 150px;
width: 150px;
visibility: hidden;
padding: 4px 0 4px 6px;
}
</style>
<script language="JavaScript" type="text/JavaScript">

</script>

</head>

<body onLoad="P7_autoHide('subone','subtwo','subthree','subfour')">
<div id="navholder">
<div id="linkone"><a href="java script:;"
onMouseOver="P7_autoLayers(0,'subone')">Link One</a>
<div id="subone">Go to page 1</div>
</div>
<div id="linktwo"><a href="java script:;"
onMouseOver="P7_autoLayers(0,'subtwo')">Link Two</a><div id="subtwo">Go
to page 2</div>
</div>
<div id="linkthree"><a href="java script:;"
onMouseOver="P7_autoLayers(0,'subthree')">Link Three</a><div
id="subthree">Go to page 3</div>
</div>
<div id="linkfour"><a href="java script:;"
onMouseOver="P7_autoLayers(0,'subfour')">Link Four</a><div
id="subfour">Go to page 4</div>
</div>
</div>
</body>
</html>

Osgood

2004-08-23, 7:16 pm

Not sure this post got through last time (I'm getting the 'too many
files open message', which usually means the MM server is on the blink)

I'll try again.

ooooops forgot about IE.

For PC IE you need to add text-align: center; to the 'body' css style
and text-align: left; to the 'navholder' style, other wise the nav will
sit over to the left of the page and go absolutely nowhere.

pleaseno

2004-08-23, 7:16 pm

Thanks a lot guys. I will give this all a try.

On Mon, 23 Aug 2004 19:16:50 +0100, Osgood
<notavailable@atthisaddress.com> wrote:

>Not sure this post got through last time (I'm getting the 'too many
>files open message', which usually means the MM server is on the blink)
>
>I'll try again.
>
>
>ooooops forgot about IE.
>
>For PC IE you need to add text-align: center; to the 'body' css style
>and text-align: left; to the 'navholder' style, other wise the nav will
>sit over to the left of the page and go absolutely nowhere.

Osgood

2004-08-24, 7:14 am

ooooops forgot about IE.

For PC IE you need to add text-align: center; to the 'body' css style
and text-align: left; to the 'navholder' style, other wise the nav will
sit over to the left of the page and go absolutely nowhere.

Osgood

2004-08-24, 7:14 am