Link to home
Start Free TrialLog in
Avatar of troyd1
troyd1

asked on

I need help with positioning a layer

I created a popup using an additional layer. Here is my stylesheet code:

<style type="text/css">
a.info{position: relative}
a.info:hover{background-color:#cff}
a.info span{display: none}
a.info:hover span{display:block;position:absolute;top:2em;left:0em; width:55em;
  border:1px solid #0cf; background-color:#cff; color:#000;text-align:left;text-decoration:none;font-size:14px}
</style>
 
The html portion that uses this is:

<a class="info" href="PCCOMMENTSINQ?SUBMIT=WHATEVER:'>Description<span>This is popup text for the description</span></a>

this work very well except I am dynamically creating this on the fly(the description and popup info) and I want the popup to be relative to the link or pointer vertically, but I want it to start at the left edge of the page horizontally. I probably need some javascript or something. Any recommendations?

Also depending on the pointer position, I may want to put the popup above my link.

Thanks, Troy
Avatar of mark-b
mark-b
Flag of United States of America image

Is this what you are looking for:  Change one CSS def:

a.info:hover span{display:block;position:relative;top:0em;left:0em; width:55em;
  border:1px solid #0cf; background-color:#cff; color:#000;text-align:left;text-decoration:none;font-size:14px}

-Mark
Or maybe this?  

a.info:hover span{display:inline;position:relative;left:1em;
  border:1px solid #0cf; background-color:#cff; color:#000;text-decoration:none;font-size:14px}

-Mark
Or maybe this?:

a.info{position: relative}
a.info:hover{display:inline;}
a.info span{display: none}
a.info:hover span{display:inline;position:relative;left:1em;
  border:1px solid #0cf; background-color:#cff; color:#000;text-align:left;text-decoration:none;font-size:14px}

(Ok, ok, I'll stop now).

-Mark
ASKER CERTIFIED SOLUTION
Avatar of mark-b
mark-b
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of troyd1
troyd1

ASKER

Sorry, I have not had time to test these. I had to go with what I had. I will try to test this soon and let you know. Again to reiterate, I want the assign a static horzontal reference, but I want to position vertically based on the pointer/link position. This will pretty much take care of my problem although I would like it to pop up above the link position if it is at the bottom of the page.

Thanks, Troy