usttecubukyapma

 

usttecubukyapma

Merhaba,
Yeni versiyonun ilk dersinde yine sizlerleyim sizlere bu dersimizde sitemizdeki gibi nasıl yapacağımızı öğreneceğiz..




Bu üst çubuğu yapmak için 3 şeye ihtiyacımız var;
*Css kodu
*Ana katman
*Ve bunları bölümleyen alt katmanlar

Öncelikle css kodumuza bakalım.

<style>

#cubuk {
background-image: url(https://img.webme.com/pic/t/thbproduction/bgtop.png);
border-style: none;
margin:0px;
font-size:11px; 
font-family: Trebuchet MS, Arial, Verdana;
top: 0px;
margin-bottom:0px;
padding:0px;
z-index:1;
height: 30px;
left: 0px;
position: fixed;
right: 0px;
color: #fff;
width: 100%; }

.incubuksol {
float: left;
margin: 4px;
}

.incubukorta {
float: center;
margin: 4px;
}

.incubuksag {
float: right;
margin: 4px;
}

</style>

"cubuk" adlı css kodu ana katmanımızın stil kodudur..
bu stil kodu içerisinde yer alan background-image komutu çubuğun arkaplanını simgeler ve bu arkaplanı photoshop gibi resim düzenleme araçlarında oluşturabiliriz. Fakat bunları oluştururken gradient kullanmalıyız ve bu gradientler sağa ve sola genişlerken resmin bozulmayacağı gradientler olmalıdır.

"incubuk..." adlı alt katmanlarımızda çubuğun sağ,sol ve orta bölümlerini simgeliyor.

"witdh: %100" komutu sayesinde sitenize giren hangi kullanıcının ekran çözünürlüğü ne kadr geniş olursa olsun hep o genişliği sabitleyecektir.

Css kodunu eğer css design tasarımını kullanıyorsanız Tasarım Ayarları/Gelişmiş Ayarlar/Css Koduna koyunuz.

Eğer İceblue,red gibi sabit tasarımlar kullanıyorsanız <style>...</style> tagları arasında Tasarım Ayarları/ Gelişmiş Ayarlar'dan istediğiniz kısma koyabilirsiniz.

Şimdi gelelim katman kodlarımıza,

<div id="cubuk">

<div class="incubuksol">   </div>
<div class="incubuksag">   </div>
<div class="incubukorta">   </div>

</div>

Burada gördüğünüzde katmanların ve alt katmanların Html olarak kodlanmış halleridir.

İstediğiniz şekilde kodların arasına istediğiniz şeyi koyup kullanabilirsiniz..

Not: Eğer ben bu çubuğu üstte değil altta kullanmak istiyorum diyorsanız.  "#cubuk" adlı stil kodundaki şu değişiklikleri yapınız.
top: 0px; adlı kısmı bulun ve şununla değiştirin:
bottom: 0px ile değiştirin.

*Burada yaptığımız işlem sadece üstte olan uzaklığı altta olan uzaklığa değiştirdik ve üstteki çubuğu alta aldık =)

Sorunlar:
*Konuya ait bir sorunu dile getirmek istiyorum eğer Css Design tasarımını kullanıyorsanız, Css kodu kısmına kodu <style>...</style> kodalrı arasında eklemeyin aksi halde çubuk görülmeyecektir..

İyi günler
Bir dahaki derse kadar görüşmek üzere..