Bu dersimizde oluşturduğumuz görünmez kutuların (Div) boyutlarını değiştirmeye bakıyoruz. 1. Adım
Yapacağımız ilk şey temamızın ne kadar genişlikte olacağına karar vermektir. Çünkü kullandığımız monitörlere göre temamızın büyüklüğünü seçeriz. Örneğin 800×600 piksel monitör çözünürlük eğer çoğunlukta kullanıyorsa biz 900px tema yapmışsak, kullanıcılar için 100piksel sayfa dışına taşıyor demektir. Biz 750px (750 pixel) kullanacağız.
750 piksele neleri sığdırıyoruz?
Temamızı 750 piksel genişlikte yaptığımız zaman bir görünmez kutu yapıyoruz yada buna tekrar Div diyelim. Bunun içine header, container, sidebar ve footer bölümlerini sığdırıyoruz.
<body> linki altına <div id=”wrapper”> kodunu ekliyoruz.
</body> kodunun üstüne açtığımız div kodunu </div> ile kapatıyoruz.
style.css dosyamıza aşağıdaki kodları ekliyoruz.
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
Burda neden # (poun) işareti kullandık. Çünkü tema kodumuzda <div id=”wrapper”> kodu yani id kodunu kullandık. ID koduyla belirttiğimiz etiketlerde # kodunu kullanıyoruz. <div class=”wrapper”> class kodunu kullandığımız yerlerde ise . işareti kullanılıyor.
Dosyamızı kaydedelim. Tarayıcımızı yenileyelim.
margin: 0 auto 0 auto; 0 üst marj, auto sağ marj, 0 alt marj, auto sol marj
width: 750px; wrapper divinin genişliği. piksel olarak.
text-align:left; yazıları div içinde sola yanaştır.
Not:
text-align: left; yazılarımızı wrapper div etiketinde sola hizalıyoruz. Siz belki body{ text-align: left;} sola hizalı olan kısmı text-align: center; yapmak isteyebilirsiniz.
3. Adım
Header yayılmasını (float) soldan yapıyoruz ve 750px veriyoruz.
#header{
float: left;
width: 750px;
}
4. Adım
Container soldan ve 500piksel yapıyoruz.
#container{
float: left;
width: 500px;
}
5. Adım
Sidebar (Kenar Çubuğu) 240 Piksel yapıyoruz. Sola yaslıyoruz. Arka zemini gri yapıyoruz. Bu arada 10 pikseli yuttum.
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
6. Adım
Footer (Alt) Sola hizalıyoruz. 750piksel genişlik veriyoruz. clear:both ile boş bir satırdan başlıyoruz.
#footer{
clear: both;
float: left;
width: 750px;
}
7. Adım
Sidebar kısmında 10pikseli yutmuştuk. Şimdi bu 10 piksel için soldan marj veriyoruz. Boşluk bıraktırıyoruz.
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
8. Adım (Ekstra Adım)
This is just in case you’re getting a 20px margin instead of a 10px margin. 20px margin would break your layout and push the sidebar to the bottom of the page because a 20px margin makes the sum of the Container and Sidebar widths equal 760px instead of 750px. This extra step is Internet Explorer’s fault because the bug of doubling the set margin doesn’t exist in Firefox.
To fix this bug, add display: inline; to the Sidebar. Now your Sidebar should be:
Bu kısmın tam olarak ne demek istediğini anlayamadığım için direk veriyorum. display: inline komutunun amacı verilen linkleri aynı hizada göstermek içindir. Linkler satır atlıyor olsa bile aynı satırda gösterilir.
Aşağıdaki display kodunu style.css dosyamızda değiştiriyoruz.
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
Artık dosyalarımız bu hale gelmiş olmalı. index-lesson-11.txt ve style-lesson-11.txt
Kaynak: http://www.wpdesigner.com/2007/03/12/wp-theme-lesson-11-widths-and-floats/
