Yazar: Volkan Görgülü | Yayın Tarihi: 25 Eylül 2008 | Yorumlar: 33 Yorum
Kategori: CSS & XHTML

Arkadaşlar size hemen şu soruyu sormak istiyorum, aşağıdaki kutunun sağ üst, sağ alt ve sol alt köşelerinde bulunan bağlantıları kodlarken, nasıl bir yöntem kullanırsınız?

XHTML Kısmından Bahsetmiyorum

Başlık ve paragraf kendini belli ediyor zaten, arkadaşlarınla paylaş, düşüncelerini paylaş ve
favorilerine ekle bağlantıları için kullandığım etiketleri de aşağıdaki resimde belirttim.

CSS Kısmına Gelelim

İzin verirseniz sorumu güncelleyim, üç bağlantıyı kutunun köşelerine almak için CSS’in hangi özelliklerini kullanırdınız?

Float Özelliği?

Float özelliğini kullanabilirim ama aşağıdaki resimde görüldüğü gibi bağlantılar div‘deki padding değerinden etkilenecekleri için köşelere yapışık olmazlardı.

Tamam belki bir takım ekstra çözümler üreterek float kullanabiliriz ama emin olun bunlara hiç gerek yok. Ayrıca aşağıda bulunan resimdeki gibi kutuların yüksekliğinin sabit olduğu bir durum düşünürsek, aşağıdaki resimde görüldüğü gibi bu bağlantılar yazının kısa olduğu durumlarda, alt sınırdan daha uzak, yazının uzun olduğu durumlarda ise alt sınıra daha yakın olacaklardır.

Çözüm: Position Relative ve Position Absolute

CSS’in position özellikleri genelde çok kullanılan özellikler değil ve bir şekilde gizemli geliyor yeni başlayan arkadaşlara ya da bir şekilde kavranamıyorlar. Ama inanın bana çok basitler. Ve bende bu tip örnekli paylaşımlar ile bu konuda sizleri aydınlatmayı planlıyorum.

position: absolute ile birlikte top, bottom, left ve right özelliklerini kullanarak herhangi bir öğeyi sayfanın istediğimiz yerine yerleştirebiliyoruz.

Zaten Absolute kelimesinin türkçe karşılığıda kesin ve net anlamlarına geliyor. Relative kelimesi ise bağlı ya da ilişkili anlamına geliyor.

Öyleyse ben position:absolute değerini kullanarak istediğim öğreyi istediğim yere yerleştirebiliyorsam bu özelliği kutunun içindeki bağlantılar içinde kullanabilirim.

Ama işte burada bir püf noktası var! Belki siz de daha önce absolute değerini kullanarak yapmaya çalıştınız ama olmadı.

Aslında tüm mesele, resimde gördüğünüz gibi, position: absolute değerine sahip bağlantıları kapsayan, div etiketinede position: relative değerini vererek bağlantılar ile div‘i ilişkilendirmek.

Yani diğer bir deyişle bağlantıların position: absolute ve top, left,bottom, right değerleri için sayfa genelini değilde içinde bulundukları div‘i baz almalarını sağlıyoruz.

Sizde denemeler yapmak için, bu paylaşımda kullandığım örneği bu bağlantıyı kullanarak bilgisayarınıza indirebilirsiniz.

Özellikle denemenizi istediğim nokta div etiketinden position: relative değerini kaldırmanız.

Güncellendi (26 Eylül 2008)

Ayrıca bu konu ve z-index ile ilgili Salih S. Demir’in blogunda yaptığı paylaşımıda incelemenizi tavsiye ederim.

Umarım

Faydalı bir paylaşım olmuştur, sizlerde bu tekniğin kullanımlarına örnekler gösterebilirsiniz ya da düşüncelerinizi paylaşabilirsiniz, position konusuna genel olarak değinmektense bu şekilde birebir örnekler vererek değinmek istedim, daha faydalı olacağını düşündüm.

Web Deneyimleri’ni Takip Edin

Arkadaşlar önümüzdeki günlerde çok daha kaliteli paylaşımlar, etkinlikler ve organizasyonlar sizleri bekliyor, başlıkta da dediğim gibi Web Deneyimleri’ni takip etmeye devam edin.

Takip etmek içinde RSS, Twitter ya da FriendFeed yayınlarımı kullanabilirsiniz.

Bir sonraki paylaşımda görüşmek üzere, kendinize çok iyi bakın.

Başka bir paylaşımımı inceleyebilirsiniz

« Büyük Çekiliş

JPG’i PNG 24 ile ve GIF’i PNG 8 ile dövüştürüyorum »