$1.99 Domains* at GoDaddy.com

CSS Konumlandırma

css1Bu sayfada HTML nesnelerinin CSS ile sayfa içinde nasıl konumlandırılacağını göreceğiz.

Nesne Yüzdürme

İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği verirsek nesne sağda, left özelliği verirsek solda, none özelliğini verirsek yazıldığı yerde konumlandırılır.

 

<html>

<head>

<title>Nesne Konumlandırma,</title> 

</head>

<body>

<p style=”text-align: justify”>Augustus sonunda kararını verdi: Dünyayı gezip dolaÅŸacak, insanlara ÅŸu ya da bu ÅŸekilde yardım elini uzatabileceÄŸi ve kendilerine duyduÄŸu sevgiyi açıkça ortaya koyabileceÄŸi bir yer bulup orada kalacaktı.

<img src=”volkan.gif” style=”float: right”>

Yüzünü kimsenin görmek istememesine alışmıştı çaresiz; avurtları çökmüş, gözleri çukura gömülmüştü; sırtındaki giysileri, ayağındaki ayakkabıları gören, onu dilenci sanırdı; sesi ve yürüyüşü de bir zaman herkesin iÅŸitip görmekten haz duyduÄŸu, herkesi büyüleyip hayran bırakan ses ve yürüyüş olmaktan çıkmıştı. Taranmamış bakımsız ak sakalı çocukları korkutuyordu; şık giyimli beyler ve hanımlar ondan kaçıyor, yanında bulunmaktan rahatsızlık duyarak kendilerini adeta pisliÄŸe bulanmış hissediyorlardı; dilenciler ise ellerindeki birkaç lokma yiyeceÄŸe göz dikmiÅŸ bir yabancı sanarak ona kuÅŸkuyla bakıyorlardı. Bütün bunlar da Augustos’un insanlara istediÄŸi gibi hizmet edebilmesini güçleÅŸtirmekteydi.

<img src=”volkan.gif” style=”float: left”>

Ne var ki, her gün yeni bir ÅŸey öğreniyor, asla yılgınlığa kapılmıyordu. Bütün bunlar da Auustus’un insanlara istediÄŸi gibi hizmet edebilmesini güçleÅŸtirmekteydi. Ne var ki, her gün yeni bir ÅŸey öğreniyor, asla yılgınlığa kapılmıyordu. Diyelim bir fırının önünde bir çocuk gördü de çocuÄŸun boyu minik eliyle uzanıp kapının tokmağını çevirmeye yetmiyor, koÅŸup yardım ediyordu hemen. Karşısına kendisinden de çaresiz durumda biri çıktıkça, örenÄŸin bir dilenci ya da sakat biriyle karşılaÅŸtıkça, yolda bir süre ona eÅŸlik edip yardımcı oluyordu; bunu yapamadı diyelim, cebindeki birkaç kuruÅŸu seve seve eline tutuÅŸturuyor, iyilik taÅŸan pırıl pırıl bir bakışı, kardeşçe bir selamı, kendisini anlayıp derdine ortak olduÄŸunu gösteren bir jesti böyle bir kimseden esirgemiyordu. Gezip dolaÅŸtıkça, insanların yüzüne bakar bakmaz onların kendisinden neler beklediÄŸini, yüksek sesle vereceÄŸi giler yüzlü bir selamın mı yoksa sessiz bir bakışının mı ya da hiç yanlarına sokulmayıp uzaktan geçmesinin mi onları memnun bırakacağını anlamaya baÅŸlamıştı.

<img src=”volkan.gif” style=”float: right”>

Dünyadaki onca sefalete karşın yine de sızlanıp şikayet etmeksizin yaşayıp giden insanlara rastladıkça şaşmadan duramıyordu. Her acıyı neşeli bir kahkahanın, her ölüm yasını neşeli bir çocuk şarkısının izlediğini, her sıkıntının, her bayalığın yanında bir güzelliğin, bir esprinin, bir tesellinin, bir gülümsemenin yer aldığını hayranlıkla görüyor, bunu da harikûlade buluyordu.</p>

</body>

</html> 

 

Nesne Boyutları

 

Konumlandırılan HTML nesnesinin büyüklüğünün belirtilmesi de çok önemlidir. Nesnelerin boyutlarını belirlemek için width (en) ve height (boy) özellikleri kullanılır. Bu özelliklere şu şekillerde değerler verilir:

auto Nesnenin boyutlarını gözatıcı otomatik olarak belirler.
  width: auto; height: auto
birimsel değer Nesnenin boyutlarının CSS birimleriyle ifade edilmesidir.
  width: 20px; height: 1cm
yüzde oran Nesnenin boyutlarını, sayfaya olan yüzde oranıyla belirler.
  width: 50%; height: 25%

 

<html>
<head>
<title>Nesne Boyutları,</title> 
</head>
<body>

<img src=”volkan.gif” style=”width: 8cm; height: 10cm”>

</body>
</html> 

Not: width ve height özelliklerini Netscape desteklemiyor.

 

Nesne Konumlandırma

Bundan önceki iki sayfada nesneyi konumlandırmak için dışkenar veya içkenar boşluklarından yararlanıyorduk. Bu özellikler her ne kadar sınır çizgisine olan mesafeyi belirliyorlarsa da, sınır çizgisinin kullanılmadığı zamanlarda pekala konumlandırma aracı olarak da kullanılabilir. Veya sırf konumlandırmak için kullanılan top ve left özelliklerinden yararlanabiliriz. top özelliği nesnenin üstünde bırakılacak boşluğu, left özelliği ise nesnenin solunda bırakılacak boşluğu belirler. Bu özelliklere şu şekilde değerler verebiliriz:

auto Nesnenin bırakacağı boşluğu gözatıcı otomatik olarak belirler.
  top: auto; left: auto
birimsel değer Nesnenin bırakacağı boşluğun CSS birimleriyle ifade edilmesidir.
  top: 20px; left: 1cm
yüzde oran Nesnenin bırakacağı boşluğun sayfaya olan yüzde oranıyla belirler.
  top: 50%; left: 25%

Konumlandırma Türleri

Ancak bu özelliklerin kullanılabilmesi için position (konum) özelliğine değer vermemiz gerekir. Eğer position özelliğinin değeri absolute ise, verilen top ve left değerleri sayfaya veya içinde bulunulan elemana göre konumlandırır:

<html>

<head>

<title>Top ve left özellikleri,</title> 

<style>

<!–

p {position: absolute; top: 200px; left: 100px}

h1 {position: absolute; top: 100px; left: 100px}

–>

</style>

</head>

<body>

<h1>Halikarnas Balıkçısı,</h1>

<p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler… Halikarnas Balıkçısı’nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç deÄŸillerdir. Balıkçı, denize baÄŸlı olarak, güzelliÄŸi, özgürlüğü, baÅŸkaldırıyı, insanoÄŸlunun geçmiÅŸteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliÄŸinden alabildiÄŸine etkin bir anlatımla ortaya koyarak, çaÄŸdaÅŸ insancıl bakışla eski uygarlıklar arasındaki baÄŸları göstermiÅŸtir.</p>

</body>

</html> 

 

Eğer position koduna relative (bağıl) değerini verirsek, top ve left değerleri kendisinden önce tanımlanan nesneye göre konumlandırır:

<html>

<head>

<title>Top ve left özellikleri,</title> 

<style>

<!–

p {position: relative; top: 200px; left: 100px}

h1 {position: relative; top: 100px; left: 100px}

–>

</style>

</head>

<body>

 

</html>

Yukarıdaki iki uygulama arasındaki farkı görebildiniz mi? positon: absolute olan örnekte başlığın tepe çizgisi, sayfanın başından 100 piksel aşağıda; paragrafın tepe çizgisi ise sayfanın başından 200 piksel aşağıda. positon: relative olan örnekte yine başlık aynı konumda ama paragraf sayfa başından değil, başlıktan itibaren 200 piksel aşağıda. Yani sayfa başından 300 piksel aşağıda yer alıyor.

Nesneleri width, height left ve top özellikleriyle kesin olarak konumlandırabilir ve boyutlandırabiliriz. Not1: position özelliğini kullanmayı unutmayın. Not2: Netscape gözatıcılarının width ve height özelliklerini desteklemediğini unutmayın.

<html>

<head>

<title>Top ve left özellikleri,</title> 

<style>

<!–

p

{

position: absolute;

top: 200px;

left: 100px;

width: 400px;

height: 250px;

background-color: red

}

h1

{

position: absolute;

top: 100px;

left: 100px;

width: 400px;

height: 30px;

background-color: blue

}

–>

</style>

</head>

<body>

<h1>Halikarnas Balıkçısı,</h1>

<p>Balıkçılar, sünger avcıları, dalgıçlar, gemiciler… Halikarnas Balıkçısı’nın hikâye ve romanlarıyla gelen bu tipler, sadece edebiyata ilk kez geldikleri için ilginç deÄŸillerdir. Balıkçı, denize baÄŸlı olarak, güzelliÄŸi, özgürlüğü, baÅŸkaldırıyı, insanoÄŸlunun geçmiÅŸteki ve gelecekteki arayışlarını, kayıplarını, bunalımlarını, korkularını, ışığı kırar gibi kendiliÄŸinden alabildiÄŸine etkin bir anlatımla ortaya koyarak, çaÄŸdaÅŸ insancıl bakışla eski uygarlıklar arasındaki baÄŸları göstermiÅŸtir.</p>

</body>

</html> 

 

Görünürlük

Şimdi değil ama ileride görünmez nesneler de koymak isteyeceğiz. (DHTML derslerinde mesela.) Bir nesnenin görünür olup olmamasını visibility (görünürlük) özelliğine visible (görünür) veya hidden (gizli, görünmez) değerleri vererek sağlarız. Not: Bu özelliği Netscape gözatıcıları desteklemiyor.

<html>

<head>

<title>Görünürlük,</title> 

<style>

<!–

p {visibility: visible}

h1 {visibility: hidden}

–>

</style>

</head>

<body>

HTML’de nesneleri konumlandırırken, herkesin sizinle aynı gözatıcıyı (browser’ı) kullanmadığını, herkesin sizinle aynı çözünürlük ve pencere büyüklüğünde çalışmadığını aklınızda tutun.

 

 

 

Kategoriler: CSS, Web Programlama

Tags: , , , ,

Yorumlar

Yorum Yok

Yorumunuzu Ekleyin

Yorum eklemek için giris yapmalısınız.