Fatih Hayrioğlu'nun not defteri » problem http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 CSS3 ile yuvarlak kenarlı resim yapmak http://www.fatihhayrioglu.com/css3-ile-yuvarlak-kenarli-resim-yapmak/ http://www.fatihhayrioglu.com/css3-ile-yuvarlak-kenarli-resim-yapmak/#comments Tue, 01 Feb 2011 22:45:11 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=2022 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

]]> http://www.fatihhayrioglu.com/css3-ile-yuvarlak-kenarli-resim-yapmak/feed/ 2 İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak http://www.fatihhayrioglu.com/internet-explorer-6-ve-7-icin-tablo-tr-elementine-kenar-cizgisi-atamak/ http://www.fatihhayrioglu.com/internet-explorer-6-ve-7-icin-tablo-tr-elementine-kenar-cizgisi-atamak/#comments Sat, 17 Oct 2009 16:54:06 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1345 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

http://www.csarven.ca/tr-border-trick-for-ie

]]> http://www.fatihhayrioglu.com/internet-explorer-6-ve-7-icin-tablo-tr-elementine-kenar-cizgisi-atamak/feed/ 1 Windows Vista / Windows Defender Güncellemesindeki Sorunu ve Çözümü http://www.fatihhayrioglu.com/windows-vista-windows-defender-guncellemesindeki-sorunu-ve-cozumu/ http://www.fatihhayrioglu.com/windows-vista-windows-defender-guncellemesindeki-sorunu-ve-cozumu/#comments Fri, 30 Jan 2009 10:02:56 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=850 İş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.

]]> http://www.fatihhayrioglu.com/windows-vista-windows-defender-guncellemesindeki-sorunu-ve-cozumu/feed/ 4 Satır Dönüşü(word wrap) Firefox sorunu nasıl çözülür? http://www.fatihhayrioglu.com/satir-donusuword-wrap-firefox-sorunu-nasil-cozulur/ http://www.fatihhayrioglu.com/satir-donusuword-wrap-firefox-sorunu-nasil-cozulur/#comments Mon, 06 Nov 2006 12:12:55 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=213 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+ */
}

Kaynaklar

]]> http://www.fatihhayrioglu.com/satir-donusuword-wrap-firefox-sorunu-nasil-cozulur/feed/ 21