Bu başlık altında sürekli güncelleyeceğim sık sık yaşanılan CSS sorunlarına yer vereceğim. Tekrar belirtmek isterimki bu kısımı yeni sorunlar ve çözümlerle güncelleyeceğim.
IE6 ve RESİMLERDE BACKGROUND SORUNU
Internet Explorer 7 ve Firefox'da herhangi bir soruna neden olmayan fakat internet explorer 6 da backgrounda gri bir perde çeken genel CSS sorunu. Resim formatınız .PNG ise keinlikle bu sorunu yaşarsınız.
Sorun yaşanılan CSS kodu:
background: url(../images/popup_01_bg.png);
Kodumuzu standart bir şekilde yuklarıda ki gibi yazarsak resmin backgrounduna gri bir alan atayacakdır. Çözümü ise şu şekilde
Düzeltilen CSS kodu:
background: transparent url(images.png) no-repeat !important;
background: transparent;
filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled=true , sizingMethod=scale src='images.png');
Bir diğer yolda .PNG yerine .GIF kullanımı olabilir. Hangisi kolay geliyorsa önce onu deneyin. İlk verdiğim kodlar kesin çözüm bunuda unutmayın
Kolay Gelsin,
CSS TASARIMDA YANYANA HİZALAMA
Arkadaşlar CSS e yeni başlamış herkezin ilk öğrenmesi gereken konudur sanırım. Hazırladığınız divleri nasıl yanyana dizeceksiniz. Öncelikle 3 adet div oluşturuyoruz.
.leftBlock
{
width:250px;
height:200px;
backgorund-color:#FF8080;
float:left;
}
.centerBlock
{
width:250px;
height:200px;
background-color:#FFFF80;
float:left;
}
.rightBlock
{
width:250px;
height:200px;
background-color:#80FF80;
float:left;
}
Divlerimizi oluşturduk. Burdaki anahtar kodumuz " float:left " kodudur. Bu kod tüm divlerimize yanyana gelmelerini emreder. HTML bölümünü de ekliyelim.
<html>
<head>...</head>
<body>
<div class="leftBlock">Burası Sol Bloğumuz</div>
<div class="centerBlock">Burası Orta Bloğumuz</div>
<div class="rightBlock">Burası Sağ Bloğumuz</div>
</body>
</html>
Evet HTML kodumuzuda yazdık. Hazırladığımız sayfanın görünüşünü alttaki gibi olacaktır.
Burası Sol Bloğumuz
|
Burası Orta Bloğumuz
|
Burası Sağ Bloğumuz
|
Evet arkadaşlar. Sola hizalama veya divlerinizi yanyana getirme probleminize yardımcı olabilmişimdir umarım. Kolay gelsin,
CSS IMPORTANT ÖZELLİĞİ İLE SORUNLARIN ÇÖZÜLMESİ
Arkadaşlar bu özelliği ayrı bir makale yazısı olarak yayınladım. Aşağıda ki linkten nasıl kullanıldığını öğrenebilirsiniz. Yazdığım CSS i browser görmüyor, yazdığım CSS çalışmıyor gibi problemleriniz de öncelikle important özelliğini kullanmayı deneyin. Daha sonra diğer çözümleri deneyim.
CSS IMPORTANT KULLANIMINA GİT
Kolay gelsin
