Yaptığınız tasarımlarda tarayıcılar arası uyum sağlamak herkes için zordur, bu anlatımda birazda olsa uyum sorununu anlamanıza ve düzeltmenize yardımcı olacaktır :)
Dikkate almamız gerek 4 tarayıcı vardır:
1) Internet Explorer, 2)FireFox, 3) Opera ve 4) Chrome
Neden bunlar? Çünkü günümüzde popüler olan tarayıcılar bunlardır.
Gelelim meseleye :) Bir tasarım yaptınız, herşey harika Internet Explorer'da çok güzel gözüküyor, fakat oda ne firefox ile açtığınızda herşey birbirine girmiş, kaymış gibi gözüküyor. Birde diğer tarayıcılarda deniyorsunuz ve Internet Explorer dışındaki hiçbir tarayıcı dışında doğru düzgün görüntülenemiyor. Şimdi bunun üstesinden gelmenin bana göre yollarını anlatıcam. Örnekle anlatmak istiyorum.
Örnek : Diyelim ki bir menü yapmak istiyoruz.
HTML Sayfamız aşağıdaki gibi olsun
<html> <head> <title>Deneme</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="menu"> <a href="#">Deneme</a> | <a href="#">Deneme 1</a> | <a href="#">Deneme 2</a> </div> </body> </html>
style.css sayfamız ise aşağıdaki gibi olsun;
#menu { width: 900px; height: 30px; padding: 5px 5px 5px 5px; background-color: orange; }
HTML ve CSS dosyalarımızı kaydettikten sonra birde 900px genişliğinde bir logo ekleyelim <div id="menu"> kısmının hemen üstüne <img src="logo.png" alt="" /> diyelim. Evet şimdi bu html dosyasını ie, firefox, opera ve chrome'da açalım.
1. Internet Explorer'da hiçbir sorun olmayacaktır. Düzgün bir şekilde menü ve logonun genişlikleride aynı olarak görüntülenecektir.
2. Firefox'da menü'nün genişliğini 900px vermemize rağmen padding(dolgu)'yu yukarıdan aşağıdan sağdan ve soldan 5px yaptığımız için menü sağdan ve soldan 5 px daha genişlemiş oldu yani 910px olarak görüntülendi.
3. Opera'da yine firefox'da olduğu gibi menünün genişliği logodan uzun gözüktü. Padding'den dolayı 910px olarak görüntülendi.
4. Chrome'da yine aynı şekilde opera ve firefox'da olduğu gibi görüntülendi.
IE dışındaki bu 3 tayayıcıda böyle gözüküyor? Peki bunu nasıl düzeltiriz?
ilk olarak HTML sayfamızda menu isimli divimizi bir div içine daha alırız yani;
<div id="menu1"> <div id="menu"> <a href="#">Deneme</a> | <a href="#">Deneme 1</a> | <a href="#">Deneme 2</a> </div> </div>
ve CSS dosyamızda şu değişiklikleri yaparız.
#menu1 { width: 900px; height: 30px; background-color: orange; } #menu { padding: 5px 5px 5px 5px; }
Peki şimdi ne oldu? Şimdi menu divimizi ayrı bir div içine alarak kısıtlamış olduk. Yani dolgu dahi olsa 900px'in dışına çıkamıyor. Bu yüzden diğer 3 tarayıcıda da sorunsuz bir şekilde görüntüleniyor.
Bu tür sorunlar yaşıyan tasarımcı arkadaşlarıma bir yol olmuştur umarım.
Herkeze kolay gelsin. Anlatım burada bitmiştir ^_^
| Message: | Trying to access array offset on value of type null |
| File: | /home/romarekl/public_html/sosyallift.com/ow_plugins/privacy/classes/event_handler.php |
| Line: | 62 |
Duvar