CSS ile Konumlandırma

Bu 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.



Kod Alanı:

<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 Augustosun 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 Auustusun 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%



Kod Alanı:

<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:



Kod Alanı:

<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



Kod Alanı:

<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>



<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>








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.



Kod Alanı:

<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.



Kod Alanı:

<html>

<head>

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

<style>

<!--

p {visibility: visible}

h1 {visibility: hidden}

-->

</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>






HTMLde 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.
EğitimCSScss nedircssde nesnekonumlandirma
CSS Dersleri

Ara

Eğitim


Konular

Tags

Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.