Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

... konulu sunumlar: "Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu"— Sunum transkripti:

1 Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
CSS ile Konumlandırma Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

2 CSS ile Konumlandırma CSS ile sayfamızı kodlarken katmanlar ve diğer html elemanlarının sayfadaki yerleşimlerini ayarlamak için css in position özelliğini iyi anlamamız gerekir. Position özelliğine başlamadan önce html elemanları içerisinde bir ayrımdan bahsetmek gerekir. Html elemanları blok düzeyi ve satır düzeyi olarak 2 sınıfa ayırmak mümkündür. Bu konumlandırma da farklılıklar oluşturduğu için önemlidir. İkisi arasındaki temel fark; blok düzeyi elemanlar kendilerine yeni satır oluştururlar. Yani satır başı yaparlar ve tüm satırı kendilerine ayırırlar. (<div>, <p>, <h1>, <h2>,… gibi) Satır düzeyi elemanlar ise satır içerisinde kullanılır ve bir kayma boşluk oluşturmazlar. (<a>, <strong>,… gibi) Yine temel farklardan biri blok düzeyi elemanlara genişlik ve yükseklik verilirken, satır düzeyi elemanlara verilemez.

3 Statik Konumlandırma (position:static)
Eğer position özelliği belirtilemezse varsayılan değer olarak position özelliği static olarak kabul edilir. Bu konumlandırma şeklinde katmana dış boşluk değerleri verilerek bir konum belirlenir. CSS’de dış boşluk için margin özelliği kullanılır. Margin kullanımına örnekler:

4 Statik Konumlandırma (position:static)
Eğer tasiyici id’li katmanınız varsa ve aşağıdaki biçimlendirmeyi verirseniniz Sayfanın üstünden 100 piksel aşağı inmiş ve yatayda ortalı bir kutucuk görürsünüz. Auto değeri genelde yatayda ortalamak için kullanılır. Sağdan ve soldan değer verilmez ve auto denirse otomatik olarak eşit boşluklar verilir.

5 Statik Konumlandırma (position:static)
Satic konumlandırma başlığı altında önemli bir konudan daha bahsedelim. Bu da float özelliğidir. Eğer genişlik ve yükseklik değerleri verilmiş katmanları yan yana dizmek istersek, katmanlar blok düzeyi olduğu için başlangıçta bu mümkün olmaz ve katmanlar alt alta dizilir.

6 Statik Konumlandırma (position:static)
Katmanları yan yana dizmek için float uygulamalısınız. Ortak sınıfına float özelliği verelim ve katmanların yan yana dizildiğini görelim:

7 Statik Konumlandırma (position:static)
Float özelliği left değerini aldığı gibi right değerini de alabilir. Şimdi float kullanımındaki bazı problemlerden bahsedelim: Float Problemleri 1-) Yalnızca kırmızı katmana float uygularsak aşağıdaki görüntü oluşur: Göründüğü üzere mavi katman kayıp Problemin Tanımı: Bir elemana float uygulandığında o eleman normal akışın dışına çıkar. Diğer elemanlar onu görmezden gelir. Mavi katman şu an kırmızı katmanın altındadır. Bu uygulama kırmızı katmanın altında yazılar varsa, onları katman etrafına sardırmak için kullanılabilir. Sorunu ortadan kaldırmak için mavi katmana clear özelliği uygulanmalıdır. Bu şekilde float olayının sonlanması ve normal akışa devam edilmesi söylenir.

8 Statik Konumlandırma (position:static)

9 Statik Konumlandırma (position:static)
Float Problemleri 2-) Float uygulanan katmanın dışında bir katman varsa kapsayamama sorunu oluşur. Örnekteki 3 katmanın dışına bir taşıyıcı katman oluşturalım: Katmanlarımız aşağıdaki şekilde görünecektir:

10 Statik Konumlandırma (position:static)
Float Problemleri Şimdi sarı katmana float uygulayalım ve sonucu görelim:

11 Statik Konumlandırma (position:static)
Problemin Tanımı: Daha önce de söylediğimiz gibi float uygulanan katman normal akışın dışına çıkar ve diğer katmanlar onu yok kabul eder. Burada da kapsayıcı katman onu (sarı katmanı) yüksekliğe dahil etmedi. Bu problemin çözümü 2 yolla olabilir. Birincisi tasiyici katmana overflow özelliği eklenebilir. Bu taşma varsa otomatik boyutlan anlamına gelecektir.

12 Statik Konumlandırma (position:static)
Problemin Tanımı: İkincisi ise sarı katmandan sonra blok düzeyi bir elemana ilk problemde olduğu gibi clear uygulamak. Yeri önemlidir. Tasiyici katmanın bitiş tagından önce, sarı katmanın yani id’si uc olan katmanın bitiş tagından sonra olmalıdır.

13 Göreceli Konumlandırma (position:relative)
Bir katmanın position özelliğini relative yaparak, göreceli konumlandırma yapacağımızı söyleriz. Position özelliği relative olan katman yanındaki katmanlara göre bir konum alacaktır. En önemli özelliği şu ki, diğer katmanlar normal akışına devam eder. Yani relative olarak ayarlanmış katman yeni pozisyonuna gitmiş olsa bile diğer katmanlar eski yerindeymiş gibi davranacaktır. Relative ve sonraki konumlandırma işlemlerinde left, right, top ve bottom özellikleri kullanılır. Bu özellikler statik konumlandırma da kullanılmaz.

14 Göreceli Konumlandırma (position:relative)
Bir önceki uygulamamızın ilk haline geri dönelim: Sadece mavi katmana şu özellikleri verelim ve sonuçları görelim: Görüldüğü üzere mavi katman soldan 20 piksel, yukarıdan (kırmızı katmandan) 30 piksel uzaklaştı ve daha da önemlisi sarı katman pozisyonunu değiştirmedi. Aynı şekilde tasiyici eleman da yükseklik olarak bir değişikliğe uğramadı.

15 Mutlak Konumlandırma (position:absolute)
Position özelliği absolute olan katmanın yeni konumu, eğer üst eleman relative olarak tanımlanmışsa üst elemana göre belirlenir. Aksi halde kök elemana (<body> ) göre belirlenecektir. Margin özelliği static ve relative konumlandırma da kullanılır ancak, absolute konumlandırma da kullanılamaz. Bir önceki örneğimizi ilk haline getirelim ve yine sadece mavi katmana özellikler ekleyelim: Mavi katmanın üst katmanı olan tasiyici relative olmadığı için absolute olan mavi katman <body> ye yani pencereye göre konumlandı. Aynı zamanda diğer katmanlar mavi katman yokmuş gibi davrandı.

16 Mutlak Konumlandırma (position:absolute)
Bir de tasiyici katmanı relative yaparak deneyelim: Bu kez konumlandırma tasiyici elemana göre yapıldı ve mavi katman hala diğer katmanların umrunda değil  Yeri gelmişken mutlak konumlandırma yapılırken katmanlar üst üstte bindiğinde hangisinin daha üstte olacağını belirlemek için z-index özelliği kullanılır. Yukarıdaki örnekte yalnızca mavi katman absolute olduğu için doğrudan o üstte görünüyor. Şimdi sarı ve kırmızı katmana da absolute değerler verelim, sağa yaslayalım ve üst üstte gelmelerini sağlayalım:

17 Mutlak Konumlandırma (position:absolute)
İki katman da (mavi ve sarı) absolute olduğundan z- index değeri büyük olan katman üstte görünmektedir. Fakat biz z-index değeri falan vermedik. Sayfada yazım sırası sonda olan elemanın z-index değeri daha büyüktür. Bunu değiştirmek istersek z-index değerini kendimiz tanımlamalıyız.

18 Mutlak Konumlandırma (position:absolute)
Görüldüğü üzere mavi katmanın z-index değeri, sarı katmandan daha büyük olduğu için üste çıktı.

19 Sabit Konumlandırma (position:fixed)
Bu konumlandırma şeklinde istediğimiz katmanı sayfada istediğimiz yere çakılı olarak bırakabiliriz. Sayfa kaydırma çubukları ile kaydırıldığında fixed olarak belirlenen katman sabit bir şekilde kalacaktır. Bu konumlandırma şeklinde üst katmanın relative olması da farketmez kendini pencereye göre konumlandırır. Özellikle bazı sayfalarda reklam alanlarının sayfada aşağı inseniz de sabit kaldığını görürsünüz.

20 Sabit Konumlandırma (position:fixed)
Aşağıdaki gibi bir sayfamız var. İd’si ust alan olan katmanı penceresinin en üstüne sabitlemek istiyoruz.

21 Sabit Konumlandırma (position:fixed)
Aşağıdaki biçim özelliklerini uygulayın: Pembe katmanın bulunduğu noktada sabit kaldığını yazıların bu katmanın altından kaydığını görmekteyiz.