My Opera Mainwrap

Halaman theme myopera terdiri dari dua kolum, kolum pertama (id mainwrap) terletak disebelah kiri, dan kolum kedua (id sidewrap) terletak disebelah kanan disebut juga dengan sidebar. Ada beberapa orang yang menyukai tampilan blognya dengan menukar letak posisi kedua kolum tersebut, id mainwrap diletakkan disebelah kanan dan id sidewrap (sidebar) diletakkan disebelah kiri. Jika anda sedikit saja memahami gaya-gaya dari id mainwrap dan id sidewrap anda akan sangat mudah untuk mengerjakan pekerjaan itu. Lihat nilai gaya id mainwrap berikut

#mainwrap {width:620px; padding-bottom:12px;float:left;}

Dengan memberikan nilai lebar 620px dan float left berarti sangat mendukung untuk memberikan sisa ruang disebelah kanan. Lalu berapa sisa luas ruang yang tersedia disebelah kanan? Pada post myopera content anda masih ingat bahwa id content mempunyai nilai lebar 890px, berarti 890px – 620px = 270px. Berikut nilai lain id mainwrap

#mainwrap {display:inline;margin:0 -270px 0 0;}

Nilai margin kanan -270px ini sebenarnya sekedar untuk jaga-jaga karena dengan adanya nilai float left posisi id mainwrap tidak akan tertarik ke kanan meskipun margin kanan min 270px. Anda boleh mencoba, anda hapus float left maka id mainwrap anda akan tergeser ke kanan.

Setelah id mainwrap ada lagi elemen lapisan didepannya yaitu id main. Id main ini masih dalam kekuasaan area id mainwrap.

#main {min-height:400px; width:620px;} #main {padding-bottom:10px;}

Sedikit untuk penambahan, yang di maksud dengan min-height:400px; adalah bahwa tinggi elemen minimal 400px meskipun didalam elemen tidak ada tulisan atau gambar tingginya tetap 400px.

Berikut adalah elemen id selector pada halaman html untuk mencocokkan CSS di atas agar anda lebih mudah untuk memahami

<div id="content" class="blogfront"><div id="mainwrap"><div id="main">

Untuk class blogfront sengaja saya tidak membahasnya. Hanya sedikit saja pengertian bahwa class blogfront pada myopera ini terlihat pada halaman utama atau biasa disebut index. Untuk anda yang kreatif anda bisa menggunakan class blogfront ini untuk membuat warna dan gaya post yang sangat berbeda. Saya belum pernah melihat anda yang memanfaatkan class blogfront di myopera.

CATEGORY : Mainwrap, Myopera TAG : belajar, code, css, desain, myopera, standar at Friday, 19 February, 2010