29 Agustus 2008

Membuat Tab Horizontal dengan CSS

Tanpa sengaja saat saya blogging, berselancar di dunia maya saya temukan Aplikasi CSS Tab Designer Versi 2.

Mumpung si Net lagi ngebirit larinya maka IDM segera meluncur untuk membongkar persembunyian CSS Tab Designer V.2 tersebut di RS.

Kemudian seharian aku pelajari dan hasilnya, akan saya coba untuk dipaparkan disini.

Kode  HTML yang dibawah ini dipasang di elemen halaman bagian "<>"           ( tahu khan maksudnya )


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">HOME</a></li>
<li><a href="#">OPO MANING</a></li>
<li><a href="#">OPO MANING</a></li>
<li><a href="#">MANING OPO</a></li>
<li><a href="#">NING OPO MA</a></li>
</ul>
</div>

Nah sekarang untuk kode  CSS saya pasang semabrangan, yang jelas di bagian <head>.  Atau karena posisi di bawah Header ( Judul blog kita ) maka saya pasang di bawah kode ini :

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Dibawah ini kode yang harus dipasang :


#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}
#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}
#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}
#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}
#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}
#navlist a#current { color: #fc6; }

Nah bagi rekan-rekan yang ingin punya CSS Tab Designer Versi 2.  silahkan  :

Download :  DISINI    ( FIle ........RAR )

Contoh hasilnya : DISINI

Semoga bermanfaat dan dapat dijadikan tambahan bahan belajar.... ntar jangan lupa sama si bC, kalau udah pinter.... bC diajari.... biar bC tambah pinter

1 komentar:

iwan kurniawan mengatakan...

Mas, koq ruwet yang ngE-dit seekch?

marai bingung ae

mohon beri pencerahan kembali

Posting Komentar

 
Foto saya
Ketidaktahuan anda adalah kepedulianku untuk selalu memberikan informasi, meski hanya sekedar hilangkan rasa ingin tahu saja.