CSS - Position sorunu

BuGSuR · 05.04.2005 | 19:40 | #1

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 | 19:54 | #2

Alıntı:

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 | 20:29 | #3

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 | 20:33 | #4

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

BuGSuR · 05.04.2005 | 20:57 | #5

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 | 21:14 | #6

Ö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 | 21:30 | #7

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 | 00:12 | #8

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 | 00:55 | #9

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 | 14:47 | #10

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?

BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	05.04.2005 \| 19:40 \| #1 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;}
BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	__________________ Biraz sarı, biraz da kırmızı...
	Alıntı yap

BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	05.04.2005 \| 20:29 \| #3 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...
BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	__________________ Biraz sarı, biraz da kırmızı...
	Alıntı yap

omerbalyali Üyelik Tarihi: 15.02.2005 Mesaj: 924 Görsel: 24	05.04.2005 \| 20:33 \| #4 www.omerbalyali.com/v3 şuraya bir bak istersen
	__________________ i got the blues.
	Alıntı yap

BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	05.04.2005 \| 20:57 \| #5 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.
BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	__________________ Biraz sarı, biraz da kırmızı...
	Alıntı yap

omerbalyali Üyelik Tarihi: 15.02.2005 Mesaj: 924 Görsel: 24	05.04.2005 \| 21:14 \| #6 Ö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.
	__________________ i got the blues.
	Alıntı yap

BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	05.04.2005 \| 21:30 \| #7 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.
BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	__________________ Biraz sarı, biraz da kırmızı...
	Alıntı yap

mehmet Üyelik Tarihi: 25.06.2004 Mesaj: 104	06.04.2005 \| 00:12 \| #8 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.
mehmet Üyelik Tarihi: 25.06.2004 Mesaj: 104	__________________ “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.” —Jeffery Veen ________________________________ Altı Üstü Tasarım
	Alıntı yap

BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	06.04.2005 \| 00:55 \| #9 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ş.
BuGSuR Üyelik Tarihi: 14.12.2002 Mesaj: 90	__________________ Biraz sarı, biraz da kırmızı...
	Alıntı yap

sahip Üyelik Tarihi: 29.11.2002 Mesaj: 1,166	07.04.2005 \| 14:47 \| #10 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?
sahip Üyelik Tarihi: 29.11.2002 Mesaj: 1,166	__________________ YENİ: POOZZ PEYKit.com : kolay reklam, ilan aracı SuniPeyk RSS
	Alıntı yap

Seçenekler
Yazıci Çıktısı Alın Bu Konuyu Arkadaşınıza Gönderin