• W3C yeni CSS validator’un unu Aralık ortalarında duyurdu Fuji kod adlı bu doğrulayıcıya bir göz atın linki
• Türkiye’nin ilk sanal bilişim dergisi yayında link
• Bilgisayarla ve web ile uğraşanların en büyük baş belalarında biridir karakter encoding sorunu. Karakter encoding ile ilgili bir makale link
• javascript ve CSS ile resimlere gölge eklemek için Dynamic Drive sitesinden hazır kod link
• CSS ile sayfa planlaması yapmak için hazırlanmış hazır planlar ve şablonların bir listesini link
• Bir genelleme yapmak belki yanlış olur ancak bir çok site zemin rengi olarak beyaz rengi kullanır. Bu cümleden sonra size siyah ağırlıklı güzel sitelerin listesini verelim Link
• Özel karakterlerin Alt değeri ile karşılıklarının sunulduğu bir site favorilerinize eklemeniz tavsiye edilir. Link
• Firefox’un yeni nesi sürümü Firefox 3 Alfa 1 sürümü çıktı bir çok yeni özellikleri ile test etmek isteyenleri bekliyor. Link
• 2006′nın en çok tutulan 20 alan adı Link
• Yakında çıkacak olan Windows Vista ile birlikte gelecek olan ISS 7 üzerine bir araştırma Link
• Hamdi Yaman’dan Web2.0 ile yükselişe geçen etiketler(tag) hakkında makale Link

#icerikAlani {
    margin: 10px;
    border: 1px solid gray;
}
#icerikAlani #menu {
    float: right;
    width: 150px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-left: 5px;
}

İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek için float:right, genişliğini belirlemek için width:150px, sol ve alt kenarlıklarını belirlemek için border-left ve border-bottom(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık ataması yapmadık) ve içerik metini ile arasında boşluk bırakmak için margin-left atamlarını yapıyoruz.

<div id="icerikAlani">
    <div id="menu">
    <ul>
        <li><a href="anasayfa.html">Ana Sayfa </a></li>
        <li><a href="haberler.html">Haberler</a></li>
        <li><a href="iletisim.html">İletişim</a></li>
    </ul>
    </div>
    <h1>Lorem Ipsum Dolar </h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  . . .
</div>

Örnek sayfayı görmek için tıklayınız.

Clear özelliği ile float uygulanmış element’den sonraki elementlere float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elementin yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu element float uygulanmış elementin altında konumlanacaktır.

float

Yapısı : float: <deger>
Aldığı Değerler : left | right | none | inherit
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Float ilk olarak resimleri konumlandırmak için kullanılmıştır. Resimlerin metinlere göre konumunu belirlemek için HTML 1.0 ile birlikte align özelliği kullanıldı. Böylelikle resimler metinlere göre sola veya sağa konumlandırması imkanı sağlanmış oldu. Bu kullanım float ile benzerdir. Resimleri konumlandırmak için kullanılan bu yöntem daha sonra CSS’in olaya el atması ile tüm elementler için kullanıla geldi. Ayrıca float özelliği çoklu kolon oluşturmak için de kullanılır.

img {
	float:left;
    margin:0 4px 4px 0;
}

float:left ataması yapılan resim sola dayanacak ve metin bu resmin etrafını saracaktır.

<img src="resim.gif" width="150" height=150 alt="resim bilgisi" />
<p>... paragraf metni ... </p>

Bir elemente float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya diğer float kutusunun dış kenarının sağına veya soluna kaydırılabilir. Float uygulanan kutu, dökümanın normal akışının dışına çıkacaktır. Dökümandaki normal kutular float elementi burda yokmuş gibi normal akışına devam edeceklerdir.

Aşağıdaki şekilde görüldüğü gibi başlangıçta normal akış içinde bulunan 1.kutu float:right özelliğ ile sağ tarafa kaymış ve normal akıştaki elementlerin akışı 1.kutu yokmuş gibi devam etmiştir.

Aşağıdaki şekilde float:left tanımlaması yapılarak 1.kutu kapsayıcı kutunun en soluna dayanmıştır. Diğer iki kutu ise normal akışına devam etmektedir.

p {
	float:left;
    width:200px;
    margin:0;
}
img {
    float:left;
    margin:0 4px 4px 0;
}

Burada her iki elemente de float uygulanarak metnin resmi sarmasına son verilmiştir. Bu çoklu kolon oluşturma tekniğinin basit bir örneğidir. Float uygulanan her element satır boyunca yan yana dizilecektir.

Eğer kapsayıcı kutu genişliği her üçünün sığacağı kadar değil ise sondaki kutu kendiliğinden aşağı kayacaktır. Eğer kutular farklı yükseklikte ise yükseliği düşük olan kutudan sonra gelen kutu bunun altında devam edecektir. Bu durumu düzeltmek için clear özelliği kullanılır bunu aşığda göreceğiz.

clear

Yapısı : clear: <deger>
Aldığı Değerler : none | left | right | both
Başlangıç değeri: tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Float ile sık sık kullanılan diğer özellik clear’dir. Float elementinin etkisinden kurtulmak için clear özelliğini kullanırız. Float uygulanmış kutu sonra gelen elementleri etkiler bu etkiden kurtulmak için clear özelliği kullanılır.

clear özelliğinin kullanımına örnek verecek olursak. Eğer float uygulanmış element’ten sonraki elementin içeriği float uygulanmış kutunun yüksekliğinden küçük ise bir sonraki element de bu float uygulamasından etkilenecektir. Biz bu etkiyi kaldırmak için clear özelliğini kullanırız. Clear özelliği üst kutu ile araya gerekli mesafeyi koyacaktır, bir bakıma üst kutu ile araya üst margin değeri ataması yapmaktır.