Solved

I need help with positioning a layer

Posted on 2004-04-27
7
137 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:troyd1
  • 4
7 Comments
 
LVL 7

Expert Comment

by:mark-b
ID: 10930930
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
0
 
LVL 7

Expert Comment

by:mark-b
ID: 10931112
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
0
 
LVL 7

Expert Comment

by:mark-b
ID: 10931379
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
0
 
LVL 7

Accepted Solution

by:
mark-b earned 500 total points
ID: 10978333
Did any of these work for you?
0
 

Author Comment

by:troyd1
ID: 10987944
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
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question