İki kolondan oluşan sayfa (div ile)

volblood · 10 Mart 2011

Merhabalar,
iki kolondan oluşan bir sayfa düzeni oluşturmaya çalışıyorum.

Olay şu :
Soldaki div'in width değeri 100% olacak
Sağdakinin 400px;

Birbirlerine yapışmamaları için aralarında 3-5 pixel bırakmam gerekiyor.

Yani sayfayı çekiştirdiğimizde sağdakinin width değeri sabit iken soldaki uzayıp kısalarak sayfayı dolduracak.

Nasıl yapabilirim ?

HTML:

<style type="text/css">
.sol {width:100%; background:#666; float:left;}
.sag {width:300px; background:#03C; float:right;}
</style>

<div class="sol">
<h2>SOL</h2>
</div>
<div class="sag">
<h1>SAĞ</h1>
</div>

Antika · 10 Mart 2011

birbirine yapışmaması için sag classa margin:0 0 0 5px; gibi bi değer verebilirsin veya sol classa margin:0 5px 0 0; gibi bir değerde verebilirsin

Angelo · 10 Mart 2011

sola yüzde yüz verirsen diğerine alan kaldı mı? üstüne biner

div ile sağa sola float verirken, birini relative (yüzde), diğerini tam sayı (400px) olarak vermen sorun çıkartır. Diyelim ki ekran genişliğim 700px. %50 350px e denk gelir, 60 ise 420'ye, dolayısıyla sağ div için geriye 280 px kalır, oysaki 400 sabit verdin. Sığmaz aşağı taşar.

O yüzden ya ikisini de tam sayı yap, ya ikisini de yüzde olarak böl.

volblood · 10 Mart 2011

Teşekkürler,
Javascript le mücadele verip çıkabilirim sanırım işin içinden ama çok karışacak, Css ile kolay bir yöntemi varmıdır ki sorayım dedim.

Sağdaki sabit soldaki uzayan olmalı ki sayfayı tamamen doldurabileyim.

Angelo · 10 Mart 2011

Javascript ile çözünürlük bulup, 400 px i çıkartacaksın. Kalan toplamın % kaçına denk geliyorsa o kadarlık bir alan açıp 10 px kadar margin hesabı yaparsan sağdan sayfayı çekiştirdiğinde uzar kısalır.

volblood · 10 Mart 2011

Teşekkürler.

Angelo · 10 Mart 2011

Düşündüm de öyle de olmaz. Daha gelişmiş bir Javascript gerekecektir. İlk hesapladıgında %75 hesaplasa bile, sen oynatınca, 400 sabit kaldığı için 75 inde küçülmesi gerekir.

Angelo · 10 Mart 2011

HTML:

<div id="sol" style="background-color: gray; width: 99% float: left; margin-right: 9px; border: 1px solid black;">

	<div style="margin-right: 420px; background-color: red;">
	sol
	</div>
	
	<div style="background-color: white; width: 400px; float: right; border: 1px solid red;">
	SAG
	</div>
	<div style="clear: right;"></div>	
</div>

şöyle bişi fena deil

yagmayok · 10 Mart 2011

Şöyle birşey buldu.

PHP:

<?php 
session_start(); 

if (!isset($_SESSION[iterate])) 
{ 
if(!isset($HTTP_COOKIE_VARS["users_resolution2"]))  

//means cookie is not found set it using Javascript  
{  
$_SESSION[iterate]=1;  
?>  
<script language="javascript">  
<!--  
writeCookie();  

function writeCookie()  
{  

var the_cookie = "users_resolution2="+ screen.width +"x"+ screen.height;  

document.cookie=the_cookie  

location ='<?php echo $_SERVER['PHP_SELF'];?>';  
}  
//-->  
</script>  
<?php  
}  
else{ 
$screen_resolution = $HTTP_COOKIE_VARS["users_resolution2"];  
}  
} 
else{ 
$screen_resolution = $HTTP_COOKIE_VARS["users_resolution2"];  
}  
echo $screen_resolution;  
?>

Çözünürlüğü veriyor. Buna göre toplam sol taraf width değerini değişken olarak atayabilirsiniz.

Angelo · 10 Mart 2011

Evet ama her resize ettiğinde yüzdesi değişmesi gerekiyor. Diyelim size=1000px - 400 sagda, %60 la baslaması lazım.

Ben ekranı küçülttüğümde 900 e. %60 ı 540. 400 de sagda var. 940. Aşağı taşıyor dolayısıyla.

En iyisi sabit 400 ü right float yapıp, onun soluna float olmayan ama sağdan 400 margini olan bir div yaratmak.

yagmayok · 10 Mart 2011

Angelo ben o noktayo atlamışım.
O halde bu java dışında başka birşey ile yapılamaz ki.
Sayfa yı çekiştirdiğimizde kısalıp uzasın istiyorsak yapacak başka birşey yok. Mutlak bunla ilgili hazır uygulamalar vardır.

volblood · 10 Mart 2011

Angelo' Alıntı:

HTML:

<div id="sol" style="background-color: gray; width: 99% float: left; margin-right: 9px; border: 1px solid black;">

	<div style="margin-right: 420px; background-color: red;">
	sol
	</div>
	
	<div style="background-color: white; width: 400px; float: right; border: 1px solid red;">
	SAG
	</div>
	<div style="clear: right;"></div>	
</div>

şöyle bişi fena deil

Explorerda sapıtıyor

window.onresize = function() {}
ile sayfanın çözünürlüğünün değişmesine bakarak yapmayı deniyorum..

Angelo · 10 Mart 2011

HTML:

<div id="sol" style="position: relative; background-color: gray; width: 99% float: left; margin-right: 9px; border: 1px solid black;">

	<div style="margin-right: 420px; background-color: red; height: 200px;">
	sol
	</div>
	
	<div style="position: absolute; top: 0; right: 0; background-color: white; width: 400px; float: right; border: 1px solid red;">
	SAG
	</div>
	<div style="clear: right;"></div>	
</div>

bu ikisinde de çalışması lazım, margin border ayarını yapıp ie de güzelleştirmen lazım ama mantık olarak çalışıyor.

nizam · 10 Mart 2011

ikisine de yüzde vermen lazım başka türlü olmaz

volblood · 10 Mart 2011

Angelo' Alıntı:
HTML:

<div id="sol" style="position: relative; background-color: gray; width: 99% float: left; margin-right: 9px; border: 1px solid black;"> <div style="margin-right: 420px; background-color: red; height: 200px;"> sol </div> <div style="position: absolute; top: 0; right: 0; background-color: white; width: 400px; float: right; border: 1px solid red;"> SAG </div> <div style="clear: right;"></div> </div>

bu ikisinde de çalışması lazım, margin border ayarını yapıp ie de güzelleştirmen lazım ama mantık olarak çalışıyor.

Explorerda sayfayı resize ettiğimde kırmızı alan %100 oluyor.
Yarın sakin kafayla uğraşmak en iyisi
Teşekkürler.

suzz.net · 27 Ağustos 2014

Eski bir konu ama bilinmesinde fayda var
css calc fonksiyonu ile bahsedilen durum kolaylıkla halledilibelir.

HTML:

<style type="text/css">
.sol {width:calc(100% - 300px); background:#666; float:left;}
.sag {width:300px; background:#03C; float:right;}
</style>

<div class="sol">
<h2>SOL</h2>
</div>
<div class="sag">
<h1>SAĞ</h1>
</div>

İki kolondan oluşan sayfa (div ile)

0

0

0

0

0

0

0

0

1

0

1

0

0

0

0

0

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5