hosting menu left
hosting menu right

website hosting main area top

kanalbizim.tr.gg | Chat,Sohbet,Sohpet,Kızlarla Sohbet

css sekmeli menu

CSS ile Sekmeli(Tab) Menü Yapımı;

1. Adım Daha önceki menü örneklerinden de alışkın olduğumuz margin,padding ve liste imgelerini kaldırma işlemini yapalım:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 600px;
float: left;
border-bottom: 1px solid gray;
}

  Yukarıda bahsettiğimiz metodu uygulamak için iki adet resim hazırlamalıyız.

Sol için resim için urlSağ resim için url

2. Adım Menüyü yatayda sıralamak için float:left tanımlaması yapıyoruz ve sağ zemin resmini(sekme_sag_resim.gif) uyguluyoruz:

ul li {
float: left;
background: url(images/sekme_sag_resim.gif) no-repeat top right;
}

3. Adım Daha önceki örneklerde gördüğümüz gibi tüm sekmeye link vermek için display:block tanımlaması yapıyoruz, sekmenin sol kısmını tamamlamak için zemin resmi olarak(sekme_sol_resim.gif) ekliyoruz, tüm sekmelerde aynı yüksekliği yakalamak için line-height tanımlamasını yapıyoruz, text-decoration: none ile link alt çizgilerini kaldırıyoruz ve IE Mac ortamında sorun çıkarmaması için float:left ekliyoruz:

li a {
background:url(images/sekme_sol_resim.gif) no-repeat left top;
display: block;
padding: 0 2em;
line-height: 2.5em;
text-decoration: none;
float: left;
color:#000;
}

4. Adım Güzel bir görünüm katmak için basit bir rollover efekti verelim:

ul a:hover {
color: #9D9C9C;
}

Yukarıdaki Listemizi Bedava-Siteme uygulama yapıyoruz.

 Yukarıda verilmiş olan kodları aşıgıdaki gibi uyguluyoruz.

Örnek Görünüm.


Buradaki amaç tek tek url yapıştırmak yerine direk bu yolu kullana biliriz.Yada Menü gizleme kodunu uygulayarak yapa biliriz.

kanalbizim.tr.gg

ARAMA YAP

ONLİNE BAŞVURU

Sarı Sayfalar
Online İŞ ilanları
İş ilanları
İş ilanları
website hosting main area bottom

Kanalbizim.tr.gg © Copyright 2007-2011



=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=