Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

kategori CSS
oylama 3/5 yorum 8 yorum yazar Hakan Taşan tarih 28 Eylül 2013

Bu makalede sitemizi yatay olarak nasıl ortalayacağımızı öğreneceğiz. Makalenin en başında şunu söylemek isterim, eğer sayfanızda !DOCTYPE kullanmazsanız, bazı taracıyılar (özellikle Internet Explorer) sitenizi ortalamayacak ya da hatalı ortalayacaktır. !DOCTYPE kullanmanızı kesinlikle tavsiye ediyorum, !DOCTYPE nedir diyorsanız buraya tıklayın. Ayrıca bu konu önemli olduğu için baştan sonra okumanızı tavsiye ederim.

Şimdi size 3 farklı örnek vereceğim ve tek tek yorumlayacağım.

Örnek 1) Sadece body etiketi ile ortalama

Body etiketi ekranda gördüğünüz sayfanın tümüdür. Bu etikette yapacağınız her ayarlama sayfanın tümünü etkiler (link, renk, yazı büyüklüğü vb.). Dolayısıyla body etiketini ortalarsanız sayfanın kenarlarında kalan kısmını artık kullanamayacaksınız demektir. Yani bu işlem sayfanızın kenarlarını kesip atmak gibi bir şey dolayısıyla çok kullanılmaz.

Kod:

body
{
        border:1px solid black;
        margin: 0 auto;
        width:960px;
        background:pink;
}

 

Örnek 2) Container ile ortalama

Container ne ola ki? Container dediğimiz şey taşıyıcıdır. Üstteki örnekte yaptığımız işlemi body etiketi üzerinden alıp bir taşıyıcı üzerine koymaktır ve böylece bütün sayfayı body üzerine değil de container üzerine kurmak temel amaçtır. Yani üsteki örneğin aksine kenarda kalan kısımları kullanabileceğiz. HTML5'in getirdikleri yenilikleri düşünecek olursak container tipi kullanım işimizi çok kolaylaştıracaktır.

CSS Kodu:

.container
{
        margin: 0 auto;
        width:960px;
        background:#47D1FF;
}

 

HTML Kodu:

<body>  
    <div class="container">        
        CONTAINER İÇERİĞİ
    </div>
</body>

 

Örnek 3) Container ile ortalama ve body etiketini kullanma

Bu örnek aslında üsttekinin aynısıdır, sadece body ve container'ın birlikte kullanımını göstereceğim. Body etiketi genelde arkaplanı renklendirmek için kullanılır. Container kullanımının bir avantajı da budur çünkü body'den etkilenmez.

CSS Kodu:

body
{
        margin: 0 auto;
        background:pink;
}

.container
{
        margin: 0 auto;
        width:960px;
        background:#47D1FF;
}

 

HTML Kodu:

<body>           
    BODY İÇERİĞİ
    <div class="container">        
        CONTAINER İÇERİĞİ
    </div>
</body>

 

Not: "width: 960px;" ayarını kendinize göre değiştirebilirsiniz. Bu kod sayfa ortasının 960 piksel olmasını sağlar.

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

8 Yorum


yorum

volkan demir

09 Mart 2015 11:34


çok güzel olmuş

yorum

asdasd

23 Ekim 2015 00:50


html kodlarını neden paylaşmıyorsunuz?

yorum

Admin

23 Ekim 2015 03:49


paylaşmışım zaten okursanız görürsünüz :)

yorum

Musa

23 Mayıs 2016 05:37


Tek kelimeyle diyorum sen varya adamsın !
w3schools da bile doğru düzgün anlatım bulamadım fakat bu 1 kopyala yapıştırla oldu!

Çok teşekkürler...

yorum

Can

22 Kasım 2016 19:59


herkesin baktığını ama teşekkür etmediğini düşünüyorum. sadece sömürücü olmamak adına. çok teşekkürler :)

yorum

Mert

05 Nisan 2017 09:25


tesekkurler işime yaradı

yorum

Lise Okulu

13 Aralık 2018 21:15


hangi uygulamadan açıyorsun notpad++ değil bu ismini öğrenebilirmiyim

yorum

Admin

14 Aralık 2018 19:45


tam olarak neyi kastettiğinizi anlamamakla beraber notepad++ kullanıyorum.