Table yerine div kullanmak - 2. Sayfa

02.08.2005

Alıntı:

ZuLuuuuuu tarafından gönderilen mesaj:

Maalesef verdiğin kod istediğim şekli ne IE'de ne de Firefox'ta çıkarmadığı gibi çıkarılan şekli ortalamıyor da...

İstenilen şeklin çıkmamasının nedeni = işareti imiş onu : olarak değiştirince şekli çıkardı ama dediğim gibi ortalanmıyor...

düzeltme: sadece ilk iki satırı okuyup cevap yazmıştım.

ZuLuuuuuu · 02.08.2005

Alıntı:

ba kubah tarafından gönderilen mesaj:

tabloları kullanabiliyorsan yükseklik ve genişlikleri de ayarlayabiliyorsun, katmanları ortalamak için de, katmanların hepsini yeni bir katmana doldurursun, yeni katmana da align="center" anahtarını eklersin.benim atladıklarımı, tablo kurarken kurguladığın mantıkla zaten yapabilirsin, görüldüğü üzere.

Alıntı yaptığın mesajımda da belirtmişim bak. Sonradan nerede hata olduğunu anladım = yerine : koyunca şekil ortaya çıktı.

Herkese teşekkürler, gorgpix naptın sen öyle ya valla bikaç haftada anca okurum oraları neyse başkaları da yararlanır.

Yalnız tam oley derken maalesef bir sorunla karşılaştım. Şöyleki:

Kod:

<div style="float:left; width:50%; background-color:red">div1</div>
<div style="float:right; width:50%; background-color:blue">div2</div>
<div style="width:100%; background-color:black">
	<table>
	<tr><td>
	Bu bir tablo.
	</td></tr>
	</table>
</div>

Kodunu denerseniz tablonun bir anda yukarıya kaydığını görürsünüz. Bu ne alaka şimdi? (IE'de sorunsuz çalışıyor ama Firefox'ta dediğim hata (mı acaba) meydana geliyor.)

Sercotec · 02.08.2005

Şöyle birşey işini görür sanırım

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/CSS">

</style>
</head>
<body>
<div id="container">
<div id="kirmizi">Kırmızı</div>
<div id="mavi">Mavi</div>
<div id="siyah">
<table>
<tr>
<td> Siyah </td>
</tr>
</table>
</div>
</div>
</body>
</HTML>

Mavi ve kırmızıdaki yazıların ortalanmasını istemiyorsan align left yap, ayrıca verdiğin her paddingin toplamlarını kutuların yükseklik ve genişliklerinden çıkarmayı unutma.

Kolay gelsin...

ZuLuuuuuu · 03.08.2005

Sağol Sercotec, clear özelliğinin ne işe yaradığını bilmiyordum onu koyunca düzeldi.

Bilmeyenler için de kabaca clear'ın özelliğini söyleyeyim: clear, bir elementin yanlarında başka bir float'lanmış elementin bulunmamasını sağlıyor. left, right, both veya none değerlerini alabiliyor. Mesela right derseniz sağında, both derseniz iki tarafında da float elementlerin bulunmasına izin vermiyor.

premature · 03.08.2005

Ben de bu aralar CSS ile boğuşuyorum, hazır konu açılmışken ben de bir soru sıkıştırayım;

Bu div'lerin bir "container" div içine yerleştirmenin tam olarak sebebi nedir?
Şu anda üzerinde çalıştığım sayfadaki tüm divleri left ve top mesafeleri vererek ayrı ayrı parçalar halinde yerleştirdim. Hepsini bir ana div içine mi yerleştirmeliyim ve neden?

Sercotec · 03.08.2005

Container içine yerleştirmenin avantajları şöyledir:

Container genişliği belirlenmiş bir toplayıcı olduğu için sayfa içinde ortalamak daha kolaydır.

Float ile yanyana koyduğun iki nesneyi bir container ile toplamaz isen ekran genişliği belli bir değerin altına düştüğü zaman sağda kalan nesne üstteki nesnenin altına gelecektir.

Container sayesinde pozisyonlamayı relatif olarak nesnelerin biribirine göre durumuna göre yapmak çok kolaydır.

Senin bahsettiğin nesneleri top ve left mesafeleri vererek yerleştirmek position:absolute ile mümkündür, nesneleri ortalanmış sayfada kullanmak istediğin zaman çalışmaz.

Şu an hatırlayamadığım başka faydaları da vardır muhakkak, bunlar şimdilik aklıma gelenler...

Kolay gelsin...

omerbalyali · 03.08.2005

Tabi bu containerlamayı abartıp tablo tasarım gibi kullanmamak lazım.

ayrıca top ve left değerlerini vererek pozisyonlama istisnai durumlarda tercih edilmeli, genelde ihtiyaç yoksa kaçınmak gerek.

