CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.

Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.

Metot 1 – Yüzde Yöntemi ile Ortalama

Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.

<div id="menuKapsulu">
<ul>
   <li>Elma</li>
   <li>Armut</li>
   <li>Malta Eriği</li>
</ul>
</div>

Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.

#menuKapsulu{
  float:left;
  width:100%;
  background:#369;
  overflow:hidden;
  position:relative;
}

Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.

#menuKapsulu ul{
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  left:50%;
  text-align:center;
  background-color:#990000
}

float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğini içermez.

#menuKapsulu ul li{
  display:block;
  float:left;
  list-style:none;
  margin:0 10px 0 0;
  padding:10px 0;
  position:relative;
  right:50%;
}

Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.

İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.

Avantajları

• Tüm tarayıcılar destekliyor.
• Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
• Kolay kullanımı
• Farklı tarayıcılar için farklı kod yazımı gerektirmemesi

Dezavantajları

• Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
• Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.

Metot 2: display:table Metodu

Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.

HTML kodumuz aynı;

<div id="menuKapsulu">
   <ul>
       <li>Elma</li>
       <li>Armut</li>
       <li>Malta Eriği</li>

</ul>
</div>

Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz.

#menuKapsulu ul{
 list-style:none;
 margin-left: auto;
 margin-right: auto;
 display: table;
}

#menuKapsulu ul li{
 float:left;
 margin:0 10px 0 0;
 padding:10px 0;
}

Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.

*:first-child+html #menuKapsulu{
   text-align:center
}

* html #menuKapsulu{
   text-align:center
}

*:first-child+html #menuKapsulu ul{
 display: inline;
 zoom: 1;
}
* html #menuKapsulu ul{
 display: inline;
 zoom: 1;
}

Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu

Avantajları

• Tüm tarayıcılar destekliyor.
• Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
• Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
• Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.

Dezavantajları

• Farklı tarayıcılar için farklı kod yazımı gerektirmesi

Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.

Kalın sağlıcakla.

Kaynaklar

• http://css-discuss.incutio.com/wiki/Centering_Block_Element
• http://www.solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css
• http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
• http://haslayout.net/css-tuts/Horizontal-Centering
• http://www.katcode.com/css-horizontally-centering-div-of-unknown-width/
• http://www.tightcss.com/centering/center_variable_width.htm

1- Genişleyebilir blok-level elementleri ortalamak

.ortala
{
    margin-left: 10%;
    margin-right: 10%;
}

<p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.

2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: "Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamına gelir."

.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}

NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir.

Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç)

Bu metodu desteklemeyen web tarayıcıları için body etiketine text-align:center ataması yaptığımızda sorun çözülmüş demektir.

body
{
	text-align: center;
}
.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine(yani sola yaslamalıyız) çevirmeliyiz.

body
{
	text-align: center;
}
.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: left;
}

Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)

2.b. Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

.ortala3 {
    width: 720px;
    position: relative;
    left: 50%;
    margin-left: -360px;
}

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

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

Eğer sayfalardaki elementlere herhangi bir konumlandırma yapılmamış ise veya float değeri verilmemiş ise sayfaya normal akış konumlandırması uygulanır. Sayfailk 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.

position

Yapısı : position: <deger>
Aldığı Değerler : static | relative | absolute | fixed | inherit
Başlangıç değeri: static
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

top, right, bottom, left

Yapısı : top, right, bottom, left : <deger>
Aldığı Değerler : <uzunluk> | <yüzde> | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: postion uygulanan elementlere
Kalıtsallık: Yok

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.

p#FarkliParagraf{
    position: relative;
    left: 20px;
    top: 20px;
}

Görecelikonumlandırma kullanılarak yeri belirlenen bir elementin başlangıçtaki konumundaki boşluğu ve diğer elementlerle arasındaki mesafeyi koruyacaktır.

Mutlak(Absolute) Konumlandırma

Görecelikonumlandırma Normal Akış’ın bir parçasıdır. Aksine Mutlak Konumlandırmada uygulanan elementbulunduğu yere boşluk bırakmayacaktır. Diğer elementler normal akıştakiyerlerini bu elementi yoksayarak devam edeceklerdir. Aşağıdaki şekilde görüldüğü gibi

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öreceliolarak konumlandırılmış bir elementin içindeki Mutlak Konumlandırılmış birelement 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 snuçlar elde edeceğiz.

İ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

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

#adresler {
width: 700px;
height: 100px;
position: relative;
}
#adresler .tel {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}

<div id="adresler">
<p class="tel">Tel: 0845 838 6163</p>
</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.

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

Kaynaklar

• CSS Mastery:
  Advanced Web Standards Solutions
• Muhammed Sevim
• Web Standards Solutions: The Markup and Style Handbook