Assalamualaikum wr.wb

Sebelum-nya kita telah praktek membuat css mwb bagian body pada judul artikel cara membuat tema css mwb dengan mudah di bagian pertama dan di lanjutkan dengan header dan searchform di artikel cara membuat tema css mwb dengan mudah di bagian ke-2 ...

Sekarang kita turun kebawah dan praktek pada bagian NAVIGATION

NAVIGATION

Disini kita hanya akan mengatur beberapa bagian saja agar terlihat kerapian-nya dalam tema blog kita mwb. . .

1.navigasi itu sendiri
2.judul navigasi
3.navigasi li dan
4.navigasi li a

Dan masih banyak lagi selector di bagian navigasi ini. tapi dalam judul artikel ini adalah cara membuat tema css mwb dengan mudah jadi aku ambil yang simpel-nya saja. dan Sampel Selector lainya bisa lihat di bahasan Sebelum-nya dan jika masih kurang bisa lihat di blog2 tetangga.

kita mulai..

Perhatikan contoh:

#navigation { background:black; border:1px solid green; margin:0px; text-align:center }

Dalam contoh diatas kita hanya mengatur background, border, jarak keluar dan posisi text-nya. lainya kita atur pada bagian dalam, di bagian ini sama tempat-nya seperti header dan searchform jadi untuk border, dan jarak keluar atau margin aku sarankan agar sama. . .

Sekarang untuk judul navigasi nya...

Contoh:

#navigation h2 { background:black; border:1px solid red; margin:0px; padding: 5px 1px; text-align:center; text-transform:uppercase }

Apa kalian melihat perbedaan dan penambahan property yang aku gunakan dalam contoh diatas dari contoh sebelum-nya?

Hanya sedikit penjelasan !!

Untuk property text-transform mudahnya agar semua huruf jadi besar semua dan padding:5px 1px agar jarak kedalam dari border dengan text-nya agak menjauh. dan ingat,dalam penulisan ukuran padding itu penjelasanya adalah searah jarum jam dan jika penulisannya seperti itu, antara atas dan bawah berjarak 5px dan kiri kanan berjarak 1px. jelas kan sob, masak judul sama daftar kategorinya sama?,. Dibedakan sedikit saja ya. .


Sekarang kita mengatur bagian #navigation li

Navigation li ini, Tepatnya kalau aku menyebutkan adalah pembungkus dari #navigation li a atau di bagian luar-nya #navigation li a...

Perhatikan contoh:

#navigation li { list-style:none; background:black; border:1px solid red; margin:1px 3px 1px -17px; text-align:center }

dan

#navigation li { list-style-image:url(alamat gambar kamu); list-style-position:inside; background:black; border:1px solid red; margin:1px 3px 1px -17px; text-align:left }

Dalam kedua contoh diatas,.

yang pertama tanpa menggunakan list atau disini mudahnya adalah kita menghilangkan nomor didepan #navigation li a dan yang kedua kita akan menggunakan list berupa gambar dan posisinya. . .

Perbedaan contoh diatas adalah terletak pada pengaturan text-nya!! jika list-nya tanpa gambar kita atur text-nya ditengah dan jika memakai gambar kita arahkan text-nya rata dikiri agar rapi,.

Dan margin:1px 3px 1px -17px

Penjelasanya adalah jika margin:0px maka jarak antara suatu element menempel, Dan kalau contoh-nya seperti diatas kita menggunakan -17px maka kita akan menarik jarak-nya sampai keluar batas dan melewati nomor didepannya. karena #navigation li adalah pembungkus #navigation li a jadi posisinya hanya didepan angka-nya, dan untuk mengakalinya agar border dan background li tadi sampei di belakang angka kita pakai margin:-17. dan ingat, penulisan-nya searah jarum jam berputar...


Sekarang kita mengatur #navigation li a
Untuk #navigation li a ini kita tinggal mengatur warna link-nya saja. . .

Contoh:

#navigation li a { color:yellow }

Silahkan kreasikan sendiri dengan ul ol dan juga h3 sampai h6..
NEXT...