Arapça Site Kodlamak ve direction:rtl özelliği

19 Oca

Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.

LiveGO‘ya zaman zaman dil desteği ekliyoruz. Son olarak Almanca ve Arapça dil desteğini ekledik. Almanca ve diğer latin alfabesi ile yazılan dillerde bazı ufak tefek sığmama sorunları dışında bir sorun yaşamadık, ancak Arapça dil desteğini vermeye karar verdiğimiz ve uygulamaya geçtiğimizde bazı sorunlarla karşılaştık. Bu sorunlar dilin latin alfabesi olmaması ve soldan sağa değil sağdan sola doğru akmasından kaynaklanıyor. Benzer yapıdaki diğer dillerde de aynı sorunlar yaşanabilir.

direction özelliği

Bu özellik uygulana eleman içindeki akışın yönünü belirler.

Yapısı : direction: <deger>
Aldığı Değerler : ltr | rtl | inherit
Başlangıç değeri: ltr
Kalıtsallık: Var

Aldığı değerler

  • ltr : Soldan sağa (left to right)
  • rtl: Sağdan sola(right to left)

Yazı akışının soldan sağa doğru değilde sağdan sola doğru olmasını css’in bu özelliği ile sağlayabiliyoruz. 

body{
	direction:rtl
}

body elemanına vererek tüm siteyi sağdan sola doğru akmasını sağlayabildiğimiz gibi, sadece bir eleman ve içeriğinide sağdan sola doğru akmasını sağlayabiliyoruz. 

div#deneme{
	direction:rtl
}
Browser Uyumu:
Internet Explorer 5.5+
FF 1+
Chrome2+
Safari1.3+
Opera 9.2+
W3C’s CSS Level 2+
CSS Profile 2.0

Biz LiveGOfda tüm html’in sağdan sola akmasını sağlayacak şekilde kodlamadık. Belli alanlarda sağdan sola akmasını sağladık geri kalan yerler, normaldeki gibi soldan sağa oldu.

Ben bizim siteyi kodlarken bazı makaleler okudum ve uygulamada bazı sorunlar yaşadım ve çözümlerini buldum. Bulduğum kadarı ile buraya tecrübelerimi aktarmak istedim.

Ayrıca yine bu konu ile ilgili unicode-bidi özelliğide mevcut ancak kafanızı karıştırmamak için bu özelliğe fazla değinmeyeceğim.

İpuçları

  • Karakter seti olarak utf-8 seçmeliyiz.
  • Metinleri değiştirirken resimlerdeki yazıları değiştirmeyi unutmamalıyız.
  • Akışı sağdan sola olarak değiştirdiğimizde float:left ve float:right kabullerimiz tam tersi oluyor. float:left’leri float:right; float:right’larıda float:left olarak değiştirmeliyiz.
  • Tüm dokümanın sağdan sola olması için body elementine direction:rtl değerini tanımlamamız yeterli.
  • Metinlerin hizalaması için kullandığınız değerleri tam tersi olarak değiştirmeliyiz. text-align:left ve text-align:right değerlerini tam tersi olarak değiştirmeliyiz.
  • Mesafe değerlerinide tersine çevirmeliyiz. padding, margin değerleri mesela
  • Yazı tipi boyutlarını arapça sitede biraz daha büyük seçmemiz daha iyi olacaktır.
  • Bir metni Phoshop’a taşıdığımızda ters çeviriyor ve bozuyor, bu durumu düzeltmek için http://www.adobe.com/support/downloads/thankyou.jsp?ftpID=4107&fileID=3813 adresindeki şablondan yardım almamız gerekiyor. Faik‘e teşekkürler bu link için

Farklı diller için site yapmaktan çok farklı farklı Arapça, Farsça, İbranice gibi akışı sağdan sola olan ve latin alfabesi dışındaki diller için site yapmak çok farklı. Kafanızdaki kabulleri tersine çeviren bu durum sizi biraz zorlasada farklı bir yapı ile uğraşmak zevkli oluyor.

Ben yukarıda karşılaştığım sorunları ve bulabildiğim cevapları sıralamaya çalıştım, umarım sizede lazım olduğunda işinize yarar.

Kaynaklar

6 yorum

overflow:auto içinde %100 genişlikte tablo kullanımında ie7’de yatay kaydırma çubuğu sorunu

13 Oca

Yazı Fatih HAYRİOĞLU tarafından CSS, XHTML kategorisine eklendi.

Başlığı açıklayıcı yazayım diye uzattım, yinede tam açıklamıyor sorunu. Tam metin şöyle olmalı “overflow:auto atanan eleman içinde %100 genişlikli tablo kullanımı ve bu tablonun ie7’de meydana getirdiği fazladan yatay kaydırma çubuğu sorunu ” Bu tanımı daha iyi yaparım deyipte başlık öneren varsa başlığı değiştirebilirim.

Hayatımız İnternet Explorer ile uğraşmak ile geçiyor. Allah bizi gerçek hayatımızda para sıkıntısı ile, aile sorunları vb.sorunlar ile sınarken; sanal alemde de İnternet Explorer ile sınıyor galiba:D Ne yapalım başa gelen çekilir diyeceğiz ve çözüm arayıp düzeltmeye çalışacağız.

Bir örnek yapalım.

HTML Kodu(Tabloya verilen border ve bordercolor tanımları örneğe görsellik kazandırmak için eklenmiştir, sorun ile alakalı kodlar değildir.)

<div id="kapsul">
  <table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#0000FF">
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </td>
    <td>Mauris facilisis elementum ipsum nec semper. </td>
    <td>Vestibulum nec turpis at lectus pulvinar consequat nec in lectus. </td>
  </tr>
  <tr>
    <td>Aliquam sit amet est ac est eleifend. </td>
    <td>Vivamus imperdiet.</td>
    <td>Pellentesque sagittis ultrices laoreet.</td>
  </tr>
  <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
  </tr>
  <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
  </tr>
  </table>
</div>

CSS Kodu

#kapsul{ width:40%; height:150px; overflow:auto}

Örneği görmek için tıklayınız.

Üstte ie7 altta Firefox görüntüsünü görüyoruz.

Bu sorun ile belli bir yükseklikteki içeriği overflow:auto ile otomatik kaydırma çubuğu çıkarmak için oluşturduğumuz bir alan içinde eğer yüzde yüz genişlikte bir tablo var ise karşılaşıyoruz. Kaydırma çubuğu yok iken sorun yok, ancak içerik uzayınca normalde sadece dikeyde çıkması gereken kaydırma çubuğu yatayda da çıkıyor.

Çözüm;

Çözüm için kapsayıcı katman içine bir katman daha açıyoruz ve hem dışta overflow:auto verdiğimiz katmana, hemde yeni oluşturduğumuz katmana zoom:1 özelliği atıyoruz. 

<div id="kapsul">
  <div id="kapsulIci">
    <table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="#0000FF">
    <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </td>
    <td>Mauris facilisis elementum ipsum nec semper. </td>
    <td>Vestibulum nec turpis at lectus pulvinar consequat nec in lectus. </td>
    </tr>
    <tr>
    <td>Aliquam sit amet est ac est eleifend. </td>
    <td>Vivamus imperdiet.</td>
    <td>Pellentesque sagittis ultrices laoreet.</td>
    </tr>
    <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
    </tr>
    <tr>
    <td>In hac habitasse platea dictumst.</td>
    <td>Sed sed leo elit, eu ultricies metus.  </td>
    <td>Aenean massa nulla.</td>
    </tr>
    </table>
  </div>
</div>

CSS kodu

#kapsul{ width:40%; height:150px; zoom:1; overflow:auto;}
	#kapsulIci{zoom:1; }

Örneği görmek için tıklayınız.

Ayrıca yukarıdaki çözüm ie6 bazen sorun çıkarıyor, bu gibi durumlarda

<!--[if lt IE 7]><style> #kapsulIci { overflow: auto; } </style><![endif]-->

Eklememiz gerekiyor.

Hayatımızda(gerek gerçek, gerek sanal) sorunlar olacaktır. Sorunlardan kaçmamalıyız, üzerine gidip çözüm aramalıyız. Bir arayüz geliştiricinin kemale ermesi(Senior Front-End Developer) için sorunları ile baş etmesi şart. Çok mu hayat dersi verdim. Başınızı ağrıttı isem af ola.

Kalın sağlıcakla.

