Hocam web sayfa tasarımı sırasında siteyi bölümlere ayırmak için grid sistemi kullanır ve grid sistemi mantığını kavrarsanız sürekli margin, padding .vb hesabı yapmanıza gerek kalmayacak.
Genişliği göreceli değer verseniz veya calc ile hesaplama yapsanız bile küçük ekranlı cihazlar da(mobil ve tablet) site bölüm içeriklerinin sıkışmasına neden olabilir.
Grid sistemini bootstrap, foundation gibi popüler CSS frameworklarında görebilirsiniz.
Grid sistemi ve responsive web tasarım ile ilgili detaylı bilgi almak için aşağıdaki yazıma bakabilirsiniz.
https://www.yusufsezer.com.tr/rwd/
Hayırlı günler dilerim...
Ne zamandır bu işlerle uğraşmıyorum. Dolayısı ile bir hayli geri kaldım. İnternette aradım fakat hep yabancı kaynaklar çıkıyor.
Benim merak ettiğim şey şu:
Mesela benim genişliğini %25 olarak ayarladığım 4 tane kutu var yanyana. Fakat aralarına belirli bir boşluk bırakmak istiyorum. Haricen margin veya padding değeri girince haliyle taşma oluyor.
Mesela
http://www.mirror.co.uk adresinde en üstte bulunan ilk dörtlü tam istediğim gibi fakat kaynak kodlarından çözemedim.
%25 genişlik verip margin ve padding vermeniz durumunda bu değerler de genişliğe eklenecektir.
Kutulara
box-sizing:border-box;
değerini vererek padding değerinizin %25 içerisine dahil edilmesini sağlayabilirsiniz.
Ayrıca;
Bootstrap CSS Framework'u işinizi kolaylaştıracaktır. Grid sisteminin kullanımı oldukça kolay. İstediğinizi bu framework ile rahatlıkla yapabilirsiniz.
Teşekkür ederim hocam fakat aşağıdaki en sade haliylede aynı sonucu aldım. Acaba senin vermiş olduğun diğer kodların bir önemi var mı?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ferhat</title>
<link href="stil.css" rel="stylesheet">
</head>
<body>
<div id="cerceve">
<div id="ilk-kutu"></div>
<div id="ikinci-kutu"></div>
</div>
</body>
</html>
#cerceve {
width: 70%;
height: 50px;
margin: 20px auto;
background: #ddaa22;
}
#ilk-kutu {
width: calc(50% - 20px);
height: 50px;
margin: 0 10px;
background: #33ddaa;
float: left;
}
#ikinci-kutu {
width: calc(50% - 20px);
height: 50px;
margin: 0 10px;
background: #ddee11;
float: left;
}
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
bu üçüyle kullanırsan padding değeri verilen width değerinin içinden atanır,
ayrıca margin verirken şuna dikkat etmelisin, atıyorum <ul> ve <li> kullanarak tabloları listeledin, yani özel class değeri belirtmeden, son elemanı yakalayarak :last-child ile onun margin-right değerini 0 vermelisin, tabi bu değişebilir bir durum.
Mesela verdiğiniz kodla içerisinde aşağıdaki gibi olabilir; ama o verdiğiniz sitedeki gibi bir dizilim için kullanacaksanız yani yan yana başlıklar için bence ul ve li ile listeleyin farklı farklı div elemanı yerine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ferhat</title>
<link href="stil.css" rel="stylesheet">
</head>
<body>
<div id="cerceve">
<div id="ilk-kutu"></div>
<div id="ikinci-kutu"></div>
<div id="ucuncu-kutu"></div>
<div id="dorduncu-kutu"></div>
</div>
</body>
</html>
#cerceve {
width: 70%;
height: 50px;
margin: 20px auto;
background: #fff;
}
#ilk-kutu {
width: 24%;
height: 50px;
margin: 0 1.33% 0 0;
background: #111;
float: left
}
#ikinci-kutu {
width: 24%;
height: 50px;
margin: 0 1.33% 0 0;
background: #222;
float: left
}
#ucuncu-kutu {
width: 24%;
height: 50px;
margin: 0 1.33% 0 0;
background: #333;
float: left
}
#dorduncu-kutu {
width: 24%;
height: 50px;
margin: 0;
background: #444;
float: right
}