CSS: Resmin altında boşluk var? Nasıl kaldırabilirim?

Merhaba; sayfalarımızı tasarlarken bazen resimlerin altında 3px boşluk olduğunu görürüz ve bu sinirimizi bozar. Aslında çözüm çok basittir.

Bu sorun aslında görüntünün karakter gibi davranmasından dolayı ortaya çıkar. Örneğin “y” veya “g” nin alt kısımları satırlarımızda hep aşağı taşar. Resim de karakter gibi davrandığı için böyle olmaktadır
.
Bu olayın çözümü, resmi dikey anlamda hizalamaktır. Css ile bu boşluğun olmadığını belirtmemiz yeterlidir. Ben ortalı olmasını tercih edenlerdenim.

img {vertical-align:middle}

Herkese kolay gelsin.

Textarea Karakter Sayma

Merhaba, geçenlerde şirketimiz için yaptığımız projede Sms modülü yazarken textarea da sayaç ihtiyacımız oldu. Bende kodları hızlı bir şekilde şirketten çıkmadan önce burada taslağa atmıştım. Şimdi de onları paylaşmak istedim. Aşağıdaki kodlar metin kutusuna yazılan karakterleri saymaktadır. İlk kodları sitedeetiketinden önce yerleştiriniz. Ben burada klasik sms karakter sınırı 160 olduğu için 160 karakterden sonra saymayı renkli yaptırdım. Sizler de istediğiniz bir şekilde karakterleri sınırlayabilir, saydırabilirsiniz.

Örnek Görsel

Textarea Sayaç Counter
Textarea Sayaç

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
	var say = 0; // var olan değer
	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var saymax = (say)+(thisValueLength); // var olan değerin üzerine say
		$('.say').html(saymax);

		if(saymax > 160){ // karakter sayısı 160 tan fazla olursa kırmızı yaz
			$('.say').css({color:'#ff0000',fontWeight:'bold'});
		} else { // karakter sayısı 160 tan az ise siyah yaz
			$('.say').css({color:'#000000',fontWeight:'bold'});
		}
	});
	$(window).load(function(){
		$('.say').html(say); // .say class yapısının olduğu yere yazdır
	});
});
</script>

Daha sonra da metin kutusunun olduğu yere kodlarımızı yerleştirelim.

<textarea id="" style="width: 350px; height: 100px;" name=""></textarea></pre>
<div style="float: left; margin-top: 10px; font-weight: bold;">Karakter Sayısı:&nbsp</div>
<div class="say" style="float: left; margin-top: 10px; font-weight: bold;">0</div>

Demo için: http://ibocan.net/depo/test/textarea-sayac.html

Eğer ki twitter tarzı bir geri saydırma yaptırmak istiyorsak kodlarda ufak bir değişiklik yapmak gereklidir.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function(){
	var say1 = 140; // var olan değer
	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var saymin = (say1)-(thisValueLength); // var olan değerden çıkar
		$('.say1').html(saymin);

		if(saymin < 0){ // karakter sayısı 0 tan düşerse kırmızı yaz
			$('.say1').css({color:'#ff0000',fontWeight:'bold'});
		} else { // karakter sayısı 0 ile 140 arası ise siyah yaz
			$('.say1').css({color:'#000000',fontWeight:'bold'});
		}
	});
	$(window).load(function(){
		$('.say1').html(say1); // .say1 class yapısının olduğu yere yazdır
	});
});
</script>

Daha sonra metin kutusu kodlarımızı yerleştirelim.

<textarea name="" id="" style="width:350px;height:100px;"></textarea></br>
<div style="float:left;margin-top:10px;font-weight:bold">Karakter Sayısı:&nbsp</div>
<div class="say1" style="float:left;margin-top:10px;font-weight:bold">140</div>

Demo: http://ibocan.net/depo/test/textarea-twitter-sayac.html