premature · 03.08.2005

yaptığım sayfayı ortalamadığım için bir sorun yaşamadım sanırım. Yani float kullanmadım hiç. 3 sütunu da top-left mesafesi ile ayarladım.
gerçi container div için soldan mesafe verip, içindeki divleri de float ile daha hızlı yerleştirebilirdim. 3 div'in de top-left pixel ayarlarını yapmak zaman aldı aslında. neden yaptım ki ben öyle, daha yeni farkettim. tatil lazım artık sanırım

.

açıklama için teşekkürler.

Lautreamont · 03.08.2005

Alıntı:

cemshid tarafından gönderilen mesaj:

body'e text-align:center desen de olması lazım galiba, sarmalayan div'e gerek yok..

xhtml içerisinde yer alan tüm selectorlar CSS ile stilize edilebilir. hiyerarşik yapı da bozulmaz. body'ye text-align:center; verilebilir, direk HTML'ye de verilebilir, hatta * (universal selector) kullanılarak da yapısal CSS yazılabilir.

dogru CSS yazımının temelinde HTML sayfasına olabildigince az kod tasımak yatmaktadır. tek basına id'ler ve class'lar yaratılırken bunların hepsinin HTML sayfasına ekstra markup olarak tasınacagını unutmayın. düzensiz CSS dosyaları düzensiz HTML sayfalarına yol açar. bu da ileride site güncellenirken çok bas ağrıtır.

Örneğin:

Kod:

#container {margin: 0 auto;}
.content_p {padding:2em;}

yazmak yerine

Kod:

#container {margin: 0 auto;}
#container p {padding:2em;}

yazmak daha dogru olacaktır.

aynı sekilde container id'leri yaratılırken yapılacak işi direk HTML selector'ları yapabiliryorsa bunları tercih etmek, HTML sayfanızı temiz tutar.

Kod:

#container { margin: 0 auto;}

kullanmak yerine

Kod:

HTML {margin: 0 auto;}

kullanmak işinizi daha kolaylaştırır.

aşırı div yaratma sorunu hakkında öğretici bir makale: http://juicystudio.com/article/div-mania.php

ZuLuuuuuu · 03.08.2005

Lautreamont teşekkürler sana da verdiğin yazıyı okudum.

Arkadaşlar text-align: center ile bir türlü ortalayamadım sayfamı. Aşağıda sarmalayan bir div ile ortalamaya çalıştığım kod var ama ortalamıyor. Her div'e ayrı bir renk verdim rahat görünmesi için. Bir de float'ları kaldırdım belki sorun ordadır diye ama yine olmadı.

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
	<head>
		<title>edwe</title>
	<head>
	<body>
		<div style="margin: 0px; text-align: center; background-color: green">
			<div style="width: 80px; background-color: yellow">
				<div style="width: 80px; background-color: black">
				uykyukuy
				</div>
			</div>
		</div>
	</body>
</HTML>

Bu arada Ömer sormuş neden margin istemiyorsun diye çünkü ortalarken margin: auto kullanıyoruz ve dediğiniz gibi auto, IE'de çalışmıyor. O yüzden bu text-align beni margin kullanmaktan kurtaracak.

02.08.2005	#13 (permalink)
Sercotec Üyelik Tarihi: 30.07.2004 Yer: Istanbul Yaş: 36 Mesaj: 248	Re: Table yerine div kullanmak Şöyle birşey işini görür sanırım <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/CSS"> <!-- #container { width: 500px; margin-right: auto; margin-left: auto; } body { text-align: center; margin: 0px; padding: 0px; } #kirmizi { background-color: #FF0000; float: left; height: 250px; width: 250px; } #mavi { background-color: #0099FF; float: left; height: 250px; width: 250px; } #siyah { background-color: #666666; height: 250px; width: 500px; clear: both; position: relative; } table { text-align: center; margin-right: auto; margin-left: auto; } --> </style> </head> <body> <div id="container"> <div id="kirmizi">Kırmızı</div> <div id="mavi">Mavi</div> <div id="siyah"> <table> <tr> <td> Siyah </td> </tr> </table> </div> </div> </body> </HTML> Mavi ve kırmızıdaki yazıların ortalanmasını istemiyorsan align left yap, ayrıca verdiğin her paddingin toplamlarını kutuların yükseklik ve genişliklerinden çıkarmayı unutma. Kolay gelsin... __________________ Serkan Ertürk Primus Inter Pares http://www.sercotec.net

