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

Slides:



Advertisements
Benzer bir sunumlar
TOPRAĞIN HİKAYESİ HORİZON: Toprağı meydana getiren katmanlara horizon adı verilir. TOPRAK: Toprak taşların parçalanması ve ayrışmasıyla meydana gelen,
Advertisements

Mastarlar.
Algoritma.  Algoritma, belirli bir görevi yerine getiren sonlu sayıdaki işlemler dizisidir.  Başka bir deyişle; bir sorunu çözebilmek için gerekli olan.
Web Teknolojileri Hafta 3 1. İçerik  Cascading Style Sheets - CSS 2.

İÇERİK YÖNETİM SİSTEMİ Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.
Önem Testleri. Örnekleme yoluyla sağlanan bilgiden hareketle; Kliniklerde hasta hayvanlara uygulanan yeni bir tedavi yönteminin eskisine kıyasla bir farklılık.
YEDEKLEME NEDIR? Gülşen Güler. YEDEKLEME NEDIR? Yedekleme, en genel anlamıyla, bir bilgisayar sistemini işlevsel kılan temel birimlerin, üzerinde çalışan.
Girişimcilik Öğr.Gör.Seda AKIN GÜRDAL. Ders Akışı İşletmenin Amaçları İşletme Çevre İlişkisi.
LUCA Bilgisayarlı muhasebe programı
ÖTÖ 451 Okul Yönetiminde Bilgisayar Uygulamaları R. Orçun Madran.
Hazırlayan: Dr. Emine CABI
Türkiyedeki iklim çeşitleri Doğa Sever 10/F Coğrafya Performans.
1. Ders Bir, İki ve Üç Yazarlı Eserlerin Kataloglanması Prof. Dr. Bülent Yılmaz Arş. Gör. Tolga Çakmak.
DİYARBAKIR 2008.
BÖLÜM 12 SÜSPANSİYON SİSTEMİ. BÖLÜM 12 SÜSPANSİYON SİSTEMİ.
OLASILIK TEOREMLERİ Permütasyon
EQUIZSHOW.
Sözsüz İletişimin Özellikleri
ÇOK BOYUTLU SİNYAL İŞLEME
BİLGİSAYAR PROGRAMLAMA DERSİ
İndeksi Niçin Kullanırız?
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
Bölüm 11: Çembersel Hareket. Bölüm 11: Çembersel Hareket.
KDV BEYANNAMESİ / MUHTASAR BEYANNAME / KURUMLAR VERGİSİ BEYANNAMESİ / GEÇİCİ VERGİ BEYANNAMESİ’NDE ORTAK ÖZELLİKLER F5 PENCERESİ Beyannamelerde yer alacak.
Sıklık Dağılımları Yrd. Doç. Dr. Emine Cabı.
ISTATİSTİK I FIRAT EMİR DERS II.
Mikroişlemciler Temel I/O Arayüzleri.
MİKROEKONOMİ YRD. DOÇ. DR. ÇİĞDEM BÖRKE TUNALI
MODEL YETERSİZLİKLERİNİ DÜZELTMEK İÇİN DÖNÜŞÜMLER VE AĞIRLIKLANDIRMA
MAT – 101 Temel Matematik Mustafa Sezer PEHLİVAN *
Çiğdem ÇOBAN Bilgisayar Mühendisi
Mikroişlemciler Temel I/O Arayüzleri.
TEMEL GEOMETRİK KAVRAMLAR VE ÇİZİMLER
Fluvyal Jeomorfoloji Yrd. Doç. Dr. Levent Uncu.
VELİLER İÇİN ANKET GİRİŞİ
RESİM VE RESİM DÜZENLEME İŞLEMLERİ
TEKNİK RESİM GÖRÜNÜŞ (12. HAFTA).
Kırınım, Girişim ve Müzik
ZEE ZİHİN ENGELLİLERE BECERİ VE KAVRAM ÖĞRETİMİ
Swİtch çeşİtlerİ – GÖKÇE TENEKECİ.
BÖLÜM 7 SIVILAR VE GAZLAR. BÖLÜM 7 SIVILAR VE GAZLAR.
KUVVET, MOMENT ve DENGE 2.1. Kuvvet
SİSMİK PROSPEKSİYON DERS-3
PARAMETRİK HİPOTEZ TESTLERİ
ŞEKİLLER.
SDCC kullanarak Amstrad CPC için yapılmıştır
Madde Aynı Madde, Görünümü Değişti
Bu konudaki her şeyi okuyun Microsoft SharePoint Haberler
Benzetim 11. Ders İmalat Yönetimde Benzetim.
MADDEYİ TANIYALIM.
Paralel Yüzeylerden Kırılma Görünür Uzaklık
TEKNOLOJİ VE TASARIM DERSİ 7.D.1. Özgün Ürünümü Tasarlıyorum.
NİŞANTAŞI ÜNİVERSİTESİ
CİSİMLERİN GÖRÜNÜŞLERİNİ ÇIKARMA
Bilgisayar II 26 Nisan-7Mayıs Öğr. Gör. Feyza Tekinbaş.
NİŞANTAŞI ÜNİVERSİTESİ
Bilgisayar Bilimi Koşullu Durumlar.
NİŞANTAŞI ÜNİVERSİTESİ
Değerler ve Değişkenler
NİŞANTAŞI ÜNİVERSİTESİ
NİŞANTAŞI ÜNİVERSİTESİ
BLM-111 PROGRAMLAMA DİLLERİ I Ders-10 Diziler
BİLGİSAYAR (4) Öğr. Gör. Feyza Tekinbaş.
Kesikli Olay benzetimi Bileşenleri
14. EKİPLE ÖĞRETİM İKİ KAFA TEK KAFADAN DAHA İYİDİR ( Two heads are better than one) ingiliz atasözü.
İleri Algoritma Analizi
RASTGELE DEĞİŞKENLER Herhangi bir özellik bakımından birimlerin almış oldukları farklı değerlere değişken denir. Rastgele değişken ise tanım aralığında.
Bilimsel Araştırma Yöntemleri
Bilimsel araştırma türleri (Deneysel Desenler)
Sunum transkripti:

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

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.

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:

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.

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.

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:

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.

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.

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:

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.

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:

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

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.

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.

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.

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

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

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:

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.

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

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.

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.

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.