Kodlarla Dövüşen Adam:HF

Forum


    Bilgi Paylaşım Formu
    Sormak istediğniz herşeyi sorabilir, paylaşımda bulunabilirsiniz...

Hakkında


    Her yıl yapılan 'en iyi buğday' yarışmasını yine aynı çiftçi kazanmıştı. Çiftçiye bu işin sırrı soruldu...




Bir Hikaye: En iyi Buğday
Her yıl yapılan 'en iyi buğday' yarışmasını yine aynı çiftçi kazanmıştı. Çiftçiye bu işin sırrı soruldu. Çiftçi,

- "Benim sırrımın cevabı, kendi buğday tohumlarımı komşularımla paylaşmakta yatıyor" dedi.

Elinizdeki kaliteli tohumları rakiplerinizle mi paylaşıyorsunuz? Ama neden böyle bir şeye ihtiyaç duyuyorsunuz? diye sorulduğunda, devamını oku...


Bilgi Paylaşımı grubumuza kayıt olun...
Grubu ziyaret et!
Hafta içi hergün bir adet komik, eğlenceli yada
ilginç video ve güncel full program sizlerle...

Tümünü Göster / Kapat




Big Dog Robot




Arap Köy
3D Wallpapers
Photoshopar
Komplo Var
Pazarlama©a
Uğra Buraya
FreGEN
Kuş ve Balık Evi
Hakan-Fan


ÖrneXiteler
Afilli Yalnızlık
Ali Web1
Bzmcty
Cixin Mekanı
İddaa Zamanı
İstanbul Rehberi
Orjinal Game
Sanalcity


HackeR FrienD

onelayout06

Hayalimdeki Site

Tek Sütun

3. Adım:  Menü oluşturmak


TR.GG'de bir CSS tasarım yaparken kullanıcıların en çok zorlandığı yerin menü olduğu çoğu kez tarafıma iletildi. CSS menü yapmak için benim sizlere tavsiyem bu hizmeti veren siteleri kullanmak. Oturup sıfırdan kod yazmak yerine, hazır kodları kendinize göre değiştirebilirsiniz.  Hazır menüler için aşağıdaki siteleri ziyaret edebilirsiniz.

1. Dynamicdrive
2. Alvit
3. CSS Menu Maker
4. Bilgi Servisim (İlgili linkte ücretsiz olarak programı indirebilirsiniz. Programla basit CSS menüler oluşturulabiliyor.)

Eğer elinizde hazır menünüz varsa bunu sitenize direkt olarak uygulayabilirsiniz. Ben bu örneğimiz için bu sayfadaki menüyü sitemize uygulayacağım.

• Menüdeki resimleri kendi siteme yükledim.
• CSS kodundaki style etiketlerini kaldırarak kendi sitemdeki CSS kodu kısmına yapıştırdım.
• Son olarak menümüz için bir katman oluşturalım. Menüyü bu katman içerisine koyacağız.

#sitemenum{
width:845px;
}


Uyguladığımız menüyü bu katman arasına yerleştirdim.

<div id="sitemenum">
<div class="animatedtabs">
<ul>
    <li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İ&ccedil;erik Kısmı</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Men&uuml;y&uuml; Yapmak</span></a></li>
</ul>
</div>
</div>
 
Eğer şu an sitemizde olduğu gibi menüyü sayfalar yukarı aşağı kaydıkça sabit olarak görmek istiyorsak menü katmanına position: fixed eklemek yeterli.

#sitemenum{
width:845px;
position: fixed;
}


Bu haliyle sitemizin görünümü buradaki gibi olacak.

Eğer menünün nasıl sabit durduğunu görmek isterseniz burayı tıklayınız...

***Katmanların renklerine dikkat edin. Bir sonraki sayfada resmi inceleyin***


TASARIM ÜZERİNDEKİ YAZI
<div id="tasarim">
<div id="baslik"></div>
<div id="sitemenum">
<div class="animatedtabs">
<ul>
    <li class="selected"><a href="http://hackerfriend.tr.gg/hayalimdeki_site.htm" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout01.htm" title="tıklayınız..."><span>Resimler</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout02.htm" title="tıklayınız..."><span>Sitenin Temeli</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout03.htm" title="tıklayınız..."><span>Başlık</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout04.htm" title="tıklayınız..."><span>İ&ccedil;erik Kısmı</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout05.htm" title="tıklayınız..."><span>İnce Ayarlar</span></a></li>
    <li><a href="http://hackerfriend.tr.gg/onelayout06.htm" title="tıklayınız..."><span>Men&uuml;y&uuml; Yapmak</span></a></li>
</ul>
</div>
</div>
<div id="ust"></div>
<div id="orta">

TASARIM ALTINDAKİ YAZI
</div>
<div id="alt"></div>
</div>

CSS KODU
Burayı tıklayınız...






Bu site 1024x768 çözünürlük ve üzeri,
32 bit görüntü kalitesi ile
FF1, IE7 ve Google Chrome
tarayıcıları için optimize edilmiştir.
Alıntı olarak göstermek şartıyla
sitemizdeki tüm içeriği kullanabilirsiniz.




Etiketler: CSS|Wordpress|Joomla|HTML|JAVA|Tasarım|Photoshop|İngilizce|Google Adsense|Google Pagerank|Tekno Bilgi|Tekno Haber|Bilgi Paylaşımı|


Zulüm, başkasına ait olanları sahiplenmektir ve Allah zulmedenlerin yanında değildir!





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