[trancemaster]

elimde bir dolu div katmanlarının iç içe geçtiği bir sayfa var.
örneğin;

PHP Code:

<div id="page">
<div id="header"></div>
<div id="main">
<div id="menu"></div>
<div id="content"></div>
<div id="advertisement"></div>
</div>
<div id="footer"></div>
</div> 


ps: yukarıda menu content ve advertisement katmanları yanyanadır.

şimdi soruma geçiyorum. page katmanının gelirli bir genişliği yok dolayısıyla sayfamının tamamına yayılacak şekilde sayfa yükleniyor.sayfayı full screen'den çıkarıp yavaş yavaş küçülttüğümde main katmanının içindeki katmanlar sığmayıp bir aşağıya geçiyorlar(aşağı inme sırası en sağdan sola doğru). yapmak istediğim veya yapmaya çalıştığım sayfayı küçülttükce belirli bir miktar main katmanının içindekiler açağıya <u>inmeden</u> belirli bir miktar sayfa küçüldükten sonra sabit kalması.
bu bahsettiğim olayı bascuda alışveriş sitesinde deneyebilirsiniz. aslında yapmak isetdiğim oradaki gibi bir yapı fakat sadece div katmanlarını kullanarak.
soruma yanıt bulabilirseniz çok sevinirim.
edit: bascuda değil http://www.bidolu.com

[Kommix]

width:100%;
Bu satırı esnemesini istediğin div'e uygular mısın CSS dosyanda? Bu çözebilir olayı

[s5prin]

CSS kodlarını merak ettim. Eğer yapıştırırsan sanırım benzer bir tasarım yapmıştım, yardımcı olmaya çalışırım.

[trancemaster]

@s5prin yapıştırayım da inşallah anlaşılır.

PHP Code:

@charset "iso-8859-9";
/* CSS Document *//
body {

/*    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;*/
    background-color:#E1E1E2;
    margin: 0px 0px 0px 10px;
}
#pageDiv{
display:block;
    position:relative;
}
#footer,#headerPanel,#pageDiv{
/*    width:900px;*/
    }
#headerLogo{
    float:left;
    }
#headerPanel {
    float:right;
    font-size:15px;
    text-align:right;
    margin:10px auto 10px auto;
    }
#headerPanel a{
    color:#ff6600;/*234252*/
    text-decoration:none;
    }
#search{
    clear:both;
    background-color:#efefef;
    margin:10px auto auto auto;
}
#main{
    margin: 0px 0px 0px 0px;
    bacground-color:#efefef;

}
#header{
    /*background-color: #ff6600;*/
    }
#categoryDiv{
    clear:both;
    width:160px;
    }
#categoryDiv,#products1Div{
    float:left;
    }
#products2Div{
    float:right;
    }
#products1Div{
    margin:10px auto 10px auto;
    border-right: 1px solid #d6d6d6;
    }
#products2Div{
    border-left: 1px solid #666;
    width:170px;
    background-color:#ff6600;
    }
#products2Div,#categoryDiv{
    margin:10px auto 10px auto;
    }

#prd1,#prd2,#prd3,#prd4,#prd5,#prd6,#prd7,#prd8,#prd9{
    float:left;
    text-align:left;
    width:440px;
    margin-bottom:40px;
}
#footer{
    clear:both;
    text-align:center;
    background-color: #ff6600;
    margin:20px auto auto auto;
    font-size:10px;
    padding-top:5px;
    padding-bottom:5px;
}
#footer a{
    color:#234252;
    text-decoration:none;
}
#subfooter {
    font-size:14px;
}
#login{
    visibility:hidden;
    background:#4e4ef3;
    position:absolute;
    top:200px;
    left:500px;
    margin:auto auto auto auto;

}
input[type="text"], input[type="password"], textarea {
    background: #FBFAF4;
    border: 1px solid; border-color: #ff6600;
    }






    
    /*.header {
    background-color: #ff6600;
}*/ 


@ Kommix hemen deneyip sonucu bildireceğim.

[trancemaster]

@Kommix bir de şöyle birşey var orta main->content içinde 2şerli (yanyana 2tane) alt alta 4 tane daha div var onların idleri de prd1...prd8'e kadar diyior.yani;

PHP Code:

<div id="content">
<div id="prd1"></div><div id="prd2"></div>
<div id="prd3"></div><div id="prd4"></div>
<div id="prd5"></div><div id="prd6"></div>
<div id="prd7"></div><div id="prd8"></div>
</div> 


bir başka sorun da bunları 4'e 2 şeklinde(satır:4, sıra:2) düzenleyemediğim için
hepsinin boyutunu 400px yapmıştım.dolayısıyla ekran boyutu 1024 olduğu için 400+400 = 800 pixellik alana 2 kutuyu koyuyor öbürünün boyutuyla 1200pixel ettiği için ekrana sığdırmayıp aşağı indiriyor.(aslında yanlış bir çözüm yolu.) temelde burada da bir sorun var. zor gibi görünen basit bir sorun : (

edit:
bu yukarıda bahsettiğim

bir başka sorun da bunları 4'e 2 şeklinde(satır:4, sıra:2) düzenleyemediğim için
hepsinin boyutunu 400px yapmıştım.dolayısıyla ekran boyutu 1024 olduğu için 400+400 = 800 pixellik alana 2 kutuyu koyuyor öbürünün boyutuyla 1200pixel ettiği için ekrana sığdırmayıp aşağı indiriyor.(aslında yanlış bir çözüm yolu.) temelde burada da bir sorun var. zor gibi görünen basit bir sorun : (

sorunu hallettim.
float attribute'unu kullanarak.

@Kommix width:100% olarak kullandım eskiden 400px olan katman genişliğini katmanın içindeki maximum genşlikteki objenin width'ine indirdi. yani olmadı. sanki 100% yazsam da 500% yazsam da çalışmıyormuş gibi bir hava var.

[metsatöll]

CSS kodlarin icerisinde, menu, content ve advertisement divleri icin bir tanimlama yapmamissin, en önemlisi herseyi iceren page divi icin bir genislik atanmamis.

[sahip]

page div' e
----min-width: 650px;
max-width: 1200px;------ver

sayfayı liquid yapar.

ie7 ve ff de çalışır. değerler ile istediğin gibi oyanayabilirsin.

ie6 da sanırım en sağ sütunun aşağı kaçma problemi oluyordu( tarayıcının boyutunu küçültünce)... tam hatırlayamıyorum.

[metsatöll]

benim bildigim
#pageDiv diye atanan bir id body tagi icerisinde div id="pageDiv" diye cagirilirken div#page diye atanan bir id ise body tagi icerisinde div id="page" diye cagirilir.

CSS kodlari icerisinde page tanimlanmadigindan, ekran kücüldükce kutularin asagi dogru düsmesi gayet normal bir sonuc.

[trancemaster]

@metsatöll katmanların ektanın tamamıın kaplaması için sayfalara genişlik tanımlamadım. eğer sabit bir genişlik istiyor olsaydım zaten width verir için içinden çıkardım ki böyle yaparsam katmanların açağı inmesi problemi de ortadan kalkıyor.
yapmak istediğim daha çok @sahip 'in verdiği cevap ile ilgili bir sorun. Bir de #pageDiv veya div#page ile ilgili bir yanlışlık yok sanırsam?
@sahip minimum ve maximum genişlil vermem ile sayfayı minimum bir boyuta küçülte bildim sağol yanıtın için.