Css box model kullanımı ve konumlandırma etiketlerinin kullanımıyla ilgili örnektir.

Css kutu modeli örneği ve konumlandırma

Örneğimizde bir resim üzerine içeriğin yerleştirilmesi uygulaması yapılmıştır. Resim üzerinde metin ve bir bağlantı biçimlenerek css konumlandırma komutu ile yerleşimi yapıldı. Konumlandırma olarak position komutu relative ve absolute değerlerini almıştır. position:relative normal konumlamalara bağlı olarak konumlandırma sağlar. Yani static konumlandırmayı baz alıp içeriğin yeniden konumlandırmasını yapmak için kullanılır. position:absolute, göreceli (relative) konumlandırma içerisinde içeriğin herhangi bir konuma taşımak için kullanılır.

Aşağıdaki html sayfamızı div etiketi kullanarak kutumuzu hazırlıyoruz ve içeriği bu etiketin içerisine yerleştiryoruz.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Css kutu modeli</title>
 <link rel="stylesheet" href="kutu.css">
</head>
<body>
 <div>
 <img src="babam-ve-oglum.jpg">
 <div class="metin">
 <h2>Babadan oğula havalı şıklık</h2>
 <a href="">Alışverişe Başla ></a>
 </div>
 </div>
</body>
</html>

Aşağıda verilen css kodlarını kutu.css olarak kaydedip, 3 dosyamızın yan yana olduklarını kontrol ediyoruz.

div {
 position:relative; 
 width:250px;
 text-align: center;
}
img {
 width:250px;
 height:381px;
}
.metin {
 position: absolute;
 top:250px;
}
h2 { color:white; }
a {
 background:white;
 padding: 10px 10px;
 color:#222222;
 font:normal 14px Calibri;
 text-decoration:none;
}
a:hover {
 background:#1f49b6; }
  • Yazı Etiketleri :
  • css kutu modeli
  • css box model
  • relative ve absolute
  • css position
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