Kayıt Ol

Giriş

Şifremi Kaybettim

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

soru ekleme

Soru sormak için giriş yapmalısınız.

Giriş

Kayıt Ol

.........

CSS Çerçeveler Ve Konumlandırma Özellikleri

CSS Çerçeveler Ve Konumlandırma Özellikleri

CSS’yi anlamak ve ona hakim olmak için bilinmesi gereken bir konu çerçeveler(display) konusudur.Tablosuz bir web tasarımı, daha temiz kod, daha az sorun ve daha kullanışlı bir web sitesi demektir.Bunu anlamak içinde çerçeve modelini iyi bilmemiz gerekir.Klasik tablo tasarımlarında satır ve sütunlara yerleştirilen içerik üzerinde oynama yapma şansınız yoktur.Ayrıca dörtgen tasarımların dışına sizi çıkarmaz.Bu da sizin hayal gücünüzü kısıtlanması demektir.Çerçeveler ile tablosuz tasarım yaparak daha güzel web sayfaları oluşturabilirsiniz.

ÇERÇEVELER(DISPLAY)

Blok seviyesinde olmayan bir nesneyi blok seviyesine getirmek için veya tam zıddı olarak blok  seviyesinden bir satır seviyesine indirgemek için kullanılır.Blok seviyesi bütün nesneler aksi belirtilmediği sürece bir çerçeve üretir.Satır içi seviyesi nesneleri (<a>,<strong>,<em> gibi) çerçeve üretmez.display aşağıdaki değerleri alır.

inline: Bu değer satır atlamadan yan yana sıralama yapar.

block: Bir nesneyi blok haline getirip nesnelerin satır atlamasını sağlar.

list-item:Bir nesneyi liste gibi sıralar,genellikle listelerde kullanılır.

run-in:Satır bitişinin en üstüne taşır.Tarayıcılarda çok fark gösteriyor.

compact:Bu değer bağlama göre bir blok veya satıriçi çerçeve üretir.CSS 2.1’de kaldırıldı.

marker:Bu değer <li> nesnelerine çerçeve uygular.CSS 2.1’de kaldırıldı.

table,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell,table-caption: Bu değerler bir elemanın bir tablo elemanı gibi davranmasına sebep olur.

none:Bu değer bir nesnenin hiçbir çerçeve üretmemesine sebep olur(gösterilmez).

Internet Explorer 7 ve üzeri tarayıcılarda inline-table,run-in,table,table-caption,table-cell,table-column-group,table-row ve table-row-group değerleri desteklenmiyor.

<p> paragrafı normalde satır içi seviyesi nesnedir.Ama display ile onu blok seviyesi nesnesine çeviriyoruz.

 

KONUMLANDIRMA ÖZELLİKLERİ

Nesneler her zaman sola dayalı olarak yerleştirilir.İkinci nesne birinci nesnenin sağına oturur.Üçüncü nesne ise ikincinin sağına yerleşir.Eğer sayfanın sağına geldiğimizde yer kalmamış ise bir alt satırdan tekrar yerleşim devam eder.Peki istediğimiz nesneyi sayfanın sağına nasıl yerleştireceğiz? Bu problemin çözümü float’tır.

float özelliği CSS ile tablosuz web tasarımı oluşturma metodunun en önemli öğelerinden biridir.Siz bir nesneye float:left değeri verirseniz diğer nesnenin sağına yerleşir.

FLOAT

Birden fazla kutu üzerinde çalışmak istersek nasıl olacak? Dediğimiz gibi nesneler sola yaslı olarak sıralanır.

CLEAR

Bir yerden sonra float’ı kesmemiz gerekir.Aksi takdirde float devam ettikçe sol yada sağ tarafa nesneler yığılacaktır.clear ile en son float kesilir ve normal nesne akış düzenine geçilir.

Hakkında Yazılım Geliştiricileri


Beni Takip Et

Leave a reply

*