Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Bounding div with position: relative. Whole bunch of nested elements with position: absolute.

All of those plus icons, and their associated text are the nested (position: absolute) items.

Then they use javascript to hide all the text and display them on hover.
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Start off easy, then start to make it more complicated.

Code:
<div style="position: relative; background: green; width: 500px; height: 400px;">
<div style="position: absolute; top: 100px; left: 50px; width: 10px; height: 10px; background: blue;">
 
</div>
<div style="position: absolute; top: 200px; left: 450px; width: 10px; height: 10px; background: blue;">
 
</div>
</div><!-- green div -->

This will make a green box with two small blue boxes inside of it positioned absolutely.

If you don't understand that conceptually, you just need an HTML book.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.