CSS – DIV Kullanımı Örnekleri -7 – – Web Tasarım & Programlama

Bu web tasarım dersi örneğimizde html ve css yapısını kullanarak web sayfası oluşturacağız. Örnek üzerinde position:fixed ve position:sticky kullanımlarını inceleyebilirsiniz.

Örnek tasarımda menü için position özelliği sticky olarak ayarlanarak menünün üstte sabit olarak kalması sağlanmıştır.

Örneğe ait Html ve CSS kodları aşağıdadır.


<!DOCTYPE html>
<html>
    <head>
        <title>Position Kullanımı</title>
        <link rel="stylesheet" href="stil1.css" type="text/css">
        <meta charset="utf-8">
        <style>
            body{
                background-image: url(resimler/pattern.jpg);
                background-color: aqua;
                margin: 0px;
                padding: 0px;
            }
            h1{
                margin: 0px;
                padding: 0px;
            }
            #depo{
                width: 960px;
                margin: 5px auto;
                background-color:azure;
            }
            #baslik{
                height: 200px;
            }
            #baslik h1{
                font-size: 40pt;
                text-align: center;
                font-weight: bolder;
                font-family: verdana;
                color: bisque;
                line-height: 200px;
                text-shadow: 0px 5px 5px black;
            }
            #menu{
                background-color:darkgoldenrod;
                height: 50px;
                position: sticky;
                top: 0px;
            }
            a{
                margin: 25px;
                text-decoration: none;
                color: white;
                font-size: 20pt;
                padding: 5px 40px;
                width: 50px;
                line-height: 50px;
                font-family: sans-serif;
            }
            a:hover{
                background-color:burlywood;
                border-radius: 10px;
            }
            #icerik{
                padding: 20px;
            }
            #icerik img{
                margin: 5px;
                float: left;
            }
            #icerik p{
                text-indent: 15px;
                font-family: verdana;
                text-align: justify;
                
            }
            .basadon{
                width: 100px;
                height: 50px;
                background-color: black;
                position: fixed;
                bottom: 50px;
                right: 50px;
                color: red;
                font-family: arial;
                font-weight: bolder;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="depo">
            <div id="baslik">
                <h1>Web Tasarım</h1>
            </div>
            <div id="menu">
                <a href="#">Anasayfa</a>
                <a href="#">Hakkımızda</a>
                <a href="#">Ürünler</a>
                <a href="#">İletişim</a>
            </div>
            <div id="icerik">
                <img src="resimler/2.jpg">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="basadon">Yukarı</div>
    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

<!DOCTYPE html>

<html>

<head>

<title>Position Kullanımı</title>

<style>

body{

background-image: url(resimler/pattern.jpg);

background-color: aqua;

margin: 0px;

padding: 0px;

}

h1{

margin: 0px;

padding: 0px;

}

#depo{

width: 960px;

margin: 5px auto;

background-color:azure;

}

#baslik{

height: 200px;

}

#baslik h1{

font-size: 40pt;

text-align: center;

font-weight: bolder;

font-family: verdana;

color: bisque;

line-height: 200px;

text-shadow: 0px 5px 5px black;

}

#menu{

background-color:darkgoldenrod;

height: 50px;

position: sticky;

top: 0px;

}

margin: 25px;

text-decoration: none;

color: white;

font-size: 20pt;

padding: 5px 40px;

width: 50px;

line-height: 50px;

font-family: sans-serif;

}

a:hover{

background-color:burlywood;

border-radius: 10px;

}

#icerik{

padding: 20px;

}

#icerik img{

margin: 5px;

float: left;

}

#icerik p{

text-indent: 15px;

font-family: verdana;

text-align: justify;

}

.basadon{

width: 100px;

height: 50px;

background-color: black;

position: fixed;

bottom: 50px;

right: 50px;

color: red;

font-family: arial;

font-weight: bolder;

line-height: 50px;

text-align: center;

}

</style>

</head>

<body>

<h1>Web Tasarım</h1>

</div>

<a href="#">Anasayfa</a>

<a href="#">Hakkımızda</a>

<a href="#">Ürünler</a>

<a href="#">İletişim</a>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class="basadon">Yukarı</div>

</body>

</html>

Sayfa görüntüsü:

5 Yorum

Ferhat dedi ki:

Eylül 9, 2019, 6:24 pm

Ben Web IDE diyer bir uygulama geliştiriyorum örnek bölümüne sizin birkaç örneğinizi eklesem sıkıntı olur mu?

Cevapla
- admin dedi ki:
  
  Eylül 9, 2019, 6:30 pm
  
  Ekleyebilirsin.
  
  Cevapla
  - Ferhat dedi ki:
    
    Eylül 11, 2019, 5:20 pm
    
    Teşekkürler
    
    Cevapla
Büşra dedi ki:

Mart 3, 2019, 2:02 pm

css kodları nerede görünmüyor?

Cevapla
- Osman dedi ki:
  
  Mart 3, 2019, 3:20 pm
  
  Head etiketleri içinde.
  
  Cevapla

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

5 Yorum

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin