I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaS cript">
<!--
function hideObject() {
document.getEle mentById('showp opup').style.vi sibility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
document.getEle mentById('showp opup').style.vi sibility = "visible";
}
//-->
</script>
<style>
..ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
..rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
..rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
..rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<p>Test the DHTML <a href="javascrip t:showObject(); ">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidd en;">
<div class="ratePopu p">
<div class="rateHead er">Rate Information</div>
<h1 class="rateTitl e">Advance Purchase Rate</h1>
<p class="rateText ">Significa nt savings for purchasing your rate in
advance.</p>
<p><a href="javascrip t:hideObject(); ">Close</a> </p>
</div>
</div>
</body>
</html>
My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page
How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
