kali ini saya akan berikan sedikit cara-cara membuat navigasi sederhana,saya mulai dari navigasi level 1 dahulu supaya orang-orang mengerti element-element apa saja yang di gunakan untuk membuat sebuah navigasi,dan jika suatu hari ingin membuat sebuah navigasi sendiri tidak susah-susah lagi untuk mencari tutorialnya,karena sudah memahami bagian-bagian apa yang di perlukan untuk membuat navigasi tersebut.
Kebanyakan orang tidak memperdulikan akan hal tersebut,mereka hanya bisa mencopy dan paste code-codenya saja,tetapi tidak mengerti apa yang mereka copy tersebut dan bagaimana element tersebut bekerja.Sehingga jika mereka di tanya pasti akan kebingungan untuk menjawabnya,orang tanya apa dia malah jawabnya apa.
Sifat yang itulah yang membuat orang bosan untuk bertanya kepada orang tersebut,karena orang pasti sudah tahu kemampuan orang tersebut sampai di mana dari melihat orang tersebut menjawab sebuah pertanyaan. :)
Baikalah,kita langsung mulai saja.
Element-element terpenting yang harus anda ketahui pada Css :
1. Display : Inline
2. Margin dan Padding
Pengertian Element-elemet tersebut :
1. Display : Inline
Element ini di gunakan sewaktu ingin meratakan posisi yang tadinya Vertikal menjadi Horizontal.
2. Margin dan Padding
Untuk margin dan padding digunakan untuk mengatur jarak sebuah Tag HTML dengan Tag yang lain,lebih baik kita langsung peraktek untuk lebih jelasnya.
karena element-element ini susah untuk di ungkap dengan kata-kata. :)
-----------------------------------------------------------------------------
Copy dan paste Code Css dan Html ini pada sebuah Notepad :
--------------------------------------------------------------------
<!-- Kode Css -->
<style type="text/css" media="all">
ul li a{
color:#0F0;
text-align:center;
text-decoration:none;
font-family:"Courier New", Courier, monospace;
font-size:14px;
}
ul{
background-color:#666;
margin:auto;
width:900px;
border:0px solid;
-moz-border-radius:10px;
display:block;
}
li {
display:inline;
margin:auto;
padding:2px 60px;
background-color:#039;
height:20px;
border:1px solid;
}
/* Khusus Hover */
li:hover{
background-color:#6C3;
position:relative;
top:-3px;
}
/*--------------*/
</style>
<!-- Tutup Kode Css -->
<!-- Element HTML-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Connect</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- Tutup Element -->
--------------------------------------------------------------------
Jika sudah,save code tersebut dengan extensi *.html kemudian jalankan file yang sudah anda save tersebut yang berbentuk *.html
Latihan :
Coba anda ubah-ubah sendiri element seperti Display : inline menjadi block atau anda hapus,maka perubahan posisi menjadi vertikal,bukan horizoltal.
kemudian anca coba ganti margin atau padding menjadi 0px semua,dan lihat hasilnya akan menjadi apa.
selamat mencoba. :)
