Scroll'ü nasıl engellerim

07-11-2013, 21:39:25

Kimlik doğrulama veya yönetimden onay bekliyor.

Şimdi arkadaşlar responsive tasarım yapıyorum ve yaparken bi sorun yaşadım @media query ile eğer tarayıcı boyutu 600px olursa divlerimin boyutuda 600px olsun ve alt alta gelsin dedim buraya kadar sorun yok alt alta geliyor ama sağda bir scrollbar çıkıyor ve biraz uzuyor, divlerim 600px tarayıcının boyutuda 600px olduğuna göre scrollün çıkmaması gerekiyordu, peki neden çıktı ?

Kodlarım aşağıdadır;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="animate.min.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
		});
	</script>
	<style type="text/css">
	body{padding:0;margin:0;}
	div{
		width:150px;
		height:30px;
		border:1px solid #ccc;
		border-radius:3px;
		padding:10px;
		font:12px sans-serif;
		margin:10px;
		float:left;
	}
	@media screen and (max-width:600px){
		body {padding:0;margin:0;}
		div {width:600px;height:20px;float:none;}
	}
	</style>
</head>
<body>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
	<div>Bu bir denemedir</div>
</body>	
</html>

07-11-2013, 22:47:51

#2

KorsaNvBh

border+padding

08-11-2013, 09:09:14

#3

PrestijTR

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

border+padding

paddingi ve borderı eşitledim @media queryi de ama sonuc hala aynı hocam

08-11-2013, 09:15:18

#4

aztech

% ile çalışın hocam;
@media screen and (max-width:600px){
body {padding:0;margin:0;}
div {width:100%;height:20px;float:none;}
}
olmazsa %99 yapın hallolur

08-11-2013, 09:19:26

#5

PrestijTR

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

% ile çalışın hocam;
@media screen and (max-width:600px){
body {padding:0;margin:0;}
div {width:100%;height:20px;float:none;}
}
olmazsa %99 yapın hallolur

Hocam 94% ile yaptım anca oldu, şimdi her tasarım yani her boyut için böyle mi yapacağız ? yani biraz saçma olmaz mı ?

Ne bileyim hani kullanıcı hangi ekrandan girmiş bilemiyorum bu yüzden % ile kısa kısa yapmak doğru olur mu ?

08-11-2013, 09:34:33

#6

aztech

hocam mantık budur zaten px iile çalışmayın % ile çalışın ki 94% ile olduysa border padding fln vardır bi yerlerde o divi tetikleyen..
misal yazdığım ufak bir kod (belki benmde hatav vardır

)

@media only screen and (max-width: 960px) {
.kapsayici {
clear: both;
margin: 0 auto;
width: 95%;
}
.tekilbaslik h2 {font-size: 85%;margin: 2%}
.iletisimdetay {width:95%; float:left;margin:1%}
}

08-11-2013, 09:50:28

#7

PrestijTR

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

hocam mantık budur zaten px iile çalışmayın % ile çalışın ki 94% ile olduysa border padding fln vardır bi yerlerde o divi tetikleyen..
misal yazdığım ufak bir kod (belki benmde hatav vardır

)

@media only screen and (max-width: 960px) {
.kapsayici {
clear: both;
margin: 0 auto;
width: 95%;
}
.tekilbaslik h2 {font-size: 85%;margin: 2%}
.iletisimdetay {width:95%; float:left;margin:1%}
}

Çok teşekkür ederim hocam ama ama pixel ile çalışırken de öyle oluyor 10px padding var sağdan ve soldan 20px yapıyor 20px düşüyorum 2px de 1pxlik borderları düşüyorum,divim de 600px iken 578 yapıyorum ama yine de scroll çıkıyor anca 400 yapınca scroll gidiyoru yani 178px'e ne oldu bunu gerçekten merak ettim hocam