Kaynaklar

4 yorum

Jquery Geliştiricileri için Güzel Bir FireBug Eklentisi FireQuery

13 Oca

Yazı Fatih HAYRİOĞLU tarafından Javascript, jquery kategorisine eklendi.

Firefox’un eklentisi FireBug’ı bilmeyeniniz yoktur. FireBug öyle büyük bir eklenti ki onun üzerine kurulan birçok eklentiler var. Bu eklentide FireBug yeteneklerini geliştirmek için kullanılan bir eklenti.

Bu eklenti jQuery ile kod yazarken çok işimize yarayacak. Bu eklenti sayesinde FireBug’ın CSS yeteneklerine yakın bir çözümü jQuery üzerinde sağlayacağız. FireBug bize CSS açısından belirlediğimiz nesneye uygulanan css özelliklerini yakalama ve hangi css dosyasının hangi satırında olduğu gösterir. Benzer bir özelliği FireQuery bize sağlar.

Bu eklentide jQuery ile etkilediğimiz elemanlar hakkında benzer bir bilgi veriyor bize. Jquery ile etkilenen elemana hangi işlev ile etki yaptığımızı ve hangi fonksiyon ve kod ile etki ettiğimiz gösteriyor.

jQuery bulunmayan sayfalarda da jquery kütüphanesini ekliyor. Böylelikle her sitede FireBug özelliklerini jQuery yardımı ile kullanma imkanı sunuyor bize.

jQuery Data verileri Gösterir

Eklentiyi kurduktan sonra Firebug’ı açarız ve HTML sekmesine geliriz. Aşağıdaki bir pencere ile karşılaşırız.

jQuery data kullanarak web sitesine gömdüğümüz verileri gösterir bize. Bu durum dinamik olarak eklediğimiz jQuery verilerini kontrol ederken çok işimize yarar.

Bir Elemana Atanmış Fonksiyonları Gösterir

Test sayfasında h1 elemanına tanımlana aşağıdaki fonksiyon kodunu görüyoruz.

$('h1').bind('click', function() {
$(this).css('background-color', '#fee');
});

Bu tanımı FireBug HTML sekmesinde FireQuery yardımı ile aşağıdaki gibi görürüz.

Bir elemana tanımlanmış fonksiyonları bulmaya yarar. Süper bir özelliktir bu. Tanımlana fonksiyon konsolda yukarıdaki gibi görünür.

function() üzerine geldiğimizde bu elemena atama yapılan kodu ve satır numarasını gösterir. Bu bizi birçok yükten kurtaran süper bir özelliktir.

jQuery Olmayan Sitelere jQuery Ekleme Özelliği

Bir sitede jQuery kütüphanesi olmasa da bu eklenti etkin olduğu tarayıcılarda jQuery eklenmiş gibi olur. Bu sayede site üzerinde jQuery kolaylıklarını uygular ve sonuçlarını görebiliriz.

Bu sayede Konsolda jQuery kolaylıklarını kullanarak jquery eklenmemiş olsa da bu sitede jQuery varmış gibi rahat kod yazabiliriz.

Bu eklentiyi bana gösteren Orhan Ekici’ye ve ona gösteren Volkan Özçelik’e teşekkürler.

FireBug büyüksün.

Kaynaklar

2 yorum

CSS İpucu 29: CSS ile Önden Resim Yükleme Teknikleri

6 Oca

Yazı Fatih HAYRİOĞLU tarafından CSS kategorisine eklendi.

:hover display:none ile gizlenmiş öğelere atanmış ardaalan resimlerini tarayıcı yüklemiyor. Bu durum :hover haline geldiğimizde resim yüklenmeye başlar ve görüntü sonra gelir ve kötü bir görüntü oluşturur. Bu sorunu çözmek için css sprite tekniğini kullanırız. Benzer bir sorun ajax ile çalışan bir yapıda sayfa ilk yüklendiğinde yüklenmemiş alanlarda tanımlı ardalan resimleri içinde geçerlidir. Bu durumda ise resimleri ön yükleme yapmak önemlidir.

Daha önceki makalemizde bir iki yöntem anlatmıştık. http://www.fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/

Şimdi daha basit bir yöntemi daha bilgi dağarcığımıza ekleyelim.

