Merhabalar
Png dosyalarına css ile pozisyon verip bu resimlerin istediğimiz yerini kordinatlarla gösterebiliriz.
örnek olarak Google’ da arama yaptıktan sonra, çıkan sayfanın logosuna baktığınızda, aslında bir logoda birden fazla resim içeriği bulacaksınız.

Yukarıda görüldüğü gibi En üstte bir adet yanında yon button img leri bulunan bir logo var ki bu arama yaptığınız sayfanın en altında Goooooooogle gibi uzuyan kısım onun altındada sol üst köşede gözüken ana logo var..
Aslında google css içine top:-26px ve left: 0 px satırlarını ekliyerek uzayan logoyu, yukarıdan -26 kadar yukarıya çekerek sadece ana google logosunun görünmesini sağlıyor.
Peki nasıl mı?
öncelikle css i hazılıyalım..
#logo{
display:block;
overflow:hidden;
position:relative;
width:150px;
height:52px;
margin:14px 0 7px}
#logo img{
border:none;
position:absolute;
left:0;
top:-26px}
Yukarıdaki css’ de #logo da önemli olan 2 unsur var birtanesi overflow ötekisi ise position.
overflow: Türkçeye taşmak(overflow) olarak çevirdiğimiz bu özellik sınırlarını belirlediğimiz kutu elementinin içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğe atanan değerleri tek tek incelersek.
- inherit - kalıtsallık üst elementin değerini alabilir
- visible - kutu sınırları dışına taşan alanları göster
- hidden - kutu sınırları dışına taşan alanları gizle.
- scroll - kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
- auto - kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.
#logo’ da bir width:150px olan ve height:52px; olan bir kutucuk var ve bu kutucuğun dışında kalan yerler overflow:hidden; ile gizlenecek.
Önemli olan diğer unsur ise Position.
position: divleri veya diğer nesneleri istediğimiz gibi yerleştirmek bir başka deyişle pozisyon vermek için kullanılır.
Positionun komutları:
absolute ( mutlak, şartsız )
Nesneyi tarayıcı penceresinin orjinleri baz alınarak pozisyon vermek için kullanılır.
fixed ( sabit, oynamaz )
Nesneyi tarayıcı penceresinin orjinleri baz alınarak sabitlenmek için kullanılır. Yani scroll ile sayfa aşağıya kaydırıldığında nesnede hareket ederek tarayıcıdaki yerini her zaman korur. IE 7 için geçerlidir…
relative ( ilgili, göreceli )
Nesneyi sayfadaki mevcut yeri baz alınarak pozisyon vermek için kullanılır.
static ( statik )
Nesneye pozisyon verilmeyeceğini belirtir. Verdiğimiz pozisyon değerleri göz ardı edilir. Varsayılan seçenektir.
“#logo img” bölümünde position:absolute; left:0; ve top:-26px satırlarını göreceksiniz, burada ise verilen img’ nin soldan 0 yukarıdanda -26 olarak kaydırılması komutu yazılmış yani logoda da görüldüğü üzere yukarıda iki tane google yazısı vardır biri yön okları ile beraber daha küçük diğeri hemen altındaki büyük google yazısı top:-26px yazıldığında yukarıdaki google yazısı kadar yukarıya kaydırıyor logoyu ve dolayısıylada browser’ ın dışına taşan yukarıdaki google yazısı görünmez.
Şimdi gelelim html kısmına.
<table>
<tr>
<td style=”padding-right:8px“>
<h1><a id=logo href=”http://www.google.com/webhp?hl=tr“ title=”Google Anasayfası’na Git“>Google<img width=150 height=105 src=”/images/nav_logo3.png“ alt=”"></a></h1>
</td>
</tr>
</table>
html kodların’ da dikkatinizi çekmesi gereken <a href ibaresindeki id=”logo” kısmı. Hatırlarsanız Yukarıda Css te #logo ve #logo img css taglarını yazmıştık. burda #logo dışarıya taşan kısımları göstemeyen ve boyutları width:150px, height:52px, margin:14px 0 7p ve position:relative olan kutucuk,
#logo img ise <a href id=”logo” olan linkin içinde link verilmiş bir img lduğunu ve bu img’ nin bu kutucuğun içinde position:relative, soldan 0 (left:0), yukarıdan -26px (top: -26px) yukarıya kaydırılmasını söylüyor.
yani htmlde şekil itibariyle şöyle gözükmesi gerek:

yandada görüldüğü gibi sadece kutucuğun içerisindeki Google yazısı gözükecek, dışarıda kalan kısımlar gözükmeyecek.
Yazan: Aras Çağlıuzun







