My Opera Wrap

Setelah membahas body Myopera mari menuju ke elemen selanjutnya, yaitu: id wrap0, id wrap1, id wrap2, id wrap3 dan id wrap4, mereka juga termasuk lapisan-lapisan sebagai latar belakang halaman Myopera.

#wrap0 { clear:both; width:100%; } #wrap1, #wrap3 { margin:0 auto; width:960px; }

clear:both; tidak adanya float kanan dan float kiri. width:100%; lebar adalah penuh sama dengan lebar body.
#wrap1 dan #wrap3 adalah id selector yang di kelompokkan mereka dipisahkan menggunakan tanda koma. Hasilnya kelompok ini mempunyai properti nilai yang sama. margin:0 auto; margin adalah jarak luar dari elemen.
0 memberikan nilai kosong jarak luar atas dan bawah. auto memberikan nilai otomatis jarak luar kanan dan kiri.
Beberapa orang tidak memperhatikan dengan sungguh-sungguh tentang nilai properti ini sehingga ketika mereka mengubah nilai #wrap yang terjadi justru posisi halaman blog mereka tidak berposisi di tengah.
width:960px; adalah lebarnya 960px.

#wrap1 { font-family:'trebuchet ms', 'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif; font-size:13px; }

font-family: sudah dibahas di post body myopera sebelumnya. font-size:13px; adalah nilai besar kecilnya huruf dalam hal ini ukuran huruf 13px.

#wrap2[id] { background:transparent url(s6.png) top right repeat-y; }

Properti CSS diatas menunjukkan bahwa
transparent adalah warna background. (s6.png) adalah nama file gambar. top right adalah posisi gambar diset dibagian atas kiri (sudut kiri atas). repeat-y adalah gambar mengulang vertical.

#wrap3 { background:#fff url(themes/side3.gif) top right repeat-y; min-width:750px; }

side3.gif ini ditempatkan dibagian kanan halaman, biasa disebut sidebar. File gambar berukuran lebar 281 x 1 dibagi menjadi dua warna. Warna hitam disebelah kanan berukuran 270px dan sisanya warna putih berbayang 11px.
Jadi yang biasa anda lihat sidebar berwarna hitam sampai ke footer adalah background dari wrap3 yang di repeat ke bawah.
min-width:750px; adalah browser boleh membaca minimal 750px. Sebagai contoh browser opera mobile versi 8.5 hanya membaca halaman blog myopera dengan ukuran lebar 750 pixel.

#wrap3 { width:920px; line-height:1.55; }

line-height:1.55; adalah sebagai ukuran tingginya line pada huruf, ini akan kelihatan berapa jarak antara line satu dengan line dua line tiga dan seterusnya.

#wrap4 { padding:0 15px;  background:transparent url(main1.gif) 100% 200px no-repeat; font-family:Georgia, Palatino, "Palatino Linotype", serif; }

padding:0 15px; adalah memberikan jarak ke dalam dari elemen. 0 memberikan nilai batas atas dan bawah.
15px memberikan nilai batas kanan dan kiri. 100% 200px adalah adalah posisi gambar.
100% dari arah kiri sama dengan 0 tidak ada batasan.
200px dari arah atas memberi batasan 200px.

Gambar background dari #wrap4 ini kelihatan dibawah menu melengkung dan berbayang, sebelah kanan berwarna hitam kelihatan atas sidebar, dibelah kiri warna putih berbayang tepat diatas halaman blog post anda.
Jadi 200px ini sebagai ukuran bahwa posisi gambar di turunkan dari posisi aslinya ke bawah melewati header (#top).

Anda pasti bingung karena header myopera standarnya berukuran tinggi 170px.
#top sebagai elemen pembungkus untuk #top2 dan #menu. #top2 berukuran tinggi 170px border 1px, #menu berukuran tinggi 28px border 1px. Jika nilai-nilai tersebut di tambahkan akan mendapat hasil 170 1 28 1 = 200.

CATEGORY : Myopera, Wrap TAG : belajar, code, css, desain, myopera, standar at Sunday, 7 February, 2010