Bugün güzel bir gün, Fenomen Blogger Projesinde 10 finalisti arasında yer aldığımı öğrendim, birincinin açıklanacağı 3 Kasım 2008, saat 15:00′ü heyecan ile bekliyorum.

Bu Videoda Ne Var?

Arkadaşlar Web Deneyimlerinin, XHTML & CSS kodlarını yeniden geliştirdim. Ve geliştirdiğim kodları, ismini türkçeye çırılçıplak bir WordPress teması olarak çevirebileceğimiz, Elliot Jay Stocks‘un geliştirdiği Starkers adlı temaya entegre ediyorum.

İlk videoda header,index,sidebar,footer ve functions adlı php dosyalarına kodlarımı entegre ediyorum.

Gerekli Dosyalar: Geliştirdiğim XHTML CSS Kodları | Starkers adlı WordPress Teması

Video Bağlantısı

• Hemen İzle (49 dakika) (134 MB)
• Bilgisayarına İndir (101 MB)

Bir Sonraki Videoda Ne Olacak?

Bir sonraki videoda single, page, 404, search ve archieve adlı php dosyalarına kodlarımı entegre edeceğim.

Tekrar arayı bu kadar açtığım için özürdiliyorum ve bir sonraki videonun hazırlıklarına başlıyorum. Unutmayın düşünceleriniz, sorularınız ve uyarılarınız çok önemli.

Aşağıdaki videoda sizlere resim etiketi kullanarak, bir resmi sayfamıza çağırırken, resmin genişliğini ve yüksekliğini belirtmemizin önemini göstermeye çalıştım.

Video Bağlantısı

• Hemen İzle (3 dakika) (7 MB)
• AVI olarak bilgisayarınıza indirin (31 MB)

Bu arada arkadaşlar videoda söylemeyi unuttum ama videodaki gibi bir çok resme aynı genişliği ve yüksekliği verdiğiniz durumlarda, direk CSS’den de tanımlamalarınızı yapabilirsiniz.

Bir sonraki paylaşımımda görüşmek üzere, kendinize çok iyi bakın.

Yanlış Kullanım

Doğrusu Şu Şekilde

Arkadaşlar p etiketi zaten paragrafları tanımlamamız için var ve dolayısı ile bu paragrafların hepsini paragraf olduklarından dolayı p etiketi ile kodlamamız en doğrusu.

Peki <br> Etiketi Ne Zaman Kullanmalı?

Arkadaşlar br etiketini örneğin aşağıdaki resimdeki gibi bir şiiri ya da şarkı sözünü kodlarken kullanabiliriz.

Bir şirketin telefon ve faks bilgilerini kodlarken de kullanabiliriz.

Hala Web Deneyimleri RSS Yayınına Üye Değilmisiniz?

Arkadaşlar blogun RSS yayınını kullanarak, yeni paylaşımlarımdan yayınlanır yayınlanmaz haberdar olabilirsiniz ya da Web Deneyimlerini ziyaret etmeden masa üstü ya da web tabanlı RSS okuyucuları rahatlığı ile paylaşımlarımı görüntülüyebilirsiniz.

Twitter ve FriendFeed yayınlarımı takip etmekde sizler için bir seçenek.

Bir sonraki paylaşımımda görüşmek üzere!

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.

XHTML Kısmından Bahsetmiyorum

Başlık ve paragraf kendini belli ediyor zaten, arkadaşlarınla paylaş, düşüncelerini paylaş ve
favorilerine ekle bağlantıları için kullandığım etiketleri de aşağıdaki resimde belirttim.

CSS Kısmına Gelelim

İzin verirseniz sorumu güncelleyim, üç bağlantıyı kutunun köşelerine almak için CSS’in hangi özelliklerini kullanırdınız?

Float Özelliği?

Float özelliğini kullanabilirim ama aşağıdaki resimde görüldüğü gibi bağlantılar div‘deki padding değerinden etkilenecekleri için köşelere yapışık olmazlardı.

Tamam belki bir takım ekstra çözümler üreterek float kullanabiliriz ama emin olun bunlara hiç gerek yok. Ayrıca aşağıda bulunan resimdeki gibi kutuların yüksekliğinin sabit olduğu bir durum düşünürsek, aşağıdaki resimde görüldüğü gibi bu bağlantılar yazının kısa olduğu durumlarda, alt sınırdan daha uzak, yazının uzun olduğu durumlarda ise alt sınıra daha yakın olacaklardır.

Çözüm: Position Relative ve Position Absolute

CSS’in position özellikleri genelde çok kullanılan özellikler değil ve bir şekilde gizemli geliyor yeni başlayan arkadaşlara ya da bir şekilde kavranamıyorlar. Ama inanın bana çok basitler. Ve bende bu tip örnekli paylaşımlar ile bu konuda sizleri aydınlatmayı planlıyorum.

position: absolute ile birlikte top, bottom, left ve right özelliklerini kullanarak herhangi bir öğeyi sayfanın istediğimiz yerine yerleştirebiliyoruz.

Zaten Absolute kelimesinin türkçe karşılığıda kesin ve net anlamlarına geliyor. Relative kelimesi ise bağlı ya da ilişkili anlamına geliyor.

Öyleyse ben position:absolute değerini kullanarak istediğim öğreyi istediğim yere yerleştirebiliyorsam bu özelliği kutunun içindeki bağlantılar içinde kullanabilirim.

Ama işte burada bir püf noktası var! Belki siz de daha önce absolute değerini kullanarak yapmaya çalıştınız ama olmadı.

Aslında tüm mesele, resimde gördüğünüz gibi, position: absolute değerine sahip bağlantıları kapsayan, div etiketinede position: relative değerini vererek bağlantılar ile div‘i ilişkilendirmek.

Yani diğer bir deyişle bağlantıların position: absolute ve top, left,bottom, right değerleri için sayfa genelini değilde içinde bulundukları div‘i baz almalarını sağlıyoruz.

Sizde denemeler yapmak için, bu paylaşımda kullandığım örneği bu bağlantıyı kullanarak bilgisayarınıza indirebilirsiniz.

Özellikle denemenizi istediğim nokta div etiketinden position: relative değerini kaldırmanız.

Güncellendi (26 Eylül 2008)

Ayrıca bu konu ve z-index ile ilgili Salih S. Demir’in blogunda yaptığı paylaşımıda incelemenizi tavsiye ederim.

Umarım

Faydalı bir paylaşım olmuştur, sizlerde bu tekniğin kullanımlarına örnekler gösterebilirsiniz ya da düşüncelerinizi paylaşabilirsiniz, position konusuna genel olarak değinmektense bu şekilde birebir örnekler vererek değinmek istedim, daha faydalı olacağını düşündüm.

Web Deneyimleri’ni Takip Edin

Arkadaşlar önümüzdeki günlerde çok daha kaliteli paylaşımlar, etkinlikler ve organizasyonlar sizleri bekliyor, başlıkta da dediğim gibi Web Deneyimleri’ni takip etmeye devam edin.

Takip etmek içinde RSS, Twitter ya da FriendFeed yayınlarımı kullanabilirsiniz.

Bir sonraki paylaşımda görüşmek üzere, kendinize çok iyi bakın.