Web tasarım ve programlama dersinde kutu modeli içerisinde nesnelere sabit pozisyon kullanımı.

Css ile position: fixed kullanımı

Css kutu modeli içerisinde tanımlanan resme sabit konumlandırma özelliği ekleyip, altına tarayıca kaydırma çubuğu çıkana kadar paragraf özelliğinde metin eklemesi yapalım. Kaydırma çubuğu yeterince küçülene kadar paragraf eklemesi yapalım.

Daha sonra aşağıda verilen html kodlarını yazınız.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <div class="kutu">
     <img src="paris.jpg">
    <div class="paragraf">
    <p>2.5. Konumlandırma Bu kısımda bir ögenin sayfadaki konumunu belirlemeyi, ögelerin üst üste çakıştığı durumlarda hangisinin üste hangisinin alta geleceğini belirlemeyi öğreneceğiz.</p>
    .
    .
    .   
   <p>2.5. Konumlandırma Bu kısımda bir ögenin sayfadaki konumunu belirlemeyi, ögelerin üst üste çakıştığı durumlarda hangisinin üste hangisinin alta geleceğini belirlemeyi öğreneceğiz.</p>
</div>
</div>
</body>
</html>

Css kodlarını yazarak html sayfasının position:fixed özelliği almasını sağlayalım.

.kutu {
 margin: 20px auto;
 border: 1px solid #000;
 padding: 20px;
 width: 800px;   }
img {
 position: fixed;
 left:43%; 
 width: 250px;
 height: 250px;   }
.paragraf { margin-top:300px; }
  • Yazı Etiketleri :
  • position:fixed
  • sabit konumlandırma
Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme
Yazıyı Oku

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme

Nesne tabanlı programlama uygulamaları (try - catch - finally)
Yazıyı Oku

Nesne tabanlı programlama uygulamaları (try - catch - finally)

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme
Yazıyı Oku

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Css ile web sayfası tasarımı örneği yapımı
Yazıyı Oku

Css ile web sayfası tasarımı örneği yapımı

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Menu