css buton yapımı

cakirx · 16 Kasım 2007

ekte verdiğim resimleri yapıcağım butonun arkaplanı olarak kullanacağım. 6 tane yanana 116*31 pixel boyularında buton olucak.Ortalarındada yazı olucak anasayfa, hakkımızda vs. gibi. Hover durumunda yazı rengive butonun arkaplanı değişicek . Birkaç deneme yaptım li - ul ile ama istediğim şekle bir türlü sokamadım

yaptığım şablon: http://psders.com/cssdeneme/

solda alt alta olan butonlarda problem yok. Ama yanındaki "anasafa,müşteri hiz..." butonlar üst kısımda tablonun içinde yanyana olması gerekiyordu.(internet explorer de alt altta. FF de yanyana görünüyor) Birde butonların genişliklerini ben ayarlıyamıyorum kendisi yazı uzunluğuna göre ayarlıyor. Baya bir problem var açıkcası. Bunu başka nasıl yapabilirim yardımcı olabilirmisiniz.

cakirx · 16 Kasım 2007

yardım edebilecek kimse yokmu

sempaty · 17 Kasım 2007

#global-header .nav li {

float: canter;

}

bunu float:left; olarak dener misin
bu şekilde olmazsa buna ek olarak bir de
display:inline;
ekleyip dene

cakirx · 17 Kasım 2007

sempaty' Alıntı:
#global-header .nav li {

float: canter;

}

bunu float:left; olarak dener misin
bu şekilde olmazsa buna ek olarak bir de
display:inline;
ekleyip dene

dediğin şekilde uygulamaya çalıştım ama gene aynı butonların boyutlarını kendim ayarlayamıyorum haliyle kayıyor.

editlediğim halini upload ettim: http://psders.com/cssdeneme/

kullandığım kodu buraya yazim.

Kod:

/*----- MENU ----- */


#global-header .nav {
    height: 31px;
    background: url('images/index_13.jpg');
    padding: 0
    }
#global-header .nav ul {
    margin: 0;
    padding: 0;
    float: left;
    display:inline; 
    }
#global-header .nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 31px;
    float: left;
    display:inline; 
    }
#global-header .nav a {
    height: 31px;
    color: #161616;
	font-size : 10pt;
    padding: 0 9px;
    float: left;
    display:inline; 
    }
#global-header .nav .on a,
#global-header .nav a:hover {
    color: #FF9;
    text-decoration: none;
    background: url('images/index_14.jpg');
    border-bottom: 0px none;
    }

sayda kullandığım kod:

Kod:

<div id="global-header">   <div class="nav">
            <ul>

                <li><a href="">Anasayfa</a></li>
                <li><a href="">Müşteri Hizmetleri</a></li>
                <li><a href="">Hesabınız</a></li>
                <li><a href="">Sepetiniz</a></li>
                <li><a href="">Siparişi Bitir</a></li>
                <li><a href="">Kampanyalar</a></li>
            </ul>
        </div> </div>

Kodu başka bir sitenin css din alıp kendim düzenledim. Eksik bir yeri olabilir.Daha önce <div> daha önce div kullanarak yapmaya çalışmıştım oda olmadı

sempaty · 17 Kasım 2007

tümünün genişliği aynıysa,

#global-header .nav a {
height: 31px;
width: 150px;
..
}

herbirine farklı genişlik vermek için
<li style="width:100px;"><a href="">Anasayfa</a></li>
<li style="width:130px"><a href="">Müşteri Hizmetleri</a></li>
<li style="width:110px"><a href="">Hesabınız</a></li>
..

cakirx · 17 Kasım 2007

şuan istediğim hale geldi teşekkürler uzun zamandır öğrenmek istediğim bir yöntemdi. yalnız hazırcılık gibi olucak sanırım. Butonlar yerli yerinde ama ben yazıları ortalayamadım.

<li>
<p align="center"><a href="">Anasayfa</a></li>

bu şekilde yaptığım zaman yazı aşşağıya kayıyor.

örnek: http://psders.com/cssdeneme/

sempaty · 17 Kasım 2007

#global-header .nav a {
height: 31px;
width: 150px;
..
text-align:center;
}

cakirx · 17 Kasım 2007

tekrar teşekkürler. css kodlarını başta ezberlemeye zaman bulamadığım için. zamanla uyguladıkça öğreniyorum.

Bu arada kodun son halini verim. Başkalarınında işine yarayabilir

PHP:

#global-header .nav {
    height: 31px;
    background: url('images/index_13.jpg');
    padding: 0
    }
#global-header .nav ul {
    margin: 0;
    padding: 0;
    float: left;
    display: inline; 
    }
#global-header .nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 31px;
    float: left;
    display: inline; 
    }
#global-header .nav a {
    height: 31px;
	width: 116px;
    color: #445c1f;
	font-size : 10pt;
    padding: 0px;
    float: left;
    display: inline; 
    text-decoration: none;
    text-align:center;
    }
#global-header .nav .on a,
#global-header .nav a:hover {
    color: #000000;
    text-decoration: none;
    background: url('images/index_14.jpg');
    border-bottom: 0px none;
    }

PHP:

<div id="global-header"> 
         <div class="nav">
            <ul>
                <li><a href="">Anasayfa</a></li>
                <li><a href="">Müşteri Hizmetleri</a></li>
                <li><a href="">Hesabınız</a></li>
                <li><a href="">Sepetiniz</a></li>
                <li><a href="">Siparişi Bitir</a></li>
                <li><a href="">Kampanyalar</a></li>
            </ul>
         </div> 
</div>

RuNdLl.exe · 14 Aralık 2007

kanka ısıme yaradı cok tsk ettım saol sayende bende ogrendım bu dedıgını

css buton yapımı

0

0

1

0

1

0

1

0

RuNdLl.exe