CSS problemi..

[NaCReS]

merhabalar...

sormak istediğim şey; ekşi sözlükün sahip olduğu navigasyon sisteminde ki gibi yanyana 4 form butonunu sadece CSS kullanarak, hiç bir şekilde tablo kullanmadan nasıl dizebilirim? CSS konusunda yeniyim... ben baya bi uğraştım ama beceremedim... yaptığım menü firefox ta sorunsuz görüntülenirken, ie de zıçıyo... nasıl olcak bu iş?

yardımlarınız için şimdiden teşekkürler...

[mehyaa]

Demek istediğini tam anlamadım ama CSS ile stiller oluşturup bunları HTML ile kullanırsın. Tablo kullanmasan bile bir yapı kullanman gerekli. Tablo kullanmayacaksan Layer (div) kullanman gerekecek ama FF ve IE nin yorumlamaları sana saç baş yoldurabilir, tecrübeyle sabittir ; )

[NaCReS]

zaten şu anda onunla uğraşıyorum, hakkaten saç baş yoldurdu.. :mad demek istediğim şey çok basit aslında ekşisözlük ün üstteki menüsünün aynısı... yani solda logo var, onun yanına doğru da butonlar 2 sıra halinde yanyana dizilmiş.. margin değerleriyle oynayarak yerleştirme yapmaya çalışıyorum ama olmuyo bir türlü... hakkaten sıyırcam..

[Angelo]

Kod yazmaya vaktim olmadigi icin yazamiyorum su anda, ama listing verip, <ul> altina alirsan butonlari her bir <li> icin margin degerini left 3 px filan verdiginde olur gibi. Ya da kazma bir sekilde &nbsp;

[BrUnO]

NaCReS´isimli üyeden Alıntı

zaten şu anda onunla uğraşıyorum, hakkaten saç baş yoldurdu.. :mad demek istediğim şey çok basit aslında ekşisözlük ün üstteki menüsünün aynısı... yani solda logo var, onun yanına doğru da butonlar 2 sıra halinde yanyana dizilmiş.. margin değerleriyle oynayarak yerleştirme yapmaya çalışıyorum ama olmuyo bir türlü... hakkaten sıyırcam..

bu sorunun nasil cozumlenecegini aciklayan ornek ler iceren siteler.

Turkce olarak ,
iyinet.com forum webmaster kaynaklari da bu konuya deginilmisti ve sorunun cozumune iliskin anlatim vardi.

ornek olarak ie de soyle bir hesaplama var
diyelim bir sol kolon yapacaksiniz bu kolona width degeri 200px olucak ve bu 200px icinde 10px soldan bosluk vereceksiniz ve 1px de tum kolona border vereceksiniz.

ie bunu hepsi icinde hesapliyor yani siz gidip
width: 200px;
padding-left: 10px;
border: 1px solid #ccc;

dediginizde sizin kolon toplam 200px olur yaniistediginiz gibi.

fakat ff de durum farkli hesaplarken hepsini ayri hesapliyor yani degerleri verirken width degeri 200px vemistik bu degerden padding ve border degerlerini cikaracagiz.

ff icin
width: 188px;
padding-left: 10px;
border: 1px solid #ccc;

burda border 1px sag ve 1px sol oldugu icin 2px olarak hesapladik.

sonuc olarak bunu ben iki tarayicida ayni gorunsun istedigimde su sekilde yaziyorum ve cozuluyor;

width: 188px !important;
width: 200px;
padding-left: 10px;
border: 1px solid #ccc;

bu sekilde sorunu gideriyorum ff icin width degerine !important tanimiliyorum .

Bir diger cozumde ff icin

w/idth: 188px;
width: 200px;
padding-left: 10px;
border: 1px solid #ccc;

burdada w/idth bu sekilde yaziliyor Smile

Dedigim gibi bunlari anlatan guzel siteler var hem ingilizce hemde turkce google da aratirsaniz bulabilirsiniz.

box model hack + css

box hack + css

olarak aratirsaniz daha kolay bulunur.

Box Model Hack
Alternate Box Model Hacks
centricle : CSS test - Simplified Box Model Hack
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
A List Apart: Articles: From Table Hacks to CSS Layout: A Web Designer’s Journey
“ú–{Œê–ó:Box Model Hack - CSS Dencitie

[BrUnO]

Birde şu linke bakın, çok faydalı olacaktır

Kutucuk Modeli - ALTI ÜSTÜ TASARIM – Mehmet Doğan