CSS position Kuralı
Web nesnelerinin ekran üzerindeki yerleşimlerini belirler.
Burada CSS ile konumlandırma hakkında bilgi vermeye çalışacağız.
Konumlandırma ile alakalı olduğu için blok-level ve inline-level elementlerin tanımını tekrarlayacağız.
Blok-level elementler
Blok-level elementingörünüş formatı bir kutu gibidir. Blok-level elementler inlineelementleri ve diğer blok-level elementleri içerebilir. Tipiközellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li
Inline-level Elementler
Inline-level elementler biriçerik gibi görünür, diğer bir inline elelementiiçerebilir. Yeni satır veya boşluk oluşturmazlar. Örnek: a, strong,span
Ancak bizbu elementlerin başlangıç değerlerini display özelliği ile değiştirebilriz. Yani biz bir inline-level element olan bir linki(<a>....</a>) blok-level bir elemente dönüştürebiliriz. Aynı şekilde bilr blok-level elementi inline elemente dönüştürebilriz.
CSS'deüç temel konumlandırma şekli vardır: normal akış(position:static ve position:relative), float ve mutlak konumlar(position:absolute). Tüm elementler başlangıçta normal akış şeklindekonumlandırılmıştır.
Normal Akış: {position: static}
Eğer sayfalardaki elementlere herhangi bir konumlandırma yapılmamış ise veya float değeri verilmemiş ise sayfaya normal akış konumlandırması uygulanır. Sayfa ilk element en üstte son elementte en sonda olacak şekilde sıra ile aşağı doğru sıralanacaktır.
Inlene kutular yatay olarak tasarlanır. Yatay boşluk margin, padding ve kenarlıkla hesaplanır. Bu nedenle dikey margin, padding ve kenarlık değerleri etkisizdir.
Taga verilen top, left, right, bottom gibi parametrelerdeki değerler dikkate alınmaz.
Mutlak(Absolute) Konumlandırma
Göreceli konumlandırma Normal Akış'ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan element bulunduğu yere boşluk bırakmayacaktır. Diğer elementler normal akıştaki yerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi
Eğer bir ata elementin konumu belirlenmemişse elementimiz ana bloka göre konumalanacaktır. Mutlak konumlandırma HTMLelementi ve sayfa çözünürlüğünü ile ilişkilidir.
Mutlak Konumlandırma ile yerleştirilmiş element sayfada elementi normal akışın dışına çıkarır. Bu element diğer elementlerinüzerine binecektir. Bu üstte kalma altta kalma işinide z-index özelliğiile hallede bilriz. z-index değeri büyük olan element üstte küçük olan element ise altta kalacaktır.
Mutlak konumlandırılmış Tag, eğer top, left, right, bottom değeri verilmişse bu değere uyacak, verilmemişse bu degerleri 0 kabul edip ona göre davranacaktır.
Göreceli Konumlandırma: {position: relative}
Göreceli konumlandırma anlaşılması kolay bir konsepttir. Bir elemente göreceli bir değer verdiğiniz de o bulunduğu yeri dikkate alarak verilen değerleri uygulayacaktır. Bir elementin(göreceli) başlangıç noktasını dikey ve yatay olarak değiştirebilriz. Eğer biz elementin üst(top) değerine 20px tanımlarsak element bulunduğu yerden 20px aşağıya kayacaktır, eğer elementin sol(left) değerini 20px olarak tanımlarsak elementimiz soldan 20px sağa doğru kayacaktır.
Göreceli konumlandırma kullanılarak yeri belirlenen bir elementin başlangıçtaki konumundaki boşluğu ve diğer elementlerle arasındaki mesafeyi koruyacaktır.
position Kuralının Alabileceği Değerler
|Değer||Açıklma||Dene|
|static||Varsayılan değer. Elements render in order, as they appear in the document flow||Dene»|
|absolute||The element is positioned relative to its first positioned (not static) ancestor element||Dene »|
|fixed||The element is positioned relative to the browser window||Dene »|
|relative||The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position||Dene »|
|initial||Sets this property to its default value. Read about initial||Dene »|
|inherit||Inherits this property from its parent element. Read about inherit|
Kaynaklar:
CSS Seçicileri
CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir
27,437
CSS Classları Hakkında
Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale
22,327
Css İle Hizalama İşlemleri
Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.
61,768 29/12/2013
CSS Konumlandırma (Position)
CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.
31,121 29/12/2013
CSS’i Web Sayfalarına Eklemek
CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value)
29,366
(X)HTML Döküman Hiyerarşisini Anlamak
CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir
22,804
Özellik Seçicileri(Attribute Selectors)
CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri
22,028
Pseudo-sınıfları ve Pseudo-elementleri
Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )
22,971
CSS de kullanılan uzunluk birimleri, yüzde birimleri, renk birimleri ve URL birimleri
Birimleri dört gruba ayıra biliriz. uzunluk birimleri, yüzde birimleri, renk birimleri ve URL birimleri
19,612
CSS te kullanılan kısaltmalar
CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz
23,852
CSS ile yazıcı çıktı işlemleri
Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır
25,824
CSS ile Web Sayfası Oluşturma
CSSin en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Gardenın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.
87,383 31/05/2014
CSS ile kullanımdan kalkan özellikler
CSS kullanımı ile tedavülden kalkan veya kullanımı azalan özellikleri sıralayalım:
22,566
CSS Shorthand(kısacası) Tenikleri
Uzun parametlereler alan CSS taglarının kısaca yazılış metotları
21,909
Şerit Halindeki Resimden Bölümler Almak
Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkında bir makale
22,798
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements
25,787
Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements gibi css nesnelerinin açıklamaları ve örnekleri.
24,287
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
25,032