TJKDesign: Home Page
ez-css Putting the 'less' in table-less layouts. css-101 logo

TJKPop Ups

1
2
3
4
5
6
7

Popping up Text with Text

Take noteNote 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
}

Take noteMake 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:

Take noteYou 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.