Aslında bu sistemi K2 teması kullanıyor. Ben de kodu oradan çıkarıp ihtiyaçlarıma göre düzenledim. Gelin size nasıl yapıldığını anlatayım.

Çalışma şekli şu: Birkaç satırlık bir javascript kodu JQuery yardımıyla içeriğinizi barındıran div (burada #container diye adlandıralım) sayfanın en üst noktasına ulaştığında body’ye “smartposition” sınıfını ekliyor. Eğer #container tekrar gözle görünür hale gelirse “smartposition” sınıfı body’den çıkarılıyor. Siz de CSS üzerinden menünüze “smartposition” sınıfı eklendiğinde “position: fixed” komutunu atıyorsunuz. Herşey bundan ibaret.

1. JQuery’i indirin ve sayfanızdan çağırın

JQuery’i sitesi üzerinden indirin, web sitenizin bulunduğu klasöre atın ve sayfanızdan çağırın. Bunun dışında az sonra oluşturacağımız “rollingdiv.js” dosyasını da şimdiden çağırın:

<script src="scripts/jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="scripts/rollingdiv.js" type="text/javascript"><!--mce:1--></script>

2. Rollingdiv.js

Herşey burada bitiyor. Yukarıda çağırmış olduğumuz rollingdiv.js isimli dosyayı ilgili klasörde oluşturun ve aşağıdaki kodu belgeye yapıştırın:

function smartPosition(obj) {
	if ( jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 ) {
		return;
	}
 
	jQuery(window).scroll(function() {
		// Detect if content is being scroll offscreen.
		if ( (document.documentElement.scrollTop || document.body.scrollTop) >= jQuery(obj).offset().top) {
			jQuery('body').addClass('smartposition');
		} else {
			jQuery('body').removeClass('smartposition');
		}
	});
};

(Not: Kod K2 temasından alınmıştır.)

3. HTML belgesi

Şimdi de HTML belgemize aşağıdaki kodu yapıştırıyoruz:

<script type="text/javascript"><!--mce:2--></script>

Buradaki “#container” elementi yukarıya ulaştığında harekete geçilecek olan element oluyor. Bu adımla birlikte HTML ve JS bölümünü bitirmiş oluyoruz. Yani #container divimiz sayfanın tepesine ulaştığında sayfanın body’sine “smartposition” sınıfı eklenecek, son görüntü şu halde olacak;

CSS belgesi

Yapmamız gereken son şey CSS belgemizden “smartposition” sınıflı body’ye özel komutlar atamak. Bu adımda tamamen özgürsünüz; sayfanızın arkaplanının kırmızı olmasını da isteyebilirsiniz, navigasyonunuzun havada asılı kalmasını da. Bu örnekte isteğimiz ikinci şık olduğundan, CSS’imize aşağıdaki kodu eklememiz gerekiyor;

body.smartposition #navigation {
	position: fixed;
	z-index: 10;
}

Bitti bile! “position:fixed;” özelliği #navigation isimli alanın (div) veya listenin (ul, ol) havada asılı kalmasını sağlıyor. Tabii sadece “smartposition” sınıfı body’ye ekli olduğunda. Yani içerik alanımız (div#container) sayfanın tepesine ulaştığında…

Yukarıdaki kodu isteğinize göre değiştirebilirsiniz. Bunun temel mantığı anlatmaya yeteceğini düşünüyorum. Sorularınız, ek istekleriniz olursa yorum yazarak bana ulaşabilirsiniz.

Güncelleme – 07.10.08, 18:45

Bu yöntem IE6′da çalışmamaktadır. Çünkü IE6 ‘position: fixed;’ komunutu anlamamaktadır. Fakat bunu çözmek için birçok yöntem bulunuyor… Kısaca göz atmak yeterli.

En önemli neden olarak Photoshop taslaklarının »tıklanabilir« olmamasının gösterildiği yazıda, grafik editöründe detaylara harcanan sürenin tamamen kayıp zaman olduğu anlatılmış. Ayrıca bu programda metinlerin normal bir HTML sayfasına göre çok farklı olduğuna da değinilmiş. Daha birçok madde sıralamışlar, tamamına buradan ulaşabilirsiniz.

