Kedekut Oh! Kedekut - Belajar coding & CSS from Genius

[reezluv]

aku nak cuba! kalau ko dah potong suma elok2, insyaAllah senang nak pasang balik, aku tgh buat sendiri design, tp pasal ilmu tak cukup tuh yg lmbt sket kalau nak abis satu theme huhu..

oo..ok2..nanti aku dh siapkan satu aku kasi kat ko psd file..amcam?ade berani?hehee...aku pm ko kat sini je ar nanti?

 

[eches]

beresss!

 

[eches]

aku rasa aku dokumenkan sket la benda2 yang aku dah belaja, sambil2 tuh panaskan sket thread nih..super K dan rakan2 bleh betulkan+tambah2kan..

1. Margin

merah - margin
hitam - border
biru - padding

daripada 3 elemen ni, cuma border je yang visible kat mata manusia,margin dengan padding kita tak nampak..margin sefaham aku, adalah untuk kasi ruang antara div-div (kotak-kotak). padding pulak adalah untuk kasi ruang antara border dengan text.

nih basic notation untuk margin

margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
Contoh 1: margin:1px 2px 3px 4px;

nak senang ingat, ingat arah pusingan jam..

margin jugak boleh ditulis dalam bentuk yang lebih pendek (shorthand)

Contoh 2: [margin:1px;]
- maksudnya kat sini semua margin nilainya 1px;
- boleh juga ditulis sebagai [margin:1px 1px 1px 1px;]

Contoh 3: [margin 1px 2px;]
- maksudnya kat sini margin-top dan margin-bottom nilainya 1px, & margin-right dan margin-left nilainya 2px.
- boleh juga ditulis sebagai [margin:1px 2px 1px 2px;]

Contoh 4: [margin 1px 2px 3px;]
- maksudnya kat sini margin-top nilainya 1px, margin-right dan margin-left 2px, dan margin-bottom nilainya 3px.
-boleh juga ditulis sebagai [margin:1px 2px 3px 2px]

selain ditulis dalam format [margin:1px 2px 3px 4px], margin juga boleh ditulis dalam bentuk berikut:

#header {
margin-top:2px;
margin-left:3px;
}

dalam contoh kat atas, margin-margin yang tak dinyatakan akan mengambil nilai 0.

2. Padding

Secara asasnya, notation untuk padding adalah sama macam margin.

Contoh:
padding:2px; --> padding:2px 2px 2px 2px;
padding:1px 2px; --> padding:1px 2px 1px 2px;
padding:1px 2px 3px --> padding:1px 2px 3px 2px;
padding-top:2px;
padding-left:3px;

tuh je setakat nih..nanti aku sambung part lain..kalau ramai yang menyumbang, nanti thread nih jadi macam thread adsense, org datang cuma gali je

 

[reezluv]

wa..best ni eches..hehe..kalau ko wat manual ke dalam pdf lagi la masyuk..wat macam sitepoint tu..hehe..nak yang advance.ko jual la..

 

[CikSukan]

bagus sangat eches =D>=D> huhu ada gak nanti guest yang guna kamus ni untuk belajar kat sini

http://search.cari.com.my/dictionary/dic_malay.php

ps-
Nak tanya..

1.Kalau kita edit CSS then kat widgets kita masukkan HTML/javascript dia akan working tak -kalau blogger script OK.

Then camna nak tambah another CSS dalam script wordpress ni?
Ada perlu tambah code lain PHP ke? #:-S

 

[kedekut]

margin: [margin-top] [margin-right] [margin-bottom] [margin-left];
Contoh 1: margin:1px 2px 3px 4px;

Ya merujuk perkara di atas. muahaha..

Ada yang susah nak hafal bila shorthand ni.. Ok ni satu tips yang aku guna.

TROUBLE

so ingatkan perkataan TROUBLE -> TOP RIGHT BOTTOM LEFT


heheh.. selamat mencuba

 

[eches]

aku nak kasi analogi CSS, xhtml dan web programming (PHP, ASP, PERL etc) dengan manusia. Harap senang nak paham..Kita anggapkan PHP, ASP dan programming language yang seangkatan tuh sebagai manusia yg berlainan bangsa, xhtml (div, span etc) tuh adalah pakaian manusia, css tuh adalah aksesori tambahan/pakaian..Secara asasnya, tak kira apa jua bangsa (PHP, ASP etc) kita perlukan baju ngan seluar (i.e header,content,sidebar, footer).

untuk sesuaikan dalam satu2 situasi/majlis (theme/niche) kita mungkin kena pakai pakaian yang tertentu. Bila beraya kita akan pakai baju melayu, songkok, sampin etc (raya theme),bila ada majlis formal kita pun kena pakai pakaian formal(formal theme).

