Stil Sayfaları (CSS) 9 - Pozisyon Ayarları

Web sayfasını oluşturan elemanların konumlarının nasıl olacağını belirlemek için konumlandırma

(position) komutu kullanılır. Konumlandırma işlemlerinde koordinat belirtmek için üst (top),

sağ (right), alt (bottom), sol (left) özellikleri kullanılır. Kutu modeli konusunda bahsedildiği gibi

web sayfasındaki elemanlar, kutu şeklinde sayfaya yerleşmektedir. Her kutunun köşeleri bulunmaktadır.

Bir kutunun köşelerinin koordinatları Görsel 4.22’de görüldüğü gibidir. Elemanlar sol üst

köşeleri belirtilen koordinat noktasına yerleştirilerek konumlandırılır.

Görsel 4.22: Pozisyon ayarları

Statik (Static) Pozisyon: Elemanlar sayfanın normal akışına göre yerini alır. Tüm HTML elemanlarının

varsayılan pozisyon özelliği statictir. Top, right, bottom, left özellikleri bu konumlandırma

komutuyla birlikte çalışmaz.

#Kutu{ position:static; left:100px; top:100px; }

Kutu id’li elemanın pozisyon özelliği static olduğu için belirtilen konuma yerleştirilmez.

Göreceli / Bağlı Pozisyon: Her web sayfasının elemanların yerleşimi için referans aldığı olağan

başlangıç noktası sayfanın sol üst köşe noktasıdır (left:0px; top:0px;).

#Kutu{ position:relative; left:100px; top:100px; }

Göreceli pozisyona sahip bir elemanın sayfadaki diğer elemanların konumlarına göre başlangıç

noktası değişir.

Uygulama

Göreceli pozisyon ile eleman konumlandırma işlemlerini Görsel 4.23’te görüldüğü

şekilde yönergeler doğrultusunda gerçekleştiriniz.

Görsel 4.23: Göreceli pozisyon ayarı

1. Adım: <div> elemanları kullanarak genişliği ve yüksekliği 50 piksel olan dört adet

kutu oluşturunuz.

2. Adım: <div> elemanlarının tümünün display özelliğini; inline-block, arka plan rengi

lightskyblue, kenarlık kalınlığını 2 piksel, kenarlık dokusunu solid, kenarlık rengini

siyah olarak ayarlayınız.

3. Adım: Kutu 3’ün “position” özelliğini göreceli, “left” özelliğini 30 piksel ve “top”

özelliğini 30 piksel olarak ayarlayınız.

HTML	CSS
<div class="kutuSablonu">Kutu 1</div> <div class="kutuSablonu">Kutu 2</div> <div class="kutuSablonu goreceliKutu"> Kutu 3</div> <div class="kutuSablonu">Kutu 4</div>	.kutuSablonu{ display: inline-block; width: 50px; height: 50px; background-color: lightskyblue; border: 2px solid black; } .goreceliKutu{ position: relative; left:30px; top:30px; }

Mutlak Pozisyon: Mutlak pozisyonla konumlandırılacak elemanlar, sayfadaki diğer elemanların

yerleşimini etkilemez ve Görsel 4.23’te görüldüğü gibi onların yerleşimlerinden de etkilenmez.

Mutlak pozisyonla konumlandırılacak elemanlar, göreceli pozisyona sahip bir elaman tarafından

kapsanırsa olağan başlangıç noktasına göre değil, kendisini kapsayan elemanın göreceli başlangıç

noktasına göre konumlanır.

#Kutu{ position:absolute; left:100px; top:100px; }

Sıra Sizde

Uygulama 17’deki “goreceliKutu” sınıfının özellikleri üzerinde değişiklik yaparak Görsel

4.24’de görüldüğü gibi “Kutu 3”ü mutlak pozisyon ayarları ile konumlandırınız.

Görsel 4.24: Mutlak pozisyon ayarı-1

18. Uygulama

Göreceli pozisyona sahip bir elamanın içindeki mutlak pozisyona sahip başka bir elemanı

konumlandırma işlemlerini Görsel 4.25’te görüldüğü şekilde yönergeler doğrultusunda

gerçekleştiriniz.

Görsel 4.25: Mutlak pozisyon ayarı-2

1. Adım: Satır içi görünüme sahip üç adet <div> elemanı oluşturunuz ve <div> elemanları

için arka plan rengi ve kenarlık ayarlayınız.

2. Adım: <div> elemanlarına sırasıyla kutu1, kutu2, kutu3 isimlerinde sınıflar ekleyiniz.

3. Adım: kutu1 sınıfı için stil özelliklerini; genişlik 100 piksel, yükseklik 150 piksel

olarak ayarlayınız.

4. Adım: kutu2 sınıfı için stil özelliklerini; genişlik 200 piksel, yükseklik 150 piksel,

pozisyonu göreceli ayarlayınız.

5. Adım: kutu3 sınıfı için stil özelliklerini; genişlik 120 piksel, yükseklik 70 piksel, pozisyonu

mutlak, left özelliği 50 piksel, top özelliği 50 piksel olacak şekilde ayarlayınız.

HTML	CSS
<div class="kutu1">Kutu 1</div> <div class="kutu2">Kutu 2 <div class="kutu3">Kutu 3</div> </div>	div{ background-color: lightskyblue; display: inline-block; border: 2px solid black; } .kutu1{ width: 100px; height: 150px; } .kutu2{ width: 200px; height: 150px; position: relative; } .kutu3{ width: 120px; height: 70px; position: absolute; left: 50px; top: 50px;}

Sabit Pozisyon: Sabit pozisyona sahip bir eleman olağan başlangıç noktasına göre konumlandırılır.

Sayfa web tarayıcısında aşağıya veya yukarıya kaydırılsa bile sabit pozisyona sahip eleman

konumlandığı yerde asılı bir şekilde durur. Bu özellik genellikle menü, uyarı yazısı, reklam gibi ekranda

sabit bir yerde durması istenen elemanlar için kullanılır.

#Kutu{ position:fixed; left:100px; top:100px; }

Uygulama

Sabit pozisyon ile web sitesi tasarımına aşağı kaydırma tuşu görseli ekleme işlemlerini

Görsel 4.26’da görüldüğü şekilde yönergeler doğrultusunda gerçekleştiriniz.

Görsel 4.26: Kaydırma çubuğu

1. Adım: Float konusundaki Uygulama 15’in kaynak kodlarını açınız.

2. Adım: HTML kodlarına <img> elemanıyla aşağı ok işareti resmi ekleyiniz.

<img id="kaydirmaCubugu" src="asagiOk.png">

3. Adım: Eklediğiniz <img> elemanını sabit pozisyon ile ekranın sağ alt bölümüne

konumlandırınız.

#kaydirmaCubugu

{

position: absolute; bottom:60px; right: 20px; width:30px;

}

Sıra Sizde

Web sayfasına Görsel 4.27’de görüldüğü gibi farklı boylarda olacak şekilde, kırmızı,

siyah ve mavi renklerde sosyal medya bağlantısı için kullanılacak sabit pozisyonlu

div elemanları ekleyiniz ve link bağlantılarını yapınız.

Görsel 4.27: Sosyal medya butonları

20. Uygulama

CSS ile özel kart tasarımı yapma işlemlerini Görsel 4.28’de görüldüğü şekilde yönergeler

doğrultusunda gerçekleştiriniz.

Görsel 4.28: Özel kart tasarımı

1. Adım: Index.html isimli dosya oluşturunuz ve oluşturduğunuz dosyaya Stil.css

dosyasını bağlayınız.

2. Adım: Proje klasörünüze arka plan için bir adet, personel profilleri için üç adet

resim ekleyiniz.

3. Adım: <body> elemanı içine arka plan resmi, profil resmi, bilgilendirme yazıları

eklemek için aşağıdaki kodları yazınız.

<div class="kart">

<div class="profilSablon"> <img src="personel1.jpg" class="profilResim"> </div>

<p><b>Personel 1</b><br> Personel ile ilgili bilgiler buraya yazılacaktır.</p><hr>

</div>

<!-- Diğer personellerin kartları için gerekli kodları buraya yazınız. -->

4. Adım: Stil.css oluşturunuz ve dosya içine aşağıdaki kodları ekleyiniz.

.kart{

width: 150px; height:200px; background-color: #021037;

color:white; border-radius: 10px; text-align: center;

display: inline-block; margin-right:20px;

box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);

}

.profilSablon{

position: relative; width: 150px; height: 100px;

background: url(yildizlar.jpg);

background-size: 150px 100px; background-position: center;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

}

.profilResim{

position: absolute; left:50px; top:75px;

width: 50px; height: 50px; border-radius: 25px;

border:2px solid white; z-index: 2;

}

.kart p{ font-size: 10px; margin-top: 30px; }

.kart b{ font-size: 12px; }

.kart hr{ width: 100px; margin-left:25px; }