This Page Has Fun CSS Pop-Up Stuff

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus popupMessage Line 1
Message Line 2 non mollis ante. Morbi hendrerit iaculis tempor? Aenean nec felis arcu, id consequat dolor. Duis sit amet magna justo, nec ultricies tortor. Aliquam ultricies cursus justo, id scelerisque neque lacinia sed. In nec turpis odio, quis lobortis felis. Nullam eget ante ac dui tempor ornare at ut lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant another!Here is another
popup to
demonstrate. morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut eget elit porta tellus vestibulum mattis. Etiam semper egestas laoreet. Phasellus blandit tristique erat at consequat. Sed ac nulla eros? Nulla eget lorem in massa facilisis suscipit vitae ut turpis. Donec eros elit, semper ac dignissim ac, pellentesque at eros. Etiam eget ornare magna. Morbi malesuada massa eu sem dapibus scelerisque. Integer orci lorem, imperdiet vel imperdiet a; malesuada id nisi. Pellentesque ut felis a enim posuere vulputate. Aliquam in lectus non felis elementum venenatis.

Explanations

This page contains two examples. The first is an example of text popup I found on the Web. The two words that appear in orange in the paragraph above are CSS pop-ups. Point at them to see. They are links (null links that don't go anywhere, although they certainly could). The link text contains the one visible word, and contains other words that are enclosed in a span element, like this:

<a class="pop" href="javascript:;">popup<span>Message Line 1<br />
Message Line 2</span></a>

The span is shown in italics above. The style a.pop formats the link text to show up orange and bold with no underline. The style a.pop span hides the spanned text (using display:none;) and makes it black and not underlined. The style a.pop:hover span changes the settings to display the hidden text when the link is hovered over. It does this by displaying the text inline, and positions it with position:absolute; (because it doesn't specify at top or left, etc. the content would appear in its normal place in the static flow—but some positive and negative margins are used to bump it below and to the side). This style also gives the content a yellow background and black border to box it up. The box will wrap at the edge of the enclosing div, but with line breaks inserted it will display narrower with multiple lines. There is also an a.pop:hover style that accounts for a bug in the display of IE6.

The menu in the upper-left corner is made from an unordered list (with class="nav") of links that have formatting applied to make them into rollover buttons. Also included in each link (along with the visible text you see in the link) is a <span> that encloses and image and some text. The style .nav a span hides the spanned content of the link. The style .nav a:hover span (which kicks into effect when you point at the link) makes the content in the span visible, and it absolutely positions it into the space below the menus. Because of the width of the absolutely positioned box, the image and text wrap around as desired to fill the space. The style .nav a:hover span img makes sure the image has no link border showing, and has some bottom padding to push the text down a little.