CSS Float Özelliğini Bilmeyen Anlamayan Kalmasın
Yazar: Volkan Görgülü | Yayın Tarihi:
08 Ekim 2008 | Yorumlar:
65 Yorum
Kategori: CSS & XHTML
Herkese merhaba, bu paylaşımımda sizlerle float kullanımı üzerine bildiklerimi paylaşmak istiyorum. Float kavramı, anlamlı HTML etiketleri kullanarak kodlarını geliştirmeye başlayan arkadaşların çözmekte zorlandığı bir konu. Ama inşallah bu paylaşım sonrası kimsenin, floatlar ile bir sorunu kalmayacak.
Float Ne Demek?
Hani arkadaşlar, kışın su birikintilerinde yüzen kağıtlar görürüz, işte o kağıtlar aslında su üzerinde float (yüzüyorlar) yapıyorlar. Ve biz bu kağıda üfleyerek veya elle müdahele ederek, sağa (float:right) ya da sola (float: left) doğru gitmesini sağlayabiliriz.
Web sayfalarınada bakacak olursak bir şekilde bir şeyler ya sağda ya da solda işte biz öğeleri sağa ya da sola atmak için CSS’in float özelliğini kullanıyoruz.
Float Konusunu Kavrayalım
Arkadaşlar direk gerçek hayatta karşılaştığımız durumlardan örnekler vererek bu konuyu anlatmaya çalışacağım.
Örnek 1
Aşağıda gördüğünüz, başlık, ana içerik, yan içerik ve altlık kısımlarından oluşan, çok sık rastladığımız bir sayfa tasarımı. Bu tasarıma 2 sütunlu ya da kolonlu sayfa düzeni deniliyor ve ben de Web Deneyimlerinde bu yapıyı kullanıyorum.
Başlık ve altlık kısımlarında bir sorun yok ama gördüğünüz gibi ana içerik sağa, yan içerik ise sola yaslı, işte böyle bir durumda float kullanmamız gerekiyor.
İsterseniz bu örneği oluşturan basit HTML yapısına bir göz atalım
<div id="ortalayici">
<div id="baslik"></div>
<div id="govde">
<div id="anaicerik"></div>
<div id="yanicerik"></div>
</div>
<div id="altlik"></div>
</div>CSS kodları ise şu şekilde
body {background-color:#000} #ortalayici {width:700px; margin:0 auto; background-color: #fff; padding:10px} #govde {margin: 10px 0;} #anaicerik {height:500px; width: 500px; float: left} #yanicerik {height:300px; width: 190px; float: right} #baslik, #anaicerik, #yanicerik, #altlik {background-color: #ccc} #baslik, #altlik {height:100px}
Dilerseniz yukarıdaki HTML ve CSS kodlarını içeren HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
Evet, arkadaşlar gördüğünüz gibi anaicerik ve yanicerik de float kullandık. İsterseniz şimdi, gelin sayfamızı çeşitli tarayıcılarda test edelim.
Bir Sorun Var
Aşağıdaki görüntüyü Firefox 3, Opera 9, Google Chrome Beta ve Safari 3(Win)’de alıyorum.
IE7 de ise şöyle bir görüntü alıyorum
IE6 da ise durum şu şekilde
IE ler hariç diğer tarayıcılarda ana konteyner yani #ortalayici kimliğine sahip div, float lu divlerin yüksekliklerini görmüyor ve onları kapsamıyor. Ayrıca IE dahil tüm tarayıcılarda #altlik bölümü floatlu divlerin altında kalıyor, halbuki onların bitiminde olmalı 
İşin Püf Noktası
Arkadaşlar işin püf noktası şu, eğer herhangi bir şekilde, herhangi bir yerde float kullanıyorsak, float’un bitimini tarayıcıya söylemeliyiz. Yani floatu temizlemeliyiz.
Float Temizleme Yöntemleri
Klasik Yöntem
CSS’in clear (temizlemek) adlı bir özelliği var. Bu özelliğe left, right, both tanımlamaları yapabiliyoruz. Mevcut durumumuzda ise her iki yöne float yaptığımız için clear:both tanımlaması gerekli bizim için.
O zaman CSS’imize aşağıdaki sınıfı ekleyelim.
.clearBoth {clear: both}
Bu noktadan sonra floatları temizlemek için yapmamız gereken tek şey, floatlu etiketlerin bitimine yeni bir div açıp o div’ede clearBoth sınıfını vermek.
Dilerseniz klasik yöntemin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
ClearFix Yöntemi
Bu ve bir sonraki yöntemin ilk yönteme nazaran en büyük artısı, HTML kodumuzda temizleme işlemi için herhangi bir ekstra koda ihtiyacımız olmaması.
Bu yöntemde, sadece, CSS’imizde tanımladığımız bir sınıfı floatlu etiketleri içeren, konteyner niteliğindeki etikete atıyoruz, hepsi bu 
Aşağıdaki sınıfı CSS imize ekleyelim
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
Ve sınıfımızı floatları kapsayan gövde id’li div’imize atayalım.
Dilerseniz clearfix yönteminin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
Overflow Yöntemi
Diğer ve clearfix yönteminden çok daha yeni bir yöntem ise floatları kapsayan etiketin overflow özelliğini kullanmak. CSS dosyamızda gövde id’sini aşağıdaki gibi değiştirelim.
#govde {margin: 10px 0; width: 100%; overflow: hidden}
Bu seferki kullandığımız kod bir önceki yöntemlere nazaran çok daha az, ayrıca gövde kimliğine sahip div’in sabit bir genişliği olsaydı sadece overflow: hidden kodunu ekleyecektik.
Dilerseniz overflow yönteminin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
Sonuç
Bu örneğimiz için bu üç yöntemden hangisini kullanmak en akıllıca? Bize en ucuza mal olan yöntem yani en az kod kullandığımız yöntem bariz bir şekilde overflow yöntemi.
Ama yeni başlayan arkadaşlar ya da floatun nerede yapıldığını HTML’inde görmek isteyen arkadaşlar içinde ilk yöntem çok iyi. Siz de düşüncelerinizi belirtmeyi lütfen es geçmeyin. Örneklerimize devam edelim.
Örnek 2
Şimdide isterseniz aşağıdaki yapıyı geliştirelim.
Bu yapıya ise 3 kolonlu yapı deniliyor ve gördüğünüz gibi ana içeriğin yanında 2 adet sütun var. Peki bu yapının kodlarını nasıl geliştiririz? Hangi bölüme nasıl float vermemiz gerekiyor?
Gelin bu yapı için geliştirdiğim HTML kodlarına bakalım
<div id="ortalayici">
<div id="baslik"></div>
<div id="govde">
<div id="anaicerik"></div>
<div id="yanicerik2"></div>
<div id="yanicerik1"></div>
</div>
<div id="altlik"></div>
</div>Resim ve kodları inceledikten sonra şunu söyleyebiliriz anaicerik sola, yanicerik ise sağa floatlu, ayrıca yaniceriğin içindeki yanicerik1 de sola ve yanicerik2 de sağa floatlu.
Bu duruma göre CSS’imizi geliştirelim.
body {background-color:#000} #ortalayici {width:700px; margin:0 auto; background-color: #fff; padding:10px} #govde {margin: 10px 0;} #anaicerik {height:500px; width: 400px; float: left} #yanicerik1 {height: 350px; width: 140px; float: right; margin-right:10px;} #yanicerik2 {height: 350px; width: 140px; float: right; } #baslik, #anaicerik, #altlik, #yanicerik1, #yanicerik2 {background-color: #ccc} #baslik, #altlik {height:100px}
Dilerseniz yukarıdaki HTML ve CSS kodlarını içeren HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
Floatlarımızı Temizleyelim Hadi
Arkadaşlar CSS kısmında ne eklenmesi gerektiğini artık biliyoruz, ya da bir önceki örneği rehber alabiliriz. Ben resimler ile HTML’imizde yapmamız gereken değişiklikleri göstereceğim.
Klasik Yöntem
Dilerseniz klasik yöntemin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
ClearFix Yöntemi
Dilerseniz clearfix yönteminin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
OverFlow Yöntemi
Overflow yönteminde ise CSS dosyamızdaki govde ve yanicerik id lerinin stillerini aşağıdaki şekilde değiştiriyoruz.
#govde {margin: 10px 0; overflow: hidden; width: 100%}
Dilerseniz overflow yönteminin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
Sonuç
Bu örnek için de düşüncelerim aynı Siz de lütfen düşüncelerinizi belirtin!
Örnek 3
Yeni örneğimizde ise yine 3 kolonlu bir yapı var, ama bu sefer ana icerigimiz ortada ve yan kolonlar ana içeriğimizin sağında ve solundalar.
Peki bu yapıda hangi kolona nasıl bir float uygulamalıyız?
İsterseniz HTML kodumuza bakalım
<div id="ortalayici">
<div id="baslik"></div>
<div id="govde">
<div id="yanicerik1"></div>
<div id="anaicerik"></div>
<div id="yanicerik2"></div>
</div>
<div id="altlik"></div>
</div>CSS kodumuz ise şu şekilde
body {background-color:#000} #ortalayici {width:700px; margin:0 auto; background-color: #fff; padding:10px} #govde {margin: 10px 0;} #yanicerik1 {width: 140px; float:left; height: 250px;} #anaicerik {height:400px; width: 400px; float:left; margin:0 10px;} #yanicerik2 {width: 140px; float:right; height: 250px;} #baslik, #anaicerik, #yanicerik1, #yanicerik2, #altlik {background-color: #ccc} #baslik, #altlik {height:100px}
Dilerseniz yukarıdaki kodların bulunduğu, HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
Floatlarımızı Temizliyelim
Klasik Yöntem
Dilerseniz klasik yöntemin yönteminin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
ClearFix Yöntemi
Dilerseniz clearfix yönteminin kullanıldığı HTML sayfasını görüntüleyebilir ya da bilgisayarınıza indirebilirsiniz.
OverFlow Yöntemi
Yine aynı şekilde CSS dosyamızda govde kimliğini aşağıdaki gibi değiştiriyoruz.
#govde {margin: 10px 0; overflow: hidden; width: 100%}
Sonuç
Bu örnek için de düşüncelerim ilk sonuçtaki düşüncelerim ile aynı.
Bakalım…
Floatlar hakkındaki bu ilk yazıda sayfa yapılarında floatları inceledik, bir sonraki yazıda ise aşağıdaki gibi daha küçük alanlarda nasıl floatu kullanacağımıza bakacağız. Hangi temizleme tekniğini kullanmak bu tip yapılarda daha doğru olacak ona bakacağız.
Başka bir paylaşımımı inceleyebilirsiniz
Düşüncelerinizi duymaya ihtiyacım var!
Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.
Yazıya Gelen Yorumlar
1
sinan
08 Ekim 2008´de söylemiş
Eline sağlık..
2
Karbonizma
08 Ekim 2008´de söylemiş
Dediğiniz gibi muazzam bir paylaşım olmuş. Sprite, Position: Relative dahil olmak üzere neyin nasıl yapılacağını Web Deneyimleri yani sizin sayenizde öğrendim hepside tam da ihtiyaç duyduğum zamanlara paylaşıma sunuldular. Teşekkür ediyorum. Buna benzer CSS’ye odaklanmış paylaşımlarınızı beklemeye devam edeceğim. İyi çalışmalar.
3
ismail eski
08 Ekim 2008´de söylemiş
Her zaman olduğu gibi nefis bir makale.
4
Pardus007
08 Ekim 2008´de söylemiş
Güzel bir paylaşım ve açık bir anlatım olmuş. Teşekkürler
5
Aykut Önen
08 Ekim 2008´de söylemiş
Öncelikle bu güzel makale için teşekkür edip hemen bir kaç ekleme yapmak istiyorum.
- Verdiğiniz tüm örnekler sadece float:left vererekte kullanılabilirdi.
- Float:right özelliğinin şu amaçla kullanılması daha mantıklıdır; Html kısmına divleri yazarken önce sağ kolonu yazarız (float:right özelliği verilerek), ardından içeriği yazarız (float:left vererek). Sebebine gelince, web sitenizin pda yada mobile tarayıcılarda açıldığında ilk önce menünün yüklenmesi ve görüntülenmesi açısından bu yöntem uygulanır.
- Örnek 2 ve 3 arasındaki tek farkın genişlikler olduğunu düşünürsek 3.örnek tekrar eden bir örnek gibi görünüyor.
6
Harun YAŞAR
08 Ekim 2008´de söylemiş
İşte efsane paylaşım geldi. Ellerine sağlık Volkan.
7
Hakan Özaslan
08 Ekim 2008´de söylemiş
Yaralı bir paylaşım teşekkürler.
Bu örnekleri toplu halde “Örneklerle CSS Dersleri | Volkan Görgülü” adıyla pdf olarak görmek isterdim doğrusu.
Başarılarınızın devamını dilerim.
8
Yakup GÖVLER
08 Ekim 2008´de söylemiş
Güzel bir paylaşım olmuş, teşekkürler. Görsel ağırlıklı olması da ayrıca tat katmış, devamını merakla bekliyoruz.
9
Simto Alev
08 Ekim 2008´de söylemiş
clear:both kullanmak işime geliyor. float’ı ana şablon dışında bir çok yerde kullanmam gerekiyor bir çok sefer. Her şeyi çorba etmeden aralara clear serpiştirmek hoş oluyor. Zaten tek bir gövdede gerekecekse style=”clear:both” yazmak daha az byte harcatacaktır.
Asıl sorun ise margin. 1. Örnek çok doğru ve güzel. (vaktiyle bunu yapabilmek için saatler harcamıştım.)
Ancak 2. ve 3. örnekteki margin işi bozuyor. (kahrolsun IE6!) Padding için geçici bir çözüm buldum bu hafta. Bir ara (sanırım Cuma günü, vakit bulursam bugün) blogumda yazacağım. Ancak iş margin oldu mu kitlenip kalıyorum…
@Aykun Önen
1. örnekte float left ve right kullanmak, margin gereksinimini ortadan kaldırmış. Böylece IE6 ile de daha dost bir site olmuş.
3. örnek ise marginleri farklı kullanmış Volkan. Ancak evet, 2. örnekteki gibi de uygulanabilirdi.
Fakat kabul etmek gerek ki bu tür bilgileri böyle detaylıca anlatan Türkçe kaynaklar yok. Volkan bunu 1-2 yıl önce yazmış olsaydı ben 2 sütunlu bir tasarım için bir kaç günümü kabusa çevirmeyecektim belki. Faydalı şeyler yazıyor Volkan…
10
Aykut Önen
08 Ekim 2008´de söylemiş
@Simto Alev cevabın için teşekkür ederim.
Margin ve/veya paddingde sorun yaşıyorsan “reset css” diye bir yöntem var, tarayıcılardaki yorum farklarını cssi hazırlamaya başlamadan önce yok ediyorsun. Ama bazı durumlarda ie6 yine ve inatla sorun çıkartabiliyor, buna bende katılıyorum. Bu tarz durumlardada Head tagının arasına IF IE ile başlayan tanımlamalar yazmak zorunda kalıyoruz.
Css konusunda bukadar detaylıca anlatan türkçe kaynaklar yok demişsin. fatihhayrioglu.com adresini incelemeni tavsiye ederim. Ayrıca google`da “css dersleri” diye aratıncada ilk sırada bu bahsettiğim siteye ulaşıcaksın. Bahsettiğim site bence css konusundaki en detaylı türkçe kaynaktır.
11
Oğuzhan Bugüş
08 Ekim 2008´de söylemiş
Sağolun, şu clearfixi öğrendiğim iyi oldu. WordPress captionlarını koyarken yazı kısa olursa bağlık dışarı taşıyordu. Bu sayede taşmasını engelledim.
12
Simto Alev
08 Ekim 2008´de söylemiş
@Aykut Ören
reset.css işime yaramadı mevcut sorun için. Hard reset yapıyorum. Bir çok problemi aşsam da margin’ler hala problem. Özellikle genişliğe sabir değerler verildiği için left ve right margin’ler. Fatih Hayrioğlu’nu biliyorum ve sitesini RSS ile takip ediyorum. Kitabını da bir kaç ay önce blog’umda tanıtmıştım. Volkan var, Fatih var, Fatih Turan da var. Var bir kaç kişi ama İngilizce olduğu kadarın yarısı kadar bile Türkçe kaynak yok. Hem ben CSS Property’lerini öğrenmek istemiyorum. float:left yapar, 2 divi koyarım yanyana. O da ne? 2. div aşağı kaymış! Ne yapacağım şimdi? İşte bu gibi olası sorunlar ve trick’lerinden bahseden Türkçe makale yazan adam pek yok. Yazanlar da blog yazarları. Genelde tamam kişisel, amatör proje olarak başlıyor.
13
ercani
08 Ekim 2008´de söylemiş
@simto dediğinde çok haklısın ne yazıkki türkçe içerik çok az.
O dediğin div kayması (tema kayması) hakkında burada kendimce bir yazı yazmıştım.
Umarım böyle paylaşımlarla türkçe içerik daha çok artar
14
Serdar Güngör
08 Ekim 2008´de söylemiş
Teşekkürler eline sağlık…
15
90alper90
08 Ekim 2008´de söylemiş
sağa (float:left) ya da sola (float: right)
Bir hata mı var yoksa ben mi yanlış anlıyorum ?
Bu arada yazı için teşekkürler, elinize sağlık.
16
Volkan Görgülü
08 Ekim 2008´de söylemiş
Arkadaşlar teşekkürler bir faydası dokunduysa ne mutlu bana
@90alper90, ben yanlış yazmışım, teşekkürler.
17
Furkan Emrehan Kılıç
08 Ekim 2008´de söylemiş
Oldukça yararlı bir yazı olmuş. Elinize sağlık
18
Cihan ÖNER
08 Ekim 2008´de söylemiş
Bu paylaşımları özlemiştik valla hocam eline sağlık
19
Salih S. DEMİR
08 Ekim 2008´de söylemiş
Paylaşım yine güzel. Bir sorun var ki o da benim ve clear olayını anlamadım
20
ali caner öner
08 Ekim 2008´de söylemiş
eline sağlık kardeşim
21
Başar Özcan
08 Ekim 2008´de söylemiş
Bayram boyunca beklediğimizin karşılığını verene muazzam bir paylaşım olmuş. Çok önemli ve div’lerin yapıtaşına değinmişsin. Paylaşım için teşekkürler. Devamını bekliyoruz.
22
Emir Savranoğulları
08 Ekim 2008´de söylemiş
Teşekkürler. Eksikliğini hissettiğim bir konuydu. Ben bloguma yazmayı düşünüyordum ama vakit bulamıyordum, zaten yazsam bu kadar güzel olamazdı
.
23
Deniz EKER
08 Ekim 2008´de söylemiş
Ellerine sağlık Volkan hocam gözünüz arkada kalmasın tüm paylaşımlarınızın mutlaka bir faydası oluyor
harikasınız bu işlevi öğrendiğim çok iyi oldu gerçekten,kolay gelsin.
24
Volkan Görgülü
08 Ekim 2008´de söylemiş
Arkadaşlar çok teşekkür ederim ilginiz ve desteğiniz için
@Salih S Demir, anlamadığınız nokta tam olarak neresi? Size nasıl daha yardımcı olabiliriz?
25
Burak Can
08 Ekim 2008´de söylemiş
Tebrikler hocam, çok karışık olmamasına karşın çoğu kişinin aklını karıştıran bir konuya açıklık getirmişsiniz.
bunu ben yazmayı geçirdim aklımdan, sonra rsslerimi kontrol ederken bi baktım sen yazmışsın 
Hani derler ya benden uzun yaşayacaksın, aynen öyle
İlk yöntem bana daha kulanışlı geliyor(belki zor anımda kendim keşfettiğim içindir). en azından sadece xhtml’e göz gezdirip “haa burda float kullanıp arkasından clear yapmışım diyebiliyorum.
Eline sağlık.
26
Eray Usta
09 Ekim 2008´de söylemiş
Volkan gerçekten arkadaşlarında dediği gibi muazzam bir paylaşım oldu
Benimde bi sorum olucak mesala yüksekliğe 100 verdiğimiz bir div in içinde başka bir div yerleştirdim. yüksekliğede 40 verdim. 30 px değerinde margin-top yada padding-top verdiğimizde firefox ta aşağıya doğru kayma oluyor. Yani dış çerçeveninde sanki padding veya margin değeri varmış gibi aşağıya kaydırıyor. Bunu nasıl çözebilirim. Son olarakda mesela 100 px yükseklik verdiğim div ie6 da başka firefoxta başka boyutta duruyor bunu nasıl çözebilirim. 
27
Ozan AKSAKBOGA
09 Ekim 2008´de söylemiş
Harika! harbidende muazzam bir paylasim olmus, tesekkürler.
28
Salih S. DEMİR
09 Ekim 2008´de söylemiş
Ben bu kapsayıcı divlere ne kadar doğru ne kadar yanlış bilmiyorum ama overflow:hidden veriyorum bu şekilde sayfa ne kadar uzarsa uzasın kapsıyor.
clear da anlamadığım noktalar vardı birini burada anladım. Peki clear: left ve clear: right ne için kullanılır?
29
Necat Bolpaça / anov
09 Ekim 2008´de söylemiş
float ile özellikle sayfanın boyutu değiştikçe yan yana listelemesini ona göre dinamik olarak değiştiren listelemeler yapmak mümkün.
Salih S.DEMİR : Aslında clear:left sola yanaşmayı, clear:right sağa yanaşmayı temizliyor ancak ben pratikte bir faydasının olmadığını düşünüyorum. Çünkü aynı anda iki float ın birden aktif olmasının imkanı yok. Yeni geçerli olan float eğer çocuk nesnenin içindeyse üsttekini iptal edecektir. Aynı anda iki float aktif olmadığına göre şu noktadan sonra birini iptal edeyim, diğeri aktif olsun artık demek ne kadar anlamlı?
Yanılıyor muyum Volkan?
Volkan : Benim için ikinci Fatih Hayrioğlu gibisin. Yalnız bir şu “paylaşım” sözüne ısınamadım gitti. :-.)
Bir de şu yazılara güzel bir fihrist düşünüyorum ayrıca özelden iletişime geçeceğim.
30
Volkan Görgülü
09 Ekim 2008´de söylemiş
@Burak Can, ilk yöntemin en büyük artısı “haa burda float kullanıp arkasından clear yapmışım” diyebilmek.
@Eray Usta, internette bir yerlere sayfanı yükleyebilirsen yardımcı olabilirim, bu şekilde anlatımlar ile olayı gözümde canlandıramıyorum.
@Salih S. Demir, @Necat Bolpaça, bir sonraki yazıda olacak örneklerde float:left veya right kullanacağız dolayısı ile de bunları clear:left veya right ile temizliyeceğiz. Bu şekilde kullanım yapabileceğimiz alanlarda var.
@Necat Bolpaça, paylaşım kelimesinin nesi kötü?
31
Önder Sürmeli
09 Ekim 2008´de söylemiş
Gerçekten güzel. Çok çektim zamanında bu float özelliğini iyi kullanamamaktan. Şimdi ise bu yazı ile daha etkili bir tasarım elde etmem daha kolay olacak.
32
Murat ÖZBAKAN
09 Ekim 2008´de söylemiş
Tebrik Ederim
33
Baturalp Torun
09 Ekim 2008´de söylemiş
tebrik ederim volkan, yine güzel bir yazı yazmışsın. paylaşmaya devam
34
Simto Alev
10 Ekim 2008´de söylemiş
Padding konusunda şöyle minik bir şey yazdım:
CSS Pading Problemi
35
Volkan Görgülü
10 Ekim 2008´de söylemiş
@Simto Alev, güzel bir konuya değinmişsin, teşekkürler paylaşım için.
36
Gökhan Çancılar
10 Ekim 2008´de söylemiş
çok yararlı bir yazı olmuş, devamını dilerim.
37
Tuğca Eker
10 Ekim 2008´de söylemiş
38
Cihan ÖNER
12 Ekim 2008´de söylemiş
Hocam son zamanlarda hızın kesildi
Performans düşüyor sanırım :p
39
Volkan Görgülü
12 Ekim 2008´de söylemiş
@Cihan Öner, bu aralar extra yoğunluklarım var, hepsi bu
40
Emre Erbakılı
13 Ekim 2008´de söylemiş
Yeni yeni videolarınızı ve yazılarınızı takip etmeye başladım harika paylaşımlar yapıyorsunuz .. Teşekkürler..
41
Nihat
13 Ekim 2008´de söylemiş
Eline sağlık.. Çok teşekkürler.
42
hasan
17 Ekim 2008´de söylemiş
tebrik ve teşekkürler..
43
ümran
21 Ekim 2008´de söylemiş
teşekkürler.. çok detaylı bir anlatım olmuş. elinize sağlık.. faydalı paylaşımınız için.
44
Ahmet Yaman
23 Kasım 2008´de söylemiş
Merhaba;
gerçekten çok başarılı bir anlatım, eline emeğine sağlık,
böyle makalaler yazmaya devam edin lütfen.
45
Murat
25 Kasım 2008´de söylemiş
Bugün sitenizi ilk ziyaretim. Gerçekten çok başarılısınız. bilgileri çok net ve açıklayıcı olarak sunuyorsunuz. video çekimleriniz ve ses kalitesi de harika. teşekkürler.
46
Kayahan KAHRIMAN
27 Kasım 2008´de söylemiş
Vallahi süper anlatım olmuş çok teşekkürler
47
pardus
27 Şubat 2009´de söylemiş
clearBoth olayı işime yaradı makaleyi her kim yazmış ise eline sağlık
48
Mehmet Gültekin
17 Nisan 2009´de söylemiş
clearfix çok işime yaradı. çok teşekkür ederim.
49
kemik
15 Mayıs 2009´de söylemiş
süper bende yeni başladım ve çok iyi bir anlatım olduğu için çok iyi anladım.paylaşım için teşekkürler.
50
okuyucu
16 Mayıs 2009´de söylemiş
Teşekkürler
51
Orhan
19 Mayıs 2009´de söylemiş
Öncelikle merhaba volkan abi çok güzel yararlı bilgiler paylaşıyorsun ve müthiş pozitif bir insansın.
Bende acemi bir css öğrencisi sayılırım.Sorum şu olucak:
#govde {margin: 10px 0; overflow: hidden; width: 100%} kısmında width: 100% ne için kullanıldı o ne işe yarıyor?
Çünkü 3 sütunlu uygulamada sadece overflow:hidden; kullanılmıştı.Anlamadığım için sordum şimdiden hayırlı tezkereler.
52
a_s_i
31 Mayıs 2009´de söylemiş
eline sağlık.süper bi anlatım şekli.teşekkürler
53
MUSA TALAYHAN
19 Haziran 2009´de söylemiş
Emeğine saygı duyuyorum Volkan. İnternet içeriğini zenginleştiren nadir insanlardan birisin. Genelde bizle tarafından internet içeriği sömürülür ama sen interneti zenginleştiriyorsun.
54
asil dağlı
07 Temmuz 2009´de söylemiş
Arkadaşım ne kadar tesekkur etsem azdir, gunlerdir ugrastigim browser sorunlarini sayende cozdum.allah razi olsun..
55
teşekkürüBorçBilir
12 Temmuz 2009´de söylemiş
Eline sağlık.O kadar web programlama bilmeme rağmen dizayn yapamam çok kötüydü.Artık onuda öğrendim.Artık divler korkulu rüyam değil
56
..k0L0
06 Aralık 2009´de söylemiş
çok qüzeL bi payLaşım oLmuş qerçekten çok işime yaradı.. çok teşekkürLer
57
isko
27 Aralık 2009´de söylemiş
Çok güzel örnekler, emeğinize sağlık.
bir sonraki dökümanı sabırsızlıkla bekliyorum.
Div lerle çalışmaya hala ısınamamış birisi olarak gayet başarılı ve anlaşılır bir döküman olmuş.
Herkeze kolay gelsin.
58
web tasarımı
29 Aralık 2009´de söylemiş
çok aydınlatıcı bir ders.. çok teşekkürler uğraşan ve emek verenlere.. paylaşmak güzel şey ya..
59
Soner Dogan
28 Ocak 2010´de söylemiş
Çok temiz bir anlatım.çok açık şekilte.yeni başlayan arkadaşlar için anlayabilecekleri guzel bi fırsat.
Elinize Saglık.
60
evden eve taşımacılık
07 Şubat 2010´de söylemiş
teşekkürler..
61
Leo
09 Mart 2010´de söylemiş
Çok teşekküler.:P ihtiyacım vardı bu bilgiye başarılarının devamını dilerim
62
pegasus
21 Haziran 2010´de söylemiş
Benim bi sorunum var. Float: left ile sola yasli vaziyette farkli büyüklüklerde resimleri yanyana siraliyorum diyelim ve her satirda yanyana 3 resim gözükmesini istiyorum. Fakat bazi satirlarda yanyana gelen iki resmin yaninda 3. resmin olmasi gereken yerde boyutlarindan dolayi 2 resim cikiyor.
Dolayisiyla bir satirda 3 resim cikiyor. Bunu nasil tek satirda bloklatabilirim???
Geri İzlemeler