Çağdaş web tasarımı veriyi XHTML ile etiketlendirmek ve CSS ile ona görsel özellikler kazandırmak üzerine kurulu. Burada web için görsel tasarım yaparken akılda tutulması gereken birkaç önemli nokta var.

CSS’de konumlandırmayı temel olarak iki şekilde yapıyoruz. Bunlardan biri dökümanı kendi doğal akışına bırakıp width, margin, padding ve float değerleri vererek konumlandırmak. Bu bize kullandığımız bir paragraf yazının genişliğini belirtmemizi, içinde geçecek bir resmi sağa ya da sola yaslayıp yazının devam edip akıp gitmesini, sütunlar oluşturabilmemizi, menü sütunlarının sayfa içindeki sırasına bakmaksızın sağda ya da solda durmasına karar verebilmemizi sağlıyor.

İkincisi ise bunlarla beraber ve bunların yanısıra sayfadaki herhangi bir ögeye bizzat sayfa içinde bir konum vermemizi sağlayan position, top, right, bottom ve left.

Bunları kullanırken dikkat etmemiz gereken püf noktaları;

position: absolute; ile konumlandırdığımız bir nesne, içinde olduğu nesnenin sınırlarına göre değerlendirilir. Ancak böyle olabilmesi için dış nesnenin mutlaka position değeri belirlenmiş olmalı. Eğer belirlenmemişse pozisyon değeri verdiğimiz nesne body tag’ine göre konumlanır. Yani sayfanın sol üst köşesine göre değer alır. Bu nedenle eğer dış nesneye özel bir konum vermek istemiyorsak sadece konum türünü belirtecek bir ifade koymalıyız ki bu da position: relative; olacaktır.

Örneklemek gerekirse, aşağıya değerleri belirli bazı nesneler yerleştireceğim.

.ahmet {
width: 500px;
height: 400px;
margin: 30px auto;
background: yellow;
position: relative;
}

.mehmet {
width: 200px;
height: 150px;
background: #999;
position: absolute;
top: 30px;
left: 20px;
}

Dikkat ettiyseniz .ahmet’in pozisyon türünü relative olarak belirlediğim halde ona herhangi bir pozisyon değeri vermedim. Böylece onun top, right, bottom, left pozisyon değerleri default değerler olan sıfır olarak kaldı. Peki o halde neden .ahmet tarayıcı ekranının sol üst köşesinde değil? Neden top:0; left:0; olduğu halde orada durmuyor?

Çünkü position: relative; demek, bir nesnenin dökümanın normal akışı içindeki yerine göre konumlandırmak demek. Yani position: relative; dedikten sonra top: 20px; derseniz bu demektir ki o nesne normalde dökümanın içinde duracağı yerden 20 piksel daha aşağıda duracak. left: -30px; dersem normalde başlayacağı yere göre 30 pixel daha soldan başlayacak.

İyi konumlandırmalar dilerim.

Benzer yazılar:

• CSS ve XHTML ile Temel Sayfa Tasarımı
• Tablosuz Tasarım Fetişi ve Erişilebilirliği Zayıf Web Standartları
• Bir iletişim biçimi olarak kıskançlık
• Web Tasarımında Tabloların Kullanımı

Rastgele yazılar:

• Gazeteler Niçin Çarşaf Kadar?
• Virginia Tech, Johnson Uzay Merkezi ve Malatya
• Halk daima haklıdır
• Kadına Yönelik Şiddete Karşı Uluslararası Mücadele ve Dayanışma Günü