Admin Admin
Mesaj Sayısı : 113 Rep Puanı : 1 Kayıt tarihi : 20/05/09
| Konu: Tek sütunlu hackerfriend teması Paz Mayıs 31, 2009 12:31 am | |
| tasarımın üstüne - Kod:
-
<div id="tasarim"> <div id="baslik"></div> <div id="sitemenum"> <div class="animatedtabs"> <ul> <li class="selected"><a href="[url=http://hackerfriend.tr.gg/hayalimdeki_site.htm]http://hackerfriend.tr.gg/hayalimdeki_site.htm[/url]" title="tıklayınız..."><span>Hayalimdeki Site</span></a></li> <li><a href="[url=http://hackerfriend.tr.gg/onelayout01.htm]http://hackerfriend.tr.gg/onelayout01.htm[/url]" title="tıklayınız..."><span>Resimler</span></a></li> <li><a href="[url=http://hackerfriend.tr.gg/onelayout02.htm]http://hackerfriend.tr.gg/onelayout02.htm[/url]" title="tıklayınız..."><span>Sitenin Temeli</span></a></li> <li><a href="[url=http://hackerfriend.tr.gg/onelayout03.htm]http://hackerfriend.tr.gg/onelayout03.htm[/url]" title="tıklayınız..."><span>Başlık</span></a></li> <li><a href="[url=http://hackerfriend.tr.gg/onelayout04.htm]http://hackerfriend.tr.gg/onelayout04.htm[/url]" title="tıklayınız..."><span>İçerik Kısmı</span></a></li> <li><a href="[url=http://hackerfriend.tr.gg/onelayout05.htm]http://hackerfriend.tr.gg/onelayout05.htm[/url]" title="tıklayınız..."><span>İnce Ayarlar</span></a></li> <li><a href="[url=http://hackerfriend.tr.gg/onelayout06.htm]http://hackerfriend.tr.gg/onelayout06.htm[/url]" title="tıklayınız..."><span>Menüyü Yapmak</span></a></li> </ul> </div> </div> <div id="ust"></div> <div id="orta"> Tasarımın altına - Kod:
-
</div> <div id="alt"></div> </div> Css koduna - Kod:
-
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([url=http://img.webme.com/pic/h/hackerfriend/hayalimarkaplan.jpg]http://img.webme.com/pic/h/hackerfriend/hayalimarkaplan.jpg[/url]) top center fixed; } #tasarim { margin: 0 auto; width: 900px } #baslik { width: 845px; height: 150px; background: url([url=http://img.webme.com/pic/h/hackerfriend/hayalimbaslik.jpg]http://img.webme.com/pic/h/hackerfriend/hayalimbaslik.jpg[/url]); border: 3px solid #4699C3; } #ust { width:845px; height:131px; background: url([url=http://img.webme.com/pic/h/hackerfriend/ustsablon.png]http://img.webme.com/pic/h/hackerfriend/ustsablon.png[/url]); margin: 50px 0 0 0; } #orta { width:795px; background: url([url=http://img.webme.com/pic/h/hackerfriend/ortasablon.png]http://img.webme.com/pic/h/hackerfriend/ortasablon.png[/url]); padding: 0 25px 0 25px; } #alt { width:845px; height:131px; background: url([url=http://img.webme.com/pic/h/hackerfriend/altsablon.png]http://img.webme.com/pic/h/hackerfriend/altsablon.png[/url]); 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([url=http://img.webme.com/pic/h/hackerfriend/tab-blue-left.gif]http://img.webme.com/pic/h/hackerfriend/tab-blue-left.gif[/url]) 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([url=http://img.webme.com/pic/h/hackerfriend/tab-blue-right.gif]http://img.webme.com/pic/h/hackerfriend/tab-blue-right.gif[/url]) 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; } | |
|