CSS ile Absolute Özelliği Kullanımı

Bu yazımızda CSS ile Absolute Özelliği Kullanımını inceleyeceğiz. Basit bir HTML tasarımı yaparak pekiştireceğiz.  CSS'te  web sayfamızın zemine resim atama işlemini de kullanacağız.  Bu yazımız bir nevi ekrana duyarlı (responsive) tasarıma da giriş niteliğinde olacak. Çünkü artık pikseller değil yüzdeler ile uğraşmaya başlayacağız. Böylece ekran küçüldüğünde bile tasarımımız ekrana göre kendini adapte edecek ve o oranda küçülecek. Artık responsive tasarıma geçmek zorundayız. Çünkü  Google mobil uyumlu siteleri öne çıkarıp, mobil uyumlu olmayanlar konusunda web tasarımcıları uyarıyor.

Aşağıdaki gibi bir sayfa görünümünü elde etmek istiyoruz. HTML sayfamızın zemininde bir Türk Barağı döşeyip üstüne istiklal marşını yazmak istiyoruz. CSS'te varsayılan olarak position özelliği relative olduğundan bu işlemi yaptığınızda istiklal marşı üstte, bayrak altta kalacaktır, üst üste gelmeyeceğiz. Yazı ve resmi birer nesne olarak düşünürsek, hangi nesnenin önde kullanılacağının  CSS'te z-index özelliği ile ayarlıyoruz. Z-index özelliği büyük olan daha önde gösteriliyor.




 

CSS kodlamamıza başlayalım. Önce image-center isminde bir class oluşturduk. Bu class bayrağımızla ilgili css kodlarımızı içerecek.

.image-center {
   display: block;
   width: 50%;
   margin-left: 25%;
   position: absolute;
}
 
İlk satırda width: 50% ile resmimizin büyüklüğünü sayfanın genişliğinin %50'si olacak şekilde ayarlıyoruz. margin-left:50% ile de soldan dış boşluğu sayfa genişliğinin %25'ine ayarlıyoruz. Böylece bayrağımız ekrana yatayda ortalanmış oluyor. Şimdilik dikeyde ortalama üzerine durmayacağız. İlerleyen zamanlarda ona da değikeceğiz.  position: absolute; satırı ile nesnemizin pozisyonunun durumunu belirtiyoruz. absolute kelimesi ingilizce "mutlak" anlamına geliyor. relative kelimesi de ingilizce "bağıl" anlamına geliyor. Burada menülerde olduğu gibi katmanlı bir gereksinime ihtiyaç duyacaksak; absolute özelliğini kullanıyoruz. Absolute özelliğinde kendisini kapsayan ata nesne yoksa doğrudan web sayfasına göre konumlanacaktır varsa ata nesneye göre relative olarak konumlanacaktır.


Aşağıdaki CSS kodu da bayrak üzerine yazacağımız yazıyı biçimlendirmektedir. Önceki kodlara çok benziyor sadece burada ekrana göre büyüklüğü değişen font-size parametresi geldi. Yazılarımızın sol tarafa yapışmaması için bir padding-left tanımladık, bunun da ekranın %2'si kadar olacağını belirttik. Yine soldaki dış boşluk olarak margin değerimizi ekranın %25'i olarak ayarladık.  


.text-center{
   display: block;
   margin-left: 25%;
   padding-left: 2%;
   position: absolute;
   font-size:1.5vw;
 
}

Kodumuzun tamamı aşağıda yer almaktadır. 

<!DOCTYPE html>
<html>
<head>
<title>Zemin döşeme</title>
 
<style type="text/css">
 
.image-center {
  display: block;
  width: 50%;
  margin-left: 25%;
  position: absolute;
}
 
.text-center{
   display: block;
  margin-left: 25%;
  padding-left: 2%;
  position: absolute;
  font-size:1.5vw;
 
}
 
body{
    color:#FFF;
    font-size: 20px;
}
 
</style>
</head>
<body>
 
<img class="image-center" src="bayrak3.jpg">
 
<p class="text-center">
 
İSTİKLAL MARŞI 10 KITASI VE SÖZLERİ<br/><br/>
Korkma, sönmez bu şafaklarda yüzen al sancak;<br/>
Sönmeden yurdumun üstünde tüten en son ocak.<br/>
O benim milletimin yıldızıdır, parlayacak;<br/>
O benimdir, o benim milletimindir ancak.<br/><br/>
 
Çatma, kurban olayım, çehreni ey nazlı hilal!<br/>
Kahraman ırkıma bir gül! Ne bu şiddet, bu celal?<br/>
Sana olmaz dökülen kanlarımız sonra helal...<br/>
Hakkıdır, hakk'a tapan, milletimin istiklal!<br/><br/><br/>
 
Mehmet Akif Ersoy
</p>
 
 
 
</body>
</html>



Sanırım yararlı ve zengin bir yazı oldu. CSS dünyası çok geniş,  fakat artık CSS olmadan profesyonel işler çıkarmak mümkün değil. Bu nedenle CSS olmazsa olmaz ve mutlaka web tasarımda öğrenmemiz gereken bir teknoloji. 

Mutlu Kodlamalar,
Oğuzhan TAŞ
Mart, 2019
Bookmark and Share