‘problem’ etiketi için sonuçlar
CSS3 ile yuvarlak kenarlı resim yapmak
Şubat 2nd, 2011 • 2 yorum CSS, HTML5
Etiketler: border-radius, css3, Firefox, Google Chrome, problem, safari
Bir resminize kenar çizgisi tanımı yapıp daha sonrada köşelerini ovalleştirmek istediğinizde köşelerdeki kenar çizgilerinde sorun yaşıyoruz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
img{ border:2px solid #999; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
</style>
</head>
<body>
<img src="gudi.jpg" width="75" height="75" />
</body>
</html>
Örneği görmek için tıklayınız.
Kırmızı ile işaretlediğim yere dikkat ederseniz sorunlu gözüken kısımalar var. Bu sorun tarayıcıların bir sorunu gibi duruyor. Eğer ie’nin sorunları ile bu kadar zaman kaybetmemiş olsa idik şimdi böyle güzel sorunlarla uğraşacaktık ve tarayıcılar bu sorunları düzletmek için uğraşacaktı.
Çözüm1:
Çözüm için dışa bir kapsayıcı div atayıp kenar çizgisi tanımını bu katmana yaparak çözebiliyoruz.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu"><img src="gudi.jpg" width="75" height="75" /></div>
</body>
</html>
Örneği görmek için tıklayınız.
Kodunu aldığım sitede resim ve kapsayıcı katmana aynı border-radius değeri verilmiş, ancak ben öyle yapınca Chrome’da beyazlıklar ortaya çıktı bu nedenle bende kapsüle 12px verirken resme 10px border-radius verdim.
Örnek Safari ve Chrome’da çalışırken Firefox3.6 ve Opera11’de çalışmıyor.
Firefox4 ve yeni webkit tabanlı tarayıcılarda bu sorun ise kökten çözülmüş, tanımı direk resme verebileceğiz.
Çözüm2:
Firefox3.6 ve Opera için CSS3 Rounded Image With jQuery makalesindeki yöntemden yaralanabiliriz.
HTML kodumuzu şöyle değiştirelim
- <div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
- <img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
- </div>
Resme saydamlık verilip görünmez yapılıyor ve satır için css kodları tanımlanıyor, amaç buradaki kodları jquery yardımı ile bg olarak tanımlamak .
jQuery kodumuz
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".resimKapsulu").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
<style>
.resimKapsulu{border:2px solid #999; width:75px; height:75px; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;}
.resimKapsulu img{width:75px; height:75px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
</style>
</head>
<body>
<div class="resimKapsulu" style="background: url(gudi.jpg) no-repeat center center; width: 75px; height: 75px;">
<img src="gudi.jpg" width="75" height="75" style="opacity: 0;" />
</div>
</body>
</html>
Örneği görmek için tıklayınız.
Ben bu çalışmayı iphone ve ipad için kod geliştirirken denk geldiğim için diğer tarayıcıların benim için pek önemi yoktu açıkçası. iphone ve ipad için ilk çözümü uygulayıp geçtim açıkçası, ama lazım olanlar için ikinci yöntem de kullanılabilir.
Kaynaklar
İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak
Ekim 17th, 2009 • 1 yorum CSS
Etiketler: ie6, ie7, internet explorer, kenar-çizgisi, problem
Yine bir İnternet Explorer sorunu ile karşı karşıyayız. Bu seferki sorunum ile bir tablo satırına alt kenar çizgisi tanım yapınca karşılaştım.
table{border-collapse:collapse}
table tr{border-bottom:1px solid #000;}
Gayet basit normal bir tanım. Ancak ie6 ve 7 için durum öyle değil. Karmaşık gelmiş olmalı ki bu atamayı uygulamadı. border-collapse:collapse tanımı kenar çizgileri arasında boşluk olmamaısı için kullanıyoruz.
Peki İnternet Explorer 6 ve 7 için nasıl bir çözüm üretmeliyiz. Satıra değilde satırı oluşturan hücrelere kenar çizgisi verirsek sorunumuz ortadan kalkıyor.
table{border-collapse:collapse}
table td{border-bottom:1px solid #000;}
Örneği görmek için tıklayınız.
Kaynak
Windows Vista / Windows Defender Güncellemesindeki Sorunu ve Çözümü
Ocak 30th, 2009 • 4 yorum Haberler
Etiketler: problem, vista, windows, windows-defender
İşletim sistemi olarak Vista kullanıyorum, genel itibari ile pek sorunum yok. Gayet iyi bir performans ile çalışıyorum. Tek sorunum güncelleme yaparken her zaman Windows Defender programı güncellemesini yükleyememesi idi. Bunu uzun süre erteledikten sonra çözmeye karar verdim. Biraz araştırınca kolay bir şey olduğu ortaya çıktı. Sizlerle paylaşmak istedim.
Son güncellemeyi yüklememiz yeterli imiş.
http://www.microsoft.com/security/portal/ADL.aspx
Bu aslında tüm Vista kullanıcılarının sorunu imiş.
http://support.microsoft.com/kb/918355
Bu tip sorunlar küçükte olsa can sıkıyor. Zaman ayırıp çözüm getirmek gerekiyor. Benim hayalim sorunsuz ve tam performanslı bir işletim sistemi. Umarım yakın zamanda olur.
Satır Dönüşü(word wrap) Firefox sorunu nasıl çözülür?
Kasım 6th, 2006 • 21 yorum CSS, XHTML
Etiketler: CSS, Firefox, problem, satır-başı, XHTML
http://forum.ceviz.net/showthread.php?p=249585#post249585
Cevap yazarken araştırdım da burayada yazayım dedim. Sabit bir genişlikte bir katman oluştuurp bu genişliği aşan genişlikte içerikleri otomatik olarak satırın başına tmak için ne yapabiliriz. Normalde bunu için IE5.5+ dan itibaren word-wrap: break-word kodu ile bunu desteklemektedir, ancak Mozilla tabanlı web tarayıcıları(örn Firefox) bu koda banamısın demiyor. Çözüm
pre
{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
<pre>uzuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuun metin</pre>
12 Şubat 2010′dan sonra düzenleme yapıldı
Bu yazıyı yazdığımda Firefox 2 vardı ve yazdığım çözüm işe yaramamıştı. Şimdi işler değişti. white-space: pre-wrap özelliğini ve değerini Firefox 3′dan itibaren desteklediği için artık kodumuzu aşağıdaki gibi değiştirebiliriz. Opera eski sürümlerinide es geçerek tabi, gerçi Opera 10′nun desteklendiği söyleniyor, ama benim testimde olmadı.
pre
{
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