Ajax ile sonradan yüklenen elemanlarımızın ardalanına atadığımız resimleri önceden yüklemek için mevcut ardalan atanmamış bir elemana bu ardalan resmini tanımlarız ve konumunuda sayfa dışına vererek(-9999px) görünmez yaparız. Böylelikle resim yüklenmiş olur ve sonradan yüklenen alanlar açıldığında görüntü problemi yaşamamış oluruz.

<div class="resimYukle"></div>

CSS kodumuzda 

.resimYukle{ background:url(/images/bg.gif) -9999px -9999px no-repeat}

Bu durum için fazladan bir div açıp onun ardalanına bu resmi atayabiliridk ama eğer sayfa içinde ardalan tanımı olmayan bir eleman varsa bunu tanımlayarak fazladan bir divden kurtulmuş oluruz. Bir not bu kodu css kodumuzun sonuna eklememiz daha mantıklıdır. 

.baskaBirEleman{ background:url(/images/bg.gif) -9999px -9999px no-repeat}

Benzer bir kodu :after seçicisi ve content özelliği ile de yapabiliriz. 

body:after {content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) url(img05.png)}

Bu kodu ie7 ve ie6 desteklemiyor maalesef.

Ayrıca CSS3 ile bir elemana birden fazla background tanımıda yapabiliyoruz bu özellik yardımı ile de yapabiliriz. Tabi tüm tarayıcılar desteklemediği için beklemek gerekiyor.

Kaynaklar

6 yorum

Bir Projenin Bana Kazandırdıkları (LiveGO.com)

27 Ara

Yazı Fatih HAYRİOĞLU tarafından CSS, Haberler kategorisine eklendi.

Daha önce çalıştığım ajanslarda yaptığım işlerin bu günlüğü oluşturmamda bir yardımı oldu. Her projede bir şeyler öğrendim ve öğrendiklerimi bu günlük ile sizlere aktarmaya çalıştım. Tüm ayrıntıları olmasada aklımda kalanları sizlere aktarmaya çalıştım ve aktarmaya da devam edeceğim, Allah bize imkan verdikçe.

Bir çoğunuz biliyordur ama ben bilmeyenler için hatırlatayım yaklaşık 9 aydır öncesinde messengerfx.com ve şimdiki adı ile www.livego.com’da çalışmaktayım. Bu proje sürecinde bir çok şey öğrendim ve öğrenmeyede devam etmeyede devam ediyorum. Bu proje dünya çapında olması ve farklı yapısı ile diğer projelerde öğrendiklerimden çok fazlasını bana öğretti. Ajansta çalışırken bir çok proje ile uğraşıyordum burada 9 aydır bir proje ile uğraşıyorum, ancak şöyle bir şey var ki ajansta 2 senede öğrenebileceğim(bazı bilgileri ajansta öğrenme ihtimalide yok) bilgiyi burada 9 ayda öğrendim diyebilirim.

Arayüz geliştiricileri olarak devamlı kendimizi geliştirmek durumundayız bu sadece bizim çabamızla olacak bir şey değil, kendimiz geliştirmek için bize bu olanaklarında sağlanması lazım. Ajanslar bu bakımda çok önemli bir kilometre taşıdır, neredeyse her ay 1-2 proje elinize geçer ve 2-3 ya içinde bitirmeniz istenir. Bu bize hem öğrenme fırsatı verir ve hemde kendimiz geliştirme imkanı verir. Ayrıca benzer işleri yapsakta aynı işleri yapa yapa bir bakıma elimizi hızlandırmış oluruz. Bu nedenle burada naçizane bir tavsiyem var eğer bu meslekte bir yerlere gelebilmek ve bir şeyler öğrenmek istiyorsanız en az çalışma hayatınızın belli bir bölümünü belli bir seviyenin üstündeki ajanslarda geçirmeyi planlayın ve bunun için uğraşın. Niye belli bir seviyenin üstünde diyorum, çünkü kendinizi geliştirmenizde sadece ajansların değil çalıştığınız şirketlerinde çok büyük katkısı vardır. Mesela çatladıkapıspor’un sitesini yapmak ile, büyük bir bankanın sitesini yapmak arasında dağlar kadar fark vardır. Müşterini büyük olması isteklerin büyük olmasıdır ve sizin portföyünüz içinde büyük bir kazanım olacaktır.

