CSS Hizalama
Web tasarımı genellikle yazı tipleri, renkler ve grafik öğelerinden daha fazlasını ifade eder. Bir çeşit yerleşim planı da web tasarımının alanına girer. Bir web tasarımcısının yerleşim planı tasarlamak için başlıca üç aracı vardır:
- Tablolar (Tables),
- Yüzdürme (Float),
- Hizalama (Positioning),
Tabloları kullanarak yerleşim planı hazırlamak geçen yüzyıla ait bir yöntemdir. Yüzdürme ise hangi sütunun en uzun olduğunu bilmediğiniz zamanlarda en işe yarayan yöntem olarak görülür. Eski web tarayıcıları ve Internet Explorer yüzdürme konusunda çok başarılı değildir – ama bu ayrı bir konu.
Hizalama ise CSS 2’nin belki de en yanlış anlaşılmış bölümlerinden biridir. Şimdi nasıl çalıştıklarına biraz daha yakından bakalım.
Tam hizalama (absolute positioning) bazen CSS-P olarak da anılır. Dreamweaver kullanan yeni tasarımcılar bu yapının Dreamweaver’da katmanlar (layers) olarak isimlendirildiğini bilir. Şansız bir isimlendirme, çünkü Netscape’in <layer> elementi ile karıştırılabilir.
Biz işe en baştan başlayalım. CSS’in position özelliği dört farklı değer alabilir (bir de inherit değeri):
- Sabit (static),
- Göreceli (relative),
- Tam (absolute),
- Değişmez (fixed),
Static değeri dışındaki tüm değerler için elementin pozisyonunu top (üst), alt (bottom),sol (left) ve sağ (right) özelliklerini kullanarak değiştirebiliriz.
Sabit Hizalama
Zaten varsayılan değer olan position:static özelliğine sahip elementler belge içinde hizalanmaz. Belge içindeki yerleri kodda yerleştirildikleri yerle aynıdır.Static değeri sadece önceden ayarlanmış bir değeri iptal etmek için kullanılabilir.
Biz bu yazıda –çok doğru olmasa da– “sabit hizalanmış” ifadesini kullanacağız.
Göreceli Hizalama
CSS’de position:relative olarak ayarlanmış elementler kendilerine göre hizalanırlar. Kulağa garip gelebilir ama bazen yararlı olabiliyor.
Elementin dört köşesinden herhangi biri için bir değer belirttiğimizde, göreceli hizalanacak olan bu element sabit hizalı durumuna göre yazılan değerler kadar kaydırılır.
Neyden bahsettiğimiz tam anlaşılamamış olabilir ama durum gayet mantıklıdır. Elemente hiçbir konum değeri belirtmeden, sadece position:relative değeri atadığımızda element, hiç position değeri atamamış gibi olması gereken yerde kalır.
Eğer top:10px ayarlarsak element, üst kenarından 10 piksel kayar. Kayma yönü ise aşağı doğrudur. Negatif bir değer ise kayma yönünü tersine çevirir. Yani az önceki aynı etkiyi bottom:-10px değeri ile de elde edebiliriz. Bu durumda, top ve bottom ya da left ve right değerlerini aynı anda vermemize gerek olmadığı görülür.
Göreceli hizalama sütunlar yaratmak için yeterince yararlı değildir, çünkü göreceli hizalanmış bir nesne belge akışındaki yerini korur – yani olması gerektiği yeri korur. Element sayfada hem olması gereken yerde hem de hizaladığınız yerde yer kaplamaya devam eder.
Peki, bütün bunlar bizim için ne ifade ediyor? Göreceli hizalama genellikle bir elementi herhangi bir yönde birkaç piksel kaydırma işlemi için yararlıdır. Ya da sayfanızda bir “deliğe” sahip olursunuz. Fakat göreceli hizalama için çok daha önemli bir bilgi var: Göreceli hizalanmış bir element “hizalanmış” sayılır, tek bir piksel bile yerinden oynatmamış olsanız bile o element artık hizalıdır. Az sonra bu bilginin önemini göreceğiz.
Tam Hizalama
Kaymanlar, CSS-P ya da hizalama deyince insanları normalde anladıkları; position:absolute özelliğine sahip elementlerdir. Top, bottom, left ve right değerleri ilgili köşelerden olan uzaklıktır. Fakat… Neye göre uzaklık?
İroniktir, tam hizalama aslında görecelidir. Evet, doğru okudunuz. Tam hizalanmış bir element, kapsayan blok denen bir elemente göre hizalanır.
Tam hizalanmış bir elementin kapsayan bloğu, o elemente en yakın “hizalanmış üst bloktur”. Eğer üst blok yoksa kapsayan blok, sayfanın kendisi olur.
“Hizalanmış blok”la, sayfa yapısında elementten daha üstte duran ve position özelliği absolute, fixed ya da relative olan bir bloktan bahsediyoruz. Burada az önce bahsettiğimiz göreceli hizalanmış elementlerin önemi ortaya çıkıyor. Bir element için position:relative özelliğini verdiğimizde ve hiçbir kaydırma yapmadığımızda, tam hizalanmış elementimiz için bir barınak oluşturmuş oluyoruz. Kolay gibi, değil mi?
Peki, ya hizalanmış bir üst blok yoksa? Bu durumda karşımıza “temel taşıyıcı blok” çıkar. CSS standardı bu kavramın “user agent” tarafından seçildiğini söyler. (“User agent” web sayfasını işleyen yazılımdır.) Standart aynı zamanda elementin, görüş alanına göre göreceli hizalanacağını söyler. Pratikte bu, HTML ya da BODY elementidir.
Tam hizalanmış elementler belge akışından tümüyle kaldırılır. Yani, hiçbir yer kaplamazlar. Ya da, daha farklı ifade etmek gerekirse, alt elementleri etkilemezler.
top:100px özelliğine sahip bir tam hizalanmış element, taşıyıcı üst bloğundan 100 piksel aşağıya yerleştirilir. CSS destekleyen web tarayıcılarda element için tüm dört köşenin konumlarını belirlerseniz, elementin yükseklik ve genişliği otomatik olarak hesaplanır. Fakat Internet Explorer bu özellikten yoksundur. Bu sebeple tam hizalanmış bir elementin en azından genişliğini de belirtmek gereklidir.
Köşeler için negatif değerler de belirtebilirsiniz. Fakat taşıyıcı blok hakkında tam bilgiye sahip değilseniz elementi tümüyle ekranın dışında bir yere bile taşıyabilirsiniz.
Değişmez Hizalama
Tam hizalamanın aslında göreceli olduğunu az önce söylemiştim. Değişmez hizalamanın da tam hizalandığını söylesem şaşırmazsınız artık.
Özelliği position:fixed olarak ayarlanmış bir element görüş alanına göre (web tarayıcı penceresi) tam olarak hizalanır. Değişmez hizalama, tam hizalamaya benzese de arada farklar vardır. Elementin pozisyonu her zaman web tarayıcı penceresine göre hizalanır. Web tarayıcı penceresi her zaman taşıyıcı bloktur. Element belge akışından kaldırılır ve sayfa kaydırılsa bile yerini korur.
(Yine) Internet Explorer değişmez hizalamayı desteklemez. Bu durumun üstesinden gelmek için az ya da çok karışık olan birden çok yöntem mevcut. Ne olursa olsun, değişmez hizalama tahmin edildiği kadar çok yararlı bir hizalama şekli değil. Tabi ki, sayfanın sağında ya da solunda her zaman görünen bir menüye sahip olmak isteyebilirsiniz, fakat günümüzde çoğu kullanıcı sayfayı aşağı kaydırdığında sayfa üzerindeki her şeyin de yukarı kaymasını bekler.
Sonuç
Hangi sütunun en uzun olduğunu bildiğiniz sürece tam hizalama çok sütunlu yerleşimler için mükemmeldir. Tam hizalanmış elementler sayfa akışından tümüyle kaldırıldığı için alt elementleri etkilemez. Fakat birden çok sütun kullandıktan sonra tam genişliğe sahip bir altbilgi satırı (footer) yaratmak oldukça zordur.
Her web tasarımında hizalama için göreceli birimleri kullanmanız tasarımın farklı pencere boyutlarına uyum sağlaması için zorunludur. Örneğin, left değeri için em ya da % kullanmalısınız, px değil.
Tam hizalanmış bir element için genişliği (ya da sağ ve sol hizaları) yüzde cinsinden belirtirseniz standartlar bu durumda genişliğin taşıyıcı bloğa göre otomatik hesaplanacağını söyler. Internet Explorer ve Opera bu durumda çuvallar. Sorunla başa çıkmak için taşıyıcı bloğa bir genişlik değeri vermelisiniz. Gecko tabanlı Mozilla ve Firefox gibi tarayıcılar bu konuda sorun çıkarmıyor.
Göreceli de dahil olmak üzere tüm hizalamalarda padding ve magrin değerlerini açıkça belirtmelisiniz ki tüm web tarayıcılarda içerik istediğiniz gibi görüntülensin. Farklı tarayıcılar için bu değerler farklıdır.
Eğer hizalanmış elementlerde üst üste binme olduysa, z-index özelliğini ayarlayarak elementlerin sırasını belirleyebiliriz. Z-index değeri ne kadar artarsa element o kadar üstte olur. Siz belirlemeseniz bile her elementin bir z-index değeri olduğu için karışıklık çıkabilir. Büyük ölçekli tasarımlarda içinden çıkılamaz durumlar oluşturabilirsiniz.
Tam hizalama genelde DIV elementleri için kullanılsa da, her türlü elementi hizalamak için yararlıdır.
NOT:
Bu makale Autistic Cuckoo sitesinde İngilizce olarak Tommy Olsson tarafından 7 Aralık 2004 tarihinde yayınlanmıştır. Çeviride anlamı bozmayacak şekilde ekleme ve çıkarmalar yapılmıştır.