dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
648
Sentinel
Premium Member
join:2001-02-07
Florida

Sentinel

Premium Member

Positioning pure CSS pop-up effect

I'm sure many of you are familiar with the CSS pop-up effect explained here:
»meyerweb.com/eric/css/ed ··· emo.html

But I want to modify this a bit for my website. The author on that website uses absolute positioning to place the so called "pop-up" where he wants it. That works fine if your website is static and based on the top and right of the screen.

But on my website I use a table that is a fixed size but I allow it to float by just having it centered. So regardless of your screen resolution the table will always be in the center and the only thing that changes is how much of a border on the sides of the table you see if your screen is wider.

So what I would like to do is to have that same effect but have be positioned relative to the top and side of the table rather than the entire page or window. Is this possible?
Sentinel

Sentinel

Premium Member

Wow, nobody
I thought that this would be an easy one but I guess I was wrong.

I thought that there must be some tag that tells the positioning to position based on the table rather than the absolute of the entire page.

I notice that he uses the word "absolute" in his positioning tag. Are there other options? Maybe that it where I could start?

Gwellin
Premium Member
join:2004-05-31
Regina, SK

1 recommendation

Gwellin

Premium Member

Are you wanting it centred on the page (i.e. centred over the table) or actually at the top left corner? There are other position values, but they won't help you in this case.

Centring in Gecko browsers (Firefox) is easy, just add margin: auto; to it, however that will not work in Internet Explorer. You're going to have to wrap it with another element then have the outside one with text-align: center; and the inside one with margin: auto; for it to work in both.

To get it to the left side of the table you also need to double up the elements. The outside then needs left: 50%; while the inside should have a negative left margin value equal to half the width of the table. So if the table is 800px then the inner element would have margin-left: -400px;
Sentinel
Premium Member
join:2001-02-07
Florida

Sentinel

Premium Member

Perhaps a bit more background will help.

On my website I have a CSS pop-up effect like described on that guys page. When you hover over a link a long explanation about the link pops up under the row of links, just like that guys.

This has been fine for me because I designed my page mostly for 1024x7868 res screen. So using the absolute positioning from the top and the left as guides worked.

But recently I got a wide screen laptop and I noticed that since I had my website in a table and the table was set to center the entire effect got screwed up. But only on wide screen displays.

I fixed it temporarily by just left aligning the table. Looks fine at 1024 res but if you have a wide screen then my entire website is all the way on the left side of your screen. But if I center the table then the absolute position of the pop-up effect doesn't move correctly.

So what I was hoping to do is to have the pop-up effect be aligned with the table rather than defined by the border of the screen.

Gwellin
Premium Member
join:2004-05-31
Regina, SK

Gwellin

Premium Member

Seeing the page you sent me via PM, what I described in the last sentences would work just fine here. Just wrap the span with another span, give the outer (div#links a:hover span) one left: 50%; and the inner one (div#links a:hover span span) margin-left: -200px; or so.
Sentinel
Premium Member
join:2001-02-07
Florida

Sentinel

Premium Member

Hmm. I think I understand what you are saying in theory but the implementation is above my capabilities with HTML. As you can see by the code on pages, my understanding of HTML is limited. But I am a quick learner . If you could please get into a little bit more detail in your explanation I think I could grasp it.

Gwellin
Premium Member
join:2004-05-31
Regina, SK

1 recommendation

Gwellin

Premium Member

Replace:
<a href="patch.html"> Police Patches <span>My police patch collection.</span></a>
 
With:
<a href="patch.html"> Police Patches <span><strong>My police patch collection.</strong></span></a>
 

And do the same (adding surrounding <strong>) to the other 'popup' text.

Then in the CSS within div#links a:hover span change:
  left: 248px;
 
to:
  left: 50%;
 

And finally add these new lines to the end of the CSS:
div#links a:hover span strong {
  margin-left: -200px;
}
 
Just adjust that -200px if it doesn't align quite right.
Sentinel
Premium Member
join:2001-02-07
Florida

Sentinel

Premium Member

I'll give it a try and let you know Thanks for the help. Very very much appreciated.