CSS % kullanımı ve 3 sütun kayması

31-07-2014, 16:49:28

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba arkadaşlar,

Şuan yapmaya çalıştığım 3 sütunlu bir yapıda 3 stunu yanyana koyuyorum min with 1000px olarak ayarlıyorum sag ve sol stunlar kuculmicek sadece orta stun kuculcek ekran kuculdukce ancak bunu sağlıyamıyorum şu şekilde bir görüntü alıyorum .

TAM EKRAN HALİ

KÜÇÜLTÜLÜNCE VE DİĞER ÇÖZÜNÜRLÜKLERDE

css kodlarım:

               body{margin: 30px 0px 0px 0px;}
               .siteanaicerik {width: 90%; min-width: 1000px; margin:0 auto;}
		

            .solmenu {
                float: left; width: 11.2%; min-width: 200px;
		background-color: #000000;
		height: 300px;
               border-radius:5px;
float:left;
             }
		.ortakisim{
			
			float: left;
			width: 67.7%;
			background-color: #000000;
			height: 300px;
			margin-top: 20px;
			margin-left: 20px;
			
		}

		.sagkisim{
			width: 15.6%;
			float: left;
			min-width: 270px;
			background-color: #000000;
			height: 400px;
			margin-top:20px;
			margin-left: 20px;
			
		}

bu sorunu nasil cozebilirim tesekkurler

01-08-2014, 02:39:45

#2

mstf34

kullandığın marginler işi bozuyor.

margin yerine, box-sizing: border-box; ve padding kullanırsan bu sorunu çözersin.

box-sizing: http://css-tricks.com/box-sizing/

Kodları aşşağıda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
	color:#fff;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	height:400px;
	}
.container {
	width:90%;
	min-width:1000px;
	margin:0 auto;
	}
.cleft {
	width:20%;
	min-width:200px;
	float:left;
	background:#000;
	}
.cright {
	width:20%;
	min-width:200px;
	float:left;
	background:#000;
	}
.ccenter {
	width:60%;
	float:left;
	padding:0px 20px;
	}
.ccenter .content {
	width:100%;
	background:#f00;
}
</style>
</head>

<body>

<div class="container">
	<div class="cleft">1</div>
    <div class="ccenter">
    	<div class="content">2</div>
    </div>
    <div class="cright">3</div>
</div>

</body>
</html>

01-08-2014, 04:36:15

#3

interkolik

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

kullandığın marginler işi bozuyor.

margin yerine, box-sizing: border-box; ve padding kullanırsan bu sorunu çözersin.

box-sizing: http://css-tricks.com/box-sizing/

Kodları aşşağıda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
	color:#fff;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	height:400px;
	}
.container {
	width:90%;
	min-width:1000px;
	margin:0 auto;
	}
.cleft {
	width:20%;
	min-width:200px;
	float:left;
	background:#000;
	}
.cright {
	width:20%;
	min-width:200px;
	float:left;
	background:#000;
	}
.ccenter {
	width:60%;
	float:left;
	padding:0px 20px;
	}
.ccenter .content {
	width:100%;
	background:#f00;
}
</style>
</head>

<body>

<div class="container">
	<div class="cleft">1</div>
    <div class="ccenter">
    	<div class="content">2</div>
    </div>
    <div class="cright">3</div>
</div>

</body>
</html>

oncelikle tesekkur ederim,

sol tarafi 15%
sag taraf 20%
orta 65% yaptigim zaman kuculturken ayni sekilde kayma yapiyor acaba neden di r?

01-08-2014, 09:28:25

#4

Akiza

Eğer siz o 1000px in ekran küçüldükçe küçülmesini istiyorsanız javascript yazmanız gerekir...

oda şöyle
eğer ( sağ tarafın width i + sol tarafın width i + orta width > window.width() ) ise
orta width = windows.width - sag.width() - sol.width()
demen gerekir
oda window.resize(function event ına yazman gerekir

03-08-2014, 22:51:59

#5

mstf34

o zaman sol tarfı %15 yapıcaksan min-width olarak 200px yazan yeri de 150px yapman gerekir.