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
Javascript if - else - else if çözümlü sorular
Yazıyı Oku

Javascript if - else - else if çözümlü sorular

Css ile kutu modeli oluşturma (box model örneği)
Yazıyı Oku

Css ile kutu modeli oluşturma (box model örneği)

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ı

Menu