I was using excel today and looked at the tabs at the bottom. It got me thinking about how to do that with CSS. Is it possible to have a tab system using <div> or <span> tags? Eg, all the different layers load up but the active layer is on top, and by clicking on another tab you could switch the entire site content around, all without having to reload the page? I'm sure you can do it with javascript, I'm just wondering about CSS.
This example will only work in FF - IE can only handle a:hover, but this should give you the idea on how to approach this: <head> <style type="text/css"> body {margin: 0; padding: 0;} div {margin: 10px; text-align: center;} div.pane {position: absolute; top: 1.5em; left: 0; width: 400px; height: 200px; border: 1px solid red; display: none;} div.tab {border: 1px solid blue; background-color: #EEF; width: 50px; height: 1.5em; float: left; cursor: pointer;} div.tab:hover {background-color: #FFE;} div.tab:hover div {display: block; background-color: #FFE;} </style> </head> <body> <div class="tab">tab 1<div class="pane">div 1</div></div> <div class="tab">tab 2<div class="pane">div 2</div></div> </body> J.D.