TJKPop Ups
Popping up Text with Text
Note that if the examples within this article address the IE5 broken box model, only the code that pertains to the pure CSS pop up technique is listed here.
HTML
To pop up text with text, we start by creating a simple set of links.
<a href="javascript:;">Site #1</a><br />
<a href="javascript:;">Site #2</a><br />
<a href="javascript:;">Site #3</a><br />
<a href="javascript:;">Site #4</a>
Then we enclose them into a DIV container:
<div id="set_of_links">
<a href="javascript:;">Site #1</a><br /><a href="javascript:;">Site #2</a><br />
<a href="javascript:;">Site #3</a><br />
<a href="javascript:;">Site #4</a>
</div><!-- /set_of_links -->
Note: In real life, there is a good chance you'd use a CSS rule instead of <br /> tags to stack the links on top of each other.
CSS
We now apply basic styles to this selector:
#set_of_links {
position:relative;
padding:9px;
border:1px dotted #999;
background:#fff;
margin-bottom:20px
}
#set_of_links a {
display:inline;
padding:2px 9px 2px 9px;
text-decoration:none;
color:maroon;
background:#ececec
}
#set_of_links a:hover {
background:white;
text-decoration:none
}Make sure to read the warning regarding these rules.
This is what we have so far:
HTML
This is where the magic begins...
We nest SPAN tags inside the A tags:
<div id="set_of_links">
<a href="javascript:;">Site #1
<span><strong>http://www.MyVeryFirstSite.com</strong><br/>It's a frames-design layout with a whole bunch of tags.<br />There are also a few cool animated gifs and a hit counter.</span>
</a><br/>
<a href="javascript:;">Site #2
<span><strong>http://www.NumberTwo.com</strong><br />I dropped the frames and I replaced the animated gifs with cool flash banners. I have also 3D buttons with cool rollover effects!</span>
</a><br/>
<a href="javascript:;">Site #3
<span><strong>http://www.TheThirdOne.com</strong><br />I dropped the flash banners, I'm using JavaScript to do all kind of cool stuff, I have a pop up navigation menu.</span>
</a><br/>
<a href="javascript:;">Site #4
<span><strong>http://www.TheLastOne.com</strong><br/>I dropped JavaScript and a whole bunch of stuff.Actually I removed everything I can live without.<br />I'm thinking the leaner the better...</span>
</a></div><!-- /set_of_links -->
CSS
These SPAN containers are our pop ups.
Using some basic CSS rules, we can set where and how we want them to appear:
#set_of_links {
position:relative;
padding:9px;
border:1px dotted #999;
background-color:#fff;
margin-bottom:20px
}
#set_of_links a {
display:inline;
padding:2px 9px 2px 9px;
text-decoration:none;
color:maroon;
background:#ececec
}
#set_of_links a:hover {
background:white;
text-decoration:none
}
#set_of_links a span {
display:none
}
#set_of_links a:hover span {
display:inline;
position:absolute;
top:0;
left:90px;
padding:5px 15px 5px 0
}Give it a try:
It's a frames-design layout with a whole bunch of tags.
There are also a few cool animated gifs and a hit counter.
Site #2http://www.NumberTwo.com
I dropped the frames and I replaced the animated gifs with cool flash banners. I have also 3D buttons with cool rollover effects!
Site #3http://www.TheThirdOne.com
I dropped the flash banners, I'm using JavaScript to do all kind of cool stuff, I have a pop up navigation menu.
Site #4http://www.TheLastOne.com
I dropped JavaScript and a whole bunch of stuff. Actually I removed everything I can live without.
I'm thinking the leaner the better...
You need to swap different values for the background-color or the text-color for the anchors. If you don't, or if you just swap the same value for both rules [a and a:hover], MSIE will fail to reveal the content of your nested span tags.