Gelgelim benim LiveGO.com ile yaşadıklarıma, baştada dediğim gibi farklı ve geniş çaplı bir olması LiveGO.com’un bana çok şey öğretti ve öğretmeyede devam ediyor. Öğrendiklerimin belli bir kısmını sizlere aktardım ve aktaracağım yazılarımda var. Aktardıklarımın listesi;(Bir çoğunda örnekleri farklı yerden vermek durumunda idim. Çünkü proje daha yayında değildi. Hem örnekleri daha basit vermek anlaşılırlığı arttırıyor)

Tabi daha yayınlama imkanı bulamadıklarımda var; zamanım olursa aşağıdaki konularıda yazmaya çalışacağım.

  • Web Sitelerimizi iPad’e Uyarlamak
  • CSS ile iphone, ipad, desktop ve iphone4 ayrımını sağlamak
  • FireBug Javascript Sekmesine Göz atalım
  • CSS Sprite Tekniği
  • Aksak Kolon ve Çözümleri
  • Input Prompt
  • Livego’yu kodlamak 1 – 2 – 3 – 4 – 5

ve de daha yazacağım belki 10’larca makale daha. Başta dediğim gibi bende öğreniyorum sizlerle paylaşıyorum hepimiz öğreniyoruz.

Bu projede öğrendiklerim bu kadarmı, değil tabi daha fazlası var ama benim not tuttuklarım bu kadarı.

Tanıdığım ve bildiğim bir çok arkadaşım var bu sektörde çalışan her biri yaptıkları projelerden 3-5 bişey akatrsalar ne güzel olur. Memleketteki bilgi eksikliği giderilmiş olur. Lütfen bunu bir ukalalık olarak algılamayın, amacım belki Türkçe içeriğin çoğalması için bir çağrı. Tanımıyorum ve biliyorum gerçekten çok iyi bilgiye sahip insanlar var Türkiye’de umarım onlarda bilgilerini bizlerle paylaşırlar.

12 yorum

Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu

1 Ara

Yazı Fatih HAYRİOĞLU tarafından CSS, HTML5 kategorisine eklendi.

Ben bu siteyi açtığımdan beri CSS tabanlı yani div ile kodlamanın önemini ve avantajını anlatmaya çalışıyorum. Bu geçiş o kadar kolay olmadı ve hala Türkiye’de birçok site tablo alt yapını kullanıyor. Bunda standartların bu yönde bir telkini olmamasının önemi çoktur. Uzun süredir yazmayı düşündüğüm bu makaleyi yazmak bu güne nasipmiş.

HTML5 bizim div ile oluşturduğumuz yapı yerine kendi yapısal etiketleri yerleştirdi ve bu hareketli ile tablolu yapı ile site yapısına son darbeyi indirdi.

