THB - Ücretsiz Hizmetler

usttecubukyapma

Gerekli Resim:



CSS kodu: (Açıklama aşağıda)

#cubuk {  
background-image: url(/bgtop.png);  
margin: auto;   
font-size:11px;    
font-family: Trebuchet MS, Arial, Verdana; 
top: 0px; 
height: 30px;  
left: 0px;  
position: fixed;  
right: 0px;  
color: #fff;  
width: 100%;  
}    

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

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

HTML kodu:

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

#cubuk { // ana katman olan çubuğun katman adı
background-image: url(https://img.webme.com/pic/t/thbproduction/bgtop.png); //çubuğun arkaplan resmi
font-size:11px;  //çubuğun içindeki yazıların büyüklüğü
font-family: Trebuchet MS, Arial, Verdana; //çubuğun içindeki yazıların yazı tipi
top: 0px; //çubuğun üstten uzaklığı
height: 30px; //çubuğun yüksekliği  % veya px cinsi 
margin: auto; //çubuğun iki katman arasında ortalanması sağlar
position: fixed; //çubuğun sayfa aşağı indikçe beraberinde inmesini sağlar eğer bunu istemiyorsanız absolute komutunu kullanın.
color: #fff; //çubuğun içindeki yazıların rengi
width: 100%; //çubuğun genişliği % veya px cinsi
}

.incubuksol {  //çubuğun solundaki katmanın adı
float: left; //yazı akışının soldan olduğunu göstermekte
 margin: 4px; //katmanın içten alt,üst,sağ,sol olmak üzere 4'er px kaydırıldığını ifade eder.
 }  

.incubukorta {  //çubuğun ortası için komut adı
margin: 4px;  //katmanın içten alt,üst,sağ,sol olmak üzere 4'er px kaydırıldığını ifade eder. 
}  
.incubuksag {  //çubuğun sağı için komut adı 
float: right;  //yazı akışının sağdan olduğunu göstermekte 
margin: 4px;  //katmanın içten alt,üst,sağ,sol olmak üzere 4'er px kaydırıldığını ifade eder.  
}