CSS'te container div ile beraber yüzdelik (%100) ölçü kullanımı

CSS
#1

Merhaba. Bir HTML sayfası tasarlarken, genellikle tüm siteyi genel bir divin içine alarak kodlama yapmaya çalışıyorum. Bu genel div kullanımı bir avantaj mıdır? Genel div kullanmadan web sitesi tasarlamak mantıklı mıdır yahut?

İkincisi, genel div kullandığımız zaman mantıksal olarak sayfadaki her şeyi sanıyorum belirli-kesin ölçülerle beraber kullanmak daha doğru. Bu şekilde çalışırken width: 100% gibi ölçüler vermek doğru olur mu? Bu kullanım genel div olmadan tasarlanan siteler için midir?

Siz sayfa tasarlarken bu konuda nasıl bir yol izliyorsunuz?

Umarım izah edebilmişimdir, teşekkürler.

#2

Genel div olarak belirttiğin eleman aslında body’nin ta kendisi. body’nin ayarlarını değiştirirsen yine aynı işlevi görecektir.

  1. bir öneri olarak Semantic’leri kullanmanı tavsiye ederim. HTML Semantic Elements
1 Beğeni
#3

Hocam benim bildiğim kadarıyla, siteyi belirli ölçüler içinde kodlamazsak sitede kaymalar olabiliyor. Mesela: width:960px gibi. Şimdi siz bu özellikleri bodye de verebiliriz diyorsunuz. Pekala bu şekilde bir genişlik vermeden site kodlamak mümkün mü? Tam detaylı araştıramadım ancak fikir almak için soruyorum.

Mesela, yazbel’deki gibi bir navbar yapmak ancak sitenin diğer kısımlarını belirli bir ölçüde tutmak istiyorum. Tüm siteyi genel div içine aldığım zaman, ya da sizin söylediğiniz gibi bodye belirli bir genişlik verdiğim zaman, navbarı bu şekilde çalışamıyorum. İnşallah anlatabildim, teşekkürler.

#4

Responsive web tasarımı uygulamalarına bakın. Hatta şart. Diğer türlü sayfanın görünümü cihazdan cihaza farklılık gösterir.

1 Beğeni
#5

Eyvallah hocam teşekkür ederim. Bakacağım inşallah.

#6

Genişlik vermek zorundasın. Genişliklerin genelde katlara göre orantılı olmalı.

html{
	font-size: 10px;
}
body{
	font-size: 1.6rem;
}

Yukarıda kod bloğunda görüldüğü gibi ben belirli bir değer atadım yazı büyüklüğüne. Bunu her yerde kullanabilirim. 1.6rem; rem ifadesi kat olarak temsil ediliyor. yani 10’nun 1.6 katı büyük olsun. O da 16px’e eşit.

Tek Body’e vererek istediğin olmaz. Yukarıda verdiğim örnekte gibi tek bir kısımdan birden fazla ayar yapabilirsin bu şekilde. Sayfa boyutuna göre ayarlamak en mantıklısı.

@media (min-width: 576px){

	html{
		font-size: 7px;
	}

}

Burada sayfanın uzunluğu düşünce her şeyin küçülmesini sağlıyor. Tek bir değişkenle her şeyi değiştirebiliyorsun. Yukarıdaki örnekle bağlantılı.

#7

Sanırım bu kısımları tam olarak anlayamamı maruz görebilirsiniz hocam. Bir tık aştı beni. Ama kafamda bir fikir açmadı diyemem. Zahmet verdim, teşekkür ediyorum. :slight_smile:

#8

Daha basit anlatmam gerekirse şöyle.

x = 1 elimizde x var ve 1’e eşit.

html{
	font-size: 1px; <-- x
}

Ben body’de 5 tane x kullanmak istiyorum. Bunun için 5rem yazıyorum.

body{
	font-size: 5rem;
}

Bir tane button var elimde bunda 3x kullanmak istiyorum. O zaman 3rem yazıyorum

body{
	width: 3rem;
}
2 Beğeni
#9

Teşekkürler hocam. Bu benim için daha anlaşılır oldu. Şimdi senin anlatmaya çalıştığın şey tam olarak şu mu: genel div aslında body, buna genişlik vermeden de kodlama yapılabilir. Ancak site içindeki her elementin ölçülerini, belirli orantılara göre vermek zorundayız.

Uğraştırıyorsum kusuruma bakmayın, eğer cevap böyleyse, bunun için CSS alanında hangi konulara bakmam gerekiyor? Responsive tasarım konularına mı?

#10

Evet doğru.

Responsive tasarım konularına bakman en mantıklısı.

1 Beğeni
#11

Eyvallah hocam. Zahmet verdim sağ olun :slight_smile:

1 Beğeni