Pazartesi , 29 Mayıs 2017
Anasayfa » WEB » CSS » Float ile Responsive Tasarım

Float ile Responsive Tasarım

Bu yazıda CSS float özelliği kullanarak çok kolay bir responsive web sayfası tasarımı yapacağız. Float başlangıçta yapısal tasarımlar için kullanılan bir CSS kodu değildi. Akışkan tasarımlar yapmak için bazı zorlukları da yapısında barındırmaktaydı. Bu yazımızda float kullanarak bir basit responsive web sayfası tasarımı yapacağız. (Ancak yeni CSS kurallarında Flexbox ızgara yapısı kullanılmaktadır. Bu makalede anlatılmayacaktır.)
Yapılacak web sayfasının ekran görüntüsü aşağıdaki gibi olacaktır.

Animation1

Ekrandaki kartların başlıklarını sabit olarak ayarlamak istemiyoruz. Başlıktaki yazıların yüksekliğine göre kartın yüksekliği değişecektir.  Kartların daha esnek görünebilmesi için farklı ekran görünümlerde (viewport) ekranda gösterilecek sütun sayısının değişmesini istiyoruz. Bunun için media query  kullanacağım. 4 farklı media query seçeneği için ekranda gösterilecek kutu sayısını aşağıdaki tabloda gösterilmektedir.

Viewport Sutün Sayısı
<400px 1
≥400px 2
≥768px 3
≥1024px 4

Gelelim html etiketimizi yazmaya;  aşağıdaki liste etiketi resmi ve figure etiketi ile resim başlığını içermektedir. Her liste (li) etiketi bir resim öğesini içermektedir.

 

Tasarıma ait css kodlarımız

Kodları yazdıkdan sonra kartların bazı viewport değerlerinde  kaydığını fark etmişsinizdir.

Screenshot_2

 

Aslında problem burada float kullanılması ile akışkan bir zemin olması ve nesnelerin yükseklik değerleri bir birinde farklı olması. Bu iki durum bir araya geldiğinde akışkan zemine göre nesneler yerleştiriliyor.

 

Peki sorun nasıl çözülür?
Bazı kartlara özel clear yazarak bu sorunu düzeltebiliriz. Örnek üzerinden açıklayalım. Bir satırda 4 tane kart gösterildiğini düşünerek beşinci karta clear özelliği eklenerek alt satıra gelmesi sağlanır. Bu işlemi yapabilmek için :nth-of-type(an+b) CSS pseudo-class kavramını kullamamız gerekiyor. an+b forümülü ile dördüncü elementten sonraki beşinci elementı seçmek için kullanacağız. 4n+1 formülü her dödüncü karttan sonraki kartı seçecektir.

Media query değerlerimizi her bir kart için aşağıdaki şekilde ayarlamamız gerekecektir.

Viewport Sütun sayısı Tekrar edecek desen
<400px 1
≥400px 2 2n+1
≥768px 3 3n+1
≥1024px 4 4n+1

Sonunda yazacağımız CSS kodu şu şekilde oluşacaktır.ÖNEMLİ NOT: Aşağıdaki media query değerleri toplanarak gitmektedir.   Resetlemek istediğimiz satırdaki kod bir önceki satırda temizlenmiş durumda olacaktır. Her satırda tek temizleme kodu yazmış olmak için bu şekilde yazdık.

Son olarak aşağıdaki durumları belirtmekte fayda var.

  • clear:left özelliği yerine clear:both kullanabilirsiniz.
  • :nth-of-type(an+b) CSS pseudo-class değeri yerine de :nth-child(an+b) kullanbilirsiniz.

 

Not: Mobile cihazlarda da etkin olması için head etiketleri arasına viewport kodunu yazmayı unutmayın.

 

Responsive tasarımda kullanılan resimler ve responsive tasarım kodları

Responsive Tasarımın HTML & CSS Kodları

 

 

Hakkında Hayri

İlginizi Çekebilir

CSS ile Etkili Resim Efektleri

Eskiden can alıcı görüntüler oluşturmak için Photoshop gibi grafik programlarından faydalanırdık. Günümüzde CSS’e eklenen bir …

2 Yorumlar

  1. Hocam bir sorum var..
    “DIV” nedir hocam?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir