jarrett000 Posted April 20, 2009 Share Posted April 20, 2009 I wanted to add a menu that displays once you hover over (or click on) an arrow beside the image-link. I achieved the menu part by simply displaying a hidden floating div through JS. The problem is that even though i've put a float: center into its CSS it still moves all the content below it down. Could anyone help me display it without moving content?My Code: <html><head><script type="text/javascript">function showDiv() { if (document.getElementById) { document.getElementById('menu').style.visibility = 'visible'; } else { if (document.layers) {document.menu.visibility = 'visible'; } else {document.all.menu.style.visibility = 'visible'; } } }</script><style type="text/css">div.menu {visibility:hidden;float: left;}</style></head><body><img src="/images/linkOne.jpg" alt="AN IMAGE" onmouseover="showDiv"><div class="menu"><a href="PageOne.php">First page</a><a href="PageTwo.php">Second Page</a></div></body></html> I put this in HTML/XHTML because it concerns both a JS and a CSS perspective so I couldent decide which was the more suitable topic. Link to comment Share on other sites More sharing options...
jeffman Posted April 20, 2009 Share Posted April 20, 2009 Most authors toggle the display property instead of visibility, but the issue is the same.Try adding position:relative to the CSS of div.menu.And FWIW, it's 2009. You can stop testing for document.getElementById and document.layers. Link to comment Share on other sites More sharing options...
jlhaslip Posted April 21, 2009 Share Posted April 21, 2009 there is no such animal as float:center.the choices are left, right, none, inherit. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.