mvunsharma
07-23-2009, 07:07 PM
1) Script Title: Smooth Navigational Menu (v1.3)
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
3) Describe problem:
I am not a geek and trying to build my own website.
What I did:
I placed the menu inside a div element. Another div immediately follows after the menu div. Here is the html code:
<body>
<div id="container">
<div id="header">
<div id="logo">
<img
src="Images/adi.png"
width="252px"
height="52px"
alt="Logo"/>
</div>
</div>
<div id="menubar"></div>
<div id="content"></div>
<div id="footer">
</div>
</div>
</body><body>
<div id="container">
<div id="header">
<div id="logo">
<img
src="Images/alpha.png"
width="252px"
height="52px"
alt="Logo"/>
</div>
</div>
<div id="menubar"></div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
Here is the CSS for those div tags:
#menubar{
position: absolute;
width: 100%;
height: 5%;
top: 15%;
}
#content{
position: absolute;
top: 21%;
width: 100%;
height: 75%;
background-color: #666666;
}
PROBLEM 1:
I cannot see the drop down menu.
When I have a background color for the content div, I notice that drop down menu wraps under the content area (simply not visible to the user).
I switched off the background-color and I can navigate to the first li element in the menu.
PROBLEM 2:
The menu folds up when I try to navigate to second li.
I cannot navigate down the first li element. The menu simply folds up. Then I changed the top position to 75% and the height to 3%. Now the menu works perfectly fine.
As I said, the problem occurs in IE6 and IE7. FF works fine. Any clues? Should I change the position elements from absolute to relative?
Regards and Have a good day!
Nagesh
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
3) Describe problem:
I am not a geek and trying to build my own website.
What I did:
I placed the menu inside a div element. Another div immediately follows after the menu div. Here is the html code:
<body>
<div id="container">
<div id="header">
<div id="logo">
<img
src="Images/adi.png"
width="252px"
height="52px"
alt="Logo"/>
</div>
</div>
<div id="menubar"></div>
<div id="content"></div>
<div id="footer">
</div>
</div>
</body><body>
<div id="container">
<div id="header">
<div id="logo">
<img
src="Images/alpha.png"
width="252px"
height="52px"
alt="Logo"/>
</div>
</div>
<div id="menubar"></div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
Here is the CSS for those div tags:
#menubar{
position: absolute;
width: 100%;
height: 5%;
top: 15%;
}
#content{
position: absolute;
top: 21%;
width: 100%;
height: 75%;
background-color: #666666;
}
PROBLEM 1:
I cannot see the drop down menu.
When I have a background color for the content div, I notice that drop down menu wraps under the content area (simply not visible to the user).
I switched off the background-color and I can navigate to the first li element in the menu.
PROBLEM 2:
The menu folds up when I try to navigate to second li.
I cannot navigate down the first li element. The menu simply folds up. Then I changed the top position to 75% and the height to 3%. Now the menu works perfectly fine.
As I said, the problem occurs in IE6 and IE7. FF works fine. Any clues? Should I change the position elements from absolute to relative?
Regards and Have a good day!
Nagesh