Responsive Tasarımlarda Margin ve Padding?

14-02-2017, 19:30:19

Üyeliği durduruldu

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.

14-02-2017, 19:54:25

#2

AngelOfDeathh

%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.

14-02-2017, 20:09:40

#3

uckan

Gold üye

ilgili örnek yardımcı olacaktır.
http://codepen.io/uckannet/pen/RKvdpM

06-03-2017, 19:09:57

#4

~~S e r s e r i~~

Üyeliği durduruldu

uckan adlı üyeden alıntı: mesajı görüntüle

ilgili örnek yardımcı olacaktır.
http://codepen.io/uckannet/pen/RKvdpM

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;
}

06-03-2017, 19:52:49

#5

Hunper

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
}

07-03-2017, 18:17:49

#6

seogrenci

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...

S e r s e r i adlı üyeden alıntı: mesajı görüntüle

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.

AngelOfDeathh adlı üyeden alıntı: mesajı görüntüle

%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.

uckan adlı üyeden alıntı: mesajı görüntüle

ilgili örnek yardımcı olacaktır.
http://codepen.io/uckannet/pen/RKvdpM

S e r s e r i adlı üyeden alıntı: mesajı görüntüle

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;
}

Hunper adlı üyeden alıntı: mesajı görüntüle

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
}

07-03-2017, 19:25:57

#7

~~S e r s e r i~~

Üyeliği durduruldu

seogrenci adlı üyeden alıntı: mesajı görüntüle

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 ile ilgili detaylı bilgi almak için aşağıdaki yazıma bakabilirsiniz.

http://www.yusufsezer.com.tr/respons...-grid-sistemi/

Ayrıca responsive web tasarım dersleri yazı serisine aşağıdan bakabilirsiniz.

http://www.yusufsezer.com.tr/respons...arim-dersleri/

Hayırlı günler dilerim...

Öncelikle teşekkür ederim. Uğraşıp yazmışsın. Bu aralar bootstrap'a göz gezdiriyorum. Kendi tasarımlarıma uydurmakta güçlük çekiyorum şimdilik. En nihayetinde araştıralı sadece bir kaç gün oldu.

Sitenizdeki bazı yazılara baktım. Gayet açıklayıcı olmuş. Devamınada göz gezdireceğim

07-03-2017, 21:23:34

#8

thealiyasar

Öncelikle merhaba,

Kutu mantığın da bir tasarım dökümü yapıcaksanız tavsiye ul li yapısını kullanmanız. Reset css kullanmadığınızı varsayarak arkadaşların verdiği border-box kuralını kullanın ul li kullanarak hem daha az css kuralı yazarsınız hemde aynı özellikleri tekrarlamak zorun da kalmazsınız. Kutularınızın ortalı bir şekilde durmasını istiyorsanız ;

display: inline-block;
text-align: center;

bu iki kuralı ul içerisine yazarsanız li ye %100 dışın da ne değer verirseniz ortalı şekil de listeleme yapıcaktır. Ayrıca kutular da kaymalar söz konusu olursa eğer bunu ul için de ki li ye ;

vertical-align:top ;

değerini vererek kaymaları önleyebilirsiniz.

Bunların dışın da ek olarak li'ler de ki yazılarınız ortalı şekilde çıkmakta olursa yine ul nin için de ki li ye ;

text-align:left;

komutunu verebilirsiniz.

Dipnot : ul 'ye verdiğiniz text-align:center; işi garantiye almak içindir. onu kullanmadan deneyip işinize yaramazsa o kuralı da eklersiniz.

08-03-2017, 18:31:20

#9

Onur89TR

Çözümü, CSS3 ile gelen calc komutudur. Kullanımı:

<div id="container">
   <div class="dortkolon"></div>
   <!-- .dortkolon -->
   <div class="dortkolon"></div>
   <!-- .dortkolon -->
   <div class="dortkolon"></div>
   <!-- .dortkolon -->
   <div class="dortkolon"></div>
   <!-- .dortkolon -->
</div>
<!-- #container -->

#container {
   width: 100%;
   height: 200px;
}
#container .dortkolon {
   padding: 10px;
   width: calc( 25% - 20px ); // Buraya dikkat, sağlı ve sollu boşluk verildiğinden 2 katını çıkarıyorsunuz. 1px border olsaydı - 22px olacaktı.
}

Umarım yardımcı olabilmişimdir...