Sitemize Giriş Yapın veya KAYIT Olun.


 
AnasayfaAnasayfa  TakvimTakvim  SSSSSS  AramaArama  Üye ListesiÜye Listesi  Kullanıcı GruplarıKullanıcı Grupları  Kayıt OlKayıt Ol  Mod.BasvurusuMod.Basvurusu  Giriş yapGiriş yap  

Paylaş | 
 

 Hayalimdeki Site

Aşağa gitmek 
YazarMesaj
[AdmiN]
Admin
Admin
avatar

Mesaj Sayısı : 124 1469 Kayıt tarihi : 18/06/10
Yaş : 26 Nerden : İstanbuL

MesajKonu: Hayalimdeki Site   Cuma Ağus. 13, 2010 10:19 am

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. http://www.dynamicdrive.com/style/
2. http://alvit.de/css-showcase/css-navigation-techniques-showcase.php
3. http://www.cssmenumaker.com/horizontal_css_menu.php
4. http://www.bilgiservisim.com/css-menu-generator-31/ (İ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
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

* { padding: 0; margin: 0; }

body { font-family: Arial;
font-size: 12px;
background: url(http://img.webme.com/pic/h/hackerfriend/hayalimarkaplan.jpg) top center fixed;
}

#tasarim {
margin: 0 auto;
width: 900px
}

#baslik {
width: 845px;
height: 150px;
background: url(http://img.webme.com/pic/h/hackerfriend/hayalimbaslik.jpg);
border: 3px solid #4699C3;
}

#ust {
width:845px;
height:131px;
background: url(http://img.webme.com/pic/h/hackerfriend/ustsablon.png);
margin: 50px 0 0 0;
}

#orta {
width:795px;
background: url(http://img.webme.com/pic/h/hackerfriend/ortasablon.png);
padding: 0 25px 0 25px;
}

#alt {
width:845px;
height:131px;
background: url(http://img.webme.com/pic/h/hackerfriend/altsablon.png);
float: left;
}


/*Eğer Menüyü sabitlemek isterseniz position:fixed; kodunu katmana eklemeniz yeterli.*/

#sitemenum {
width:845px;
}


/* Menü kodu burada başlıyor*/
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://img.webme.com/pic/h/hackerfriend/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://img.webme.com/pic/h/hackerfriend/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

Sonucunu Görmek İstiorsanız Tık.
#http://hackerfriend.tr.gg/onelayout07.htm

Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://hase.benimforum.org
Masumkurt
Administrator
Administrator
avatar

Mesaj Sayısı : 110 190 Kayıt tarihi : 24/06/10
Nerden : İstanbul

MesajKonu: Geri: Hayalimdeki Site   Ptsi Ekim 25, 2010 6:19 pm

GüzeL Paylaşım . Very Happy Very Happy
Sayfa başına dön Aşağa gitmek
Kullanıcı profilini gör http://ayvaliktatilyeri.tr.gg
 
Hayalimdeki Site
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» Site Doğrulama -> Metatag -> Portal ??
» Canlı sunum, web karakter, insanlı karşılama, konuşan site, hareketli web (yaoti.com/tr)
» Site dizine eklenmedi [özellikle shanex]
» Dost site kodu lazım acil
» Site Haritaları nasıl gönderilir?

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
 :: TR.GG :: Hayalinizdeki Tasarım-
Buraya geçin: