Web Tasarım ve Programlama Sitesi

Bu yazıda Joomla 1.0.12 sürümünün standart teması olan rhuk_solarflare_ii temasında CSS seçicilerinin kullanımı ile ilgili bir örnek anlatılmıştır.

En üstte bulunan menünün resmi aşağıda görülmektedir. Bu yazıda bu menünün nasıl biçimlendirildiği açıklanmıştır.

Joomla temalarda css klasörü içerisinde bulunan template_css.css isimli css dosyası temanın biçimlindirmelerinin yapıldığı dosyadır. index.php sayfası ise; template_css.css sayfasındaki biçimlendirmeleri kullanarak sitenenin temasını oluşturur. 

Bu örnekte template_css.css dosyasındaki üst menü biçimlendirmesini ve index.php sayfasında bu biçimlendirmelerin nasıl kullanıldığı incelenecektir.

index.php sayfasında üstteki menünün oluşturulması : 

      <div id=”buttons_outer”>
           <div id=”buttons_inner”>
                  <div id=”buttons”>
                         <?php mosLoadModules ( ‘user3′, -1); ?>
                 </div>
           </div>
     </div>
 Bu temada hem tablo hem de div kullanılmış. Yukarıdaki kodda sadece div kullanımı görünüyor. Tablo ve divlerin yaptıkları iş birbirine çok benzer fakat divler daha kullanışlı ve daha profosyonel siteler hazırlamanıza yardımcı olur.  div biçimlendirilmiş alanlar oluşturmanızı sağlar. Bu kodda içiçe 3 tane div kullanılmış ve divler ile biçimlendirilmiş bölgeye user3 modülü (üstteki menüler) çağrılmış. ID seçiciler kullanılmıştır, bu durumda css sayfasında biçimlendirme # işareti ile başlamalıdır.

css dosyasındaki ilgili kodlar :

#buttons_outer {
 width: 635px;                       /*üst menünün genişliği*/
 margin-bottom: 2px;        /*üstteki menü ile logo arası mesafe*/
 margin-right: 2px;              /*menünün sağ tarafındaki mesafe*/
 float: left;                             /*üst menü ve arama butonunun yanyana olmasını saglar*/
}

#buttons_inner {
 border: 1px solid #cccccc;    /*top menünün olduğu bölümün çerçeve biçimlendirmesi*/
 height: 21px !important;     /*top menünün olduğu bölüm için yükseklik*/
 height: 23px;                         /*top menünün olduğu bölüm için yükseklik, ie6 ve altindaki 
                                                      tarayicilar için*/
}

#buttons {
 float: left;                  /*top menünün sola hizali olmasi*/
 margin: 0px;           /*top menünün üst taraftan uzakliği*/
 padding: 0px;          /*üst menünün etrafindaki boşluk*/
 width: auto;            /*top menünün genişliği*/
}