Html&Css
"DreamWeaver Arşiv"

Sayfayı Css ile Ortalama

Bu yazımda sitenizin sayfasını ekrana nasıl ortalanır bakalım. Eskiden <center> kullanırdık ama bu eskidi ve ihtiyaçları karşılayamıyor. Biz sadece içeriğimizi ortalayacağız ve bunu div ve css ile yapacağız çok basit bir işlem aslında kodlarımıza biraz bakalım
 
<body>

   <div class="sayfa"></div> //burada ne yaptık bir div açık ve stile sayfa ismini atadık

</body>

şimdi gelelim css kodlarımıza sayfamızın ilk önce genişliğini ayarlamamız gerekir ben genelde 980px kullanırım yaptığım sayfalarda alışkanlık olmuş siz istediğiniz gibi boyutlandırabilirsiniz tek unutmamanız gereken şey 1024px geçmesin hala 1024*768 px ekran kullanımı yaygın. gelelim css kodlarımıza 
 
.sayfa{
        width: 980px;             //burada sayfamın genişliğini ayarlıyorum
margin-top: 0px;        // üst boşluğu 0 olarak ayarladım 
margin-right: auto;     // sağ tarafı otomatik olarak ayarlıyoruz can alıcı en önemli dokta burası
margin-bottom: 0px; // alt boşluğu da 0 olarak veriyoruz
margin-left: auto;      // sol tarafı otomatik yaptık şimdi sayfamız artık ortalanmış olarak gözükecektir.
 
}
 
Evet burada önemli olan right ve left marginleri auto olarak ayarlamak yoksa sayfamız ortalanmaz. css kodlarını sayfanızın <head> kısmında kullamaya dikkat ediniz tüm sitede kullanmak isterseniz stil.css diye bir dosya açıp içine kodları atın isminlerini değiştirmek size kalmış birşey ali.css veli.css istediğinizi koyun ama html sayfasına eklemeyi unutmayın yani <head> kısmına <link href="stilinizinadi.css" rel="stylesheet" type="text/css" /> kodu ekleyin şimdilik hepsi bu kadar ben çok uzun anlattım ama yapması daha kolay. 
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol