Ana Sayfa

Blackinci » CSS » Css İle Dikey Menü yapımı
Üye Paneli

Kayıt Ol Şifremi Unuttum?


Give Me Everything

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    May 2012    »
PtSaÇrPrCuCtPz
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
blackinci
27 Temmuz 2008
CSS
Yazdır
12942 Kez Okunmuş
26 Yorum Yapılmış
 (Oy Sayısı: 35)


Benzer Konular

Css İle Dikey Menü yapımı
Css İle Dikey Menü yapımı

Uzun Süren Bir aradan sonra kendime ayırabildiğim vakti birşeyler ile değerlendirmek istedim bir dikey menü yaptım
HTML kodlarmızla başlayalım bakalım

<dl class="menu">
<dd>MENÜ</dd>
<dt><a href="#">Ana Sayfa</a></dt>
<dt><a href="#">Forum</a></dt>
<dt><a href="#">Uygulamalar</a></dt>
<dt><a href="#">Hakkında</a></dt>
<dt><a href="#">İletişim</a></dt>
</dl>
Yukarıda gördüğünüz gibi DL sıralı liste kodlarını kullandım UL de kullanılabilirdik ama bu sefer farklı olsun istedim.
Geçelim css kısmına

dl.menu {
width:200px;
border: 1px solid gray;
font-family: Verdana,Arial,sans-serif;
font-weight:bold;
}
Menümüze font özellikleri ve genişlik değeri verdik

dl.menu dd {
height:24px !important; /* Modern Tarayıcılar için */
height:30px; /* İE6 için */
background: url(menu.png) 0 -50px no-repeat;
padding: 6px 0 0 3px;
margin:0;
font-size: 14px;
color: lightyellow;
}
Menü başlığımız için arka plan resmi verdik yükseklik değeri verdik ve margin değerini sıfırladık font boyutu ve renk değeri verdik

dl.menu dt {
border-top: 1px solid silver;
height: 25px;
font-size: 12px;
overflow: hidden;
}
td kodunun üst kısmına border uyguladık gükseklik verdik font boyutun verdik ve yüksekliğin taşmaması için overflow hidden kodunu kullandık

dl.menu dt a {
display block;
height: 25px;
width: 100%;
padding: 5px 0 0 22px;
float: left;
text-decoration: none;
background: #fff url(menu.png) top left no-repeat;
color: gray;
}
a koduna blok görünümü ve yükseklik verdik genişlik verdik linklerimize alt çizgi koymadık ve renklendirip sola yasladık son olarak arkapan resmi atadık


dl.menu a:hover {
background: #fff url(menu.png) 0 -25px no-repeat;
color:#FF6464;
text-decoration: none;
}
atadığımız arkaplan resmini maus üstüne geldiğinde 25 yukarı kaydırdık renk verip alt çizgi oluşmasını istemedik.

İşte hepsi bukadar grafiklerin PSD dosyasıda rar arşivinin içerisindedir alttaki bağlantıdan dosyayı indirebilirsiniz hoşcakalın...

Örnek - Ön İzleme

dikey-menu.rar [11.74 Kb] (İndirme: 1392)
22 Ekim 2008 05:15 16Evan demiş ki:
<br/> Yerine </br> Kullan
21 Ekim 2008 16:50 15Most_Speed demiş ki:
css kodlarıyla oynamadım sadece yazı rengini değiştim şablonlarda ise eşitleyemiyorum ya :S
21 Ekim 2008 08:51 14Evan demiş ki:
EditLerken KodLarda Hata Yapmış oLmayasın?
21 Ekim 2008 04:24 13Most_Speed demiş ki:
teşekkür ederim ilgilendiğiniz için resim link'i aşağıdadır

http://img522.imageshack.us/my.php?image=gfdgdfggx2.png

ie deki sorunda eksik belirtiğim birşey var kenarlık çizgileri yok
20 Ekim 2008 15:15 12blackinci demiş ki:
Yazdığınız kodlardan dolayı sizde öyle görünüyordur benim yaptığım örnek sayfasında İE veya başka bir tarayıcıda hiç bir fark yok. Bu kaymayıda bir resimle gösterirmisiniz
20 Ekim 2008 09:54 11Most_Speed demiş ki:
ya ben bunu forum ansayfasına yan blok olarak yaptım gayet güzel ama tabloyla eşitleyemedim <br/> kodu veriyorum biraza aşağı kayıyor siliyorum bu seferde az bişey yukarda kalıyor forum tablosunda. Yardım ederseniz sevinirim saygılarımlai

flood gibi olucak ama ie de çok berbat görünüyor
4 Eylül 2008 10:31 10Kemal demiş ki:
Saolun çok güzel ve açıklayıcı olmuş
4 Ağustos 2008 14:38 9Oğuzhan SARI (53HaCKeR89/RizeliGenc demiş ki:
Çok süper olmuş.. ul suz il siz bir menuyü bu kadar seveceğimi bilemezdim :)
Emeğine sabrına sağlık..
Çok işime yaradı..
2 Ağustos 2008 15:36 8Arno demiş ki:
güzel anlatım olmuş. dt dl nin ul li den farkı yanlış hatırlamıyorsam başına madde işareti almaması bir tane de kullanım farkı olması lazım. Ama önemli olan tanımın içeriği olduğu için istersen abdulrezak diye tanımla bişey fark etmez :)
1 Ağustos 2008 12:48 7MuRaTTi demiş ki:
ne demek abi görevimiz wink smile
◄ Geri 1 2 3 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2