positioning my drop-down menu

Lauren · Nov 17, 2005

I am having difficulty positioning my drop-down menu so that it's position
does not change when viewed at a lower resolution.

I got the code from this page
http://msdn.microsoft.com/library/d...ta/html/OfficeFrontPageCreateDropDownMenu.asp

Here is my Drop-Down Menu File:
----------------------------------------------------------------------------------
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Drop-Down Menu</title>
<HEAD>





<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</HEAD>
</head>

<body>
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1" style="width: 150px; height:
18px">
<b><font face="Arial" size="2" color="#F0F8FF">Westar Online
Home</font></b></DIV>
<DIV Id="Bar2" class="Bar" menu="menu2" style="width: 100px; height:
18px">
<b><font face="Arial" size="2" color="#F0F8FF">HR &
Staffing</font></b></DIV>
<DIV Id="Bar3" class="Bar" menu="menu3" style="width: 100px; height:
18px">
<b><font face="Arial" size="2" color="#F0F8FF">Contracts</font></b></DIV>

</DIV>

<div Id="menu1" class="menu" >
<div Id="menuItem1_3" class="menuItem" title="Home"
cmd="http://199.217.163.45/intranet/index.asp"><font face="Arial" size="2"
color="#FFFFFF">Back to home</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" menu="menu4">Staffing &
Development</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem">Bid Approval Form</div>
<div Id="menuItem3_2" class="menuItem">Proprietary Information</div>
<div Id="menuItem3_3" class="menuItem">General Provisions Fixed Price
Contracts</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem">Staffing Flow Diagram</div>
<div Id="menuItem4_2" class="menuItem">Performance Development Report
(PDF)</div>
<div Id="menuItem4_3" class="menuItem">90 Day Review</div>
</div>
</div>

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy"
bgColor=aliceblue>
</body>

</html>
----------------------------------------------------------------------------------

Menu Bar's CSS file:
----------------------------------------------------------------------------------
BODY
{
}
..menuBar
{
POSITION: relative;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center
FONT: Arial
FONT COLOR: White
}
..Bar
{
BORDER-RIGHT: blue 1px outset;
BORDER-TOP: blue 1px outset;
FLOAT: left;
BORDER-LEFT: blue 1px outset;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px outset;
POSITION: relative;
BACKGROUND-COLOR: #0b83bf;
TEXT-ALIGN: center
}
..menu
{
BORDER-RIGHT: buttonhighlight thin outset;
BORDER-TOP: buttonhighlight thin outset;
VISIBILITY: hidden;
BORDER-LEFT: buttonhighlight thin outset;
WIDTH: 150px;
LINE-HEIGHT: 140%;
BORDER-BOTTOM: buttonhighlight thin outset;
POSITION: absolute;
BACKGROUND-COLOR: #0b83bf
}
..menuItem
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid
}
..ItemMouseOver
{
PADDING-RIGHT: 15px;
PADDING-LEFT: 10px;
WIDTH: 100%;
CURSOR: hand;
COLOR: highlighttext;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: white 1px solid;
BACKGROUND-COLOR: highlight
}
..ItemMouseOut
{
WIDTH: 100%
}
..Arrow
{
FLOAT: right;
FONT-FAMILY: Webdings;
POSITION: absolute;
TEXT-ALIGN: left
}
..barOver
{
BORDER-RIGHT: blue 1px ridge;
BORDER-TOP: blue 1px ridge;
FLOAT: left;
BORDER-LEFT: blue 1px ridge;
WIDTH: 100px;
CURSOR: hand;
TEXT-INDENT: 5px;
BORDER-BOTTOM: blue 1px ridge;
POSITION: relative;
BACKGROUND-COLOR: #0b83bf;
TEXT-ALIGN: center
}

----------------------------------------------------------------------------------

Thanks,

Lauren

Murray · Nov 21, 2005

</head>

Umm - can't have two said:
<body>
<DIV Id="menuBar" class="menuBar" > ....
<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy"
bgColor=aliceblue>
</body>

and you can't have two body tags, either.

Do you have the page uploaded?

Lauren · Nov 21, 2005

I took out the duplicate tags. Not sure how they got in there. Must have
been from me copying and pasting someone elses code into my page and not
paying close attention.

My site is an intranet site and can not be posted.

The positioning issue is still there.

Thanks,

Lauren

Murray · Nov 21, 2005

Show me the code now that you have fixed it, please.

Lauren · Nov 21, 2005

I had 2 different issues going here... One was that my first menu script I
found was going off the page when the resolution changed. I think I think I
may have it worked out. I just took out the extra div tag that was referring
to the logo (called Top Banner), and then set my menu position to relative.

The 2nd issue was I selected a new menu since the first one was having so
many problems. The new menu wasn't going off the page, but wasn't positioned
exactly where I needed it. So all I had to do was at a line called "Top" and
put the correct pixel amount.

Thanks,

Lauren

Murray · Nov 21, 2005

going off the page when the resolution changed

Resolution changes have no such effect. Browser viewport size changes can,
however. A layer positioned at left=800px will vanish from the screen when
you make your browser viewport less than 800px wide on any resolution
screen.

I just took out the extra div tag that was referring
to the logo (called Top Banner), and then set my menu position to
relative.

That's a very bad solution since it may have other uninteded ramifications.
Can you show me the code where this "worked"?

Menu to drop down only on arrow?	3	Feb 23, 2009
Aligning trouble	4	Feb 15, 2006
table scrollbars	3	Jun 11, 2006
text format with css	2	Nov 17, 2005
text not displaying right in boxes at less than 1024 res, why?	4	Dec 16, 2006
Absolute Position of a table realtive to a cell?	3	Feb 15, 2008
CSS question for background in webpage	7	Oct 2, 2006
news letter	1	Apr 18, 2008

positioning my drop-down menu

Lauren

Murray

Lauren

Murray

Lauren

Murray

Ask a Question

Similar Threads