37signals‘daki bu arkadaşlar farklı bir konuya değinmiş olsalar bile, bu konuya dar bir açıdan baktıklarını düşünüyorum. Hoş, eğer siz de sadece kendi projeleriniz için çalışmaktaysanız, Photoshop’ta detaylarla uğraşmak zaman kaybetmek için en kolay yöntemdir. Bu durumda kağıda çizim yapabilir veya favori text editörünüzle işe koyulabilirsiniz; sonuçta taslağınızı CSS/XHTML’e çevirecek, tüm detayları son olarak orada vereceksiniz.

Fakat müşterileriniz için çalışmaktaysanız, durum yazının yazarlarının bahsettiği kadar kolay olmuyor. Müşteriniz ilk görüşmede de, son konuşmada da birçok detay görmek isteyeceğinden Photoshop’la biraz daha fazla zaman geçirmeniz gerekmekte. Böyle bir durumda müşteriyle önceden görüşmek, ve onun isteklerine göre bir yol izlemek en iyisi. Unutulmaması gereken şu ki, eğer CSS/XHMTL çevirimini siz yapmayacaksanız, Photoshop’la biraz daha haşır neşir olmalı, en küçük detaylara bile inmelisiniz. 

Alman tasarımcı Manuela Hoffmann‘a göre ise, ilk görüşmede kesinlikle birden fazla grafik taslalığının müşteriye sunulmaması gerekiyor. Bu, zaman kaybından başka birşey değilmiş. Bence de :-).

Tasarımımızda yan yana üç kutumuz olduğunu düşünelim. height elementi ile kolonların uzunluğunu önceden belirlemezsek, bu üç kutunun boyutları içeriğe göre değişecektir;

Fakat tasarımımızın gereksinimlerine göre, üç kolonun boyutunun en uzun kolonunkine göre otomatik olarak uzatılması gerekebilir. Kelimelerin bittiği yerde, işler yine resimlere düşüyor;

Faux Columns

‘Faux Columns‘ methodu, bu konuda en çok kullanılan methodların başında geliyor. Aslında konsept çok basit: Tüm div’leri kaplayan bir ana kutu oluşturuyor ve bu kutuya üç kolonu kaplayan, 1 piksel yüksekliğinde bir arkaplan resmi atıyoruz. Diğer üç kolonu içeren bu kutunun boyutu içeriğe göre otomatik olarak uzayacağından dolayı, arkaplan sorunumuz da çözülmüş olacak. Örnek için tıklayınız.

Lütfen unutmayın: ana kutunun içerisinde bulunan 3 kutuya float:left; efekti uygulandığından, kapsayıcı div’imiz ilk adımda otomatik olarak uzamayacaktır. Bunun için kapsayıcı kutuya da float:left; efektini atayabilir, veya hemen altında yeni bir div oluşturarak kendisine clear:both özelliğini ekleyebilirsiniz.

Diğer Metodlar

Bu en çok kullanılan ve en kolay yöntem olsa da, aynı sonuca ulaşmanın farklı yolları da yok değil. Örneğin kolon genişliklerinin elastik olmasını ve tarayıcı boyutuna göre otomatik olarak değişmesini istiyorsanız, belirli genişlikteki arkaplan resimleri size ne yazık ki yardımcı olamayacaktır. Bu durumda internette dolaşan birçok JS kodunun yardımını alabileceğiniz gibi, Ed Eliot tarafından yazılmış olan bu güzel makaleye de göz atabilirsiniz.

Yeniliklerden geri kalmamamız için, yeni versiyonun getirdiği gelişme ve avantajlardan bahsedip, yepyeni kullanım tekniğine bir göz atmak istiyorum.

Dikkat: Eğer girişten pek de birşey anlamadıysanız ve “sIFR” kelimesini yanlış yazdığımızı düşünüyorsanız, tekniğin tanıtıldığı yazının giriş bölümünü okumanızı tavsiye ederim.

Yenilikler

sIFR 3′ün getirdiği yenilikler, gerek metnin gösterilmesi, gerek kullanım kolaylığı açısından birçok şeyi geliştirdi, kolaylaştırdı.

