Positioning rollover hover box anwhere on screen.

[beretta]

Hi

I'm making use of rollover popups/hover boxes using css, so that a box with a description appears when I hover over a link.

The page where I am doing this is temporarily located at :<snip>

The effect is currently applied to the first link, so you can see what it currently does.

I'm a little new at this, so the part of the style sheet controlling the hover effect ("span") is closely based on an example I was given. What I would like to be able to do is make the popup box appear anywhere on the screen. At present, the "absolute" positioning still places it inside the div that contains the link. I'd like to make the popup appear in the blank space to the left of the box containing the link.

Any advice is gratefully received.

relevant code snippet added:
HTML:
<p><a href="#">This is a link <span>This is a description of the link.</span></a><p>

CSS:
div#main a:hover span {
display: block;
position: absolute;
top: 140px;
left: 200px;
width: 25%;
padding: 5px;
border-style: solid;
border-color: white;
border-width: 5px;
color: white;
background: #720E0E;
text-align: center;
font: bold 12pt Arial;
z-index: 2;
}

[edited by: SuzyUK at 10:14 am (utc) on Mar. 5, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[Robin_reala]

Welcome to WebmasterWorld Beretta1

Sorry this took a while to get to - I hope we can still be of some use.

You’re positioning your <span> absolutely. This means that it calculates its position co-ordinates relative to its nearest positioned ancestor, or failing that the root element. An element is ‘positioned’ if you set a position on it of any value other than static (i.e. relative, absolute or fixed). In this case I don’t know what the nearest positioned element is but to get the effect you want, it’d probably be best to make it your <a>. So, given that here’s some revised CSS that should do what you want:

div#main a {
position: relative; /* make this the co-ordinate root for the span */
}
div#main a:hover span {
display: block;
position: absolute;
top: 0; /* change this to 0 to keep inline with the <a> */
left: -25%; /* pull the box left by its width */
width: 25%;
padding: 5px;
border-style: solid;
border-color: white;
border-width: 5px;
color: white;
background: #720E0E;
text-align: center;
font: bold 12pt Arial;
z-index: 2;
}

Hopefully this will do what you want. If not then reply back.

[edited by: Robin_reala at 9:07 pm (utc) on Mar. 12, 2007]