Alışkanlıkları kolay bırakamayan insanlar hala tablo ile kodlamaya devam ediyor. Ben çalışma hayatımın belli bir bölümün tablolu yapı ile kodlama yaparak geçirdim, daha sonra div ile kodlamaya başladım. Her ikisininde kolaylıklarını ve zorluklarını gördüm. Div ile kodlamanın tek dezavantajı dikeyde ortalama diyebilirim. Onun dışında tablolu yapıya göre avantajlıdır. Aşağıda genel başlıklar ile div’li yapının tablolu yapıya olan avantajlarından bahsedeceğim.

  • Daha hızlı sayfa yükleme zamanları
    Tabloların yapısından kaynaklanan fazla kod ve kod karmaşası yazılan kodun boyutunu arttırır buda sitenin daha yavaş yüklenmesine nedendir. Siteyi hızlandırmak için divli yapıda çeşitli yöntemler vardır. Örn:(CSS sprite tekniği)
  • Daha Düşük Barındırma ücretleri
    Daha az yüklenme zamanı barındırma ücretleri ve bant genişliğinin az kullanılması demektir ve bunun sonucu barındırma hizmeti aldığımız şirkete daha az ödeme yaparız. Küçük sitelerde değilde büyük çaplı sitelerde bu konu büyük önem kazanır.
  • Site düzenlemek daha daha kolay
    Tablolu yapının zorluklarından biri karmaşık yapısından dolayı düzenlemek çok zor olur. Div ile hazırlana sitelerde düzenleme yapmak daha kolay olur
  • Tekrar tasarlama daha ucuzdur
    Hazır sistemlerde gördüğümüz gibi(wordpress vb.) aynı yapı üzerine farklı tasarımların adapte edilmesi kolaydır.
  • Web sitesinde Görsel tutarlılık vardır
    Tek yerden(css) kontrol edilen div’li yapı tablolu yapıya göre daha tutarlı olur.
  • Daha iyi SEO için
    Daha az kod olması ve kodlama yapısının tablolu yapıya göre daha düzenli olması arama motorlarının indekslemesi için bir avantajdır. Ayrıca h1, h2, h3 … ve ilgili elementlerin yerinde kullanılması ile arama motorlarına daha uygun kodlama yapabiliriz. Ayrıca CSS ile birçok javascript ile yapabileceğimiz işleri yapabiliriz. Örneğin menüler gibi.
  • Hızlı web sitesi çapında güncellemeleri
    CSS ile kontrol edilen siteler daha hızlı kontrol edilir ve düzenlenir. Bu projelerin daha hızlı oluşması için bir avantajdır.
  • Takım çalışmalarına daha uygundur
    Web sitesi önyüzü ve arka planı ayrımı yapılır. Bu sayede daha organize site üretimi yapılabilir. Arayüz geliştirici ve programcı arasında daha kolay ve güzel iletişim sağlanır. İki ayrı koldan iş yürür.
  • Kullanılabilirlik ve Erişilebilirlik Artar
    Farklı tarayıcılara göre kod yazmak daha kolaydır. ie6 ile uğraşırken bu başlığı pek inandırıcı bulmayabilirsiniz, ancak eskiden tablolu yapı zamanımda Netscape ile ie5.5 ile az uğraşmazdık ve bir çok yerinde sabunlardık(es geçerdik)

    Div ile kodlama yapılırken yazılan kodlar css yardımı ile farklı araçlar için ayrı ayrı kodlanmadan sadece css kodu değiştirilerek elde edilebilir. Mesela yazıcıdan çıktı almak için print medya tipi kullanılan css yorumlanır, benzer şekilde mobil araçlar için handle medya tipli css dosyası kullanır. Şimdi iPone, iPad içinde benzer ayrımı yapabiliyoruz.

  • Daha karmaşık düzenler ve tasarımlar
    Tablolar ile oluşturulan karmaşık yapılı siteler bazen içinden çıkılmaz haller alabiliyordu, ancak div ile kodlama yaparken birçok yapı kolay bir şekilde oluşturulabiliyor.
  • Boş GIF kullanımı
    Tablolu kodlamada düzeni sağlamak için kullandığımız 1×1 lik bir saydam gif hazırlanır ve tablo düzeni bu gifler yardımı ile sağlanır. Div ile kodlamada böyle bir ihtiyaca gerek yoktur. Bu fazla kod ve yükten bizi kurtarır.
  • Geleceğe dönük bir yapıdır
    HTML5 ile birlikte gelen yeni etiketler ve HTML5’in yapısı div ile kodlamanın devamı niteliğindedir. Daha önce yazdığım HTML5’in yapısal elemanları adlı makaleye göz atın.

Sonuç olarak şunu söyleyebilirim ki, 2002’den beri div ile kodlama yapıyorum ilk başlarda çok zorlanıyordum, hatta ilk projemde(koc.net) yarı div yarı tablolu bir yapı kurdum zorluklarında dolayı. Ama şimdi daha fazla kaynak, örnek mevcut, birçok yöntem teknik ve araç  ile div’li yapıda kodlama yapmak artık daha kolay.

Hala tablo ile kodlama yapanlara önerim bir sonraki projenizi muhakkak div ile yapın ve ne kadar zorlansanız da tabloya geri dönmeyin, yani gemileri yakın.

HTML5’in filizlenmeye başladığı bir dönemde bu konuya dikkat çekmek istedim.

Kalın sağlıcakla

Kaynaklar

19 yorum

Sayfa 8 - 101« İlk...678910...203040...Son »

Son yazılar

Kategoriler


Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.