JTY/B4/D6 - Orta Bölüm CSS Kodu Yazımı

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

Orta bölümün XHTML kodlamasının ardından yazdığımız sınıfların CSS tanımlamalarını yapacağız.

Tekrar template.css dosyamıza dönüyoruz ve yazdığımız divlerin tanımlamalarımı yapıyoruz. Dikkat çekilecek hususlardan birine yeri gelmişken değinelim. id="orta" olarak tanımladığımız kodu css ile belirtirken # (diyez) işareti ile başlıyor oluşumuz. Hatırlarsanız class="" tanımlamalı sınıflarda . (nokta) şeklinde yazıyorduk.

#orta şeklindeki tanımlamanın içerisine width değeri 100% tanımlıyoruz.

Hemen altında ise #orta-bolgeyi tanımlıyoruz. Yukarıda birkaç sefer yaptığımız gibi width değerini 930px olarak belirliyoruz ve margin:0 auto ile ekranı ortalıyoruz. Ardından yatay şekilde tekrarlamasını istediğimiz arkaplanı repeat-y komutuyla birlikte yazıyoruz. Margin-top -3 komutu ile yukarıya hizalıyoruz.

#orta{
width: 100%;
 } 
 #orta-bolge{
 width: 930px;
 margin: 0 auto;
 background: url(../images/orta-bg.png) repeat-y;
 margin-top: -3px;
 }
Orta bölgeyi belirledikten sonra sol ve sağ sütunlarımız için ayarlamalar yapacağız. Öncelikle .orta-sol için tanımlama yapıyoruz. Float:left ile sütunu solda gösteriyoruz ve width 575px değeri ile genişliği belirtiyoruz.

Hemen altında ise .icerik tanımlamasını yapıyoruz. Burada margin değeri olarak 0 10px 15px 10px gibi bir sayı dizisi verilmiş. Bunun anlamı margin olarak hizala, ilk değer üst, ikinci değer sağ, üçüncü değer alt, dördüncü değer ise soldan şeklinde. Yani üstten başlayarak saat yönünde ilerliyoruz. Yani üstten 0, sağdan 10px, alttan 15px, soldan ise 10px boşluk bırakacak şekilde kodumuzu yazıyoruz.

Width değerimizi 555 olarak yazdık. Halbuki bir üstte değeri 575px olarak belirtmiştik. Aradaki 20px nereye gitti diyeceksiniz. Margin hizalaması yaparken soldan ve sağdan 10px'lik boşluklar bıraktığımız için toplam değer olan 575px'ten 20px düşüyoruz ve net değer olarak 555px yazıyoruz. 

.orta-sol{
 float: left;
 width: 575px;
 }
 .icerik{
 float: left;
 width: 555px;
 margin: 0 10px 15px 10px;
 }
Reklam bölümünde de icerik bölümü için yazdığımız kodların aynısını yazıyoruz. Burada göstereceğimiz reklam türüne göre hizalama ve width değerini değiştirebilirsiniz.
.reklam{
 float: left;
 width: 555px;
 margin: 15px 10px 0 10px;
}
Sol sütun tanımlamasını bitirdikten sonra sağ sütun için ayarlama yapıyoruz. Width değerini 355px olarak ayarlamıştık. float:right komutu ile sütunumuzu hizalıyoruz. Böylelikle orta-sol ve orta-sag tanımlamalarımız yanyana çıkacak.
.orta-sag{
float: right;
 width: 355px;
 }
Sağ sütun içerisinde çıkacak modüller için orta-sag-modul class'ını kullanmıştık. Bunun içinde yine width değeri ve margin değeri veriyoruz.
.orta-sag-modul{
 float: left;
 width: 350px;
 margin: 15px 0 0 5px;
 }
Bu bölümdeki tanımlamalarımızda bitti. Şimdi index.php ve template.css dosyalarımızı kaydettikten sonra sitemize gözatalım.

Kontrol amaçlı olarak baştan beri CSS dosyamıza yazdığımız herşeyi tekrar yazıyorum. Kendi yazdığınız kodlarla karşılaştırabilirsiniz.

/* 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;
 }
 

Sayfayı yenilediğinizde aşağıdaki gibi bir görüntüyle karşılaşmış olmalısınız. 

Gördüğünüz gibi sol tarafta içeriklerimiz göründü. Sağ sütunu arkaplan olarak ayrılmış gördük fakat oradaki modül pozisyonunda yayınlı olan bir modül olmadığı için boş göründü. İsterseniz yönetici panelinden sag pozisyonunda bir modül yayınlayıp tekrar sitemize bakalım. 

(Ayarların alt tarafında tüm sayfalarda yayınla demeyi unutmayınız)

Ben Login Form(Giriş Formu) modülünü yayına aldım. Resimde görüldüğü gibi içeriğin sağ tarafında yayınlandı. Bu modül pozisyonunda istediğim kadar modül yayınlayabilirim.

Sitemizin orta bölümünü ve sağ tarafındaki modül pozisyonlarını ayarladıktan sonra footer yani alt bölüm için XHTML ve CSS kodlamasına geçebiliriz. >>

 

Joomla! Öğreniyorum

Güncel Joomla! Sürümleri

Joomla! İle İlgili Herşey

Joomla! Eklentileri

Site Bilgileri

google+

rss