CSS'te Püf Noktası

Arkadaşlar herkese selam,

CSS'te istediğim tasarıyı .PX olarak, yani "pixsel" tabanlı olarak yapabiliyorum. Ancak ben .% olarak yani yüzdelik ayarları ile çalışmak istiyorum. O şekilde yapıyorum. Fakat bir sorunum var.

- Her sitenin logo ve banner bölümü vardır (header bölümü). Bunların "pixsel" değeri ya 60px olarak ya da 90px olarak verilir. Biz şimdi bütün temamızdaki tabloları "pixel" olarak değil de yüzdelik olarak vereceğimizden, logo ve header gibi yerlerin yüzdeliklerini nasıl tespit edeceğiz?

- Bir de ustalarımdan rica ediyorum, tamamen "pixel" tabanlı tasarımı terkedip yüzdelik tabanlı çalışmak mümkün mü? Çünkü mümkünse avantajı çok büyük olur ve kesinlikle onu öğrenmek istiyorum. Bütün ayarları yüzdeliğe göre vermek istiyorum. O nedenle bana ne önerirsiniz, neleri bilmem gerekir, püf noktalar nelerdir?

Tamamen yüzdeli şekilde çalışmak cidden zor. Onun yerine "fluid" tasarımlar yapmak daha kolay ve eğlenceli. Sitenin bazı bölümlerini fixed bazı bölümlerini flexible yapıyorsun. Örnek vermek gerekirse sol tarafta dikey dar bir blok olduğunu düşün, sağ tarafta da yazıların geleceği alan var. Sol taraftaki dar blok için % değer atarsan ekran çözünürlüğüne göre kullanışlılık ve tasarım açısından çok geniş ya da çok dar gözükebilir. Onun yerine o bölümü sabit tutup içeriğin geldiği sağ tarafı % değer vererek yaparsın.

Biraz uzadı ama kısacası width için yüzdeli değerler verip tasarım kodlamak cidden zor iş. Bir çok ayrıntıyı düşünmek zorunda kalırsın.

Sorularına yanıt olarak da:

- ilk başta bahsettiğim gibi gerekli gördüğün yerlere yüzde değil pixel cinsinden değerler verebilirsin

-evet mümkün. ancak avantajları yapılacak siteye bağlı olarak değişir. Öneri olarak da bol bol pratik yap.

Peki CSS'te absolute değeri ile ilgisi nedir bu konunun?
Hocam tamamen yüzdelik tabanlı çalışırken position:absolute değeri verip top: 14% verdim örnek olarak aşağıda...

#banner {
	position:absolute;
	width:69%;
	height:9%;
	z-index:3;
	top: 14%;
	left: 26%;
	background-color: #6CF;
}

Bu şekilde DIV kutularını alt alta koymak mı avantajlı, yoksa

.clearfix:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
display:inline-block
}
* html .clearfix {
height:1%
}
.clearfix {
display:block
}

.alignleft{
float:left;
width: 49%;
}
.alignright{
float:right;
width: 50%;
}

şeklinde yapmak mı daha avandajlı ?