css'de absolute div

deeper · 22.03.2007

merhaba,
uzun zamandır CSS tasarımlara geçmek amacıyla CSS kodları üzerinde çalışıyorum ve kafama bir soru takıldı.
şimdi ben 10 parçalı bir tasarım yaptıktan sonra bunları tek tek Dreamweaver üzerinden tasarıma uygun şekilde yerleştirsem bu bana sorun yaratır mı? zira div tagları üzerinde sayfayı yerleştirmekte oldukça zorlanıyorum. kod olarak açıklamak gerekirse;

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/CSS">
<!--
/* pozisyonu serbest olarak ayarlanabilen, siyah kenarlıklı katman */
#katman { position: absolute; left: 389px; top: 40px; height: 220px; width: 300px;	border: 1px solid #000; background-image:adres.gif }
#katman2 { position: absolute; left: 82px; top: 38px; height: 220px; width: 300px;	border: 1px solid #000;	background-color: #FF0000; }
#katman3 { position: absolute; left: 49px; top: 36px; height: 220px; width: 26px;	border: 1px solid #000;	background-color: #FF0000; }
-->
</style>
</head>
<body>
<div id="katman"><span class="style1">asd</span></div>
<div id="katman2"><span class="style1">asd</span></div>
<div id="katman3"><span class="style1">asd</span></div>
</body>
</HTML>

boyle katmanları, bg image kodlarına 10 parçayı tek tek oturtsam bu uygun mudur?

kerem1905 · 22.03.2007

div leri n pozisyonlarını absolute olarak ayarladığın için sağdan veya solda bırakılacak boluk değerlerini pizel olarak değilde yüzde olarak verirsen daha sağlıklı olur.Aksi halde farklı çözünürlükte sayfa farklı gözükür.

HTML Code:

position:absolute;
left:10%

gibi.

deeper · 22.03.2007

yani bu kadar kolay ve kullanılabilir mi CSS benim için? sliceları yapboz gibi editörde yerleştir ve işte sana daha hızlı ve stabil bir sayfa.

kerem1905 · 22.03.2007

ben kolay veya zor gibi bir şey demedim , sadece absloue kullanacaksan dikkat etmen gereken bir noktayı söyledim.
Bu bahsettigin yapının statik mi dinamik mi olacağını sitenin genel yapısını vs bilmeden zorluk-kolaylık gibi bir şeyden abhsetmem doğru olmaz.Ayrıca ben sen bilinçli olarak absolute olarak tanımladın diye düşündüm.
absolute,relative,static,fixed eger bunlar hakkıdna bilgin varsa sorun yok.

Bir şey daha, CSS ye yeni başlıyorsan cssye alışma-kendini geliştirme sürecinin kolay olmadıgından emin olabilirsin, bu zorluk CSS den değil tarayıcıların kodları farklı algılama durumundan kaynaklanıyor ( ie ye selamlar olsun )

yunusm · 25.03.2007

