Well through some CSS endeavors to find the golden stylesheet (personal goal of the ultimate design), I have created a CSS only DOM tab system. Meaning when you click on a tab the content changes. Usually this is done with Javascript/jQuery, but since I don't know how to code in either one of those, I created a CSS method.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-TABS | CSS-Only "DOM TABS"</title>
<style type="text/css">
* {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}
html {font: normal 14pt "Century Gothic", "Arial Narrow", "Gill Sans", "Palatino Linotype"; line-height: 130%;}
body {margin: 10px 10px 10px 10px;}
a {color: #0066FF; text-decoration: none;}
a:hover {color: #11f11f; font-weight: bold; text-decoration: underline;}
h1, h2, h3, h4, h5, h6 {font-family: "Palatino Linotype"; padding-bottom: 5px;}
p {padding-top: 10px; padding-bottom: 5px;}
#navigation {background: #aaaaaa; height: 30px; color: #333333;}
#navigation ul {line-height: 30px; margin-left: 25px;}
#navigation ul li {display: inline; padding-right: 20px;}
.content {background: #cccccc; height: 300px; padding: 15px 15px 15px 15px; overflow: auto;}
#container {height: 330px; overflow: hidden;}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#c1" title="Content Area 1">Content Block 1</a></li>
<li><a href="#c2" title="Content Area 2">Content Block 2</a></li>
<li><a href="#c3" title="Content Area 3">Content Block 3</a></li>
</ul>
</div>
<div id="container">
<div class="content" id="c1">
<h1>Heading 1</h1>
<p>Curabitur in dui. Mauris adipiscing libero volutpat massa. Ut eros mauris, pulvinar sed, fringilla a, dignissim in, ante. Nunc blandit, massa condimentum malesuada facilisis, arcu ante fermentum orci, et cursus orci libero at est. Fusce posuere, metus vel fermentum pellentesque, nisl pede sagittis velit, vel scelerisque dui mauris tempor dui. Nam nisi. Phasellus sit amet ipsum a risus dapibus scelerisque. Sed porta, massa quis porta lacinia, sem arcu tincidunt purus, id posuere nulla tellus non augue. Ut sed arcu non enim mollis malesuada. Ut gravida ligula. Curabitur ac ligula. Maecenas imperdiet accumsan metus. Proin mattis. Donec suscipit tristique nisi. Nunc sed purus. Curabitur sapien tellus, ultricies ac, sodales faucibus, placerat at, sem. Aliquam rutrum tempus enim? Nulla congue aliquet turpis. Morbi ullamcorper, lectus eget laoreet consectetuer, eros diam faucibus odio, vel mattis dui nulla ut lorem. Phasellus a urna at diam rutrum fermentum.</p>
<p>Nulla tellus nisl, cursus sed, pulvinar in, sagittis in, dui? Phasellus mollis. Cras metus. Morbi volutpat, metus ullamcorper vestibulum molestie; enim eros mollis nunc, sed rutrum arcu ipsum a mi! Morbi rutrum. In hac habitasse platea dictumst. Quisque eros. Duis cursus molestie dolor! Nam imperdiet. Sed risus enim, condimentum ut, sagittis in, tincidunt in, tellus. Suspendisse eget neque tempor tellus malesuada fermentum. Morbi ac elit? Donec rutrum tristique ligula. Nulla odio ante, volutpat eget, aliquet in, placerat et; justo. Etiam in arcu. Morbi quis ligula. Sed elementum dui malesuada erat. Integer lacinia. Fusce eros arcu, accumsan non; viverra eget, vehicula non, nunc.</p>
</div>
<div class="content" id="c2">
<h2>Heading 2</h2>
<p>In et odio eu eros tincidunt aliquam. Nunc fermentum. Ut iaculis nisl non lorem. Aenean lacinia elementum velit. Curabitur a pede? Ut congue neque sit amet risus. Praesent turpis. Vivamus tortor quam, convallis vitae, ultrices ac, imperdiet ut; odio. Integer quam elit, cursus ullamcorper, bibendum non; vulputate sit amet, ante. Nunc suscipit sem in nunc! Maecenas sit amet magna at tellus tincidunt porttitor. Vestibulum ligula. Mauris gravida fermentum pede. Proin arcu pede; varius vel; rutrum vitae, rhoncus ut; lacus. Donec placerat eros. Curabitur molestie imperdiet lectus. Fusce pharetra gravida lorem? Aliquam commodo.</p>
</div>
<div class="content" id="c3">
<h3>Heading 3</h3>
<p>Curabitur elit. Aliquam facilisis dui non dolor. Nulla at magna. Sed sem sem, gravida egestas, commodo sit amet, porttitor in, diam? Nulla quis velit id mauris euismod mattis. Morbi augue arcu, interdum at, congue ut, porttitor id, mauris? Duis vitae dui. Phasellus feugiat. Aliquam erat volutpat. Etiam elementum vulputate metus. Pellentesque rhoncus pharetra justo?</p>
</div>
</div>
</body>
</html>
PROs:
- Light-weight
- No javascript
- Easily styleable
- Works when javascript is turned off
CONs:
- Breaks the "back" button
- Does not work in IE8 BETA 1 or Opera
- Fixed height
How it Works
The bread and butter of this system is the div #container. By setting it's "overflow" to "hidden", all content that's placed inside of it that exceeds the set height and width of the container will not show.
#container {height: 330px; overflow: hidden;}
<div id="container"> /**content**/ </div>
Then by having our links for our content link to the divs of our contents, the browsers will automatically scroll to those divs, effectively "switching" our content to the new div.
<ul> <li><a href="#c1" title="Content Area 1">Content Block 1</a></li> <li><a href="#c2" title="Content Area 2">Content Block 2</a></li> <li><a href="#c3" title="Content Area 3">Content Block 3</a></li> </ul>
<div class="content" id="c1"> <h1>Heading 1</h1> <p>Curabitur in dui. Mauris adipiscing libero volutpat massa. Ut eros mauris, pulvinar sed, fringilla a, dignissim in, ante. Nunc blandit, massa condimentum malesuada facilisis, arcu ante fermentum orci, et cursus orci libero at est. Fusce posuere, metus vel fermentum pellentesque, nisl pede sagittis velit, vel scelerisque dui mauris tempor dui. Nam nisi. Phasellus sit amet ipsum a risus dapibus scelerisque. Sed porta, massa quis porta lacinia, sem arcu tincidunt purus, id posuere nulla tellus non augue. Ut sed arcu non enim mollis malesuada. Ut gravida ligula. Curabitur ac ligula. Maecenas imperdiet accumsan metus. Proin mattis. Donec suscipit tristique nisi. Nunc sed purus. Curabitur sapien tellus, ultricies ac, sodales faucibus, placerat at, sem. Aliquam rutrum tempus enim? Nulla congue aliquet turpis. Morbi ullamcorper, lectus eget laoreet consectetuer, eros diam faucibus odio, vel mattis dui nulla ut lorem. Phasellus a urna at diam rutrum fermentum.</p> <p>Nulla tellus nisl, cursus sed, pulvinar in, sagittis in, dui? Phasellus mollis. Cras metus. Morbi volutpat, metus ullamcorper vestibulum molestie; enim eros mollis nunc, sed rutrum arcu ipsum a mi! Morbi rutrum. In hac habitasse platea dictumst. Quisque eros. Duis cursus molestie dolor! Nam imperdiet. Sed risus enim, condimentum ut, sagittis in, tincidunt in, tellus. Suspendisse eget neque tempor tellus malesuada fermentum. Morbi ac elit? Donec rutrum tristique ligula. Nulla odio ante, volutpat eget, aliquet in, placerat et; justo. Etiam in arcu. Morbi quis ligula. Sed elementum dui malesuada erat. Integer lacinia. Fusce eros arcu, accumsan non; viverra eget, vehicula non, nunc.</p> </div> <div class="content" id="c2"> <h2>Heading 2</h2> <p>In et odio eu eros tincidunt aliquam. Nunc fermentum. Ut iaculis nisl non lorem. Aenean lacinia elementum velit. Curabitur a pede? Ut congue neque sit amet risus. Praesent turpis. Vivamus tortor quam, convallis vitae, ultrices ac, imperdiet ut; odio. Integer quam elit, cursus ullamcorper, bibendum non; vulputate sit amet, ante. Nunc suscipit sem in nunc! Maecenas sit amet magna at tellus tincidunt porttitor. Vestibulum ligula. Mauris gravida fermentum pede. Proin arcu pede; varius vel; rutrum vitae, rhoncus ut; lacus. Donec placerat eros. Curabitur molestie imperdiet lectus. Fusce pharetra gravida lorem? Aliquam commodo.</p> </div> <div class="content" id="c3"> <h3>Heading 3</h3> <p>Curabitur elit. Aliquam facilisis dui non dolor. Nulla at magna. Sed sem sem, gravida egestas, commodo sit amet, porttitor in, diam? Nulla quis velit id mauris euismod mattis. Morbi augue arcu, interdum at, congue ut, porttitor id, mauris? Duis vitae dui. Phasellus feugiat. Aliquam erat volutpat. Etiam elementum vulputate metus. Pellentesque rhoncus pharetra justo?</p> </div>
Share the Love
Mike
November 13th
Any new word on this with IE8?
Fire G
November 14th
Unfortunately this isn't something that can be fixed, each browser has it's own way of processing link anchors (the "index.php#text" URL's), which is how this "hack" operates.
Sorry if this is an inconvenience to you! I'll be writing a tutorial on how to do quick DOM tabs with jQuery soon!