In this talk Tim Thomas showed off how to make tabbed content work without any JavaScript, using CSS exclusively. I tried to emulate what he had and could not. I ended up getting something working but it is a little more hacky than what he offered. It looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
<style type="text/css" media="all">
body {
background-color: #DDEEEE;
}
#content {
padding: 5px;
width: 200px;
}
#content span {
display: none;
}
#innerWrapper {
border: 1px solid #000000;
background-color: #FFFFFF;
}
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
#outerWrapper {
display: table-cell;
padding: 50px 20px 20px 20px;
}
#tabs {
margin: -37px 20px 0 20px;
border-left: 1px solid #000000;
}
#tabs div {
display: table-cell;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
height: 30px;
padding: 5px 5px 0 5px;
background-color: #F2F2F2;
cursor: pointer;
}
#foo:checked ~ #content .foo {
display: block;
}
#foo:checked ~ #tabs .foo {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#bar:checked ~ #content .bar {
display: block;
}
#bar:checked ~ #tabs .bar {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#baz:checked ~ #content .baz {
display: block;
}
#baz:checked ~ #tabs .baz {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#qux:checked ~ #content .qux {
display: block;
}
#qux:checked ~ #tabs .qux {
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
</style>
</head>
<body>
blood stains, ball gowns, trashin' the hotel room...
<div id="outerWrapper">
<div id="innerWrapper">
<input name="tab" id="foo" type="radio" checked />
<input name="tab" id="bar" type="radio" />
<input name="tab" id="baz" type="radio" />
<input name="tab" id="qux" type="radio" />
<div id="tabs">
<div class="foo"><label for="foo">foo</label></div>
<div class="bar"><label for="bar">bar</label></div>
<div class="baz"><label for="baz">baz</label></div>
<div class="qux"><label for="qux">qux</label></div>
</div>
<div id="content">
<span class="foo">My friends and I, we've cracked the code.</span>
<span class="bar">We count our dollars on the train to the party.</span>
<span class="baz">And, everyone who knows us knows that we're fine with
this.</span>
<span class="qux">We didn't come from money.</span>
</div>
</div>
</div>
...jet planes, islands, tigers on a gold leash
</body>
</html>
What is above makes something like what is shown below. Notice the active tab is white and there is no black line at the bottom (I'm stamping over it with white line). I wish I didn't have to set a width on #content and I wish the width that the children of the div before it end up forcing upon their parent was the law of the land, but that is not to be. If I leave a width off of #content then the words in it will not wrap. My solution is kinda ghetto I guess.
No comments:
Post a Comment