Mutlak konumlandırma yaparken (position:absolute

% veya px kullansan bile farklı çözünürlüklerde farklı sonuçlar alırsın.

Bunun çözümü mutlak konumlandırdığın elementleri kapsayan normal akışa sahip (position:relative

bir taşıyıcı element oluşturman ve absolute divlerini taşıyıcı elemente göre konumlandırmandır.

arseniq · 25.03.2007

Fazla sayıda parçadan oluşan tasarımlar için absoulte positioned div yaklaşımını pek pratik bulmuyorum zira tasarımlar çok değişken şeyler bir süre sonra ortadaki parçayı atıyorum 20px yukarı kaydırıp 30px de genişletmek istediğinizde sizi bekleyen muazzam pozisyon hesaplamaları var ki kanımca son derece sıkıcı ve uğraştırıcı oluyorlar.

Bir başka konu da browserların div tag'ı için padding, offset, border gibi konulara yaklaşımları son derece farklı oluyor. Bu da örneğin valid CSS kodlarla ie de tasarlayıp herşeyin yolunda olduğunu düşündüğünüz bir anda Firefox ile baktığınızda size bir okadar daha iş çıkabiliyor.

Bu tip durumlarda hep trend yeni çıkandan yana oluyor halbuki eskiler daha kabul görmüş ve oturaklıdır her zaman için. Bu bağlamda table kullanmanızı önereceğim. İlk iki paragrafta bahsettiğim sorunlarla emin olun çok daha az uğraşmanızı sağlayacak. Özellikle de "table-layout:fixed" style özelliği sayesinde çok kararlı görünümler elde etmek mümkün...

kerem1905 · 26.03.2007

Alıntı:

yunusm tarafından gönderilen mesaj:

Mutlak konumlandırma yaparken (position:absolute

% veya px kullansan bile farklı çözünürlüklerde farklı sonuçlar alırsın.

absolute kullanımında % ile sınırlamalar getirildiğinde farklı çözünürlüklerde farklı sonuclar almak mümkün değil.
Şöyle;
1024*768 çözünürlükte

position:absolute;
margin-left:10%

demek ne olursa olsun sol taraftan 102 px bosluk bırak anlamına geliyor.Aynı sey 1280*1024 çözünürlükte 128px bosluk bırak anlamına geliyor.Bu farklılığı çözünürlüğe böldüğümüzde
128/1280 = 102/1024 ( yaklasık olarak )
oranı elde ediliyor.Cok basit bir hesap aslında, emin olmak icin örnek sayfa olsturup test ettim, bir farklılık olmadı.

muhammetsevim · 26.03.2007

Alıntı:

kerem1905 tarafından gönderilen mesaj:

absolute kullanımında % ile sınırlamalar getirildiğinde farklı çözünürlüklerde farklı sonuclar almak mümkün değil.
Şöyle;
1024*768 çözünürlükte

position:absolute;
margin-left:10%

demek ne olursa olsun sol taraftan 102 px bosluk bırak anlamına geliyor.Aynı sey 1280*1024 çözünürlükte 128px bosluk bırak anlamına geliyor.Bu farklılığı çözünürlüğe böldüğümüzde
128/1280 = 102/1024 ( yaklasık olarak )
oranı elde ediliyor.Cok basit bir hesap aslında, emin olmak icin örnek sayfa olsturup test ettim, bir farklılık olmadı.

Değerleri % ile vermeye rağmen farklı çözünürlüklerde farklı sonuçlar almak mümkün, zira bu bu kadar kolay bir hesap değil. 10 farklı div'in hesabını (yaklaşık olarak) deyip yapamazsınız. Örneğin bir blog tasarımı oluşturup bunu sadece absolute ile konumlandırarak sonuçları görebilirsiniz.

Bunun önüne geçmek için @yunusm'nin dediği gibi position:relative; verilmiş bir taşıyıcı div oluşturmak ve position:absolute;'lu divleri bunun içine atmak gerekir.

Aşağıda konuyla ilgili hem açıklama bulunan, hem de uygulamalı örnek kapsayan iki yazı bağlantısı var.

'CSS, Pozisyonlama ve Z-index'
'Relative + absolute ile yorum kutusu'

kerem1905 · 26.03.2007

kompleks yapılar için absolute kullanımının sağlıklı sonuç vermeyeceği aşikar.ben sadece tek div için -cevap nteliğinde- söyledim onları.
yoksa absloute kullanılacaksa en mantıklısı relative özellikli divin içinde absolute değerli divler yerleştirmek yazdığın makalendeki gibi

22.03.2007	#2 (permalink)
kerem1905 Üyelik Tarihi: 18.06.2006 Yer: istanbul Yaş: 21 Mesaj: 270 Görsel: 1	Re: css'de absolute div div leri n pozisyonlarını absolute olarak ayarladığın için sağdan veya solda bırakılacak boluk değerlerini pizel olarak değilde yüzde olarak verirsen daha sağlıklı olur.Aksi halde farklı çözünürlükte sayfa farklı gözükür. HTML Code: position:absolute; left:10% gibi. __________________ freelance creativity

22.03.2007	#3 (permalink)
deeper Üyelik Tarihi: 19.03.2007 Yer: İzmir Yaş: 21 Mesaj: 3	Re: css'de absolute div yani bu kadar kolay ve kullanılabilir mi CSS benim için? sliceları yapboz gibi editörde yerleştir ve işte sana daha hızlı ve stabil bir sayfa.

22.03.2007	#4 (permalink)
kerem1905 Üyelik Tarihi: 18.06.2006 Yer: istanbul Yaş: 21 Mesaj: 270 Görsel: 1	Re: css'de absolute div ben kolay veya zor gibi bir şey demedim , sadece absloue kullanacaksan dikkat etmen gereken bir noktayı söyledim. Bu bahsettigin yapının statik mi dinamik mi olacağını sitenin genel yapısını vs bilmeden zorluk-kolaylık gibi bir şeyden abhsetmem doğru olmaz.Ayrıca ben sen bilinçli olarak absolute olarak tanımladın diye düşündüm. absolute,relative,static,fixed eger bunlar hakkıdna bilgin varsa sorun yok. Bir şey daha, CSS ye yeni başlıyorsan cssye alışma-kendini geliştirme sürecinin kolay olmadıgından emin olabilirsin, bu zorluk CSS den değil tarayıcıların kodları farklı algılama durumundan kaynaklanıyor ( ie ye selamlar olsun ) __________________ freelance creativity

25.03.2007	#5 (permalink)
yunusm Üyelik Tarihi: 10.11.2006 Yer: İstanbul Yaş: 23 Mesaj: 32	Re: css'de absolute div Mutlak konumlandırma yaparken (position:absolute % veya px kullansan bile farklı çözünürlüklerde farklı sonuçlar alırsın. Bunun çözümü mutlak konumlandırdığın elementleri kapsayan normal akışa sahip (position:relative bir taşıyıcı element oluşturman ve absolute divlerini taşıyıcı elemente göre konumlandırmandır.

25.03.2007	#6 (permalink)
arseniq Üyelik Tarihi: 11.03.2007 Yer: İzmir Yaş: 24 Mesaj: 6 Görsel: 1	Re: css'de absolute div Fazla sayıda parçadan oluşan tasarımlar için absoulte positioned div yaklaşımını pek pratik bulmuyorum zira tasarımlar çok değişken şeyler bir süre sonra ortadaki parçayı atıyorum 20px yukarı kaydırıp 30px de genişletmek istediğinizde sizi bekleyen muazzam pozisyon hesaplamaları var ki kanımca son derece sıkıcı ve uğraştırıcı oluyorlar. Bir başka konu da browserların div tag'ı için padding, offset, border gibi konulara yaklaşımları son derece farklı oluyor. Bu da örneğin valid CSS kodlarla ie de tasarlayıp herşeyin yolunda olduğunu düşündüğünüz bir anda Firefox ile baktığınızda size bir okadar daha iş çıkabiliyor. Bu tip durumlarda hep trend yeni çıkandan yana oluyor halbuki eskiler daha kabul görmüş ve oturaklıdır her zaman için. Bu bağlamda table kullanmanızı önereceğim. İlk iki paragrafta bahsettiğim sorunlarla emin olun çok daha az uğraşmanızı sağlayacak. Özellikle de "table-layout:fixed" style özelliği sayesinde çok kararlı görünümler elde etmek mümkün...

26.03.2007	#9 (permalink)
kerem1905 Üyelik Tarihi: 18.06.2006 Yer: istanbul Yaş: 21 Mesaj: 270 Görsel: 1	Re: css'de absolute div kompleks yapılar için absolute kullanımının sağlıklı sonuç vermeyeceği aşikar.ben sadece tek div için -cevap nteliğinde- söyledim onları. yoksa absloute kullanılacaksa en mantıklısı relative özellikli divin içinde absolute değerli divler yerleştirmek yazdığın makalendeki gibi __________________ freelance creativity