Untuk personalizekan lagi pakaian kita, kita mungkin nak tambah 2 poket tambahan atas seluar yang kita pakai (div(kotak) tambahan i.e 2 sidebar). Poket hitam mungkin tak lawa, jadi kita warnakan merah dan kasi belang sket (CSS i.e background:red; border:1px solid #333).

jadi untuk appearance, kita cuma perlu xhtml dan css. Namun tak dapat dinafikan, sedikit sebanyak kita perlu tau jugak pasal fungsi badan kita secara general.untuk kaki, kita boleh pakaikan stokin ngan kasut je, tak mungkin kita boleh pakaikan baju (contoh: dalam kotak (div) footer tak mungkin kita letak < ?php the_content; ?>, sebab function php tuh layaknya ada dalam content.

begitulah kira2nya hikayat xhtml, CSS dan PHP )

reezluv @ aku bukan pandai sangat mengarang panjang2 haha nanti aku sambung post benda2 basic. mungkin lepas tuh aku consolidate dalam bentuk pdf, senang ada flow, org download nak baca

1. Kalau kita edit CSS then kat widgets kita masukkan HTML/javascript dia akan working tak

-kalau blogger script OK.

2. Then camna nak tambah another CSS dalam script wordpress ni?
Ada perlu tambah code lain PHP ke? #:-S

1. haah css working sama cam dalam blogger gk.
2. nak jawab soalan 2 tuh, kasi contoh lagi senang.

katakan yang sebelah kiri tuh adalah sidebar yang asal dan kita nak nak letak satu bahagian baru diatas sidebar (tapi masih dalam kotak(div) sidebar).Kes yang aku kasi nih based on kubrick (default theme bagi wordpress), sebab suma org ada dan senang nak rujuk.

dalam sidebar.php, bawah <div id="sidebar">, letak code kat bawah

        <div id="top_sidebar">
Lorem ipsum apa bendanya lorem ipsum nih Lorem ipsum apa bendanya lorem ipsum nih Lorem ipsum apa bendanya lorem ipsum nih Lorem ipsum apa bendanya lorem ipsum nih
        </div>

Jadi rangka untuk komponen ni (anologinya poket) dah ada.Sekarang macam mana nak personalizekan kotak top_sidebar nih? Jadi kita akan pakai css. (Untuk panggil div dari file css @ menamakan div (kotak), refer post #78)

taip code dibawah dalam style.css(stylesheet).

#top_sidebar {
      width:180px;
      border:1px dashed #6c5a5a;
      background:#ce1616;
      color:#ffffff;
}

(note: boleh letak je kat mana2, tapi untuk future reference/editing seeloknya letak bawah @ atas

#sidebar {
bla bla bla
bla bla bla
}

Hasilnya lebih kurang macam nih

penerangan:
- width:180px; (kita setkan lebar 180px)
- nilai untuk height kita tak setkan supaya bila ada text tambahan untuk dimasukkan, kotak top_sidebar akan memanjang ke bawah.
- border:1px dashed #6c5a5a; (1px - ketebalan line, dashed - garis putus (lain2 value: solid,dotted dan beberapa lagi), #6c5a5a - warna kelabu (lebih kurang))
- background:#ce1616; (warna background; merah dalam contoh ni)
color:#ffffff; (warna tulisan; putih dalam contoh ni)

okeh, skrg nih cuba kecikkan width, tgk rupa top_sidebar. pastuh tambah padding dalam 2 @ 3px, tambah margin-bottom.tgk apa hasilnya.

Value untuk css function banyak. Contoh, untuk border banyak lagi value selain dashed, solid etc. Benda ni kena explore. Paling senang Yahoo..untuk apa2 function taip lebih kurang camni, insyaAllah keluar

"border css property"

 

[eches]

ID dan class

Sekarang pasal id dengan class pulak. Kita boleh namakan satu-satu div (kotak) dengan menggunakan tag id ataupun class.

Contoh:
Katakan kita ada satu div (kotak) yang dinamakan top_sidebar dalam php file @ html file, kita akan tulis sebagai <div id="top_sidebar">Apa2 je boleh tulis dalam ni</div>. Dalam css, untuk merujuk kepada div ni kita akan tulis sebagai #top_sidebar (tanda '#' perlu diletakkan sebelum nama div).

Div boleh juga dinamakan dengan menggunakan tag class

Contoh:
<div class="top_sidebar">Apa2 je boleh tulis dalam ni</div>. Untuk merujuk file nih dalam css kita tulis sebagai .top_sidebar (tanda '.' perlu diletakkan sebelum nama div).

Tak kisah sama ada kita pakai class ataupun id, dua-duanya boleh dipakai untuk kita stylekan div tersebut.

Persoalannya, bila masa yang sesuai untuk guna id dan bila pula nak guna class?

Mudahnya, id cuma boleh digunakan sekali saja dalam satu-satu html dokumen (unik), class pula boleh digunakan berulangkali. Contoh dalam wordpress:
id - Untuk header kita boleh pakai <div id="header">, sebab div header cuma muncul sekali je.
class - <div class="post"> yang terdapat dalam php loop (dalam index.php)

 

[reezluv]

wa..best gile ko eches..aku save la thread ni..hehe..aku online pun kat cc je..

 

[Kimie]

...hahaha... lorem ipsum...

aku pun tertanya2...


sorry off topic..