Konular

CSS Konumlandırma (Position)

CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.
Sabit(Fixed) Konumlandırma

Sabitkonumlandırma Mutlak Konumlandırmanın bir alt katagorisidir. Sabitkonumlandırılmış elementin sayfadaki görünümü çok farklıdır. Bunu özellikle websayfasında bir elementin konumu sabitlemek için kullanabiliriz. Sabit konumladırılma ile yerleştirilmiş element belirtilen yerde asılı kalacaktır. Web tarayıcısının kaydırma çubuğu aşağı yukarı kaydırılması ile Sabit Konumlandırma ile yerleştirilmiş elementin yeri değişmeyecektir ve sabit kalacaktır. Ne yazıkki IE 6 bu özelliği desteklemiyor.IE 7 strick yorumlayıcısı kullanılıyorsa destekliyor diğer hallerde desteklemiyor. Ama bu problemi javascript ile çözümü vardır.

<style type="text/css">
body {
        background-color: #0C0;
        margin:0;
        height: 2000px; /*kaydirma cubugu cikmasi icin*/
}
.kutu_mavi  {
        width: 400px;
        height: 200px;
        background-color:#3CC;
        padding: 50px;
        margin: auto;
}      
.kutu_kirmizi  {
        width: 40px;
        height: 20px;
        background-color:#F00;
        position:fixed;
}
</style>
</head>

<body>

<div class="kutu_mavi">
  <div class="kutu_kirmizi"> </div>
</div>

</body>

CSS Konumlandırma (Position)

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.

CSS Konumlandırma (Position)

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. Bu konumlamada nesnelerin konumu kendisinden önceki nesnenin konum değerlerini (top, left, right, bottom) sıfır kabul ederek konum belirlemeleriyle oluşur.

Göreceli konumlandırmada nesnelerin birbirleriyle olan mesafelerini boyutları belirler.

Relative pozisyonlandırmada; öğe, bulunduğu yerden ititbaren, top, right, bottom, left özellikleriyle, ve bu özelliklere verdiğiniz değerler ölçüsünde kayma yapar. Ancak bu, relative pozisyon verdiğiniz öğenin altındaki öğeleri etkilemez. Onlar bulundukları yerde kalırlar. Dolayısıyla aşağı kaydırma verdiğiniz öğeniz, alttakiler yerlerinde durduğu için onların üzerine çıkar.

Mutlak(Absolute) Konumlandırma

Göreceli konumlandırma Normal Akış’ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan elementbulunduğu yere boşluk bırakmayacaktır. Mutlak pozisyonla tanımlanan konum, nesnenin içinde bulunduğu elemana göredir. Diğer elementler normal akıştakiyerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi.

CSS Konumlandırma (Position)

Mutlak konumlandırılmışelementin konumu en yakındaki üst elementin konuma bağlıdır. Eğer birata elementin konumu belirlenmemişse elementimiz ana bloka göre konumalanacaktır. Mutlak konumlandırma HTMLelementi ve sayfa çözünürlüğünü ile ilişkilidir.

Göreceli olarak konumlandırılmış bir elementin içindeki Mutlak Konumlandırılmış bir element içerik blokunun üst, sağ, sol ve alttından hizalandıralabilir. Bu kullanım bize bir çok uygulmada yardımcı olacaktır ve bu kullanım ile çok güzel sonuçlar elde edeceğiz.

<style type="text/css">
body {
        background-color: #0C0;
        margin: 0;
        height: 2000px; /*kaydirma cubugu cikmasi icin*/
}
.duvarlar {
        width: 300px;
        height: 250px;
        background-color: #3CC;
        top: 70px; /*konumlandirma yapilmadigindan ise yaramaz*/
}
.pencere_sol {
        width: 70px;
        height: 70px;
        background-color: #F00;
        position: absolute; /*mutlak pozisyonlama*/
        left: 22px;
        top: 36px;
}
.pencere_sag {
        width: 70px;
        height: 70px;
        background-color: #F00;
        position: absolute; /*mutlak pozisyonlama*/
        left: 208px;
        top: 36px;
}
.kapi {
        width: 100px;
        height: 120px;
        background-color: #FF0;
        position: absolute; /*mutlak pozisyonlama*/
        left: 100px;
        top: 132px;
}
</style>
</head>

