CSS Layout / Web Site Düzeni

CSS layout yani CSS ile web site düzeni diyebiliriz. Web site düzeni genel olarak header, main-content, sidebar, footer öğelerinden oluşur. Web sitesi tasarlarken sayfa düzeni çok öenmlidir. Web sitenin amcına ve içeriğine göre farklı web sayfası düzenleri hazırlayabilirsiniz. Web tasarım projelerinde sayfa düzeni ve responsive layout kullanımı çok önemlidir.

Bir web site projesine başlamadan önce web site düzeninin ve içerik planının oluşturulması çok önemlidir.
Plansız başlanan büyük projeler iş bitirme sürecini olumsuz etkilyebilir.

Web site Layout Temellleri

Layout HTML Kodları

<div class="layout-wrapper1">
    <header class="layout-header" data-title="#header">
                
    </header>
    <div class="sidebar" data-title="#sidebar">
                
                
    </div>
    <div class="main-content" data-title="#main-content">
                
    </div>
    <footer class="layout-footer" data-title="#footer">
                
    </footer>
</div>
                

Temel CSS Layout

.layout-wrapper1 {
    width: 1170px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
  }
  
  .layout-wrapper1 header,
  .layout-wrapper1 footer,
  .layout-wrapper1 .main-content,
  .layout-wrapper1 .sidebar {
    position: relative;
    background-color: #e9e9f4;
    margin-bottom: 10px;
  }
  

  
  .layout-wrapper1 header,
  .layout-wrapper1 footer {
    min-height: 100px;
    clear: both;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .layout-wrapper1 .sidebar {
    width: 250px;
    float: left;
    min-height: 450px;
  }
  
  .layout-wrapper1 .main-content {
    width: calc(100% - 260px);
    margin-left: 10px;
    float: left;
    min-height: 450px;
  }
  
  @media only screen and (max-width: 768px) {
    .layout-wrapper1 .main-content,
    .layout-wrapper1 .sidebar {
      width: 100%;
      float: none;
      min-height: 300px;
      padding: 0;
      margin-left: 0;
    }
  }
                      
                

Yukarıdaki sayfa düzenini basitçe oluşturduktan sonra içerisine içeriklerimizi ve menü elemanlarımızı da ekleyerek basit bir web site düzeni oluşturalım.

Responsive CSS Layout

Yukarıdaki web site düzeni klasik tarzada basit bir web siteye ait bir iskelet niteliğindendir.

flexbox ve float yapılarını kullanarak oluşturduğumuz CSS layoutun kodlarını aşağıda detaylı inceleyebilirsiniz.

Layout HTML Kodları

<div class="layout-wrapper">
    <header class="layout-header" data-title="#header">
        <a href="#" class="logo">LOGO</a>
        <ul class="layout-header-menu">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </header>
    <div class="sidebar" data-title="#sidebar">
        <h2 class="sidebar-title">SIDE BAR TITLE</h2>
        <ul class="sidebar-menu">
            <li><a href="#">SIDE BAR LINK1</a></li>
            <li><a href="#">SIDE BAR LINK2</a></li>
            <li><a href="#">SIDE BAR LINK3</a></li>
            <li><a href="#">SIDE BAR LINK4</a></li>
            <li><a href="#">SIDE BAR LINK5</a></li>
            <li><a href="#">SIDE BAR LINK6</a></li>
        </ul>
                
    </div>
    <div class="main-content" data-title="#main-content">
        <h1 class="title">ABOUT COMPANY TITLE</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quae sapiente maiores atque labore
            illo,iusto sequi voluptate quis, fugiat veniam? Dolor consectetur minima obcaecati exercitationem velit
            nesciunt tempore sequi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quae sapiente maiores atque labore
            illo,iusto sequi voluptate quis, fugiat veniam? Dolor consectetur minima obcaecati exercitationem velit
            nesciunt tempore sequi.</p>
        <a href="#" class="btn-link">ABOUT US</a>
    </div>
    <footer class="layout-footer" data-title="#footer">
        <ul class="layout-footer-menu">
            <li><a href="#">FOOTER LINK</a></li>
            <li><a href="#">FOOTER LINK</a></li>
            <li><a href="#">FOOTER LINK</a></li>
            <li><a href="#">FOOTER LINK</a></li>
            <li><a href="#">FOOTER LINK</a></li>
            <li><a href="#">FOOTER LINK</a></li>
            <li><a href="#">FOOTER LINK</a></li>
        </ul>
        <p class="layout-copyright">Telif Hakkı © 2021 webmetreçcom. Tüm hakları saklıdır.</p>
    </footer>
</div>
                

Layout CSS Kodları

.layout-wrapper {
    width: 1170px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
  }
  
  .layout-wrapper header,
  .layout-wrapper footer,
  .layout-wrapper .main-content,
  .layout-wrapper .sidebar {
    position: relative;
    background-color: #e9e9f4;
    margin-bottom: 10px;
  }

  .layout-wrapper header,
  .layout-wrapper footer {
    display: block;
    clear: both;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 15px 4vw;
    flex-wrap: wrap;
  }
  
  .layout-wrapper header {
    display: flex;
    align-items: center;
    padding: 15px 4vw;
  }
  
  .layout-wrapper header .logo {
    font-weight: 600;
    color: #333;
    font-size: 48px;
    margin-right: auto;
  }
  
  .layout-wrapper .layout-header-menu,
  .layout-wrapper .layout-footer-menu {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
  }
  
  .layout-wrapper .layout-header-menu a,
  .layout-wrapper .layout-footer-menu a {
    color: #333;
    text-decoration: none;
    display: inline-block;
    padding: 12px 15px;
    font-weight: 600;
  }
  
  .layout-wrapper footer {
    font-size: 12px;
    flex-direction: column;
  }
  
  .layout-wrapper .sidebar {
    width: 250px;
    float: left;
    padding: 20px;
    min-height: 450px;
  }
  
  .layout-wrapper .sidebar-title {
    font-size: 18px;
    font-weight: 600;
  }
  
  .layout-wrapper .sidebar-menu a {
    font-size: 14px;
    color: #222;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
  }
  
  .layout-wrapper .main-content {
    width: calc(100% - 260px);
    margin-left: 10px;
    float: left;
    padding: 20px;
    min-height: 450px;
  }
  
  .layout-wrapper .main-content title {
    margin: 25px 0;
  }
  
  .layout-wrapper .main-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  .layout-wrapper .btn-link {
    background-color: #e7024e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    padding: 8px 20px;
    text-decoration: none;
  }
  
  @media only screen and (max-width: 768px) {
    .layout-wrapper .main-content,
    .layout-wrapper .sidebar {
      width: 100%;
      float: none;
      min-height: 0;
    }
  }