CSS : Styling Your List
Hari ni aku rasa sangat hampeh, ekoran tiada apa-apa update kat ofis aku untuk aku kerjakan. Kadang-kadang aku kena tunggu pukul 4 baru ada task menyusul, then secara tak langsung aku kena balik lewat sebab nak setelkan task tu. So hari ini takda banyak kerja, petang pun macam lepak jek, jam menunjukkan jam 5 petang, so dari aku membazir masa tunggu task aku wat tutor CSS untuk stylingkan list korang dengan menggunakan list. Normally kita ada 3 jenis list, ordered-list(OL), unordered-list(UL), and definition-list(dl), for extensive info korang leh baca dari link berikut – W3Schools : HTML Lists
Ok, untuk tutorial kali ini aku wat sample siap-siap, download neh untuk rujukan : Tutor CSS : Styling Your List(tutorA.zip)
Ok, tanpa membazirkan masa, kita tengok dulu html berikut :
- Ikram Hakimi bin Mohd Zaki
- Ahmad Faris bin Mohd Zaki
- Farah Naquiah binti Mohd Zaki
- Anis binti Mohd Zaki
- Amirul Amin bin Mohd Zaki
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
..dari HTML kat atas, kalau korang perasan aku ada buat 1 div (ID:#wrap) dan dalam div tu ada ul+li. Okay, kita stylekan div tu dulu macam yang berikut:
#wrap {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666;
width: 350px;
margin: 0 auto;
padding: 0;
background: #FF0;
}
..dan macam nilah lebih kurang kalau kita nak lihat kesan awalnya. Bagi aku, aku lebeh suka setkan background-color pada #wrap tu supaya senang aku nak tengok area mana die dah disetupkan.
So, kalau korang tengok secara defaultnya, unordered-list akan display default styling iaitu bullet (bintat-bintat tu la). So kat situ target kita untuk kali ini, nak stylekan bullet tu. Okay, korang codekan CSS berikut bawah kepada #wrap tadi.
/* CSS Document */
ul.testA {
width: 350px;
float: left;
padding: 0;
margin: 0 0 20px 0; /*this will seperate this UL with another UL*/
list-style-type: none;
background: #0ff; /*as usual, a markup*/
}
ul.testA li {
display: block;
padding: 0 0 0 20px;
margin: 0;
background:url(images/ul_li.png) left no-repeat;
}
Sekarang kita dah create class untuk ul, aku explain sikit dari pemahaman aku, ul.testA merujuk kepada ul yang classnya testA. Paham? Diam-diam tu paham la tu. Jangan risau, nanti bila masuk part implementation kat HTML nanti korang akan paham. Okay, see below HTML code yang mana aku dah applykan class testA kepada ul, ul class=”testA”
- Ikram Hakimi bin Mohd Zaki
- Ahmad Faris bin Mohd Zaki
- Farah Naquiah binti Mohd Zaki
- Anis binti Mohd Zaki
- Amirul Amin bin Mohd Zaki
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Kemudian korang akan dapat result seperti gambarajah dibawah. Okay, kalau korang perhatikan rapat-rapat, korang akan dapati ada slack@macam-tak-kena sikit kat result korang, esspecially kat bahagian yang aku dah tanda tu, paham-paham la kan.
..untuk fixkan position image tu, korang edit balik kat bahagian background image bagi list korang, yang asal :
ul.testA li {
display: block;
padding: 0 0 0 20px;
margin: 0;
background:url(images/ul_li.png) left no-repeat;
}
kepada code yang berikut :
ul.testA li {
display: block;
padding: 0 0 0 20px;
margin: 0;
background:url(images/ul_li.png) 0 4px no-repeat;
}
aku explain sikit pasal background:url(images/ul_li.png) 0 4px no-repeat;, okay, kalau korang tengok ada 0 4px no-repeat tu, 0 4px tu sebenarnya adalah position background, yang mana ’0′ tu distance background dari kiri dan 4px tu distance background dari top. Korang boleh adjust ikut suka hati korang position tu. Try it!
Okay, nak cabut dah, aku lampirkan sekali sample yang aku buat, leh la korang nak buat refer. Dalam contoh yang aku lampirkan ni korang boleh tengok efek dari margin yang aku setupkan kat UL, okeyh, enjoy!
Download untuk rujukan : Tutor CSS : Styling Your List
13 responses to this article
Warning: call_user_func(list_pings) [function.call-user-func]: First argument is expected to be a valid callback in /home/ikram/public_html/wp-includes/comment-template.php on line 1335
ini yang buat tangan aku gatal-gatal nak buat tutorial ni. hehe.
awesome!…CSS…coding sampai semput!
@xun
woooo, ko lagi terer buat, aku tunggu beb!
@wanjak
haa, semput gak aku nak tulis sume2 tu, hoho
tutorial yg bagus!
aku selalu gak godek2..tp godek yg dah sedia ada nyer la..;))
beb ada font callibri?haha
ikre..wat ler tutorial berbayar..hehe
@cik zati
ko nk watpe dgn calibri? huhu
@hakim
aku blajo free takkan la aku nk letak price pulop, huhu
cool bro..
dah tambah ilmu pasal CSS lagi
@loq
no problem bro ^_________^
Wahai Encik Ikram yang tersayang, nak improve tak? Apa kata ko buat tab untuk setiap sub elements (div, li, ul etc). Senang sikit orang nak baca dan orang akan tahu structure code tu dengan senang.
p/s: pehh, makin mantap ah skarang!
@izzuddin.helmi
hohohoho, canne tuh??
p.s.s : thank ijud!
Cascading Style Sheet kena belajar. Sangat penting tuk website 2.0 skunk ini.
Lagi terrer CSS ini cam2x boleh dibuat.
Leh r buat template sendiri blog korang
assalamualaikumw.b.t…..Lame x jumpe. Ngape x balik kelate raye haji?Ingat ble tgok abe long encem ni. Smoga berjaya selalu hendaknya…insyaAllah.
Pingback: CSS : Simple Button Dengan CSS Image Sprite : I, Hakimi