CSS 3 İle Metinleri Kolonlara Ayırma İşlemi

Bu dersimizde bazı dergi ve gazetelerde olan kolonlu yazı yapısını css ile nasıl yapıldığını göreceğiz. Dersimizde kolanlara ayırma, genişlik verme, iki kolon arası boşluğu ayırma, kolonlar arasına çizgi koyma gibi işlemlerin nasıl yapıldığını göreceğiz. Bunu yapacağımız kodlar yanlış hatırlamıyorsam İnternet Explorer 9 ve üzeri desteklemektedir. Tabi siz bunu kontrol ederseniz daha sağlıklı olacaktır.

Şimdi kullanımıyla ilgili detaylara geçelim. Kullanımı tarayıcı farklılığına göre değişiklik gösterdiğinden dolayı css kodlarımızın önüne ön adı yazmamız gerekmektedir. Mesela Yandex ve Chrome için -webkit- gibi ön adları yazmamız gerekmektedir. Böylece diğer tarayıcılarda sağlıklı bir biçimde çalışmasını sağlayabiliriz.

Kolonlama kodlarımızı şöyle bir açıklamalı özetleyecek olursak;

column-count
Count kelimesinden de anlaşılacağı gibi bir sayı değeri almaktadır. Bu sayı değeri belirtilen alanda kaç kolon olacağını göstermektedir. Örneğin 2 kolonlu bir yapı oluşturacaksak o zaman bunu; column-count:2 olarak kullanmamız gerekmektedir.

column-width
Gene width kelimesinden çıkartılacak olan bu kullanım ise kolonların kaç piksel genişliğe sahip olacağını göstermektedir. 900px'lik bir alanda bu 200px'lik genişlikteki kolonlar olacak dersek o zaman 4 kolonluk bir alan oluşacaktır. Yani bu şekilde de kolon sayısını istediğiniz gibi belirleyebilirsiniz.

column-gap
Gap ile belirtilen ifade ile kolonlar arasındaki boşluğun ne kadar olmasını istiyorsak onu bu şekilde belirtiyoruz. Yani iki kolon arasındaki boşluğun 40px olmasını istiyorsak o zaman; column-gap:40px dememiz yeterli olacaktır.

column-rule
Rule ifadesi ile iki kolon arasındaki kalan mesafenin ortasından bir çizgi çizmemizi sağlar. Mesela 10px kırmızı bir çizgi çizmek için; column-rule: 10px solid red dememiz yeterli olacaktır. Solid yerine istediğiniz gibi bir çizgi türü seçebilirsiniz.

column-span
Bu özellik ise kolon belirlediğiniz nesne içinde yer alan başka bir nesneyi ön plana çıkartmak, onu kolan dışında farklı bir yapıda göstermek için kullanılmaktadır. Yanlış hatırlamıyorsam bu özellik İnternet Explorer da kullanılmamaktadır. Bu özelliğin kullanım şekli ise; column-span:all dır.

Yukarıdaki gibi kolon oluşturmak için bize gerekli olan ve birkaç biçimlendirme için şekillendiricileri listeledim. Deste bunları kullanarak örnekler ile çalışmasını ve nasıl olduğunu göstermeye çalıştım. Dersi izlediğiniz taktirde daha yararlı olacaktır.
- 27.07.2013 / 19:42:52 0

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

11:49 Javascript

Javascript Try - Catch - Finally Yapısı

Kategori: Javascript | 22.04.2014
14:39 Php Dersleri

Php ile Makale Oku Alanı Yapımı

Kategori: Php Dersleri | 03.05.2013
7:23 Php Dersleri

Php ile Yazıları Belirli Oranda Kısaltmak

Kategori: Php Dersleri | 03.05.2013
7:32 jQuery Dersleri

jQuery Error ile Hataları Bulmak ve Müdahale Etmek

Kategori: jQuery Dersleri | 03.05.2013
3:01 Php Dersleri

While Döngüsünün Kullanımı

Kategori: Php Dersleri | 02.05.2013

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.