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
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

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css ile çoklu arkaplan uygulaması
Yazıyı Oku

Css ile çoklu arkaplan uygulaması

Fare tıklamasını takip eden nesne - AS2 ile
Yazıyı Oku

Fare tıklamasını takip eden nesne - AS2 ile

Menu