JTY/B4/D8 - Alt Bölüm CSS Kodu Yazılması

Bu habere oy verin
(0 oy verilmiş)
Detaylar
Kategori: Joomla CMS Tema - CSS
Yayın tarihi: Perşembe, 17 Mayıs 2012 15:27
Yazar: enxdesign
Gösterim: 13789

Footer bölümünde yazacağımız kodlar diğer derslerde yazdıklarımızdan farklı değil. Önce en dıştaki .footer-alt classını tanımlıyoruz. Tam ekranı kaplamasını istediğimiz arkaplanı repeat-x koduyla tekrarlattırıyoruz ve width değerini 100% olarak veriyoruz. Ardından sabit olmasını istediğimiz yükseklik değerini 82px olarak yazıyoruz.

 .footer-alt{
width: 100%;
background: url(../images/footer-bg.png) repeat-x top;
height: 82px;
} 
Burada ise yukarıdaki diğer bölümlerde yaptığımız gibi ekranı ortalaması için sitemizin standart genişlik değeri olan 930px'i width olarak ayarlıyoruz ve margin:0 auto komutuyla ekranı ortalıyoruz. Yine sabit height değerimizi veriyoruz. 
.footer-alt-ic{
width: 930px;
margin: 0 auto;
height: 82px;
} 
Şimdi sol ve sağ olarak ayırdığımız footer bölümünde sütunları hizalıyoruz. Float left ile sola yaslıyoruz, width değeri ile genişliği belirtiyor ve arka planı yatay şekilde devam etmesi için repeat-y olarak tanımlıyoruz.
.footer-sol{
float: left;
width: 582px;
background: url(../images/footer-ic-bg.png) repeat-y;
height:82px;
} 
Sağ sütun için ise width ve float değerimizi belirtiyoruz. 
.footer-sag{
float: right;
width: 348px;
height:82px;
}
Kendi yazdığınız kodlarla karşılaştırmanız amacıyla baştan beri yazdığımız tüm kodları yazıyorum. 
/* Tarayıcılar için ortak css sıfırlama */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; text-decoration:none;}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus, a:focus, a:active{ outline: 0; }
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
table{border-collapse: collapse; border-spacing: 0;}
.soruncoz:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.soruncoz {display: inline-block;}
* html .soruncoz {height: 1%;}
.soruncoz {display: block;}
a img { border: none; }
a { color: #000; text-decoration: none;}
a:hover, a:active, a:focus { color: #000; text-decoration: underline;}
/* Sıfırlama Son */
/* Anasayfa Genel Kodlar*/
body{
 margin:0;
 background-color:#fff; 
 font:normal 12px/18px Arial, Helvetica, sans-serif; 
 color:#000; 
}
#anagovde{width: 100%;}
 .ust-bg-orta{
 float: left;
 width: 100%;
 height: 30px;
 background: url(../images/ust-bg-orta.png) repeat-x;
 }
 .ustmenu{
 width: 930px;
 height: 30px;
 margin: 0 auto;
 }
 
 .logo-dis{
 width: 930px;
 height: 61px;
 margin: 0 auto;
 margin-top: 20px;
 margin-bottom: 20px;
 } 
 .logo img{
 float: left;
 width: 354px;
 height: 61px;
 }
 
 .anamenu-orta{
 float: left;
 width: 100%;
 height: 46px;
 background: url(../images/anamenu-orta.png) repeat-x;
 z-index: 3;
 position: relative;
 }
 .anamenu{
 width: 930px;
 height: 46px;
 margin: 0 auto;
 }
 
 #orta{
 width: 100%;
 margin: 0 auto;
 } 
 #orta-bolge{
 width: 930px;
 margin: 0 auto;
 background: url(../images/orta-bg.png) repeat-y;
 margin-top: -3px;
 } 
 .orta-sol{
 float: left;
 width: 575px;
 }
 .icerik{
 float: left;
 width: 555px;
 margin: 0 10px 15px 10px;
 }
 .reklam{
 float: left;
 width: 555px;
 margin: 15px 10px 0 10px;
 }
 .orta-sag{
 float: right;
 width: 355px;
 }
 .orta-sag-modul{
 float: left;
 width: 350px;
 margin: 15px 0 0 5px;
 }

 .footer-alt{
 width: 100%;
 background: url(../images/footer-bg.png) repeat-x top;
 height: 82px;
 } 
 .footer-alt-ic{
 width: 930px;
 margin: 0 auto;
 height: 82px;
 } 
 .footer-sol{
 float: left;
 width: 582px;
 background: url(../images/footer-ic-bg.png) repeat-y;
 height:82px;
 } 
 
 
 .footer-sag{
 float: right;
 width: 348px;
 height:82px;
 }
 
Ve buraya kadar yaptığımız değişikliği kaydediyoruz. Ardından temamızın index.php'si içerisinde oluşturduğumuz modül pozisyonlarında birer modül gösterimi yapıyoruz. alt-sol ve alt-sag pozisyonlarına custom html modülünde basit birkaç şey yazarak modülü tüm sayfalarda yayınladım.

Gördüğünüz gibi sitem 2 sütunlu olarak, solda içeriklerim, sağda modül pozisyonum, footer'daki modül pozisyonlarım, ana menü ve üst menü bölümleriyle hazır. Tabi burada sitemiz henüz tam anlamıyla bitmiş değil. Joomlanın standart seçicilerini kullanarak sitemizi biraz daha güzelleştireceğiz. Mesela modül başlıklarını, üst menüdeki öğelerin yatay çıkmasını, suffix kullanımı, içerik başlıklarının düzenlenmesi gibi ayarlar yapacağız.

Diğer derse geçmek için tıklayınız >>

 

Joomla! Öğreniyorum

Güncel Joomla! Sürümleri

Joomla! İle İlgili Herşey

Joomla! Eklentileri

Site Bilgileri

google+

rss