Geçmişte, birçok web sitesi sayfaları düzenlemek için HTML tabloları kullanıyordu, çünkü bu yöntem eski Web tarayıcılarında sürekli olarak güvenilir sonuçlar üretiyordu. Bu, tabloların gerçekten sayfalar düzenlemek yerine sekmeli verileri göstermesi gerektiği için ideal bir çözüm değildi. Tabloları kullanmak ayrıca, yerleşimin sayfaya kodlanması anlamına geliyordu ve bu da siteyi daha fazla zaman alıcı hale getirme görevini üstleniyordu. Basamaklı Stil Sayfaları, tasarımcıların öğeleri sola veya sağa kaydırmasını sağlayan "yüzdürme" özelliğini sundu. Bu, sayfa üzerinde daha fazla kontrol sağlar ve site düzenini içerikten ayrı tutma avantajına sahiptir.

1.

Bir metin editörü veya HTML editörü açın ve yeni bir HTML belgesi oluşturun.

2.

Sayfa gövdesine aşağıdaki kodu ekleyin:

Sayfayı kaydedin ve Web tarayıcınızda açın. İkinci div'deki içeriğin, ilk div'deki içeriğin altında görüntülendiğini göreceksiniz.

3.

Aşağıdaki CSS kodunu HTML belgenizin bölümüne ekleyin:

Sayfayı kaydedin ve değişiklikleri görüntülemek için tarayıcınızda yenileyin. CSS kuralı, “myContainer” div içinde bulunan her iki div'yi hedefler. “Float” özelliği, tarayıcıya divleri sola kaydırmasını söyler - div'leri içeren div'in sağ kenarına kaydırmak için float değerini “sağ” olarak değiştirebilirsiniz. Divs, 300 piksel sabit genişliğe ayarlanmıştır ve mizanpajı daha kolay görebilmeniz için 1 piksel siyah kenarlığa sahiptir. Tarayıcınızda, kutuların artık yan yana görüntülendiğini göreceksiniz.

4.

Sayfa gövdesine, aşağıda gösterildiği gibi “myContainer” div dışında üçüncü bir div ekleyin:

Sayfayı kaydedin ve tarayıcınıza yeniden yükleyin. Üçüncü div'in, yüzmemiş olmasına rağmen birinci ve ikinci div'lerin yanında görüntülendiğini göreceksiniz. Bu, kalan HTML öğelerinin kayan öğelerin etrafından akması nedeniyle oluşur. Bu, bazı durumlarda arzu edilen bir davranış olabilir, ancak bu örnekte, üçüncü div'in bir altbilgi oluşturmak için yüzer divs altında gösterilmesini istiyoruz.

5.

Aşağıdaki kuralı sayfanın başındaki stil bölümüne yerleştirin:

myFooter {

clear: both; 

}

Bu, üçüncü "myFooter" div'sini hedefler ve tarayıcıya şamandırayı bırakmasını ve ardından "myContainer" div'nin altındaki HTML öğelerini göstermesini söyler. Sayfayı kaydedin ve yenileyin. Üçüncü div tarafından oluşturulan altbilginin şimdi yüzen divlerin altında görüntülendiğini göreceksiniz.

Bahşiş

• Floated divs arasında boşluk bırakmak için CSS "margin" özelliğini kullanabilirsiniz.