CSS ile sayfayı ortalamak

Tarih: 17 Aralık 2009   Yazar: Burak Dülgar  |  2.386 kez okundu
CSS ile sayfayı ortalamak

Bir web sayfası oluşturdunuz ve yazılar, resimler sağa veya sola dayalı. Peki bunları nasıl ortalarız? Bu yazımda size css kullanarak web sayfanızı nasıl ortalarsınız onu anlatacağım.

Öncelikle bir CSS dosyası oluşturun, adlandırın ve sayfanızın bulunduğu dizine atın.  Örnek olarak style.css dosyası oluşturabilirsiniz. Daha sonra web sayfanızda bu CSS dosyanıza link verin.

Bunu yapmak için şağıdaki kodu sayafanızın <head> tagları arasına yapıştırmanız yeterli.

<link media=”screen” type=”text/css” href=”style.css” rel=”stylesheet”>

Daha sonra oluşturduğunuz CSS dosyasına aşağıdaki kodları ekleyin. Bu kodlar tarayıcınıza sayfanızı ortalamak için gerekli olan talimatları verecektir. Yalnız Firefox ve İnternet Explorer’da ortalamak için gereken kodlar farklı işliyor. Bu yüzden aşağıdaki iki koduda CSS dosyanıza eklemenizi tavsiye ederiz ki her iki tarayıcının kullanıcılarıda sayfanızı ortalı olarak görsün.

İnternet Explorer İçin ::

body{
text-align: center;
}

Firefox için ::

#container{
margin: 0 auto;
}

Bu kodları CSS dosyanıza ekledikten sonra son olarak CSS dosyasına eklediğimiz  #container ‘ı sayfamızda belirtmemiz gerekiyor. Bunun içinde aşağıdaki kodu sayfamızın <body> tagları arasına eklememiz lazım. Kodu <body>’den hemen sonra eklemeniz daha iyi olacaktır.

<div id="container"> buraya sayfanızın içeriği gelecek </div>

İşe bu kadar. Bu tag içinde yer alan her şey bundan sonra tarayıcılarınızda ortalanmış bir halde görünecektir. Umarım yardımcı olabilmişimdir. Hertürlü sorunuz için aşağıdaki yorum sistemini kullanabilirsiniz. En kısa zamanda cevaplamaya çalışacağım.


    Bu yazı için 4 yorum yapılmış.
  1. sinan dedi ki:

    #ornekdiv { width : 900px ;
    margin : 0 auto ;}
    ile ben olayı çözdüm firefoxda.sizin kod çalışmadı:D

  2. Burak Dülgar dedi ki:

    Açıkçası yine aynı şeyi yapmışsınız :) Firefox’da sayfayı ortalamak için asıl kullanılan şey “margin: 0 auto;”. Tabi bunun ile birlikte genişlikte belirtebilirsiniz. Size kalmış :)

  3. nil soydan dedi ki:

    hersey tamam da firefox once açmıstı artık firefox ve ie ıkısınde de ortalamıyor.ama 3.seçenegı yapamadım çünkü sayfaın içeriği demişsiniz buna açarsanız ıyı olacak içerik derken neyı kasttmişsiniz?

  4. tugay dedi ki:

    kod çok süper çalışıyor teşekkürler….


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.