• Daha kolay ve iyi font boyutu ayarlama
• FlashCSS; genel anlamda birden çok renk ve metin stillerini bir arada kullanma
• Pixel font desteği
• Daha kolay ve ayrıntılı kurulum
• Flash dosyasının içinden arkaplan atama desteği

Kurulum

Öncelikle şu anki en güncel versiyon olan ‘Revision 278‘i bu bağlantı üzerinden indiriniz. İndirmiş olduğunuz ’sifr3-r278.zip’ dosyasının içinden aşağıdaki dosyaların çıkması gerekiyor;- changelog.txt
- css klasörü
- demo klasörü
- flash klasörü
- js klasörü
- LICENCE

‘CSS’ klasörü gerekli olan CSS dosyalarını, ‘demo’ klasörü çalışan bir demoyu, ‘flash’ klasörü gerekli SWF dosyasını oluşturabilmeniz için gerekli dosyaları, ‘js’ klasörü ile gerekli javascript dosyalarını içeriyor.

Dikkat: En önemli kurulum değişikliklerinden biri, sIFR’in artık sadece bir sunucu üzerinde çalışması. Yani HTML dosyalarını direk açtığınızda hatalı veya eksik gösterim olabileceğinden, sIFR’i ya bir sunucu üzerine, ya da local sunucunuz üzerinde kurmanız tavsiye olunur.

Flash dosyası

‘Flash’ klasöründe bulunan sIFR.fla dosyasını Adobe Flash programı ile açınız (30 günlük test versiyonunu Adobe sitesi üzerinden indirebilirsiniz.). Aynı klasörde bulunan diğer 3 dosyanın yerini değiştirmemeye dikkat ediniz. SWF dosyasının kaydı sırasında bu 3 dosyanın aynı klasörde bulunması gerektiğini lütfen unutmayınız.

Dosyayı açtıktan sonra, karşınıza gelen beyaz alana çift tıklayınız. “Bold Italic Normal” şeklinde bir metinle karşılaşacaksınız.

Dosya boyutunu yüksek tutmamak için tüm metni silin. Ardından, istediğiniz fontu seçip 3 harf girdikten sonra sırasıyla kalın, italik ve normal versiyonlarını seçin. Eğer özel karakterleri de Flash dosyanıza eklemek istiyorsanız (örneğin Türkçe karakterler, rakamlar ve noktalama işaretleri) aşağı palette bulunan ‘embed’ butonuna tıklayıp eklemek istediğiniz karakterleri karşınıza gelen alana girin.

Son olarak, File -> Export -> Export Movie üzerinden Flash dosyasını çıkartın. Şimdi, işin HTML bölümü için hazırsınız.

HTML dosyası

HTML dosyanızda yapmanız gereken tek şey, gerekli CSS ve Javascript dosyalarını kodlarınıza entegre etmek.

1
2

<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

Şimdi de JS kodlarının yerlerine gitme vakti geldi;

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Kodları kopyaladıktan sonra, lütfen dosyaların çağrıldığı adresin doğru olduğuna emin olunuz.

JS dosyası

Ve en büyük yeniliklerin olduğu alandayız. JS üzerinde yapacağımız değişikliklerle sIFR’li başlıklarımızı güzelleştireceğiz.

Eskiden HTML dosyasının içerisine yazdığımız sIFR başlık görünüm kodları, artık sifr-config.js dosyasının içinde olduğundan, bu dosyayı favori metin editörünüzle açın. Bu boş sayfada öncelikle sIFR başlığımızın adını tanımlayacağız, ardından font dosyamızı çağıracağız. Resmi sitede verilen ‘cochin’ isimli fontun örneğini alırsak, kodumuz aşağıdaki şekilde olabilir.

1

var cochin = {src: 'cochin.swf'};

var kodunun yanına istediğiniz herhangi bir ismi verebilirsiniz. Bu ismi daha sonra aktifleştirme sırasında çağıracağız. cochin.swf dosyasının yolunu sunucuya göre verdiğimizden, dosyanın yolunu, bulunduğu klasöre göre /cochin.swf ve ../../cochin.swf şeklinde de çağırabiliriz.

