Css box model kullanımı ve konumlandırma etiketlerinin kullanımıyla ilgili örnektir.
Ö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; }