Width adalah lebar, Contoh:
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik).
header-wrapper Jika di ganti dengan nama lain juga tidak apa-apa misalnya kepala.
width:900px; berarti lebarnya sebesar 900 pixel. Nilai 900 pixel ini bisa di ubah sesuai keinginan. Nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus.
border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel.
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.
outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, misalnya kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper.
Apabila ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.
main-wrapper adalah kolom halaman posting.
width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel.
Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.
#sidebar-wrapper {
width: 220px;
float: right;
}
float: right;
}
Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.
width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper.
contoh : Jika ingin diperbesar menjadi 250px maka tambahan pixel adalah sebesar 30 px, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.
#newsidebar-wrapper {
width: 200px;
float: left;
}
Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.
Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.
Demikian bahan yang bisa kita pelajari, sampai jumpa lagi (Insya Allah).
Admin : Unknown ~ The Journey Barlie's Blog
Artikel Cara Mengatur Ukuran Kolom Template. Semoga bermanfaat, untuk kritik dan saran silahkan klik poskan komentar dibawah atau Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.
0 Comments