Şimdi, başlıkarı çağırma ve aktifleştirme zamanı;

1
2

sIFR.prefetch(cochin);
sIFR.activate(cochin);

Eğer birden fazla başlık stili tanımladıysanız (örneğin cochin, times, ornek gibi…), bunları bir virgül yardımıyla çağırıp aktifleştirebilirsiniz;

1
2

sIFR.prefetch(cochin, times, ornek);
sIFR.activate(cochin, times, ornek);

Ve son olarak, standart başlığın sIFR ile değiştirilmesi için ihtiyaç duyduğumuz kodu ekleyelim. Bu aynı zamanda tüm stillerin ve özelliklerin verildiği bölüm olacak;

1

sIFR.replace(cochin, { selector: 'h1'});

Bu şekilde, oluşturduğumuz cochin ismindeki stil, cochin.swf ile tüm h1‘lerin yerine görüntülenecek. Yukarıda h1′in tanımlanmış olduğu selektöre hangi başlık ve stilleri tanımlayabileceğinizi öğrenmek için, resmi sitedeki bu kaynak yeterli olacaktır.

Ve şimdi işin en güzel yanına gelelim; bu versiyonla gelen taze bir özelliğin yardımıyla, başlıklarımıza artık direk JS üzerinden, kolayca stil verebiliyor, link stillerini atayabiliyoruz;

1
2
3
4
5
6

sIFR.replace(cochin, {selector: 'h1',css: [
'.sIFR-root { text-align: center; font-weight: bold; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #CCCCCC; }'
]});

Ve CSS…

Javascript’i aktif olmayan, veya Flash Player’a sahip olmayan kullanıcıların başlıklarınızı en iyi şekilde görebilmeleri için, CSS dosyasında düzenleme yapabilirsiniz. Ayrıca sIFR’li başlıklarınızın metin boyutları da bu dosyadan alınacaktır. Bunun için sIFR-screen.css dosyasını açın.

1
2
3
4
5
6

.sIFR-active h1 {
  visibility: hidden;
  font-family: Verdana;
  line-height: 1em;
  font-size: 18px;
}

sIFR-active‘e yapı gereği ihtiyaç duyulmakta. visibility: hidden; sIFR aktif olduğunda normal metni saklıyor. font-family ise deaktif durumda gösterilen başlığın fontunu belirliyor. İdeal gösterim için line-height: 1em kodunu da stilinize ekleyin. font-size başlıkların genel font boyutunu belirliyor.

Laf aramızda…

Hem estetiksel, hem fonksiyonel açıdan ziyaretçilerinizi rahatlatmak için sitenize 5 dk. ayırın, ve gerekli gördüğünüz yerlerde sIFR’in sunduğu güzelliklerden yararlanın. Yeni resmi sitesine buradan, resmi (İngilizce) kurulum kılavuzuna buradan, makyaj konuları hakkınd ayrıntılı bilgilere buradan, Javascript’le yapabileceğiniz sihirlerin kullanım kılavuzuna buradan, bu kadar bağlantı yeter diyorsanız da, internetin sonuna buradan ulaşabilirsiniz.

Güncelleme

Volkan Görgülü sIFR tekniğini kullanma yöntemlerini güzel bir video ile anlatmış. Kelimelerin size yetmediğini düşünüyorsanız video’yu buradan izleyebilirsiniz.

Michael Dell 8 yaşındayken bir derginin arka kapağında gördüğü ‘Tek sınavla lise diploması’ ilanına hemen başvurur. Başvurusunu onaylamak için evine gelen bir kadını karşılayan annesi, oğlunun banyoda olduğu söyler, neler döndüğünü anlamakta da gecikmez. Daha sonra kadının karşısına kırmızı bornozlu, sekiz yaşındaki Dell çıkar.

Dell bu başvurusunu ‘Tek bir basit sınav karşılığında okulun 9 yılını atlamak bana gayet iyi bir fikir gibi gelmişti’ cümlesiyle açıklarken, şu an belki de önünüzde duran mönitördeki ‘Dell’ yazısının oluşması için belki de ilk adımlarını farketmeden atıyordu.

