Membuat Css Tabs Content
Posted on: November 13, 2007
- In: Css
- 3 Comments
Untuk membuat Tabs content yang harus kita lakukan adalah membuat tabs menu terlebih dahulu yaitu dengan cara membuat membuat sintak css seperti berikut :
/** My tabs **/
.mytabs{margin:0;padding:0;}
.mytabs ul{margin:0px;padding:0;}
.mytabs li{
list-style:none;
float:left;
font-size:11px;
text-transform:capitalize;
}
.mytabs li a{
display:block;
background:#1b6d69;
color:white;
padding:5px 10px;
border-right:1px solid #ece8d2;
text-decoration:none;
}
.mytabs li a:hover{
background:#C0C992;
color:#1b6d69
}
/** My tabs **/
Pertama kita buat class css yang berisi hirarki dari <ul> dan <li>. Class ” .mytabs ul” dengan sintak css margin:0;padding:0; agar posisi margin tidak bergeser. Class “ .mytabs li” dengan sintak css :
list-style:none; /* untuk meghilangkan tanda bullet */
float:left; /*untuk menempatkan objek ke sebelah kiri atau kanan*/
font-size:11px; /*mengatur ukuran font */
text-transform:capitalize; /* mengatur transformasi dari font */
Class ” .mytabs li a” digunakan apabila ada element anchor <a> di dalam element <li> dan kita atur dengan sintak css :
display:block; /*membuat display sebuah box*/
background:#1b6d69; /* latar warna dari box*/
color:white; /*warna font*/
padding:5px 10px;/*untuk mengatur jarak jarak antara ujung box dengan tulisan dengan menjorok ke dalam*/
border-right:1px solid #ece8d2;/*mengatur warna border dan ketebalannya*/
text-decoration:none; /*untuk menghilangkan garis yg berada di bawah tulisan*/
Class ” .mytabs li a:hover” digunakan pada saat mouse mendekati element anchor <a> dan kita atur dengan sintak css :
background:#C0C992;
color:#1b6d69
setelah selesai lalu kita coba panggil dengan membuat file html yang berisi :
<style>
/** My tabs **/
.mytabs{margin:0;padding:0;}
.mytabs ul{margin:0px;padding:0;}
.mytabs li{
list-style:none;
float:left;
font-size:11px;
text-transform:capitalize;
}
.mytabs li a{
display:block;
background:#1b6d69;
color:white;
padding:5px 10px;
border-right:1px solid #ece8d2;
text-decoration:none;
}
.mytabs li a:hover{
background:#C0C992;
color:#1b6d69
}
/** My tabs **/
</style>
<div class=”mytabs”>
<ul>
<li><a href=”#”>link 1</a></li>
<li><a href=”#”>link 2</a></li>
<li><a href=”#”>link 3</a></li>
</ul>
</div>
Setelah kita berhasil membuat tab menu lalu kita teruskan dengan membuat contentbox untuk isi dari content yaitu dengan membuat skrip css sebagai berikut :
.tabcontent{
clear:both;
/* digunakan apabila ada element yg berada float ke sebelah kiri atau kanan maka dengan menggunakan sintak ini element yg kita gunakan akan berada di bawahnya*/
overflow:auto;
/* digunakan untuk membuat sebuah box menyerupai iframe */
width:auto;
height:10em;
border:1px solid #000;
padding:5px;
margin-top:0px !important;
/** hack di ie6 **/
margin-top:-15px;
/** hack di ie6 **/
}
Setelah selesai membuat contentbox lalu kita coba dan skrip keseluruhannya seperti di bawah ini :
<html>
<head>
<style>
/** My tabs **/
.mytabs{margin:0;padding:0;}
.mytabs ul{margin:0px;padding:0;}
.mytabs li{
list-style:none;
float:left;
font-size:11px;
text-transform:capitalize;
}
.mytabs li a{
display:block;
background:#1b6d69;
color:white;
padding:5px 10px;
border-right:1px solid #ece8d2;
text-decoration:none;
}
.mytabs li a:hover{
background:#C0C992;
color:#1b6d69
}
/** My tabs **/
.tabcontent{
clear:both;
overflow:auto;
width:auto;
height:10em;
border:1px solid #000;
padding:5px;
margin-top:0px !important;
/** hack di ie6 **/
margin-top:-15px;
/** hack di ie6 **/
}
</style>
</head>
<body>
<div class=”mytabs”>
<ul>
<li><a href=”#”>link 1</a></li>
<li><a href=”#”>link 2</a></li>
<li><a href=”#”>link 3</a></li>
</ul>
</div>
<div class=”tabcontent”>
ini adalah isi konten nya
</div>
</body>
</html>
Sinzo Sakurata Blog 
December 3, 2007 at 12:01 am
wah mantab tutorialnya 😀