<div> İle Layout ( Yerleşim ) Oluşturma

M. Kasım Sular
September 29, 2020
1639 Görüntülenme
0 Yorum

Bu dersimizde arayüz tasarımını <div> ile gerçekleştirelim. Diğer bir deyimle <div> çorbası yapalım. Bir önceki dersimizde <div> etiketi ve bu etiket için kullanılacak CSS özeliklerini genel hatlarıyla işledik.

<div> İle Layout Oluşturma Uygulaması

Bir sonraki dersimizde yeni HTML-5 etiketleriyle oluşturacağımız uygulamayı bu dersimizde <div> etiketleriyle gerçekleştirelim.

1. Adım

DivLayout adında bir klasör oluşturup içerisine index.html ve css adında bir dizin oluşturalım. css dizini içerisine style.css dosyası oluşturalım. index.html içerisine html:5 yazıp onaylayarak html kodlama ortamını oluşturalım. <head> etiketi içerisine <link> etiketiyle style.css dosyasını çağıralım.

2. Adım

style.css dosyamızı açıp tüm etiketlerde başlangıç padding ve margin değerlerini 0px olarak atıyoruz.

style.css

* {padding:0px; margin:0px;}

Tüm içeriği sarmalayacağımız container <div> etiketini oluşturalım.

style.css

.container{ width:100%; background-color: #fff;}

index.html

<div class=”container”></div>

3. Adım

Her <div> sonrasını sağdan ve soldan temizlemek amacıyla clear <div> etiketini oluşturalım.

style.css

.clear{ clear:both}

index.html

<div class=”clear”></div>

4. Adım

header <div> etiketini ve içeriğini kodlayalım. images klasörü oluşturup içerisine logo.png ve ads.jpg (reklam bannerı) dosyalarını yerleştirelim.

style.css

.header{width:90%; margin:10px auto;}
.header .logo{width:30%;float: left;}
.header .logo img{width:80%;}
.header .ads{width:70%;float: left;}
.header .ads img{width:80%; float:right}

index.html

<div class="header">
            <div class="logo">
                <img src="images/logo.png">
            </div>
            <div class="ads">
                <img src="images/ads.jpg">
            </div>          
</div>
<div class="clear"></div>

5. Adım

Yönlendirme işlemlerini gerçekleştireceğimiz nav <div> etiketini kodlayalım.

style.css

.nav{width:100%; color:#fff}
.nav ul{list-style-type: none; padding:20px 0px; width:100%; background-color: #000; text-align: center; margin: auto;}
.nav ul li{display: inline; padding: 20px 40px;  }
.nav ul li:hover{background-color: #f00;}
.nav ul li.active{background-color: #f00;}
.nav ul li a{text-decoration: none; text-transform: uppercase; color: #fff; font-size: large;}

index.html

<div class="nav">
            <ul>
                <li class="active">
                    <a href="index.html">Ana Sayfa</a>
                </li>
                <li>
                    <a href="kurumsal.html">Kurumsal</a>
                </li>
                <li>
                    <a href="urunler.html">Ürünler</a>
                </li>
                <li>
                    <a href="haberler.html">Haberler</a>
                </li>
                <li>
                   <a href="index.html">İletişim</a>
                </li>
            </ul>
</div>
<div class="clear"></div>

6. Adım

main, section aside ve footer <div> etiketlerini kodlayalım.

style.css

.main{width:90%; margin:10px auto;}
.main .section{float:left; width:65%; min-height:400px; }
.main .section .article {float:left; width:100%; margin:10px; min-height:120px; }
.odd{background-color: #f5f5f5; } /*tek sayılı article için*/
.even{background-color: #fafafa; } /*çift sayılı article için*/
.main .aside{float:right; width:30%; margin:10px; min-height:400px; background-color: #eee; }
.footer{float:left; width:100%; background-color: #000;color:#fff; text-align:center; padding:20px 0px}

index.html

<div class="main">

            <div class="section">

                <div class="article odd"></div>

                <div class="article even"></div>

                <div class="article odd"></div>

            </div>

            <div class="aside"></div>

</div>

<div class="clear"></div>

<div class="footer">

<p>2020 &copy; codeks.org | Tüm hakları saklıdır.</p>

</div>