Kendi sitemden örnek vermek istiyorum. İlk önce temel şablonunu PSD ile çizmemiz lazım. Bunu yaparken ileri görüşlü olmanız lazım. Kısacası PSD tasarımı kafanızdaki siteniz ile oluşturulmuş olmalı. Fazla lafı uzatmadan benim sitemin tema dosyasını size göstereyim.
Not: Temanın ortasındaki pembe bölümü kendi sitemde iptal ettim. Dosyamız png uzantılı olmalı ve boş alanlar saydam olmalı.
Temamızı hazırladıktan sonra css kodlamaya başlıyoruz. İlk önce reset.css kodları kullanmamız lazım. Daha fazla bilgi için reset.css nedir diye aratıp bulabilirsiniz. Sonrasında body taglarımızı ve sitemizin background rengini belirtiyoruz.
body{background:#ccc;color:#888;font-family:Arial;font-size:14px;line-height:22px}
Sonrasında html taglarımızı açıyoruz.
Head taglarımızın arasına stil dosyamızı çağırıyoruz.
Sonrasında body tagımızdan sonra
Hemen css kodlarımıza dönüp;
header{
background:url(tema.png) 0 -50px;
height:110px;width:100%
}
Kodlarını yazıyoruz. Bu kodun anlamı, header tagları arasındaki alanı %100 genişlet, 110px uzat anlamına gelir. CSS Sprite tekniği ile .png dosyasının en üst kısmını 50px yukarı çektiriyoruz.
Daha sonra sitemizi tam ortalayacak şekilde bir div alanı açıyoruz. Bunun ismini de olarak belirtiyoruz. Kodumuz şu şekilde olmuş olacak.
Css kodlarımıza dönüp head iç kısmını yapıyoruz.
#headic{
width:1100px;
height:75px;
margin-left:auto;
margin-right:auto;
}
Bu kodun anlamı, bize 1100px genişliğinde 75px uzunluğunda bir alan oluştursun. Sağdan ve soldan ortalasın anlamına gelmektedir.
Daha sonra logo ve bilgi alanını oluşturmamız lazım. Yine headic etiketli div alanının içerisinde olacak.
Css kodlamamızda logo alanını sola, bilgiler alanını sağa yaslamamız lazım.
#logo{float:left;height:60px;margin-left:26px;padding-top:8px;width:200px}
#bilgiler{color:#fff;float:right;font-size:12px;height:40px;margin-right:25px;text-align:justify;width:300px}
Buradaki float nesnesi sağ veya sol anlamına gelmektedir.
Css tasarımda float kullanıldığı zaman diğer divleri ve bileşenleri etkilemektedir. Bu nedenle divleri sağ ve sol hizalarından kurtarmamız lazım. Bunun içinde;
Etiketi kullanıyoruz. Css kodlarımıza bunuda ekliyoruz.
.temizle{
clear:both;
}
Şimdi geldik menümüzü hazırlamaya. Temizle div sınıfından sonra şablonumuz bu şekilde oluyor.
Nav, ul, li ve a etiketlerinin toplu şablonunu veriyorum. Bundan sonra size menü alanının yukarı kaydırılması ve css sprite ile bakground verilmesini anlatacağım.
nav{
background:url(tema.png) 0 -160px;
height:70px;
margin-top:-10px;
position:relative;
width:1100px;
z-index:2000
}
nav ul{
float:left;
height:50px;margin-left:50px;margin-top:5px;position:absolute;width:550px
}
nav ul li{
float:left;
margin-top:20px;
}
nav ul li a{
color:#fd005f;
display:block;
font-size:14px;
font-weight:700;
margin-right:25px;
text-decoration:none;
text-shadow:#aaa 0 .1em .1em
}
Bu şekilde sitemizin arka planı, header bölümü ve menü kısmını şekillendirdik.
Css kodlamasında nav etiketini 1100px yaptık uzunluğu 70px oldu. Nav etiketini -10px yukarı kaldırdık. Bunu yapabilmemiz için position:relative; nesnesini kullandık. z-index:2000; yaptık ki menümüz header kısmının üstünde dursun. Ayrıca css sprite tekniği ile tema.png dosyamızdaki tema alanının soldan 0px yukarıdan -160px kaymasını sağladık. Bu şekilde temamızdaki alanlar yerine oturmuş oldu.
Kendi çapımda bir anlatım gerçekleştirdim umarım tekniği pekiştirmenize yardımcı olur.
Bu tekniği kullandığım web sitesi buradadır.
Not: Alıntı değildir.
