CSS ile Dikey Ortalama

Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama yapabilsekte değişken yükseklikte bu işe yaramıyor.. Hal böyle olunca işe yaraması ve her tarayıcıda çalışabilmesi için neler yapmamız gerektiğini kısaca inceleyelim.

Nasıl Yapacağız?

Kapsayıcı nesnemize display: table verip o nesneyi tablo yapacağız.. Daha sonra dikey olarak ortalayacağımız nesneye ise display: table-cell deyip vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştireceğiz.. Bunu yapmadığımız taktirde vertical-align görevini doğru olarak yerine getiremiyor.

Hadi Yapalım

<!DOCTYPE>
<html>
<head>
	<title>css dikey ortalama</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.box {
		width: 500px;
		height: 300px;
		background: #111;
		color: #fff;
		display: table
	}
	.box p {
		display: table-cell;
		vertical-align: middle;
		text-align: center
	}
	</style>
</head>
<body>

<div class="box">
	<p>
		burası ortalanacak..
	</p>
</div>

</body>
</html>

Evet artık modern tarayıcılarda dikey ortalama işlemimizi gerçekleştirdik.. Ancak bu şekilde IE8+ üzerinde çalışacaktır.. IE7- ve alt sürümleri için ise (eğer uyumlu hale getirmek istiyorsanız) html yapımızda değişiklik css kodlarımızda ilave yapmamız gerekecek..

IE7 ve alt sürümleri için fix

CSS özelliklerinin IE7 ve alt sürümlerde çalışması için özellik başına #işareti getirilmesi yeterlidir.. # yerine _ işareti getirilir ise IE6 ve alt sürümleri için geçerli bir işlem olur. Bizim sorunumuz IE7 ve alt sürümleri için olduğundan # işareti koyacağız.. Öncelikle html yapımızı şöyle değiştireceğiz;

<div class="box">
	<p>
		<span>
			burası ortalanacak..
		</span>
	</p>
</div>

Gördüğünüz gibi fazladan bir span nesnesi ekledik.. Şimdi geldik css kodlarımızda ki eklemelere;

.box {
	width: 500px;
	height: 300px;
	background: #111;
	color: #fff;
	display: table;
	#position: relative
}
.box p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	#position: absolute;
	#top: 50%;
	#width: 100%
}
.box p span {
	#position: relative;
	#top: -50%
}

İlk olarak kapsayıcı nesneye position: relative verdik ki içerisindeki nesnelere absolute uyguladığımızda dışarıya kaçmasın. Daha sonra nesne içindeki ilk nesnemize (yani paragraf nesnemize) pozisyon değerleri uyguladık. Ve onun içindeki span nesnesine de tekrar pozisyon değerleri uygulayıp doğru bir sonuç aldık.. Ekstra olarak pozisyon özelliği uyguladığımız için paragraf nesnesi genişliğini içeriğe göre şekillendireceğinden yatay ortalama geçersiz kalıyordu.. Bunu da genişliğini 100% vererek çözdük.

CSS’de Arkaplan Saydamlığı

Bildiğiniz gibi css’de nesneye opacity verdiğimizde, nesnenin içindekilerle birlikte saydamlığı değişiyor.. Ama genelde bize lazım olan, arkaplanın saydamlaşmasıdır.. Bunun için görsel oluşturmakta biraz mantıksızca.. Yine css kullanarak daha basit bir yol ile bu işlemi kolayca yapabiliriz..

Nasıl?

:before ile nesnenin öncesine boş bir içerik ekletip genişlik ve yükseklikdeğerlerini 100% yaptıktan sonra, position değerini absolute yapıp z konumunu -1 yapmalıyız.. Daha sonra nesne öncesine eklettiğimiz içeriğin kapsayıcı nesne içinde kalması için, kapsayıcı nesneye position relativedeğerini vermeliyiz.

Peki ya RGBA?

Normal şartlarda renk şeffaflığı için rgba kullanılabilir.
(Bkz: http://codepen.io/tayfunerbilen/pen/HLGif)
Ancak bu işlem sadece arkaplan rengi için değil, aynı zamanda arkaplan resmi ya da arkaplandaki herhangi bir şey için geçerli olduğundan, rgba bunun yerini tutmuyor ne yazık ki 🙂

IE7 Margin Eksi Değer Sorunu

Merhaba arkadaşlar, bu yazıda sizlere ie7’de oluşan bir css hatasını ve çözümünü göstereceğim..

Sorun;
Eksi margin değeri verdiğimiz nesnelerde ie7’de malesef değer işlemiyor.. Örnek verecek olursak;

.box {margin: 0 -10px}

Yukarıdaki kod malesef ie7’de çalışmıyor.. Yani sağdan ve soldan 10px içeriye doğru çekmiyor nesneyi..

Çözümü;
IE7’de düzgün çalışması için overflow: hidden değerini eklememiz yeterli olacaktır. Yani;

.box {margin: 0 -10px; overflow: hidden /* ie7 */}

Başka ipuçlarında görüşmek üzere!