03.08.2005	#14 (permalink)
ZuLuuuuuu Üyelik Tarihi: 28.05.2001 Yer: İzmir/Ankara Yaş: 23 Mesaj: 766	Re: Table yerine div kullanmak Sağol Sercotec, clear özelliğinin ne işe yaradığını bilmiyordum onu koyunca düzeldi. Bilmeyenler için de kabaca clear'ın özelliğini söyleyeyim: clear, bir elementin yanlarında başka bir float'lanmış elementin bulunmamasını sağlıyor. left, right, both veya none değerlerini alabiliyor. Mesela right derseniz sağında, both derseniz iki tarafında da float elementlerin bulunmasına izin vermiyor. __________________ http://www.sineyorum.net - Hacettepe Robot Topluluğu

03.08.2005	#15 (permalink)
premature Üyelik Tarihi: 17.07.2004 Yer: İstanbul Mesaj: 172	Re: Table yerine div kullanmak Ben de bu aralar CSS ile boğuşuyorum, hazır konu açılmışken ben de bir soru sıkıştırayım; Bu div'lerin bir "container" div içine yerleştirmenin tam olarak sebebi nedir? Şu anda üzerinde çalıştığım sayfadaki tüm divleri left ve top mesafeleri vererek ayrı ayrı parçalar halinde yerleştirdim. Hepsini bir ana div içine mi yerleştirmeliyim ve neden?

03.08.2005	#16 (permalink)
Sercotec Üyelik Tarihi: 30.07.2004 Yer: Istanbul Yaş: 36 Mesaj: 248	Re: Table yerine div kullanmak Container içine yerleştirmenin avantajları şöyledir: Container genişliği belirlenmiş bir toplayıcı olduğu için sayfa içinde ortalamak daha kolaydır. Float ile yanyana koyduğun iki nesneyi bir container ile toplamaz isen ekran genişliği belli bir değerin altına düştüğü zaman sağda kalan nesne üstteki nesnenin altına gelecektir. Container sayesinde pozisyonlamayı relatif olarak nesnelerin biribirine göre durumuna göre yapmak çok kolaydır. Senin bahsettiğin nesneleri top ve left mesafeleri vererek yerleştirmek position:absolute ile mümkündür, nesneleri ortalanmış sayfada kullanmak istediğin zaman çalışmaz. Şu an hatırlayamadığım başka faydaları da vardır muhakkak, bunlar şimdilik aklıma gelenler... Kolay gelsin... __________________ Serkan Ertürk Primus Inter Pares http://www.sercotec.net

03.08.2005	#17 (permalink)
omerbalyali Üyelik Tarihi: 15.02.2005 Yer: İstanbul Yaş: 20 Mesaj: 924 Görsel: 24	Re: Table yerine div kullanmak Tabi bu containerlamayı abartıp tablo tasarım gibi kullanmamak lazım. ayrıca top ve left değerlerini vererek pozisyonlama istisnai durumlarda tercih edilmeli, genelde ihtiyaç yoksa kaçınmak gerek. __________________ i got the blues.

03.08.2005	#18 (permalink)
premature Üyelik Tarihi: 17.07.2004 Yer: İstanbul Mesaj: 172	Re: Table yerine div kullanmak yaptığım sayfayı ortalamadığım için bir sorun yaşamadım sanırım. Yani float kullanmadım hiç. 3 sütunu da top-left mesafesi ile ayarladım. gerçi container div için soldan mesafe verip, içindeki divleri de float ile daha hızlı yerleştirebilirdim. 3 div'in de top-left pixel ayarlarını yapmak zaman aldı aslında. neden yaptım ki ben öyle, daha yeni farkettim. tatil lazım artık sanırım . açıklama için teşekkürler.

03.08.2005	#20 (permalink)
ZuLuuuuuu Üyelik Tarihi: 28.05.2001 Yer: İzmir/Ankara Yaş: 23 Mesaj: 766	Re: Table yerine div kullanmak Lautreamont teşekkürler sana da verdiğin yazıyı okudum. Arkadaşlar text-align: center ile bir türlü ortalayamadım sayfamı. Aşağıda sarmalayan bir div ile ortalamaya çalıştığım kod var ama ortalamıyor. Her div'e ayrı bir renk verdim rahat görünmesi için. Bir de float'ları kaldırdım belki sorun ordadır diye ama yine olmadı. Kod: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <head> <title>edwe</title> <head> <body> <div style="margin: 0px; text-align: center; background-color: green"> <div style="width: 80px; background-color: yellow"> <div style="width: 80px; background-color: black"> uykyukuy </div> </div> </div> </body> </HTML> Bu arada Ömer sormuş neden margin istemiyorsun diye çünkü ortalarken margin: auto kullanıyoruz ve dediğiniz gibi auto, IE'de çalışmıyor. O yüzden bu text-align beni margin kullanmaktan kurtaracak. __________________ http://www.sineyorum.net - Hacettepe Robot Topluluğu Mesaj ZuLuuuuuu tarafından 03.08.2005 (22:27) yeniden düzenlendi..