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.

 
Bugün 13 ziyaretçi (99 klik) kişi burdaydı!
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



Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol