cok_asi55 adlı üyeden alıntı: mesajı görüntüle

Ya arkadaşlar işin acemisiyim, internette gördüklerim ile 5 adetten oluşan bir resimli hover butonu yapmaya uğraşıyorum.

Sanırım hem gereğinden fazla kod uzunluğu oluştu hemde butonlarım alt alta listelendi.

kullandığım kod aşağıdaki gibi

style.css

#f1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;

}

#f1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}




#t1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;

}

#t1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}




#g1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;

}

#g1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}




#y1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;

}

#y1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}




#r1
{
	display: block;
	width: 60px;
	height: 60px;
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;

}

#r1:hover
{ 
	background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0;
}

bileşenlerdeki metin kutusuna koyduğum linkler

<a id="f1" href="#" title="Facebook"></a>
<a id="t1" href="#" title="Twitter"></a>
<a id="g1" href="#" title="Google+"></a>
<a id="y1" href="#" title="Youtube"></a>
<a id="r1" href="#" title="RSS"></a>

göründüğü şekli




Şimdi bunları tek bir css kodunda nasıl toparlarım? ve alt alta değilde yan yana nasıl sıralarım?

<div class="cerceve">
<li><a href="#" title="Facebook"></a></li>
<li><a href="#" title="Twitter"></a></li>
<li><a href="#" title="Google+"></a></li>
<li><a href="#" title="Youtube"></a></li>
<li><a href="#" title="RSS"></a></li>
</div>

.cerceve {
   width:300px;
    height:60px;
    background-color:black;
}
.cerceve li {
   display: block;
   width: 60px;
   height: 60px;
    list-style:none;
   float:left;
}

.cerceve li:nth-child(1){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(1){
 background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0;
}
.cerceve li:nth-child(2){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(2){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0;
}
.cerceve li:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(3){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0;
}
.cerceve li:nth-child(4){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(4){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0;
}
.cerceve li:nth-child(5){
background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;-content/themes/pitch/images/r1.png") no-repeat 0 0;
}
.cerceve li:hover:nth-child(5){
   background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0; 
}