css layout (autoresize columns)

**oxigen** · 27.06.2009 18:06

arkadaşlar ekteki resimde gördüğünüz layout 'u oluşturdum.
yapmak istediğim şey, orta alanda bulunan 4 (bazı sayfalarda 5 ve 6) adet panellerin (container) herhangi birinin boyutu değiştiğinde, diğerlerlerininde otomatik olarak düzenlenmesi.

örnek olarak kategoriler alanının yüksekliği artarsa, profil kısmı aşağıya doğru kayacak ve bu durumda solda bulunan soru alanı ve altındaki alan yukarıda kalacak. ben bunlarında eşit oranlarda (yada sadece birinin) yüksekliklerinin otomatik olarak ayarlanmasını istiyorum.

sizce bunu yapabilir miyiz? Yükseklik değerlerine %50 gibi bir değer vermek bu olayı çözer mi?

**erdinç** · 27.06.2009 19:27

"Sol alttaki ve sağ alttaki divlerin yüksekliği sabit kalacak ve sol üstteki ve sağ üstteki divlerin yüksekliği esnek olacak" diyebilir miyiz?

Yani esneyen divler her zaman üstteki (sol üst ve sağ üstteki) divler olsa olur mu?

Bir de 5 ve 6 divli tasarımda aynı kural sağlanıyor mu?

Benim aklıma gelen yöntem absolute positioning ile alttaki divleri en alta sabitleyip üstteli divlerin esneyerek geri kalan divlerin yüksekliği kapsamaları şeklinde. Tabii bir problem var o da şu: Eğer üstteki divlerde fazla içöerik olursa o zaman sayfanın toplam yüksekliği ilk başta verilen yüksekliği aşabilir. O zaman ne olacak?

Benim düşündüğüm yöntem şu şekilde. Henüz tam bitmedi.
http://img39.imageshack.us/img39/6905/76489704.gif

**erdinç** · 27.06.2009 21:47

Oxigen, konuya tekrar baktım. Benim yukarıdaki yöntem işe yaramadı ancak işe yarayan başka bir yöntem buldum. Bu yönteme göre sol alt ve sağ alttaki kutuları aşağı doğru esnetebiliyorsun ve ikisi aynı yerde bitiyor.

Ancak oraya gelmeden önce hiç bir çözüm uygulanmamış haliyle nasıl gözüküyor ona bakalım:

Burada gördüğün gibi dört kutunun dördü de float halinde serbest bir şekilde duruyor. Burada üstteki kutuların yüksekliği değişirse alttakiler de ona göre aşağı doğru kayıyor. sorun şu ki alttaki iki kutu farklı yerlerde bitiyor.

Kod:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/CSS">
<!--
HTML {
min-height: 101%; /* Firefox scrollbar fix */
}
body {
	margin: 0px;
	background-color: #CCCCCC;
}
#site_container {
	width: 950px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#clearer {
	clear: both;
}
#header {
	background-color: #333333;
	height: 70px;
	margin-bottom: 10px;
}
#footer {
	background-color: #333333;
	height: 50px;
	margin-top: 10px;
}
#left_1 {
	background-color: #EFEFEF;
	width: 690px;
	height: 350px;
	float: left;
	clear: left;
}
#left_2 {
	background-color: #3399FF;
	width: 690px;
	float: left;
	clear: left;
	height: 150px;
	margin-top: 10px;
}
#right_1 {
	background-color: #EFEFEF;
	width: 250px;
	height: 200px;
	float: right;
	clear: right;
}
#right_2 {
	background-color: #3399FF;
	width: 250px;
	float: right;
	clear: right;
	height: 250px;
	margin-top: 10px;

}
-->
</style>
</head>

<body>
<div id="site_container">
	<div id="header"></div>
	<div id="clearer"></div>
		  <div id="left_1"></div>
		  <div id="right_1"></div>
		  <div id="right_2"></div>
		  <div id="left_2"></div>
	<div id="clearer"></div>
	<div id="footer"></div>
</div>
</body>
</HTML>

Benim bulduğum yöntem alttaki kuruların arkaplan renklerini aynı yerde bitiyormuş gibi gösteriyor. Yani şu şekilde:

Üstteki kutuları esnetme yolunu bulamadığım için bu çözümü buldum. Yani alttakileri kutuları aynı yerde bitecek şekilde esnetiyorum. Üsttekilerin yüksekliği değişse de farketmiyor. Yine alttakiler ona göre esneyip aynı yerde bitiyor.

Kod:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/CSS">
<!--
HTML {
min-height: 101%; /* Firefox scrollbar fix */
}
body {
	margin: 0px;
	background-color: #CCCCCC;
}
#site_container {
	width: 950px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	display: block;
}
#clearer {
	clear: both;
}
#header {
	background-color: #333333;
	height: 70px;
	margin-bottom: 10px;
}
#footer_margin {
	height: 10px;
	background-color: #CCCCCC;
	font-size: 1px;
}
#footer {
	height: 50px;
	background-color: #333333;
}
#inner_container {
	overflow: hidden;
}
#left_1 {
	background-color: #EFEFEF;
	width: 690px;
	height: 350px;
	float: left;
	clear: left;
}
#left_2 {
	background-color: #3399FF;
	width: 690px;
	float: left;
	clear: left;
	height: 150px;
	margin-top: 10px;
	padding-bottom: 2000px;
	margin-bottom: -2000px;
}
#right_1 {
	background-color: #EFEFEF;
	width: 250px;
	height: 200px;
	float: right;
	clear: right;
}
#right_2 {
	background-color: #3399FF;
	width: 250px;
	float: right;
	clear: right;
	height: 250px;
	margin-top: 10px;
	padding-bottom: 2000px;
	margin-bottom: -2000px;
}
-->
</style>
</head>

<body>
<div id="site_container">
	<div id="header"></div>
	<div id="clearer"></div>
	<div id="inner_container">
		<div id="left_1"></div>
		<div id="right_1"></div>
		<div id="right_2"></div>
		<div id="left_2"></div>
  	</div>
	<div id="clearer"></div>
	<div id="footer_margin"></div>
	<div id="footer"></div>
</div>
</body>
</HTML>

Footer margin konusunda bir sorun çıkmıştı ancak onu ayrı bir div olarak ekleyip çözdüm. Eğer footer yukarıdaki mavi divlere yapışlık bitsin istemiyorsan araya koyduğum footer_margin divini yerinde bırakmalısın.

Aslında çözüm uygulanmamış hali bana yeterli gözüküyor. Kodlar komplike olunca farklı tarayıcılarda test etmen lazım. Ben IE6 ve chrome'da baktım. Eğer sende başka IE varsa bir de onlarda bak.

Yuvarlak köşelerde sorun çıkabilir.

**oxigen** · 28.06.2009 23:06

teşekkürler erdinç, gerçekten uğraştığın için sevindim.
şuanda tasarımsal açıdan ufak tefek değişikliklere gidiyoruz, bitince çözümlerini deneyeceğim.

Konu Başlığı: css layout (autoresize columns)

Konuyu Paylaş

Seçenekler

css layout (autoresize columns)

Bu konu başlığı için etiketler

Mesaj Seçenekleri