Sinzo Sakurata Blog

Membuat Css Tabs Content

Posted on: November 13, 2007

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>

3 Responses to "Membuat Css Tabs Content"

wah mantab tutorialnya😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: