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

... konulu sunumlar: "CSS ile Konumlandırma Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu."— Sunum transkripti:

1 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. (,,,,… gibi)  Satır düzeyi elemanlar ise satır içerisinde kullanılır ve bir kayma boşluk oluşturmazlar. (,,… gibi)  Yine temel farklardan biri blok düzeyi elemanlara genişlik ve yükseklik verilirken, satır düzeyi elemanlara verilemez.

3 CSS Display Özelliği  Aşağıdaki gibi kodlanmış bir sayfamız olsun:  Blok düzeyi eleman( ) ve satır düzeyi eleman olan ( ve ) aşağıdaki gibi görüntülenir:

4 CSS Display Özelliği  Eğer istenirse css’in display özelliği ile blok düzeyi elemanlar satır düzeyine ya da satır düzeyi elemanlar blok düzeyine dönüştürülebilir.

5 CSS Display Özelliği  Display özelliği none değerini aldığında ise o eleman sayfada görüntülenmez.  Açılır menülerde kullanılan bir özelliktir.

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

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

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

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

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

11 Statik Konumlandırma (position:static)

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

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

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

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

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

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

18 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 ( ) 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 ye yani pencereye göre konumlandı.  Aynı zamanda diğer katmanlar mavi katman yokmuş gibi davrandı.

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

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

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

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

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

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