<!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" xml:lang="en" lang="en">
<!--Bab5-2.html-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Membuat CSS Tabs</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
p { margin: 5px 5px 10px 0; }
#page-wrap { width: 960px; margin: 0 auto; }
h1 { font: 36px Georgia, Serif; margin: 10px 0; }
.group:after {
visibility: hidden; display: block;
font-size: 0; content: " "; clear: both; height: 0;
}
.tabs { list-style: none; }
.tabs li { display: inline; }
.tabs li a {
color: black; float: left; display: block;
padding: 4px 10px; margin-left: -1px;
position: relative; left: 1px;
background: white; text-decoration: none;
}
.tabs li a:hover { background: #ccc; }
.tabbed-area { margin: 0 0 120px 0; }
.box-wrap { position: relative; min-height: 250px; }
.tabbed-area div div {
background: white; padding: 20px; min-height: 250px;
position: absolute; top: -1px; left: 0; width: 100%;
}
.tabbed-area div div, .tabs li a { border: 1px solid #ccc; }
#box-one:target, #box-two:target, #box-three:target { z-index: 1; }
</style>
</head>
<div id="page-wrap">
<div style="width: 420px; float: left;">
<h1>CSS Tabs</h1>
<p>Contoh Sederhana</p>
<div class="tabbed-area">
<ul class="tabs group">
<li><a href="#box-one">Tab 1</a></li>
<li><a href="#box-two">Tab 2</a></li>
<li><a href="#box-three">Tab 3</a></li>
</ul>
<div class="box-wrap">
<div id="box-one">
<p><em>Konten untuk Tab 1</em></p>
<p>Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egest
augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="box-two">
<p><em>Konten untuk Tab 2</em></p>
<p>Feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat
eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.</p>
</div>
<div id="box-three">
<p><em>Konten untuk Tab 3</em></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas.</p>
</div>
</div>
</div>
<body>
</body>
</html>
0 Komentar