WordPress Tema Yapısı 11: Genişlik ve Yazıları Hizalama (Width ve Float)
10 Kasım 2009 Yazan Bahattin Arıcı
Kategori Tema
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/
Yorumlar