layout-general-overviewYıllardır TABLE kullanımına alıştıktan sonra DIV ile karşımıza çıkan yeni yapıya önce yabancılık çeksek de biraz ciddi bir çabayla tarayıcımız tarafından nasıl yorumlanacağını anlayama başlıyoruz. Şimdi birkaç değişik örnekle, basit yapılardan başlayarak daha karmaşık yapılara doğru DIV’lerimizin farklı yerleştirme şekillerini örneklerle inceleyelim. Burada her ihtimali örnekleyerek anlatmam mümkün olmadığı için aklıma gelenleri paylaşmakla yetineceğim. Farklı yerleşimler yapmak istiyorsanız ve sorunla karşılaşıyorsanız lütfen bana ulaşın. Bu çalışmayı yaparken DIV’lerimizi birbirinden ayırabilmek için artalan renkleri ve numaralandırma kullanacağız.

* YAN YANA YERLEŞİM

DIV’lerimizi sola ya da sağa yaslı halde sıralamamızda çok fazla fark yoktur. Dikkat etmemiz gereken en önemli konu sıralama olacaktır.

1.a – SOLA YASLI

sola_yasli_div 

1.b – SAĞA YASLI

DIV’lerimizin yerleşiminde bazı senaryolarda kodlama sıralaması ile ekrana yansıyan görüntü arasında farklılıklarla karşılaşacağız. Bunun ilk örneğini sağa yaslı kullanımda görebilirsiniz. Ekrandaki yerleşim DIV1, DIV2, DIV3 sıralamasıyla olduğu halde kodlamada tam ters bir sıralama yapacağız. saga_yasli_div 

* ALT ALTA YERLEŞİM

Yan yana yerleşimi son derece rahat bir şekilde uyguladıktan sonra alt alta yerleşime geçebiliriz. Burada üç durum söz konusu olabilir. Uygulamasında sorun çıkabileceği için bu üç durumu da örnek olarak göstereceğiz.

2.a – SOLA YASLI

alt-alta-sola-yasli-div

2.b – ORTALI

alt-alta-ortali-div

 

2.c – SAĞA YASLI

alt-alta-saga-yasli-div

Dikkat ettiyseniz burada sadece MARGIN özelliğinin değerlerini değiştirerek DIV’lerimizi istediğimiz şekilde yerleştirmeyi başardık.

Aynı sonuca CLEAR özelliğini kullanarak şu şekilde ulaşabiliriz

Arkadaslar konunun tam anlatimi buradadir: Kaynak: Ali Çınkı, cinki.com

yukaridaki linke giderek resimlerde gordugunuz yerlesimler icin gerekli olan kodlari alabilirsiniz..

Bir Cevap Yazın