Aslında size de gayet mantıklı geldi değil mi? Dell’in o cesareti kendisinde bulup, hiçbir bilgisi olmadan o sınav ile diploma almak istemesi, kendi deyimiyle ‘gereksiz şeylerin ortadan kaldırılması’ oldukça iyi bir fikir. Kendimizce Dell’e benzemek, onun gibi gereksiz adımları kaldırmak için gidip dergilerin arka kapaklarında ‘tek sınavla lise diploması’ ilanları aramamıza gerek yok. İşimizde web tasarımcılığı olduğuna göre ‘Tuzu Migros’tan alacağınıza en yakın bakkaldan alın’ veya ‘Ekmeği üç lokmada yiyeceğinize iki lokmada yiyerek zaman kazanın’ da demeyeceğimize göre, sanırım yavaş yavaş konuya girebiliriz.

- Öfff, yine mi CSS? -

Dell: Gereksiz adımları ortadan kaldırın!

CSS’in tasarımcılara sağladığı güzellikler sadece yararlı özelliklerde kalmıyor, ayrıca bu listeye kolay kodlama, ve bununla birlikte gelen ‘gereksiz adımları ortadan kaldırma’ da eklenebiliyor. Daha önceki bir yazıda, css’de aynı özellikleri barındıran elementleri gruplayabileceğimizden bahsetmiştim (Bkz. ‘Bahar temizliğine ne dersiniz?‘ Asıl konuya girmeden önce, gruplama işlemine basitçe dönüp, bildiklerimizi pekiştirelim;

Şöyle ki, aynı özellikleri barındıran elementleri çift kez yazmaktansa virgül (,) kullanarak, bu elementlerin özelliklerini tek satırda belirtebiliyorduk;

Yanlış (veya iyi değil);

Doğru (veya daha iyi);

Bir de, yine gruplama işlemi var ki, birkaç özelliklerin iç özelliklerini (evet anlamadınız biliyorum, fakat bu Türkçe ile benden ancak bu kadarı geliyor. En iyisi örnekle pekiştirelim.) gruplayabiliyoruz. Daha önce büyük ihtimalle karşılaşmış olduğunuz bu özelliği örnekte de gördüğüzde ‘Aa, ben bunu biliyorum’ diyeceksiniz.

Let’s go baby!

İsterseniz küçük bir metin stili ile başlayalım. Sıra dışı olmayan, minik bir stil oluşturalım;

1

.metinstil { font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma; font-size:12px; font-variant:small-caps; font-style:italic; }

font-family: Kullanıcıya metnin yazı tipini seçme imkanı veriyor.
font-size: Kullanıcıya metnin büyüklüğünü belirleme imkanı veriyor.
font-variant: Kullanıcıya harf türünü seçme imkanı veriyor (Büyük harfler, küçük harfler, vs)
font-style: Kullanıcıya metnin stilini belirleme imkanı veriyor (Eğik yazı, kalın yazı vs)

Her ne kadar stilimiz şu an hoş görünse de, kodlama olarak çok daha ‘hoş’ duruma getirilebilir durumda. Zira W3C bu durumu da düşünüp, tüm özellikleri tek bir elemente vermeyi, bu örnekte ‘font’ elementine sığdırmayı mümkün kılmış;

1

font: font-style font-variant font-weight font-size/line-height font-family;

Yukarıda biraz karışık görünen kod, aslında çok kolay anlaşılabilir durumda;

1

.metinstil { font: italic small-caps 12px "Lucida Grande", "Lucida Sans Unicode", Tahoma; }

Gördüğünüz gibi, metinstil stiline verdiğimiz tüm özellikleri tek bir element altında toplamayı başardık.

Büyük kolaylık getiren bu gruplama özelliğini, birçok css özelliği üzerinde kullanabiliriz;

1
2

.arkaplan { background-image:url(resim.gif); background-repeat:no-repeat; background-position:bottom; }
.arkaplan { background:url(resim.gif) no-repeat bottom; }

1
2

.kenarlik { border-width:1px; border-style:solid; border-color:#000; }
.kenarlik { border:1px solid #000; }

Bu örnekleri artirmaniz, ve daha geniş bilgiyi W3Schools üzerinde bulmanız mümkün.

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.