30/4/2007
Table kullanmadan, DIV ve CSS ile site hazırlamak başlıklı makalemde hazırladığımız siteyi hiç firefox’da kontrol ettiniz mi? Ettiğinizde göreceksiniz ki, site tamamen dağılmış durumda. Bu makalede CSS ile hazırlanmış bir sitede Firefox sorunlarını düzeltmeyi ve site bakımını anlatacağım.
Gördüğünüz gibi içeriğin sağ tarafı sol tarafın üstüne binmiş. Şimdi onu doğru yerine çekelim. dummy.css’i açıyoruz. Hatalı görünen sağ taraf “#rightContainer” ile bağlıydı.
background-image:url(‘images/containerBack.jpg’);
background-repeat:repeat-y;
width:968px;
margin-left:auto;
margin-right:auto;
padding-bottom:20px;
}
#leftContainer{
position:relative;
width:306px;
margin-left:10px;
left:0px;
top:10px;
float:left;
}
#rightContainer{
position:relative;
width:609px;
left:30px;
top:10px;
}
Göreceğiniz gibi #rightContainer’a float belirtmeyi unutmuşum. Hemen ekleyelim.
position:relative;
width:609px;
left:30px;
top:10px;
float:left;
}
Sonuç.
Gördüğünüz gibi içerik alanı yerini aldı ama hala sorunlar var. İlk önce gallery bölümünü düzeltelim. Gallery CSS’lerinde göreceksiniz ki, #thumbBackRight’da yine float’ı unutmuşum hemen ekleyelim.
background-image:url(‘images/thumbBack.jpg’);
background-repeat:no-repeat;
width:142px;
height:109px;
left:2px;
float:left;
padding:6px 0 0 6px;
}
#thumbBackRight{
background-image:url(‘images/thumbBack.jpg’);
background-repeat:no-repeat;
position:relative;
width:142px;
height:109px;
left:15px;
padding:6px 0 0 6px;
float:left;
}
Sonuç.
Galley bölümü halloldu ama hala sorunlar var. Devam edelim. İçerik alanı Welcome başlığının üzerine çıkıyor bunu düzeltelim.Kırmızı ile yazılı olanlar yeni eklediğimiz sitiller.
İPUCU: Firefox ve Internet Explorer arasında sitil sorunları yaşıyorsanız. Bir sitili iki kere yazabilirsiniz. Bunlardan IE için olanın başına “_” koyarsanız, bu sitili sadece IE okur. “_” olmayan ise Firefox içindir.
background-image:url(‘images/box/boxTop.jpg’);
background-repeat:no-repeat;
width:603px;
height:4px;
_margin-bottom:-11px;
margin-top:5px;
_margin-top:0px;
}
Sonuç.
Evet iyi gidiyoruz ama hala sorunlarımız var. mainContainer DIV’i içeriği içinde tutacak şekilde uzamış gözükmüyor. Bu firefox’un CSS ile verilmiş backgorundlarda genel bir sorunu. Elbette bununda çözümü var. Şu şekilde çözüyoruz. İlk önce attaki CSS kuralını CSS dosyamıza ekliyoruz.
clear: both;
height: 1px;
font-size: 1px;
line-height: 1px;
margin-bottom: -1px;
}
Ardından master page’imizde (dummy.master) mainContainer DIV’inin içine ve sonuna alttaki gibi bir DIV ekliyoruz.
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”></asp:ContentPlaceHolder>
</div>
<div><!– –></div>
</div>
<div id=”footerLine”></div>
Sonuç.
Evet bu sorunu da hallettiğimize göre şimdi içerik alanlarındaki sorunlara bakabiliriz. Önce yazıların soldan taşması sorunu.Firefox LABEL tagında sorun çıkarıyor ama çözümümüz yine CSS’de. Alttaki gibi bir CSS ekliyoruz.
display:table;
}
Ve yazıları tuttan labelları bu css ile bağliyoruz.
Lorem ipsum …
</asp:Label>
Sonuç.
Bu sorunu da hallettiğimize göre şimdi The Day kutusundaki görünümle ilgilenebiliriz. The Day kutusunda birinci imaj ile başlık, ikinci imaj ile kutu altı iç içe girmiş durumda. İlk önce theDayHeader kuralına ekleme yapıyoruz.
background-image:url(‘images/headerTheDay.jpg’);
background-repeat:no-repeat;
width:60px;
height:10px;
margin-bottom:6px;
}
Ardından The Day’i içinde tutan boxMiddle DIV’ine yine clear DIV’i ekliyoruz.
<div id=”theDayHeader”></div><asp:Image runat=”server” id=”Image1″ ImageUrl=”images/theDayResimler/1000001296_01.jpg” CssClass=”theDayImage”></asp:Image>
<asp:Label runat=”server” Text=”Label” id=”Label2″ Width=”470px” CssClass=”label”>
Lorem ipsum…
</asp:Label>
<br/>
<br/>
<asp:Image runat=”server” id=”Image2″ ImageUrl=”images/theDayResimler/1000001296_02.jpg” CssClass=”theDayImage”></asp:Image>
<asp:Label runat=”server” Text=”Label” id=”Label3″ Width=”470px” CssClass=”label”>
Lorem ipsum…
</asp:Label>
<div><!– –></div>
</div>
Sonuç.
Böylece sitemiz artık Firefox’da da sorunsuz çalışıyor. Gördüğünüz gibi CSS ile hazırlanmış bir siteye müdahale etmek çok kolay.
Teşekkürler
İyi çalışmalar
