Skem9 CSS Pop-ups

Skem9 Website Tutorials | Submited Dec 29, 2007

Written by:

Notes

There's been like a thousand of these written (the first one I read was from JasonEvil), but never one for skem9.
This is kinda advanced, if you're used to copy and paste stuff this prolly won't work out very well.
It works in both Firefox and IE.

CSS

This goes in your customize profile section, adjust the top and margin-left numbers, leave left:50%; alone, unless you change position:absolute; to position:relative;, that makes it work the same in all resolutions.

#mainContents a p{display:none}
#mainContents a{display:block;}
#mainContents a:hover p{
text-decoration:none;
display:block;
position:absolute;
display:block;
width:300px;
height:200px;
text-align:left;
left:50%;
top:100px;
background:#fff;
color:#000;
}

Notice, I used #mainContents, that's the big edit profile box, you can change that according to whatever box you decide to use.

BBCode

I used the tag "[.center]", in HTML that converts to <p>, and hid it until you hover over the link.
The "[.url=" tag is like the <a> tag, meaning the :hover element works in all browsers.

[­url=#]When you hover me, I'll un-hide the text

[­center]
this text won't show until you hover the link
[­/center]

[­/url]

Result

Using the codes above, exactly, I got this; even in IE, who woulda thunk it?