GriWolf

Hareket Zamanı

Tasarımın Üstüne:

<div id="container"> <div id="masthead"> <h1>Gri Wolf Tasarımı</h1> <h2>Coder : Gncemre</h2> </div><!-- masthead--> <div id="navbar"> <ul> <li><span><a href="index.html" _fcksavedurl="index.html" id="leftcorner">Anasayfa</a></span></li> <li><a href="index.html" _fcksavedurl="index.html">Hakkimizda</a></li> <li><a href="index.html" _fcksavedurl="index.html">Html Kodları</a></li> <li><a href="index.html" _fcksavedurl="index.html">Photoshop</a></li> <li><a href="index.html" _fcksavedurl="index.html">Ziyaretçi Defteri</a></li> <li><a href="index.html" _fcksavedurl="index.html" id="rightcorner">İletişim</a></li> </ul> </div><!-- navbar--> <div id="mainbody">

Tasarımın Altına:

</div><!-- mainbody--> <div id="footer"> <p style="text-align: center">© 2008 Site Adınız | <a href="http://pratikweb.tr.gg/" _fcksavedurl="http://pratikweb.tr.gg/">website design - Pratikweb.tr.gg</a></p> </div><!-- footer--> </div><!-- container-->

Css Kod Bölümüne:

/*############################################################# Adi: Gri Wolf Tasarımı Tarih: 27.02.2009 Uygulayan: Emre Cinar (Gncemre) URL: http://www.pratikweb.tr.gg #############################################################*/ /* Generic Styling */ 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;} body{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #646464; background:#787878 url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/page_bg.jpg) 0 0 repeat-x; text-align: center; /* for IE */ } #container{ margin: 0 auto; /* align for good browsers */ text-align: left; /* counter the body center */ top: 0; left: 0; width: 800px; } /* Masthead Area */ #masthead{ background:url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/masthead.gif) 0 0 repeat-x; width: 800px; height: 150px; overflow: hidden; } #masthead h1{ margin-left:20px; font-size: 32px; font-weight: bold; color: #282828; } #masthead h2{ margin:-10px 0 0 20px; font-size: 20px; font-weight: bold; color: #646464; } /* Main Body Area */ #mainbody{ border-width: 5px; border-spacing: 2px; border-style: solid; border-color: #444444; border-collapse: separate; width: 750px; background:#ffffff; clear:both; margin-top: 50px; padding: 20px; text-align:left; } /* use below for left aligned Photos */ .left-photo{ border-width: 3px; border-spacing: 2px; border-style: solid; border-color: #cccccc; margin:0 20px 0 0; } /* use below for right aligned Photos */ .right-photo{ border-width: 3px; border-spacing: 2px; border-style: solid; border-color: #cccccc; margin:0 0 0 20px; } h1{ font-size: 24px; font-weight: bold; color: #646464; } h2{ font-size: 20px; font-weight: bold; color: #646464; } h3{ font-size: 16px; font-weight: bold; color: #646464; } h4{ font-size: 14px; font-weight: bold; color: #646464; } p{ font-size: 12px; line-height: 20px; color: #646464; } a:link, a:visited { color: #c00000; text-decoration:none; border-bottom:1px dashed #c00000; } a:hover, a:active { color:#ff0000; text-decoration:none; border-bottom:1px solid #ff0000; } /* Foter Area */ #footer{ width: 800px; height: 62px; background:url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/footer.gif) no-repeat; padding-top:10px; clear: both; } #footer p{ color:#ffffff; } #footer a:link, #footer a:visited{ color: #ffffff; text-decoration: none; border-bottom:1px dashed #787878; } #footer a:hover{ color: #c00000; text-decoration: none; border-bottom:1px solid #c00000; } /* Navigation */ #navbar{ margin: 0; padding: 0; width:800px; clear:both; } #navbar ul{ background: url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/bg.gif) bottom center repeat-x; padding-left: 0; margin: 0; float: right; font-weight: bold; } * html #navbar ul{ /*IE only rule. Add extra margin-bottom*/ margin-bottom: 1em; } #navbar ul li{ display: inline; } #navbar ul li a, #navbar ul li span{ float: left; color: #ffffff; font-weight: bold; padding: 7px 13px 8px 6px; text-decoration: none; background: url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/devider.gif) bottom right no-repeat; border: none; } #navbar ul li span{ /*Targets span tag to the right of #leftcorner below*/ padding-left: 0px; } #navbar ul li a#leftcorner{ float: none; padding-left: 10px; padding-right: 0px; background: url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/leftcorner.gif) bottom left no-repeat; } #navbar ul li a#rightcorner{ padding-right: 10px; background: url(http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/rightcorner.gif) bottom right no-repeat; } #navbar ul li a:hover{ text-decoration: underline; border: none; } /* Cool Button */ .clear { /* generic container (i.e. div) for floating buttons */ overflow: hidden; width: 100%; } a.button { background: transparent url('http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; border: none; } a.button span { background: transparent url('http://www.gncwebtasarim.co.cc/PratikWeb/Tasarimlar/GriWolf/images/bg_button_span.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } a.button:active { background-position: bottom right; color: #000; outline: none; /* hide dotted outline in Firefox */ } a.button:active span { background-position: bottom left; padding: 6px 0 4px 18px; /* push text down 1px */ }

Güle Güle Kullanın