Sitemize Giriş Yapın veya KAYIT Olun.
Sitemize Giriş Yapın veya KAYIT Olun.
Would you like to react to this message? Create an account in a few clicks or log in to continue.


 
AnasayfaAnasayfa  AramaArama  Latest imagesLatest images  Kayıt OlKayıt Ol  Mod.BasvurusuMod.Basvurusu  Giriş yapGiriş yap  

 

 Hayalimdeki Site

Aşağa gitmek 
2 posters
YazarMesaj
[AdmiN]
Admin
Admin
[AdmiN]


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

Hayalimdeki Site Empty
MesajKonu: Hayalimdeki Site   Hayalimdeki Site EmptyCuma 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
http://hase.benimforum.org
Masumkurt
Administrator
Administrator
Masumkurt


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

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

GüzeL Paylaşım . Very Happy Very Happy
Sayfa başına dön Aşağa gitmek
http://ayvaliktatilyeri.tr.gg
 
Hayalimdeki Site
Sayfa başına dön 
1 sayfadaki 1 sayfası
 Similar topics
-
» Site kurma paneli
» Sayın Daum Susmalıdır! | Resmi Site

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