Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Sayfa Düzeni (Layout) Konusunu öğreneceğiz.
Web siteleri genellikle, üst bilgi (header), menüler , içerik (content) ve alt bilgi (footer) düzeni ile tasarlanırlar.
Web sitelerinizi dizayn edebileceğiniz tonlarca farklı sayfa düzenleri mevcuttur, ama en çok kullanılan yapı yukarıdaki örnekte gösterdiğimiz sayfa düzenidir. Gelin bu düzeni derinlemesine inceleyelim.
Header Kısmı
Header genellikle web sitesinin en üstünde (veya bir üst menünün hemen altında) bulunur. Genellikle bir logo veya web sitesi adı içerir:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body>
</html>
Menü Kısmı
Menüler, ziyaretçilerin web sitenizde gezinmesine yardımcı olacak bir bağlantı listesi içerir:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Menü 1</a>
<a href="#">Menü 2</a>
<a href="#">Menü 3</a>
</div>
</body>
</html>
İçerik (Content) Kısmı
Bu bölümdeki düzen, genellikle hedef kullanıcılara bağlıdır. En yaygın düzen, aşağıdakilerden biridir :
- 1 sütun (genellikle mobil tarayıcılar için kullanılır)
- 2 sütun (genellikle tabletler ve dizüstü bilgisayarlar için kullanılır)
- 3 sütunlu düzen (yalnızca masaüstü bilgisayarlar için kullanılır)
Biz bu örneğimizde 3 sütunlu bir düzen oluşturacağız ve bunu daha küçük ekranlarda 1 sütunlu bir düzen ile değiştireceğiz:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.column {
float: left;
width: 33.33%;
padding: 15px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Duyarlı efekti görmek için tarayıcı penceresini yeniden boyutlandırın.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="column">
<h2>Sütun</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column">
<h2>Sütun</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column">
<h2>Sütun</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>
</body>
</html>
İpucu: 2 sütunlu bir düzen oluşturmak için genişliği %50 olarak değiştirin. 4 sütunlu bir düzen oluşturmak için %25 vb. kullanın.
Eşit Olmayan Sütunlar
Ana içerik kısmı, sitenizin en büyük ve en önemli parçasıdır. Bu sebepten dolayı, ana içerik kısmımızı içeren sütunu daha geniş yapmak için sütun genişlikleri ile oynayabiliriz. Burada dikkat edilmesi gereken önemli tek husus, yüzdelik olarak verdiğimiz genişliklerin hepsinin toplamı 100%'ü geçmemelidir.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.column {
float: left;
padding: 10px;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Duyarlı efekti görmek için tarayıcı penceresini yeniden boyutlandırın.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="column side">
<h2>Duyarlı efekti görmek için tarayıcı penceresini yeniden boyutlandırın.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="column middle">
<h2>Ana İçerik</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column side">
<h2>Yan İçerik</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
</body>
</html>
Footer Kısmı
Footer, sayfanızın en altına yerleştirilir. Genellikle telif hakkı ve iletişim bilgileri gibi bilgileri içerir:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.column {
float: left;
padding: 10px;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Duyarlı efekti görmek için tarayıcı penceresini yeniden boyutlandırın.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="column side">
<h2>Yan İçerik</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="column middle">
<h2>Ana İçerik</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column side">
<h2>Yan İçerik</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Responsive (Duyarlı) Sayfa Düzeni Oluşturmak
Bu yaptığımız site düzenini tüm cihazlarda doğru gözükecek şekilde tasarlayalım. Bunun için daha önceki bölümlerde kullandığımız Media Query özelliğini kullanalım.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Kodlama Vakti</h1>
<p>Responsive Web Sitesi Tasarımı</p>
</div>
<div class="topnav">
<a href="#">Anasayfa</a>
<a href="#">Hakkımızda</a>
<a href="#">Eğitimlerimiz</a>
<a href="#" style="float:right">İletişim</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Algoritma Nedir ?</h2>
<h5>Mustafa Çetindağ 30 Ocak 2020, Perşembe</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Algoritma belirli bir problemi çözmek veya belirli bir şartı sağlamak için tasarlanmış yoldur.Bilgisayar
bilimlerinde ve Matematikte bir işi yapmak için oluşturulan, başlangıç ve bitiş noktası olan sonlu işlemler
kümesidir. Bilgisayar bilimlerinin önemli bir parçası olup , bilgisayar programlamada kullanılır.Tüm
programlama dillerinin temelleri algoritmaya dayanır.
</p>
</div>
<div class="card">
<h2>Algoritma Nedir ?</h2>
<h5>Mustafa Çetindağ 30 Ocak 2020, Perşembe</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Algoritma belirli bir problemi çözmek veya belirli bir şartı sağlamak için tasarlanmış yoldur.Bilgisayar
bilimlerinde ve Matematikte bir işi yapmak için oluşturulan, başlangıç ve bitiş noktası olan sonlu işlemler
kümesidir. Bilgisayar bilimlerinin önemli bir parçası olup , bilgisayar programlamada kullanılır.Tüm
programlama dillerinin temelleri algoritmaya dayanır.
</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>Hakkımızda</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Merhabalar ben Mahmut Mustafa Çetindağ , 22 Temmuz 1995 Ankara doğumluyum. 2010 senesinden beri yazılım
sektöründe çalışmalar yapmaktayım. </p>
</div>
<div class="card">
<h3>Popülar Gönderiler</h3>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
<div class="fakeimg">
<p>Image</p>
</div>
</div>
<div class="card">
<h3>Takip Et</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
