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-co lor:#cff}
a.info span{display: none}
a.info:hover span{display:block;positio n:absolute ;top:2em;l eft:0em; width:55em;
border:1px solid #0cf; background-color:#cff; color:#000;text-align:left ;text-deco ration:non e;font-siz e:14px}
</style>
The html portion that uses this is:
<a class="info" href="PCCOMMENTSINQ?SUBMIT =WHATEVER: '>Descript ion<span>T his 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
<style type="text/css">
a.info{position: relative}
a.info:hover{background-co
a.info span{display: none}
a.info:hover span{display:block;positio
border:1px solid #0cf; background-color:#cff; color:#000;text-align:left
</style>
The html portion that uses this is:
<a class="info" href="PCCOMMENTSINQ?SUBMIT
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
Or maybe this?
a.info:hover span{display:inline;positi on:relativ e;left:1em ;
border:1px solid #0cf; background-color:#cff; color:#000;text-decoration :none;font -size:14px }
-Mark
a.info:hover span{display:inline;positi
border:1px solid #0cf; background-color:#cff; color:#000;text-decoration
-Mark
Or maybe this?:
a.info{position: relative}
a.info:hover{display:inlin e;}
a.info span{display: none}
a.info:hover span{display:inline;positi on:relativ e;left:1em ;
border:1px solid #0cf; background-color:#cff; color:#000;text-align:left ;text-deco ration:non e;font-siz e:14px}
(Ok, ok, I'll stop now).
-Mark
a.info{position: relative}
a.info:hover{display:inlin
a.info span{display: none}
a.info:hover span{display:inline;positi
border:1px solid #0cf; background-color:#cff; color:#000;text-align:left
(Ok, ok, I'll stop now).
-Mark
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
Thanks, Troy
a.info:hover span{display:block;positio
border:1px solid #0cf; background-color:#cff; color:#000;text-align:left
-Mark