• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1065
  • Last Modified:

Make DIV position relative to link...

Is there a way to make a DIV's position relative to a link AND make it a seperate layer?

I'm using a single configuration for a number of pop-up boxes on a webpage... they all look the same... the content just changes. So anyway... I'm using very simple javascript to show and hide the DIVs, but I'm stuck with an either/or situation.

If I make the DIV position relative, I can place the DIV in a position relative to the link they're clicking on, BUT it won't be a seperate layer, so the DIV (even though it's not visible) pushes other content down the page.

If I make the DIV position absolute, then the content on the page isn't affected (since the DIVs are seperate layers) but then I have to pick one position for all the pop-ups to show up in... I want each pop-up's position to be relative to the link they're clicking on.


Obviously I could make different CSS styles to go with each DIV, but that would involve lots of redundant script in the STYLE tag, and I'd also have to figure out the perfect absolute position for each one....


....is there a better way?


WATYF
0
WATYF
Asked:
WATYF
1 Solution
 
seanpowellCommented:
Hi WATYF,

You're correct, position:absolute is the way to go - we just need to set it absolutely to the link instead of to the body.

We do this by assigning position:relative to the link, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">

body
{
      margin:50px;
      padding:0;
      font:11px verdana;
}

.link
{
      position:relative;
      height:30px;
      width:200px;
      background-color:#eeeeee;
      margin:20px 0;
}

.popup
{
      position:absolute;
      width:120px;
      height:20px;
      left:80px;
      top:10px;
      background-color:#333333;
      color:#ffffff;
      border:2px solid #666666;
}

</style>
</head>
<body>

<div class="link">
      <a href="#">Link 1</a>
      <div class="popup">
            Popup Content 1
      </div>
</div>

<div class="link">
      <a href="#">Link 2</a>
      <div class="popup">
            Popup Content 2
      </div>
</div>

<div class="link">
      <a href="#">Link 3</a>
      <div class="popup">
            Popup Content 3
      </div>
</div>

</body>
</html>

Thanks,
Sean
0
 
WATYFAuthor Commented:
Thanks man... that did the trick.



WATYF
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now