[BuGSuR]

Ilgili konu başlıklarında istediğim yanıtı edinemediğim için ayrı bir topic açma lüzumu gördüm.

Elimdeki çalışmada sayfa ikiye ayrılmış durumda. Sayfanın sağ ve sol bölgelerinin her ikisi de ayrı id'lere sahip div etiketleri içersinde. Yan yana durmalarını ise ilk tanımlanan div'e float:left özelliği ie sağlıyorum. Ne varki Firefox'da kusursuz çalışan bu ifade, IE'de istediğim görünümü sağlamıyor. Ikinci div, ilkinin altına düşüyor. (Ikinci bölüme div tanımlamaz, direk içeriği girersem aşağa düşme olmuyor ama div kullanmak zorundayım sitil atamak için.)

Position ile bu sorunu çözmeyi denedim ancak olmadı.
Position:absolute ifadesi IE'de istenilen sonucu verirken, bu defa margin-left ile ikinci div'e değer vermez isem ikinci div ilkinin üstüne biniyor. Diğer position ifadeleri de bir çözüm değil taktir edersiniz.

Üzerinde duracağım konu için farklı bir yöntem arayışı içinde değilim. Table, li etiketleri ile bir sayfayı ikiye bölmek de bir çözüm ama elimdeki çalışmada bu tür bir değişiklik yapmak projenin sonlanma tarihini epey ileri atacaktır.

Saygılar,

HTML:

<div id='content'>

<div id='sol'>

   <--! SOL İÇERİK  !-->

</div>

<div id='sag'>

   <--! SAĞ İÇERİK  !-->

</div>

</div>

CSS:

div#content {width:500px;}
div#sol {float:left; width:200px;}
div#sag {margin-left:200px; width:300px;}

[omerbalyali]

div#content {width:500px;}
div#sol {float:left; width:200px;}
div#sag {float:right; width:300px;}

bunu denesen?

ayrıca tavsiyem arayüzü hazırlarken katmanlara farklı farklı arkaplan rengi ata, bu sayede nerede başlıyor-nerede bitiyor tam görebilirsin...

[BuGSuR]

Yukarda yazdığım kodlar sadece yalınlaştırılmış, demo kodlar. Karışıklık olmaması için içerik ve sitilerden arındırdım, yoksa esas problem yaşadığım sayfanın kodları çok daha uzun scriptlerle bezenmiş, sınırlar ayırt edilebilir halde.

Float:right önerisini de denedim ancak sonuç vermiyor... Aksine Firefox'da da çalışmaz hale gelior. İkinci div aşağa düşüp, o bölgede sağ tarafa yaslanıyor.

Esasında bu sayfada amacım sonuca erişmekten çok, table'sız sayfa tasarımını kavramaktı. Ne varki projenin hayata geçirilmesi zarruri hale gelince, üstüne de bir tarih sınırlaması gelince bunu forumda danışma gereği duydum. Umarım çözümü vardır...

[omerbalyali]

www.omerbalyali.com/v3 şuraya bir bak istersen

[BuGSuR]

Sevgili Ömer... biras "şamşırdım" doğrusu.
Sana zahmet olmaz ise verdiğim linkdeki deneme kodlara bakabilir misin?

lorem.php

Açıkcası senin sayfan ile bu kodlar arasındaki ciddi farkı bulamadım ben.

[omerbalyali]

Öncelikle sana tavsiyem "layout" hazırlarken içerik girme, blokların iç paddinglerini, fontlarını falan yazma hiç. Önce yan yana getir sonra diğerlerini ekle... Böyle gereksiz kod ve gereksiz görüntü oluyor.

Gelelim div sorununa.

Ben yukarıda verdiğin kod'u istediğin gibi değiştirdim. Ama sen her seferinde boş bir sayfa çıkartıyorsun ama oldu mu olmadı mı diye kalkıp asıl kodlarında deniyorsun.

Ya asıl kodlarını göster ona göre değişikliği yapalım ya da yaptığımız örnek sayfalara göre bakarak yap.

5 pixel padding koyunca doğal olarak 10 pixel artış oluyor... padding'i kaldırırsan düzelecek.

[BuGSuR]

Kusura bakma Ömer..

Asıl kodları net ortamına taşıyamadığım için böyle birşey yaptım. Padding sorunu diyence ise anladım asıl meseleyi, dalmış sadece float'a odaklanmışım. Ilgin için saol.

[mehmet]

Bugsur,

CSS'in en populer problemi olan "kutucuk problemi" nin avuclarina dusmussun

Tabi bunu tamir edecek yontemler var. Hatta bu yontemin babasi da web standartlari konusunda dunyaca taninmis bir Turk olan Tantek Celik

Bu konuyla ilgili bir yazi yazmistim 1.5 ay once. Iste sana o yazinin linki.

http://www.unbf.ca/altiustu/arsiv/20...cuk_modeli.php

Eger yukarida linkini verdigim yaziyi okursan, sorununu halletmis olacaksin.

[BuGSuR]

Gerçekden çok teşekkürler...

Problemi "padding" özelliğini dikkate almadan, float- position boylamında saptlantıya dönüştürerek büyütmüşüm.
Neyseki bu problemi de aştık. Zaten bu tür ayrıntıları da çözümü basit dahi olsa böyle böyle tecrübe ediniyoruz.

Verdiğiniz link "bookmark" 'larım arasına kattım, inceledim. Gerçekden çok başarılı bir başucu kaynağı olmuş.

[sahip]

konu halledilmiş ancak araya bir soru girmek istiyorum;

- CSS ve div class , kullanarak bu kutucukların boyutunu height ile yapabiliyoruz, ancak ben table daki gibi her kutucuğun ( sol, sağ , orta vs. ) yazıların uzun olmaması durumunda bile en altta kadar ( örneğin footer' a kadar gibi) inmesini istiyorum. bu yapılabilir mi?