CSS popups (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Nicole -> CSS popups (5/25/2006 5:44:40)

I've been having a play around with this:

http://www.meyerweb.com/eric/css/edge/popups/demo.html

And I have a question. I have a fixed width, centered layout that i was thinking I could use this on, although using position: absolute it's obviously placing the pop-up text way off to the left, and using position: relative it's putting it relative to the link.

I've gone ahead and changed the top and left positions too but when the screen is resized it's moving away from the area under the navigation.

Do any of you think this can be used for a fixed width centered layout or just a full screen resizeable layout?

Thanks

Nicole



Tailslide -> RE: CSS popups (5/25/2006 6:31:06)

We'll have to see your code I'm afraid - do you have a test page?

Usually these issues are because the popup is being positioned relative to the viewport rather than to the thing it's popping up next to - if that makes any sense at all! If the "thing" (i.e. div) that contains the popups doesn't have Position:relative then the absolutely positioned thing will keep going up the line of elements either until it finds something that is "relative" or until it gets to the highest level - i.e the body.



Nicole -> RE: CSS popups (5/25/2006 6:37:41)

Hi Tail,

It's the same page I've been working on a while:

http://www.users.on.net/~nicoleoz/index.htm

except that I've removed the image and compliance notes under the menu and moved them to the footer. I haven't uploaded it as yet as i may not go with it, and by not uploading it I can easily get my code back.

Nicole



Tailslide -> RE: CSS popups (5/25/2006 7:04:40)

Me no see no popups...



Nicole -> RE: CSS popups (5/25/2006 7:41:57)

They're not there, I haven't uploaded it to the site yet.

Just thought there might be an easy way to tell whether they'd work or not.



caz -> RE: CSS popups (5/25/2006 7:43:17)

I don't either but you may find tutorial by Stu Nicholls useful for positioning the popup. It is about an image map which when hovered over displays boxed text positioned where you want them, I have used it and I know that the positioning was really by trial and error.

I noticed that he also has some popup examples on his main site too.



caz -> RE: CSS popups (5/25/2006 7:55:59)

Cross posted there [:D] Try preview in browser?
What I usually do is make copies of the page and the stylesheet to experiment on then you can use them or not.



Nicole -> RE: CSS popups (5/26/2006 3:14:04)

Thanks Tail & Caz,

Well it's taken me most of the day but I think I've nailed it! Please take a look.

http://www.users.on.net/~nicoleoz/index.htm

I've tested it in Firefox, Opera, Mozilla, Netscape and IE and tried it with different text sizes and it seems to be holding okay. Please let me know if it breaks on any of your computers/browsers etc.

Next question: What do you think of this idea? Is it a bit distracting or is it useful to help show where a link will be taking you to? Also, I haven't tried yet, but I'm going to try and position my avatar just under the text, will probably have to work out how long the longest text is first, but will try after that. And I guess it will depend on how much the text is likely to be resized.

Nicole



Tailslide -> RE: CSS popups (5/26/2006 3:21:34)

Haven't done a lot of testing on it but I think it looks good - not distracting at all.

The layout itself has "issues" in IE5 btw..



Nicole -> RE: CSS popups (5/26/2006 3:27:37)

Oh?

I'll have to take a look, don't have IE 5 though, will have to look at one of those browser cam type sites. Thanks for letting me know, I checked all of the browsers I could yesterday and everything was great.



Tailslide -> RE: CSS popups (5/26/2006 4:28:03)

just having a really quick look I'd say it's because you need to centre the design for IE5/5.5 using text-align:center in your body element. I think that will sort it.



Nicole -> RE: CSS popups (5/26/2006 4:30:21)

Hmmmm!

The browser screenshot sites I have don't have IE5, all are either solely for Safari or the only one with more than mac browsers only has IE 6 and 7. Is there a way besides having IE 5 installed on a computer to test my sites for this browser version?

I also had some errors in my html and css which I've now fixed, perhaps that was the problem?

Nicole



Nicole -> RE: CSS popups (5/26/2006 5:00:20)

quote:

just having a really quick look I'd say it's because you need to centre the design for IE5/5.5 using text-align:center in your body element. I think that will sort it.


Thanks Tail,

I've just done that but have no way that i know of to check if it worked. Can you check please when you have time?

Thanks

Nicole



Tailslide -> RE: CSS popups (5/26/2006 5:22:14)

Working fine in IE5.5 - popups and everything.

In IE5 the layout's fine now but no popups (didn't expect them to be honest!).



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875