No replies
MartynInManila
Offline
newbie
Last seen: 8 years 24 weeks ago
Timezone: GMT+8
Joined: 2011-08-06
Posts: 3
Points: 5

I am new here and have a problem that needs someone with a bit more knowledge than I. If you can help, sincerely appreciated.

I have built a new webpage that has a div containing page header using 'position:fixed' plus a sidebar menu on the right side in a nested div within the header div (to hold its position relative to the header).

I have another div that contains the main body that hangs left and scrolls neatly under the header; this div has no 'position' statement.

Cool so far . . .

The links on the sidebar menu worked just fine. But the links in the main body div did not work at all.

I figured out that the reason that the links do not work in the main body div is that the header div, being position:fixed, is "covering" the main body div content. I tested this by using z-index=-x for the header div and found it to be true. But then of course the sidebar menu links stop working.

I logically thought that this would be simple to overcome by placing a z-index=-x in the header div and employing Java onMouseOver to change the z-index to a positive value when someone moved their mouse to the nested sidebar menu, making it active. This does not work, perhaps because the sidebar menu is actually "covered" now by the main body div.

I have tried every which way recommended in multiple forums to get the onMouseOver to change the z-index value and nothing seems to work.

So here are my questions:

1) In this case is the best solution to use z-index as the control mechanism? If not then how else?

2) If z-index is the solution then how to get it to change onMouseOver so that the sidebar menu links become active when required and the main body links active otherwise?

Here is the css for the divs

.outer {
width:1000px;
margin:0 auto;
}
.main {
margin-top:120px;
width:610px;
margin-left:20px;
margin-right:335px;
}
.menu {
margin-top:96px;
width:335px;
padding-left:660px;
}
.top {
width:1000px;
top:0px;
position:fixed;
margin:0 auto;
}
.toptext {
margin-top:-120px;
margin-left:20px;
}
.topontop {
width:1000px;
top:0px;
position:fixed;
margin:0 auto;
z-index:5;
}
.topbehind {
width:1000px;
top:0px;
position:fixed;
margin:0 auto;
z-index:-5;
}

Here is the relevant HTML
<div class="outer">
	<div id="main" class="main">
	main body text with 'a link' with more main body text
          </div>
 
    <div id="top" class=topbehind onMouseOver="this.class='topontop'" onMouseOut="this.class='topbehind'">
    <div>
        	<img title="title text" src="img/seaplane-strip.jpg" width="1000" height="100" alt="alt text" />
 
            <img src="img/white-bar.jpg" width="1000" height="20" alt="white bar" />
            <div class="toptext">
                <h2 style="color:#fff; font-size:22px;">text over top images</h2>
            </div>
            <div id="menu" class="menu">
                        <? include ("common/solar-menu.php"); ?>
 
            </div>
        </div>
    </div>
 </div>

the side bar menu is a fairly simple include:
    	<h3>Business Solutions</h3>
        <ul>
			<?php 
			if(strpos($_SERVER["REQUEST_URI"],"index.php")>0){  ?>
			<?php }else{ ?>
            <li><a href="index.php">Home</a></li>
            <?php } ?>
            <li><a href="link2.php">Link2 text</a></li>
            <li><a href="link3.php">Link3 text</a></li>
            <li><a href="link4.php">Link4 text</a></li>
            <li><a href="link5.php">Link5 text</a></li>
            <li><a href="link6.php">Link6 text</a></li>
            <li><a href="link7.php">Link7 text</a></li>
        </ul>