Need help with pure CSS popup positioning, please!

[Seppuku]

Hi everyone,

First of all, I’m a total amateur in web designing (and I’m not native to English, so forgive my grammar). I have no formal training on HTML, CSS or anything like that, but still I’m trying to build a personal site using CSS and simple HTML. I haven’t had real problems, until now.

Maybe this is a pretty basic issue..

I bumped into this pure CSS popup code (Eric Meyer’s) and began using it. Simple enough, is working fine.
I have a vertical navigation bar with 5 links to the left. At mouseover on each link I have this popup to appear at upper-right of my page, to the right of the main title. I did this using the following:

div#linkbar a span { display: none; }

div#linkbar a:hover span {

display: block;

position:absolute; top:35px; left:1150px; width:250px;

padding:10px; margin:3px; z-index:100;

border:2px dashed #cce698;

border-bottom-right-radius:0.7em;

border-top-left-radius:0.7em;

color:#808080; background:#ffffff;

font:14px Consolas, sans-serif; text-align:justify; }

The issue that concerns me is that the popup gets misplaced when I zoom the whole page using CTRL+scrollwheel (it moves to the left when I zoom in -overlapping my title header- and to the right when I zoom out -out of the visible area of the browser). At 100% zoom, the popup box is positioned where I want it, so I figured I had to “embed” it, so to speak, in a floating area (in the same spot -right upper corner, that is “#rightheader” below), so that when I zoom in/out the page the popup stays in the same area of my layout.

I hope I explained it right.
Here’s the CSS + HTML for the elements:

1. THE TWO AREAS OF MY HEADER

#leftheader {

float:left;

height:126px;

width:624px;

background:#ffffff; }



#leftheader img {

margin-top:14px; }



#rightheader {

float:left;

height:126px;

width:400px;

background:#22ffff; }

2. THE HTML FOR THOSE AREAS

width="589" height="89" alt="image">

What I want is for the popups to display inside the “rightheader” element and that they remain inside that element no matter what’s the zoom %.

Also, I want to achieve this (if possible) using only CSS and HTML since I have no idea (and have no time to learn) how javascript works.

Thanks a lot in advance!

[Seppuku]

Thanks for your answer, Cliff.

I’m testing the page in Chrome and Firefox, and the issue is present in both.

I’ve been reading further and I think it has to do with the “position:absolute” attribute defined in the div#linkbar which generates the popups, but since I practically copy-pasted the popup code I don’t really understand it.
I’m guessing that if I can make the popup div to behave like a div contained by another div.. maybe.. I don’t know what I am talking about… :(

About JSFiddle, I’m so sorry I don’t know how to make it work.

Any ideas?

Thanks!

Ah, and the is just a comment to remind me what the code below is for.

[Seppuku]

Thanks Scott,

I think I managed to do the JSFiddle thing.. I hope this is right: http://jsfiddle.net/bZfPL/

Please let me know if it worked and any solution to my problem.

Thanks again!

[davidlab.be]

Rather easy fix but tricky to explain. You have position:absolute; set for your div#linkbar a:hover span{} in your css. By making that absolute positioned it will position itself to the parent element that has a position set…in your case no parent has a postion set (unless i overlooked it) so it will position itself to the body of the page by default. So if your page resizes it will stay in position to the body of the page as the rest of the page moves and resizes.
So…to fix it simply give a parent element a position property and then set your position values based off the parent.
So in your case I would set a position:relative; to the #linkbar div like so:

#linkbar {

float:left;

width:230px;

height:744px;

font-variant:normal;

position:relative;

}

Then adjust your div#linkbar a:hover span {} position setting so they work for you.

[Seppuku]

Yey!! Indeed easy fix and it worked perfectly!

Thanks a lot springlab and everyone!

[Author]

Posts