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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul > <li> <figure> <img src="r0.jpg" alt=""> <figcaption>Edirne Selimeye Cami</figcaption> </figure> </li> <!-- diğer kart bilgileri / diğer listeler --> </ul> |
Tasarıma ait css kodlarımız
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<style> /*temel stil*/ body { width: 80%; max-width: 1200px; margin: 40px auto; font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif; background: #cfd8dc; color: #37474f; } figure { background: whitesmoke; margin: 0 0 40px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2); } figcaption { padding: 20px; } img { max-width: 100%; height: auto; display: block; } .clearfix:after { content: ""; display: table; clear: both; } ul { margin: 0; padding: 0; } /* yapısal stil tanımalmaları */ li { list-style-type: none; float: left; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } /* media query tanımlamaları */ @media screen and (min-width: 400px) { li { width: 50%; } } @media screen and (min-width: 768px) { li { width: 33.333%; } } @media screen and (min-width: 1024px) { li { width: 25%; } li:nth-of-type(4n+1) { clear: left; } } </style> |
Kodları yazdıkdan sonra kartların bazı viewport değerlerinde kaydığını fark etmişsinizdir.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
@media screen and (min-width: 400px) { li { width: 50%; } li:nth-of-type(2n+1) { clear: left; } } @media screen and (min-width: 768px) { li { width: 33.333%; } li:nth-of-type(2n+1) { clear: none; } li:nth-of-type(3n+1) { clear: left; } } @media screen and (min-width: 1024px) { li { width: 25%; } li:nth-of-type(3n+1) { clear: none; } li:nth-of-type(4n+1) { clear: left; } } |
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.
|
1 2 3 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
Responsive tasarımda kullanılan resimler ve responsive tasarım kodları
Responsive Tasarımın HTML & CSS Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Resonsive Tasarım | YAZILIMBILISIN.NET</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> /*temel stil*/ body { width: 80%; max-width: 1200px; margin: 40px auto; font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif; background: #cfd8dc; color: #37474f; } figure { background: whitesmoke; margin: 0 0 40px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2); } figcaption { padding: 20px; } img { max-width: 100%; height: auto; display: block; } .clearfix:after { content: ""; display: table; clear: both; } ul { margin: 0; padding: 0; } /* yapısal stil tanımalmaları */ li { list-style-type: none; float: left; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } /* media query tanımlamaları */ @media screen and (min-width: 400px) { li { width: 50%; } li:nth-of-type(2n+1) { clear: left; } } @media screen and (min-width: 768px) { li { width: 33.333%; } li:nth-of-type(2n+1) { clear: none; } li:nth-of-type(3n+1) { clear: left; } } @media screen and (min-width: 1024px) { li { width: 25%; } li:nth-of-type(3n+1) { clear: none; } li:nth-of-type(4n+1) { clear: left; } } </style> </head> <body> <ul class="clearfix"> <li> <figure> <img src="r0.jpg" alt=""> <figcaption>Edirne Selimeye Cami</figcaption> </figure> </li> <li> <figure> <img src="r1.jpg" alt=""> <figcaption>Ankara Atakule</figcaption> </figure> </li> <li> <figure> <img src="r2.jpg" alt=""> <figcaption>Gaziantep Çingene Kızı Mozaiği</figcaption> </figure> </li> <li> <figure> <img src="r3.jpg" alt=""> <figcaption>İstanbul Kız Kulesi</figcaption> </figure> </li> <li> <figure> <img src="r4.jpg" alt=""> <figcaption>İstanbul Galata Kulesi</figcaption> </figure> </li> <li> <figure> <img src="r5.jpg" alt=""> <figcaption>Van Akdamar Kilisesi</figcaption> </figure> </li> </ul> </body> </html> |
[…] Float ile Responsive Tasarım […]
Hocam bir sorum var..
“DIV” nedir hocam?
Siteyi takip etmeye devam et oruvar kardeşim 😉 Aradığın cevabı bulacaksın.