CSS - Position sorunu

**BuGSuR** · 05.04.2005 20:40

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:

Kod:

<div id='content'>

<div id='sol'>

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

</div>

<div id='sag'>

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

</div>

</div>

CSS:

Kod:

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

**omerbalyali** · 05.04.2005 20:54

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** · 05.04.2005 21:29

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** · 05.04.2005 21:33

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

**BuGSuR** · 05.04.2005 21:57

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** · 05.04.2005 22:14

Ö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** · 05.04.2005 22:30

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** · 06.04.2005 01:12

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** · 06.04.2005 01:55

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** · 07.04.2005 15:47

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?

Konu Başlığı: CSS - Position sorunu

Konuyu Paylaş

Seçenekler

CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

Re: CSS - Position sorunu

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

Mesaj Seçenekleri