JTY/B4/D4 - Üst Kısı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:25
Yazar: enxdesign
Gösterim: 12323

Bir önceki derste üst bölüm için XHTML kodlamasını yapmıştık. Şimdi orada tanımladığımız sınıfları tanımlayacağız. Buradaki css kodlarını yazarken XHTML kodlamaması yaptığım sırayla gidiyorum ve en dış çerçevem için css tanımlamasını yaparak kodlamaya başlıyoruz. Css kodlamasının nasıl bir düzende yapıldığını detaylı incelemek için bu adresi ziyaret edebilirsiniz.

 #anagovde{width: 100%;}
Ardından üstmenü için yazdığım cssleri tanımlamaya başlıyorum. float:left ile menüyü sola yapıştırıyorum. Arkaplan tanımlamasını yapıyorum ve arkaplanın ekranı yatay şekilde kaplaması için repeat-x komutunu yazıyorum.

Burada width değerimi 100% olarak tanımlıyorum ve sabit yükseklikte olan menüm için height:30px değerini veriyorum.

Tabi bu durumda burada çıkacak menü öğeleri ekranın sol köşesine yapışacaktır. Halbuki ben sitemin genişliğinin 930px olmasını istiyorum. Bu yüzdenikinci olarak yazdığım divin tanımlamasına width değerini 930 olarak belirtiyorum ve ekranı ortalaması için margin:0 auto kodunu yazıyorum.

 .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;
}
Üstmenünün tanımlamasının ardından hemen o bölümün altındaki logo bölümünü tanımlıyorum. Bunun içinde 2 div tanımlaması yapmıştık.

Yine ekranı ortalaması için width ve margin değerlerini yazıyorum. Logo alanı için yüksekliğimi 61px yazdım, ardından margin-top ve margin-bottom komutları ile yukarıdan ve aşağıdan 20şer piksellik boşluk bıraktım.

Logomu img olarak gösterdiğim için .logo img şeklinde bir tanımlama yapıyorum ve logomun çıkması gereken boyutları tanımlıyorum.
Farklı boyutta bir logo resmi yüklesem bile burada belirttiğim boyutlarda çıkacaktır. 

 .logo-dis{
 width: 930px;
 height: 61px;
 margin: 0 auto;
 margin-top: 20px;
 margin-bottom: 20px;
 } 
 .logo img{
 float: left;
 width: 354px;
 height: 61px;
 }

Logomun hemen altında yine arkaplan olarak ekranı kaplayan bir arkaplan resmi var ve onun üzerinde üstmenüm hizalanmış durumda. Arkaplanın ekranı kaplaması için width değerini 100% veriyorum. Ardından sabit olan yüksekliği belirtiyorum, arkaplan resmimin yolunu yazarak repeat-x ile yatay olarak tekrarlattırıyorum. Burada dikkat edilecek husus üst menüde yaptığımız gibi menünün çıkacağı alanı 930px olarak belirlemek ve ortalamaktır. Bu yüzden  .anamenu tanımlaması içerisine width değerini 930 olarak yazıyoruz ve ortalama kodumuz olan margin:0 auto'yu yazıyoruz.
.anamenu-orta{
float: left;
 width: 100%;
 height: 46px;
 background: url(../images/anamenu-orta.png) repeat-x;
 }
 .anamenu{
 width: 930px;
 height: 46px;
 margin: 0 auto;
 }

Burada kadar yaptığımız şeyleri görebilmek için index.php ve template.css dosyalarındaki değişiklikleri kaydederek sitemizi önizlemek için tarayıcı sayfasını yeniliyoruz.

Buraya kadar yazdığımız kodların bütünü bu şekilde olmalı.

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

Eğer kodlarda bir yanlışlık yapmadıysanız resimdeki gibi bir görüntü elde etmiş olmalısınız.

Yalnız üstteki resimde dikkat ederseniz joomlaya dair hiçbir şey sitede görünmedi. Çünkü yazmış olduğumuz modül pozisyonlarında herhangi bir modül yayınlamadık. İsterseniz ustmenu ve anamenu pozisyonlarına birer menü atayarak sayfada görünüp görünmeyeceğini kontrol edebilirsiniz.

Modül pozisyonlarında modül yayınlamamızın ardından bu şekilde bir görüntü ortaya çıkmış olması lazım. Menülerin yatay çıkması için herhangi bir tanımlama yapmadık. Bu yüzden iki menüde alta sıralı şekilde gözüktü. Bunuda ilerleyen adımlarda ayarlayacağız.

Sitemizin üst bölümünü tamamladık. Şimdi orta bölüm olarak isimlendirdiğimiz içerik alanı ve sağ sütunu ayarlayacağız. >>

 

Joomla! Öğreniyorum

Güncel Joomla! Sürümleri

Joomla! İle İlgili Herşey

Joomla! Eklentileri

Site Bilgileri

google+

rss