Göreceli-Mutlak Konumlandırma Sorunu
Bu hata göreceli olarak konumlandırılmış(position:relative) bir elementin içinde mutlak konumlandırılmış(position:absolute) elementlerin bulunduğu durumlarda meydana gelir. Bu hata IE6 ve altı versiyonlarda görülür.
Normal Görünüm – Firefox 2.0
Hatalı Görünüm – IE6
Yukarıdaki ekran görüntülerinde de görüldüğü gibi göreceli konumlandırma(position:relative) içerisinde kullanılan mutlak konumlandırılmış(position:absolute) nesneler Internet Explorer’da hatalı görünücektir. Bu hata ie’nin farklı versiyonlarında farklı şekilde tepki verebilir, yani farklı şekilde görülebilir.
Bu sorunu çözmek için uygulanan yöntemlerden biri göreceli konumlandırma uygulanmış kapsayıcı katmana genişlik ve yükseklik vermektir.
İkinci bir çözüm olarak yükseklik göreceli olduğu durumlar için uygulanan bir yöntemdir.
/* IE-mac den gizle \*/
* html .container1 {height: 1%;}
/* IE-mac den gizleme sonu */
Resmi bir yer için site css/xhtml hazırlıyordum. tasarımı linux altında hep firefox kullanarak yaptığım için başka tarayıcılarda görüntülemedim. tasarım bitince IE6 ve IE7 ile baktığımda çok kötü göründü site.
biri solda diğeri sağda iki menu var:
#menu {
position: absolute;
margin: 184px 0 0 858px;
padding: 0;
clear: both;
color: #fff;
float: right;
}
#menu2 {
position: absolute;
margin: 184px 0 0 0px;
clear: both;
color: #fff;
float: left;
z-index: 5000;
}
üst sınıfta position:relative olarak tanımlandı. paddin ve margin değerleri de sıfırlandı.
fakat menu2 absolute ve margin değeri 0 olmasına rağmen neredeyse 300 pixsel sola uzaklıkta görünüyor.
tam yapmak isteidğnizi bilirsem belki yardımcı olabilrim.
Hocam Bende de Buna Benzer Bir Sorun Var:
Photoshop İle Bir Sayfa Tasarladım.Tasarladığım Sayfayı Slice Tool İle Kısımlara Ayırıp Bu Sayfayı Tek Bir Table'dan Oluşacak Şekilde ve Her Hücreye Tek Bir Kısım Gelecek Şekilde İhrac Ettim.Gereklilik Üzerine Bir Kaç Hücreye Resim Ekledim .Bu Hücrelerin İçindeki Resimleri Hücrenin Arkaplanı Olarak Ayarladım.(<td background="….">) Daha Sonra Bu Hücrelere Sonradan Eklediğim Resimleri CSS İle Aşağıdaki Gibi Konumlandırdım:
HTML:
<td rowspan="5" class="galeriden" width="208" height="156" background="images/index_34.jpg">
<div class="fade">
<img src="galeriden/1.jpg" alt="Önden Görünüş" border="0" />
</div>
</td>
CSS:
.fade
{
top:-70px;
left:3px;
}
IE6 İle Yaptığım Önizlemelerin İstediğim Sonucu Vermesine Rağmen Firefox(3.5) Aksini Yapıyor.Sorunu Bir Türlü Çözemedim Yardımcı Olabilirmisiniz?
Buradaki sorun ve çözüm önerisi ie6 içindir. Sizdeki durum daha farklı.
Bir çok uygulamada kullanılan postion:relative dış katmanı içindeki elementleri istediğimiz yere koymak için postion:absolute ataması yapar ve nesneyi koyacağımız yeri belirleriz. Bu yöntem bir çok güzel uygulama yapmamızı yarar. Ben bu konuyu anlatırken bir demo hazırlamıştım ama yayınlamayı unutmuşum. Kaynak sitesinde bir demo mevcut o demoyu incelerseniz daha iyi anlarsınız. Bedne yazdığım kodu bulursam buraya ekleyeceğim.
hocam biraz daha açıklarmısınız ?