Css Tasarımda Firefox Sorunu

XR9 · 4 Haziran 2009

Merhaba, css'te yeni yeni tasarımlar yapmaya başladım ama bir sorunum var. Yaptığım bir tasarım ie'de düzgün çıkarken ff'ta hatalı çıkıyor. Büyük ihtimalle css'te kodlama hatası yapıyorum, yardımcı olursanız sevinirim.

Resimlerde gördüğünüz gibi firefox'ta "kare1" "kare2" divleri "dizilertablo" tablosunun içine girmiyorlar.

IE8:

Firefox3

İlgili tablo bölümünün kodları:

PHP:

#ana #orta {
	width:750px;
	background-color:#058afc;}
#ana #orta #dizilertablo {
	width:740px;
	height:auto;
	background-color:#81c5ff;
	margin:auto auto 5px auto;
	border-left:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #000;}
#ana #orta #dizilertablo .baslik {
	width:740px;
	height:25px;
	text-align:center;
	padding-top:2px;
	background-image:url(../images/tablobg.gif);
	background-position:top;
	background-repeat:repeat-x;
	font-size:11px;}
#ana #orta #dizilertablo .kare1 {
	width:140px;
	height:140px;
	border:1px solid #000;
	float:left;
	margin-left:5px;
	margin-top:5px;}
#ana #orta #dizilertablo .kare2 {
	width:142px;
	height:30px;
	margin-left:5px;
	float:left;
	text-align:center;
	color:#000;}

#ana #alt {
	width:750px;
	height:20px;
	background-color:#058afc;
	padding-top:2px;
	text-align:center;
	clear:both;}

PHP:

<div id="orta">
<div id="dizilertablo">
<div class="baslik">Başlık</div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare2">Dizi 1</div>
<div class="kare2">Dizi 2</div>
<div class="kare2">Dizi 3</div>
<div class="kare2">Dizi 4</div>
<div class="kare2">Dizi 5</div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare2">Dizi 1</div>
<div class="kare2">Dizi 2</div>
<div class="kare2">Dizi 3</div>
<div class="kare2">Dizi 4</div>
<div class="kare2">Dizi 5</div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare1"></div>
<div class="kare2">Dizi 1</div>
<div class="kare2">Dizi 2</div>
<div class="kare2">Dizi 3</div>
<div class="kare2">Dizi 4</div>
<div class="kare2">Dizi 5</div>
</div>
</div>
<div id="alt">Footer</div>

yagmayok · 4 Haziran 2009

Bu tarz sorunlar display:table ile çözülebilmektedir.

dizilertablo'ya

HTML:

display:table;

eklemeniz sorununuzu çözecektir.

Deneyip sonucu yazabilir misiniz.

XR9 · 4 Haziran 2009

Eyvallah, çok teşekkürler yagmayok, sorun çözüldü. Şu display kodlarını nedir ne değildir biraz inceliyim

Bu arada hazır seni yakalamışken bir soru daha sorayım

Css kodlarını yazarken

Bu şekilde mi daha doğru;

#ana Ana tablo
#ana #ust Ana tablo içindeki üst kısım
#ana #ust #menu Ana tablo içindeki üst kısımın içinde bulunan menü

Yoksa bu şekilde mi?

#ana
#ust
#menu

Html kısmı
<div id="ana">
<div id="ust">
<div id="menu"></div></div></div>

yagmayok · 4 Haziran 2009

Hangisi daha iyi diye soruyorsan tam olarak bilmemekle beraber birşey farketmez diyorum.

Ama sen nasıl yazıyorsun diye sorarsan ben şu şekilde gitmeyi daha mantıklı buluyorum. Daha doğrusu kendimi böyle daha iyi hissediyorum.

#anatablo
#solalan
#ortaalan
.menu

<div id="anatablo">
<div id="solalan"><div class="menu"></div>
</div id="ortaalan"><div class="büyük kutu"></div>
</div>
</div> vs...

Dipnot: İd' isimlerini tasarımda kullanırken iki veya daha fazla kere tekarar ettirmeyin. Kullandığınız bir id adını bir daha kullanmayacak şekilde tasarlamaya çalışın.

Ve tabi ne kadar az kodlama olursa siteniz için o kadar faydalıdır.

XR9 · 4 Haziran 2009

İkiside aynı kapıya çıkıyorsa bende 2. yoldan giderim o zaman.

id ve class farkını daha önceden bilmiyordum, bu tasarımda ona dikkat ettim, kare1 ve kare2'leri class olarak yazdım.

Herşey için teşekkürler

yagmayok · 4 Haziran 2009

Rica ederim, iyi çalışmalar.

osahin · 4 Haziran 2009

Yaptığımız iş araba yıkama,

id işlemi sanırım böyle açıklayıcı oluyor

yeşil geç kırmızı dur

1 id numarasına ait arabayı yıkıyoruz
1 id numaralı arabanın kapı classını yıkıyoruz
1 id numaralı arabanı tampon classını yıkıyoruz
1 id numaralı arabaya ait yıkama işlemi bitti

2 id numaralı arabanın .....
....
......
.......
2 id numaralı arabaya ait yıkama işlemi bitti

1 id numarasına ait arabayı yıkıyoruz
2 id numaralı arabanın .....
1 id numaralı arabanın kapı classını yıkıyoruz
1 id numaralı arabanı tampon classını yıkıyoruz
1 id numaralı arabaya ait yıkama işlemi bitti

....
......
.......
2 id numaralı arabaya ait yıkama işlemi bitti

XR9 · 5 Haziran 2009

osahin, peki ön cam class mı olucak id mi?