[ZuLuuuuuu]

Selamlar,

Yaptığım aramalarda tam istediğim gibi bir soru bulamadım (bir tanesi oldukça yakındı ama bir özelliği işi bozdu ) CSS ile tabloların yaptığı işi yapmaya çalışıyorum yani sitemin şeklini CSS ve div'lerle vermeye çalışıyorum. Çok methediyorlar ve olması gerekenin bu olduğunu söylüyorlar ya ondan merak sardım

Yalnız bir türlü istediğim şekli veremiyorum. Üstelik yapmaya çalıştığım şey de oldukça basit, tablo ile 2 saniyede yapılabilecek türden birşey. Yapmak istediğim şekli eke koydum. İnternette araştırma yaptıysam da hem siteyi ortalayacak hem de istediğim şekli verecek bir sistem geliştiremedim. Aslında birkaç yazıda gördüysem de adamların bir takla atmadığı kalmış ve ben de bunu görünce "Madem bu kadar zor ve her tarayıcıda farklı gözüküyor, her tarayıcıda aynı gözükmesi için de binbir numaraya yatmak gerekiyor, o zaman insanlar neden hala div'leri savunuyor?" diyorum. Ben yine burada konuyu açayım eğer "aslında çok basit" bir çözümü varsa ve yazarsanız oldukça mutlu olacağım ve belki de bundan sonra tablo kullanmam (tabi veri listelemek dışında). Benim kullandığım kod altta ama olmuyor, alttaki div üsttekinin üstüne biniyor.

*Not: Ortalama işlemi direk ortadaki alanın genişliği ile belirtilirse (Yani margin'lerle değil.) daha iyi olur.

<div style="margin-left: 100px; margin-right: 100px">
	<div style="float: left">
	Buraya Logo gelecek
	</div>
	<div style="float: right">
	Burada birkaç yazı var
	</div>
</div>
<div style="margin-left: 100px; margin-right: 100px">
	Buraya esas içerik gelecek
</div>

<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">div1</div>

bu kodlar, istediğin şekli çıkarır.Dreamweaver kullanmıyorsan, hemen kullanmaya başlamanı öneriyorum, ben css öğrenirken çok işime yaradı.

[ZuLuuuuuu]

ba kubah tarafından gönderilen mesaj:

<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">div1</div>

bu kodlar, istediğin şekli çıkarır.Dreamweaver kullanmıyorsan, hemen kullanmaya başlamanı öneriyorum, ben css öğrenirken çok işime yaradı.

Maalesef verdiğin kod istediğim şekli çıkaramıyor bir de çıkarılan şekli ortalamıyor.

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

[omerbalyali]

1-2 ipucu;

-Bir objeyi margin:0 auto; şeklinde yatay olarak ortalayabilirsin.
-IE5 modern tarayıcılardan değildir ve css'i tam desteklemez. Div düzgün gözüksün diye atılan takla aslında IE5 amcaya css' çalıştırmanın yolunu bulmaktır, css veya divin eksikliğinden değil.
-IE5'te auto çalışmaz, bu yüzden üstteki kod çalışmaz. Bunun yerine benim kendi yöntemim olan bir betod var o da; margin:0 auto kullanacaksam bunun dışına bir tane daha div koyar ve ona text-align:center; stilini eklerim. Bu sayede hem ie5 hem de modern tarayıcılar mutlu mesut yaşar...
-Div ve tablo konusunda dediğin doğru, tablu sadece çizelge gibi veri listelemek için tavsiye edilmiştir.
-Kolay gelsin, hoşgeldin.

[ZuLuuuuuu]

Ok, Ömer o text-align'ı deneyeceğim ama acilen çıkmam gerekiyor akşama yanıtlarım olup olmadığı hakkında.

[omerbalyali]

Bu arada içteki dive tex-align:left; dersen daha bir iyi olur.


Yalnız bu işi neden marjinlerle yapmayacaksın?

Yani benim örnekte marjini otomatik alır ve objelerin genişliği artsada azalsada hiçbir şey farketmez.


Ayrıca text align sadece ie5 bu numarayı yesin diye. Firefox ve ie6da falan gene marjinde olmalı.

[cemshid]

omerbalyali tarafından gönderilen mesaj:

-IE5'te auto çalışmaz, bu yüzden üstteki kod çalışmaz. Bunun yerine benim kendi yöntemim olan bir betod var o da; margin:0 auto kullanacaksam bunun dışına bir tane daha div koyar ve ona text-align:center; stilini eklerim. Bu sayede hem ie5 hem de modern tarayıcılar mutlu mesut yaşar...

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

[Ceyhun Aksan]

Mantık olarak @ba kubah`ın yazdıkları geçerlidir. Gerisi senin sayfada yapmak istediklerinle sınırlı... Bu üç layera padding ve margin etiketleri ile sınırlandırma kattığında görüntüsünü veridğin sayfanın yanısını elde edersin. Ayrıca ek olarak eğer merkezleme yapacaksan...

<div id="merkez">
<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">div1</div>
</div>

ile merkeze vereceğin bir selectorle merkezleme ve genel boyut işlemlerini de halledebilirsin. Bunu margin auto özelliği ile otomatik ya da %lik ifade ile ekran çözünürlüğüne göre yapabilir, ya da text-align, veritacl align özelliklerinden gerekli olanı kullanabilirsin. Ayrıca left, right ve alt kısımdan ikisini kapsayan layera width değeri olarak % değeri verirsen her tarayıcıda ve ekran çözünürlüğünde ortaya çıkacak bozulmaları da önlemiş olursun. Bunların dışında IE`nin CSS`i tam olarak destekleyeceği güne kadar kullanılması şart olan box hack methodu ile genişlik özelliklerinde IE`ye uygun hack methodunu de kullanabilirsin.

Temel olarak box modelde;

IE ve FF (standart sunan) browserlar arasındaki mantık hatasını

TEKNİK 1
div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}

TEKNİK 2
{
border: 10px solid;
padding: 10px;
width: 100px !important;
width: 140px;
width/**/:/**/100px;
}

diğer teknikler http://css-discuss.incutio.com/?page=BoxModelHack
ile kapatabilrsin. Açıklaması da http://webdesign.about.com/od/css/a/aaboxmodelhack.htm adresinde
şeklinde ayar yapabilrisin. Daha detaylı bilgi istersen http://tantek.com/CSS/Examples/boxmodelhack.html adresine bakmalısın. Ayrıca http://www.webmasterworld.com/forum83/204.htm adresi de işini görecek ve mantığını anlatacaktır. http://www.w3.org/TR/REC-CSS1#formatting-model adresi de kılavuzun olsun
Farklı browserlar ve bir CSS sorunu zoquede browserlarla ilgili çıkabilecek sorunlarla ilgili bir tartışma da söz konusu... http://www.godoro.com/Divisions/Ehil...tBoxModel.html adree örnekli ve türkçeli anlatım vermekte. http://www.456bereastreet.com/lab/de..._standards/tr/ ve http://www.korfez.net/css-p/advanced.html adresi CSS ve XHTML`i anlatıyor.
Son olarak http://css-discuss.incutio.com/?page...iveEnhancement
http://www.dithered.com/css_filters/index.html
http://www.ericmeyeroncss.com/bonus/trick-hide.html
http://www.quirksmode.org/css/box.html
http://www.info.com.ph/~etan/w3pantheon/style/abmh.html
http://www.maujor.com/tutorial/boxmodelhack.php
adresleri de elinin altında bulunsun

[cgencer]

gorgpix, döktürmüşsün linkleri; iiyi olmuş,bilmeyenler bilenlerden öğrenir.

[Ceyhun Aksan]

Eyvallah @cgencer, maksat bilgi paylaşımı...