Profil Penulis

Hairudy: Nama sebenar saya adalah Hair Rudy Md.Noor, kadang-kadang atau jarang-jarang kawan-kawan saya panggil saya Hair. Ini kerana bunyinya terlalu kekok bagi saya. Saya meminati bidang reka bentuk laman web. Kerjaya sebagai pereka laman web seawal 2002. (http://www.hairudy.net)

Lihat semua pos oleh hairudy

Centering Page pada IE6?

25 August 2008 | Pos Terkait | Dalam Kategori

• Saiz Font (CSS/JS)
• Drop Down Menu: Dreamweaver CS3
• Percuma: Sifoo WordPress Theme V1
• Menu “Pull Down” menggunakan CSS?
• Ikon pada Senarai (List)
• CSS Secara Rawak Gabungan PHP
• Tengahkan Objek dengan CSS
• IE 6 Image *.png

Kategori: HTML/CSS

Tags: absolute • div • html/css

Bagaimana pendapat anda dengan X-Browser Internet Explorer 6? Mungkin telah banyak yang telah “menyusahkan” kita apabila sesetengah css/html code pada IE6 tidak dapat membaca dengan baik.

Di sini saya telah memcuba pelbagai kaedah untuk “centering DIV with CSS for IE6“. Sila lihat code CSS yang telah saya hasilkan ini dengan kedudukan <div> antara pertengahan paparan IE6.

Langkah:

Disini saya hasilkan contoh <div> yang telah saya hasilkan.

<div id="container">
<div id="pheader"> <p>Your Header</p> </div>
<div id="pbody"> <p>Your Body</p> </div>
<div id="pfooter"> <p>Your Footer</p> </div>
</div>

dan seterusnya saya menghasilkan code css dengan kedudukan “center” antara kedudukan div anda.


#container {
width: 800px;
background:#0099FF;
border: 1px solid #666666;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin:10px auto 0;
margin-left: -400px; /* tolak dari lebar (width:) 800px */
}

Dengan menetapkan posisi kiri div kepada 50%, div akan bermula di tengah2 skrin. Kita boleh menggerakkan keseluruhan div ke kiri dan meletakkan ia ditengah-tengah mukasurat dengan meng”adjust” margin kiri.

That’s it! So, itu sahaja untuk menengahkan paparan <div> anda daripada Internet Explorer 6. Damn it’s true damn true. Tuts berikutnya, saya akan menunjukkan cara-cara menghasilkan pulldown menu tanpa sebarang penggunaan Java Script mahupun lain-lain code selain daripada CSS/HTML sahaja. Stay Tuned!

Contoh Paparan

Kod di atas, sesuai digunakan untuk semua jenis browser seperti IE6, safari, mozilla dan sebagainya. Dengan menggunakan satu code css di atas membolehkan text atau images anda ditengahkan.

IE6 ++ Ok, Safari Ok, Modzilla - Ok. Jika ada sebarang masalah pada code saya atau sebarang pertanyaan, sila berikan comment anda dibawah.

Happy Browsing,

hairudy.net

Terdapat 11 Maklumbalas Setakat Ini. »

1. 

   Komen oleh bluar pada 27 August 2008:

   nak tanya ckit leh x…
   mcm mane kite nak setting css di firefox & ie kasi same?????
2. 

   Komen oleh mrpsycho98 pada 29 August 2008:

   Much simpler:

   #container {
   margin: 0px auto 0px auto;
   width: 800px;
   background:#0099FF;
   border: 1px solid #666666;
   text-align: left;
   }

   
3. 

   Komen oleh Hairudy pada 29 August 2008:

   mrpsycho98 thanks to share it.
   But can center ker ur CSS for IE6 browser? dah test?
   I dah try but won’t center
4. 

   Komen oleh Pai pada 31 August 2008:

   nak centerkan is easy, modern browser should centered the div with “margin:0 auto;”.. (assuming we’re talking about horizontally centered, if nak vertical-align center, itu lain crita.)

   note: “margin:0 auto;” is a simplified version for “margin:0 auto 0 auto;”..

   utk browser ‘kesayangan’ kita ie6 plak, just letak “text-align:center;” under body {…}, this should fix the issue. dont worry pasal text alignment utk keseluruhan site, nanti dlm div {…} bleh set balik “text-align:left;”..

   
5. 

   Komen oleh Hairudy pada 31 August 2008:

   Thanks to share pai wubian
6. 

   Komen oleh Pai pada 3 September 2008:

   sharing is caring..

   best jugak ada local blog yg discuss benda2 ni..
7. 

   Komen oleh endless pada 17 September 2008:

   salam..
   yup, sy pn teringin nak tau jwpn utk soklan dr ‘bluar’ sbb mmg asyik problem IE ngan mozilla yg tak same bile viewed in term of css..
   mtk forumer bg pendpat n tip or trips utk buat ‘design slicing’ atau mungkin bleh bg sample or cara2 yg btl.. sbb sy selalu hdapai mslh dimana design sblm n selepas slice tidak btl2 same, lari sbb penggunaan table tidak btl dll..
   actually sy baru belaja seme benda nie hrp mtk pdgn forumers
   terima kasih.
8. 

   Komen oleh hairudy pada 17 September 2008:

   Salam En.Endless,

   Boleh berikan saya maksud saudara, apakah itu “Bluar”???
   Untuk teknik design slicing pihak Sifoo.com akan usahakan secepat yang mungkin. Ini kerana bagi element-element ini terlalu banyak perlu kami rangka satu persatu bagi memudahkan pengguna untuk memahami setiap langkah yang diberikan.

   Jika saudara ingin mengetahui lebih lanjut berkenaan dengan tip dan tricks design slicing, boleh kemukan di topic reka bentuk laman web di Forum.

   Best Wishes,
   Hairudy
9. 

   Komen oleh endless pada 20 September 2008:

   thanks bro rudy. bluar? ooo poster yg atas tue die kemukakan sokln yg same sy nak tanyer.. mmg part yg css tu problem sbb maklumla sy baru blaja so byk tak tau lebh2 lg bile design yg dah convert html tak same bile view kat IE dgn mozilla. takpe2 kene lbh byk blaja.. hehe..
   thanks for da info bro n tn sifoo.
10. 

    Komen oleh hairudy pada 20 September 2008:

    Ye endless, sedikit masa lagi saya akan laksanakan permintaan saudara baru slice image dari photoshop terus menerus ke HTML.

    Stay Tune.
    
11. 

    Komen oleh endless pada 22 September 2008:

    thanks bro pendekar laut..hehe..
    aper cite ejoe.net? dah lame tak jmpe ejoe la.. dah ade bape anak skg hehe..

    thanks byk2 maklumla ambe web desgner cap ayam baru nak blaja..
    

Hantar MaklumBalas