<body>

<div class="duvarlar">
  <div class="pencere_sol"></div>
  <div class="pencere_sag"></div>
  <div class="kapi"></div>
</div>

CSS Konumlandırma (Position)

İnsanların konumladırma ile iligi genel problemeleri hangikonumlandırma seçeneğinin ne işe yaradığını unutmalarıdır. Göreceli Konumlandırmasayfadaki elementin başlangıç durumuna göre göreceli bir durumda olduğunu, oysa Mutlak Konumlandırmanın en yakın ata elemente veya içerik blokunagöre göreceli değer içerdiğidir.

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.

z-index

Yapısı : z-index: <deger>
Aldığı Değerler : <sayısal değer > | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

Browser Uyumu:

Internet Explorer 4+(kısmen: IE4 den sonra auto ve sayısal değerleri destekliyor)
Netscape 4+(kısmen) NN6+ sonra tümünü destekler
Opera 5.0+
CSS Profile 2.0

Örneğin geniş bir blok içindeki bir parafratakiyazıların sağ ve altta olmasını istiyorsak. Dıştaki içerik kutusunugöreceli konumlandırıp içindeki paragrafı mutlak konumlandırarak bu işhalledebilriz.

  1. #adresler {
  2. width: 700px;
  3. height: 100px;
  4. position: relative;
  5. }
  6. #adresler .tel {
  7. position: absolute;
  8. right: 10px;
  9. bottom: 10px;
  10. text-align: right;
  11. }
  12. …..
  13. <div id="adresler">
  14. <p class="tel">Tel: 0845 838 6163</p>
  15. </div>

Not:Bu kullanım gelişmiş tarayıcılar için geçerlidir. IE 5.5 veIE 6(Windwos)’da bu sorun çıkarır. Sorunu engellemek için yükseklik ve genişliktanımı yapılmalıdır.

Mutlak konumlandırma sayfa planlamasınınyaparken çok kullanılır. Özellikle göreceli konumlandırılmışbirata element varsa. Tüm siteyi sadece Mutlak Konumlandırma ile planlayabilmemiz mümkündür. Bunun için tüm elementlerin belirli boyutlandırmaişlemleri yapılması şarttır tabi bu elementlerin üst üste binmesiniengellemek için. Çünkü Mutlak Konumlandırılmış bir element doküman akışı dışına çakacaktır ve normal akıştaki element kutularına etkietmeyecektir. Eğer siz Mutlak Konumlandırdığınız elementi genişletmekisterseniz örneğin font boyutunu arttırdığınızda elementi kapasayan kutu normale göre genişlese de etrafındaki elemtlerinakışıdaki yeri değişmeyecektir.

 

 

 

CSS Konumlandırma (Position)

 

Kaynak:

 

 

 

Yorumunuzu Ekleyin

CSS ile Web Sayfası Oluşturma

CSS’in 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.

70,791 Okunma 3 Yorum 11/07/2007 16:49:40 31/05/2014 16:50:32

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.

55,892 Okunma Henüz yorum yapılmamış 10/07/2007 19:48:11 29/12/2013 15:02:02

CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

26,112 Okunma Henüz yorum yapılmamış 27/01/2010 04:22:34

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)

24,946 Okunma 1 Yorum 12/07/2007 18:42:48

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

23,478 Okunma Henüz yorum yapılmamış 05/09/2007 23:01:25

Internet Explorer Koşullu İşlemleri

Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.

22,609 Okunma Henüz yorum yapılmamış 17/02/2010 01:08:14

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

21,735 Okunma Henüz yorum yapılmamış 11/07/2007 00:05:06

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

19,773 Okunma Henüz yorum yapılmamış 11/07/2007 00:16:08

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

19,080 Okunma Henüz yorum yapılmamış 12/07/2007 19:42:06

(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

19,034 Okunma Henüz yorum yapılmamış 09/07/2007 00:11:42

Ş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

18,874 Okunma 1 Yorum 22/02/2008 09:18:59

CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale

18,748 Okunma Henüz yorum yapılmamış 05/09/2007 01:49:34

Ö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

18,241 Okunma Henüz yorum yapılmamış 09/07/2007 14:20:52

Yükleniyor...