CSS Dersleri 52 - Sayfa Düzeni (Layout)

CSS Dersleri 52 - Sayfa Düzeni (Layout)


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.

 

CSS Layout

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)

CSS Sütunlar

 

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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla