CSS’i hepimiz seviyoruz, hatta bazılarımız hem birer CSS aşığı, hem de birer CSS profesyoneli olarak yazımızda misafir olarak yer ediniyorlar.

Evet, CSS’i hepimiz çok seviyoruz. Ama bazen kendimizi tutamayıp
öyle tasarımlar yapıyoruz ki, div yapısını inşaa etmeye başlamadan önce kahvemizi önümüze alıp derin bir nefes çekiyor, ve öylece başlıyoruz, zira yaptığımız tasarım misafir tasarımcılarımızı bile zorlayacak türden olabiliyor.

Doğru, CSS’i hepimiz çok seviyoruz. Ama yaptığımız tasarımın
zorluğundan dolayı, onu CSS’e dökerken bin dereden su getirebiliyoruz.
Açtığımız div’lerin, atadığımız margin ve padding’lerin sayısını
sayamaz hale geldiğimiz zaman farklı şeyler düşünme zamanımızın
geldiğini anlıyoruz.

Gelin bu yazıda, position:relative; ve position:absolute;
özelliklerini iç içe kullanarak nasıl kolay yoldan zor çözüme
gidebileceğimizi tartışalım.

Öncelikle;

Absolute ve Relative yardımıyla bir öğeyi pozisyonlama hakkında ön bilgi için bu bağlantıya göz atın.

Hazırlamak İstediğimiz

Bu daracık sayfada çok karışık şeyleri anlatma şansım olmadığı için,
son adıma geldiğimizde böyle bir yorum kutusuna sahip olmak istiyoruz.

Yorum kutumuzu hazırlarken aşağıdaki adımları izleyeceğiz;

Aslında yapacağımız şey çok basit, ihtiyacımız olan üç adet div var.
Ama benim burada üzerinde durmak istediğim şey, daha çok
position:relative; ve position:absolute; özelliklerini alt alta
kullanarak, çözüme kolay yoldan ulaşmak.

HTML Dosyası

Gördüğünüz gibi, yorum metninin bulunduğu ana div’imiz yorum yazarı ve tarihin bulunduğu divleri içeriyor.

Not:

HTML kodlarında da gördüğünüz gibi, tüm div’lerimize class değerini
veriyoruz, zira yorum kutuları birden fazla kez tekrarlanabiliyor.
Class ve ID arasındaki farkın ne olduğunu bilmiyorsanız, Cemshid‘in yazdığı güzel makaleye göz atın.

Adım 1 (Bkz. Resim 1) (Bkz. Resim 1)

Ana div’imizi hazırlamadan önce genel görünüm ayarlarını
hazırlıyoruz. Sayfamızdaki metinlerin boyutları aksi belirtilmedikçe 12
pixel büyüklüğünde olacak. Tüm bu metinler için Lucida Grande yazı tipi
kullanılacak. Eğer Lucida Grande kullanıcının sisteminde kayıtlı
değilse alternatif olarak Lucida Sans Unicode, eğer bu da sistemde
bulunamazsa Arial yazı tipi kullanılacak;

İlk adımımızda 310×95 pixel büyüklüğündeki ana div’imizi oluşturup,
artalan arkaplanımızı bu divimize atıyoruz. Son olarak bu div’e #CCC
renginde 1 pixellik bir kenar ekliyoruz. Yazıların kenarlara olan
uzaklıklarını ‘padding’ özelliği ile atıyoruz; yazılar üst kenara 30
pixel, diğer kenarlara 10′ar pixel uzaklıkta olacaklar.

Ve en önemli adımlardan biri olan bu adımda, ana div’imize
position:relative; özelliğini atıyoruz. Bu özellik, daha sonra diğer
iki div’de de kullanacağımız olan position:absolute; özelliğine bağlı
olan ‘top’ ve ‘left’ (ayrıca ‘right’ ve ‘bottom’) değerlerini bu div’in
üzerinde uygulanmasını sağlayacak.

Ana div’imize (Bkz. Resim 1) ait olan stilin son hali şu şekilde görünüyor;

Adım 2 (Bkz. Resim 2)

Ana div’imizi tamamladık bile. Şimdi, position:absolute; özelliğini kullanarak yerleştireceğimiz isim kutucuğumuza göz atıyoruz.
Resim 2‘de gördüğümüz gibi, kutumuzun kenar
kalınlığı 1 pixel, ve kenar rengi #ccc olacak. Ayrıca kutunun padding
değeri 5px olup, arkaplan rengi de #FFFFCA olacak.

Bu adımın son bölümünde isim kutucuğumuzu ait olduğu yere yerleştireceğiz.
Bildiğiniz gibi, position:absolute; değerini verdikten sonra top, right, bottom veya left değerlerinden ikisinin yardımıyla bir öğeyi istediğimiz yere yerleştirebiliyoruz. Ancak, bu kutucuğa sayfa kenarlarından işletilecek bir değer veremiyoruz, zira bu kutunun sayfa başının değil, sadece ana kutunun (main_container) 10 pixel yukarısına yerleşmesi gerekiyor. Bu nedenle ilk adımımızda ana div’imize position:relative; kodunu ekledik. HTML kodunda da görebileceğiniz üzere, ana div’in, yani main_container divinin içine eklediğimiz bu isim kutucuğuna (name) atayacağımız position:absolute; özelliğinden sonra, vereceğimiz herhangi bir top, left, right, left değeri bu kutu üzerinden işletilecektir.

Sonuç olarak; ‘name’ öğesine position:absolute; özelliğini atar, ve ardından top:10px; left:10px; değerlerini verirsek, bu div ana div‘in (main_container) içerisine yukarıdan ve soldan 10 pixellik boşlukla yerleşecektir.

Kutucuğumuzun ana div’in 10 pixel yukarısına ve 10 pixel soluna
yerleşmesi gerektiği için, vereceğimiz top ve left değerleri (-) olmak
zorundalar;

Bu düzenlemelerden sonra yorum kutumuz şu şekilde görünüyor;

Genel görünümü ortaya çıkmış olan kutumuzun artık sadece adres kutucuğunu yapmamız gerekiyor.

Adım 3 (Bkz. Resim 3)

Son adıma ulaştık bile. Şimdi yapmamız gereken tek şey adres
kutucuğumuz. Bu kutu da isim kutumuzla aynı olmasına rağmen, kutunun
sola değil, sağa yerleşmesi gerekiyor. Bu nedenle isim kutuğumuz için
kullandığımız kodun aynısını kullanıyor, fakat left:-10px; değeri
yerine right:-10px; değeri veriyoruz.

Ve tüm bu işlemlerin ardından kutumuz son görünümüne kavuşuyor.

CSS Dosyası

Bugünlük bu kadardı, umarım anlatmak istediğimi anlatabilmişimdir :)
Örnek dosyasına buradan göz atabilir, dosyayı bu bağlantı üzerinden indirebilirsiniz.