Forum Moderators: not2easy
I have a fluid website that appears different based on browser resolution. I'm trying to create a dynamic menu that appears when an image is clicked. The top of the menu should align with the bottom of the image. The menu should have a high z-index so it floats above content on the page.
Since the location of the image can change based on resolution, I can't absolutly position it. Can anyone help me figure this out?
I've posted a few illustrations of what I'm going for here [framezero.com].
If anyone can figure out how to do this, I'd be amazed and grateful.
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#main li {
background-color: red;
border: 1px solid black;
position: relative;
}
#foo {
position: absolute;
left: 0;
top: 1.25em;
background-color: teal;
height: 300px;
width: 400px;
display: none;
}
</style>
</head>
<body>
<!-- insert text here-->
<ul id="main">
<li><a href="#" onclick="document.getElementById('foo').style.display='block';return false;">test</a>
<span id="foo">And here's some text... blah blah blah</span></li>
</ul>
</body>
</html>
position:relative
[headline] [some text] [click here for menu] [something else]
Wrapping the image (seen above as [click here for menu]) in a div tag forces it onto its own line on the page. I tried replacing the div tags with span tags, which works in IE but does not in mozilla.
Is there any way to use a div, but not have it go onto its own line?
However... adding display: inline to the "main" id in your above example creates a few new problems for Mozilla.
The ability interact with the data in the "foo" span has been lost. Previously, I could highlight the "And here's some text" text. I actually need to have checkboxes and form fields in the "foo" span, and those also lose interaction ability with display: inline.
This feels like it's really, really close now. Thank you for all the help thus far.
