Pusu Vadisi - CSS Design 7

Screan Shoot

Tasarımın Üzerindeki Yazı

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Metallic Website Template, free css template, free website template</title> <meta name="keywords" content="Metallic Website Template, free css template, free website template, CSS, XHTML" /> <meta name="description" content="Metallic Website - free xhtml/css website template by www.hazax.de.tl" /> <style type="text/css"> /* CSS'yi Tasarlayan: http://www.hazax.de.tl/ */ body { margin: 0; padding: 0; line-height: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #a8b5b2; background: #121e1b url(https://img.webme.com/pic/h/hazax/hazaxmetalik_main_bg.png) repeat; } a:link, a:visited { color: #dbdb13; text-decoration: none; font-weight: normal;} a:active, a:hover { color: #FFFF99; text-decoration: underline;} p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; } .margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; } .margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; } .margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; } .margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; } .margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; } .margin_right_30 { margin-right: 30px; } .margin_right_40 { margin-right: 40px; } .rc_btn_01 a { clear: both; float: right; display: block; width: 104px; height: 25px; padding: 5px 0 0 0; font-size: 12px; text-align: center; color: #cfa937; text-decoration: none; border: none; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_button_01.png) no-repeat; } .rc_btn_01 a:hover { background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_button_02.png) no-repeat; color: #FFFF99; } #hazaxmetalik_container { width: 980px; margin: 0 auto; padding: 40px 0; } /* top panel */ #hazaxmetalik_top_panel { width: 940px; height: 141px; padding: 0 20px; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_top_panel_bg.png); } #hazaxmetalik_top_panel #top_panel_ls { float: left; width: 280px; } #hazaxmetalik_site_title { margin-left: 20px; padding-top: 45px; font-size: 25px; font-weight: bold; color: #ffffff; } #hazaxmetalik_top_panel #top_panel_rs { float: right; width: 660px; } #top_panel_rs #search_section { float: right; padding: 20px 20px 10px 0; margin-bottom: 6px; width: 400px; } #search_section form { float: right; margin: 0px; padding: 0px; } #searchfield { height: 15px; width: 200px; padding: 5px; color: #000; font-size: 13px; font-variant: normal; line-height: normal; background: #606060; border: 1px solid #969696; } #searchbutton{ width: 106px; height: 29px; margin: 0 0 0 10px; padding: 0 6px; cursor: pointer; font-size: 12px; font-weight: bold; text-align: center; vertical-align: bottom; white-space: pre; color: #ffffff; background: #ba9835; border: 1px solid #000; } /* end of top panel */ /* menu */ #hazaxmetalik_menu { clear: both; } #hazaxmetalik_menu ul { float: left; margin: 0px; padding: 0px; list-style: none; } #hazaxmetalik_menu ul li{ display: inline; } #hazaxmetalik_menu ul li a{ float: left; display: block; height: 40px; margin-left: 10px; padding: 17px 30px 0 20px; font-size: 13px; font-weight: bold; text-decoration: none; color: #ffffff; outline: none; } #hazaxmetalik_menu li a:hover, #hazaxmetalik_menu li .current{ position: relative; color: #ffffff; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_menu_button_r.png) bottom right no-repeat; } #hazaxmetalik_menu li a:hover span, #hazaxmetalik_menu li .current span { position: absolute; display: inline-block; width: 10px; height: 57px; bottom: 0px; left: -10px; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_menu_button_l.png) left bottom no-repeat; } /* end of menu */ /* banner */ #hazaxmetalik_banner { clear: both; width: 860px; height: 291px; margin: 0 auto; padding: 0 60px; text-align: center; background:url(https://img.webme.com/pic/h/hazax/hazaxmetalik_banner.png); } #banner_header_01 { padding: 65px 0 15px 0; font-size: 40px; font-weight: bold; color: #bf9f3f; } #banner_header_02 { margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #b6ad94; } #banner_text { color: #cccccc; font-size: 14px; } #banner_text p{ margin-bottom: 20px; } /* end of banner */ /* hazaxmetalikcontent */ #hazaxmetalik_content { clear: both; width: 860px; margin: 0 auto; padding: 20px 60px 0 60px; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_content_m.png) repeat-y; } #ct { clear: both; width: 980px; height: 20px; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_content_top.png) no-repeat; } #cb { clear: both; width: 980px; height: 50px; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_content_b.png) no-repeat; } #hazaxmetalik_content #hazaxmetalikcontent_right{ float: right; width: 220px; } #hazaxmetalik_content #hazaxmetalikcontent_left{ float: left; width: 600px; } .hazaxmetalikcontent_header_01 { font-size: 22px; color: #42c7f8; padding-bottom: 10px; margin-bottom: 20px; } .hazaxmetalikcontent_header_02 { font-size: 22px; color: #42c7f8; padding-bottom: 15px; } #hazaxmetalikcontent_left .hazaxmetalikcontent_left_section { clear: both; } .hazaxmetalikcontent_left_section p{ text-align: justify; padding-bottom: 10px; } #hazaxmetalikcontent_left .hazaxmetalikcontent_left_280_section { float: left; width: 280px; } .hazaxmetalikcontent_left_280_section .image_wrapper { background: #333; padding: 9px; margin-bottom: 10px; } .hazaxmetalikcontent_left_280_section .image_wrapper img { border: 1px solid #ffffff; } .hazaxmetalikcontent_left_280_section ul { margin: 20px 0 20px 30px; padding: 0px; } .hazaxmetalikcontent_left_280_section ul li{ margin-bottom: 10px; color: #dbdb13; list-style: decimal-leading-zero; } .hazaxmetalikcontent_left_280_section ul li a{ color: #dbdb13; } .hazaxmetalikcontent_left_w600_wrapper { border: 1px solid #000; } .hazaxmetalikcontent_left_w600_inner { padding: 30px 28px; color: #ffffff; background: #333; border: 1px solid #666; } .hazaxmetalikcontent_left_w600_inner .image_wrapper{ border: 1px solid #ffffff; background: #cccccc; padding: 4px; margin-bottom: 5px; } .image_wrapper img{ border: none; } .box_w255 { float: left; width: 255px; } #hazaxmetalikcontent_right .hazaxmetalikcontent_right_section { clear: both; } .news_section .news_date { font-size: 12px; font-weight: bold; color: #42c7f8; } .news_section .news_title { font-size: 12px; font-weight: bold; color: #bf9f3f; } .hazaxmetalikcontent_right_section form { padding: 0px; margin: 10px 0 0px 0; } .hazaxmetalikcontent_right_section #subscribe_field { padding: 5px 0 0 0; height: 20px; width: 215px; margin-bottom: 10px; } .hazaxmetalikcontent_right_section #subscribe_button { float: right; width: 104px; height: 29px; padding: 0; margin: 0; cursor: pointer; font-size: 12px; text-align: center; white-space: pre; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_button_01.png) no-repeat; color: #cfa937; border: none; } /* end of hazaxmetalikcontent right */ /* footer */ #hazaxmetalik_footer { width: 900px; height: 45px; padding: 20px 40px 0 40px; text-align: center; background: url(https://img.webme.com/pic/h/hazax/hazaxmetalik_footer.png) no-repeat; } #hazaxmetalik_footer a { color: #ffffff; font-weight: bold; } /* end of footer */ </style> </head> <body> <div id="hazaxmetalik_container"> <div id="hazaxmetalik_top_panel">  <div id="top_panel_ls"> <div id="hazaxmetalik_site_title">Hoş Geldiniz</div> </div> <div id="top_panel_rs"> <div id="search_section"> <form action="#" method="get"> <input type="text" name="q" size="10" value="CSS Design 7" id="searchfield" title="searchfield" /> </form> <div class="cleaner"></div> </div> <div id="hazaxmetalik_menu"> <ul> <li><a href="#" class="current"><span></span>Home</a></li> <li><a href="#"><span></span>Products</a></li> <li><a href="#"><span></span>Services</a></li> <li><a href="#"><span></span>Company</a></li> <li><a href="#"><span></span>Contact</a></li> </ul> <div class="cleaner"></div> </div>  <div class="cleaner"></div> </div> </div>  <div id="hazaxmetalik_banner"> <div id="banner_header_01"></div> <div id="banner_header_02">Haber</div> <div id="banner_text"> <p>Buraya Kısa Bilgilendirme</p> <div class="rc_btn_01"><a href="http://www.hazax.de.tl">Devamı...</a></div> </div> </div>  <div id="ct"></div> <div id="hazaxmetalik_content"> <div id="hazaxmetalikcontent_left"> <div class="hazaxmetalikcontent_left_section"> <div class="hazaxmetalikcontent_left_w600_wrapper"> <div class="hazaxmetalikcontent_left_w600_inner">

Tasarımın Altındaki Kod

<div class="cleaner"></div> </div> </div> <div class="margin_bottom_10"></div> <div class="hazaxmetalikcontent_left_w600_wrapper"> <div class="hazaxmetalikcontent_left_w600_inner"> <p style="text-align: center;"> Bugün Sitemizi 33 Kişi Ziyaret Edip Toplam 43 Sayfada Sörf yapmıştır </p> <div class="cleaner"></div> </div> </div> <div class="rc_btn_01"><a href="#">Tum istatistik</a></div> <div class="margin_bottom_10"></div> <div class="cleaner"> </div> </div> <div class="cleaner_h20"> </div> </div>  <div id="hazaxmetalikcontent_right"> <div class="hazaxmetalikcontent_right_section"> <div class="hazaxmetalikcontent_header_01">Blog Posts</div> <div class="news_section"> <div class="news_date">OCT 24, 2024</div> <div class="news_title">Nam auctor aliquam leo</div> <p>Sed sit amet pretium metus. Nullam bibendum pharetra luctus. Aliquam erat volutpat. Praesent sit amet elementum est. <a href="#">Read more</a></p> </div> <div class="margin_bottom_30"></div> </div>  <div class="margin_bottom_20 border_bottom"></div> <div class="margin_bottom_20"></div> <div class="hazaxmetalikcontent_right_section"> </div> <div class="margin_bottom_20 border_bottom"></div> <div class="margin_bottom_20"></div> <div class="hazaxmetalikcontent_right_section"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> </div> <div class="cleaner_h30"> </div> </div>  <div class="cleaner"> </div> </div>  <div id="cb"></div> <div id="hazaxmetalik_footer"> Copyright © 2009 <a href="http://www.hazax.de.tl">wWw.Hazax.De.TL</a> | Designed by <a href="http://www.hazax.de.tl" target="_parent">Hazax Tasarım</a> </div>   </div>  </body> </html>

CSS Kodu Bölümüne

td.nav {visibility:hidden;} li.nav_element{display: none;} td.headline2 {visibility:hidden;} td.nav_element checked_menu {visibility:hidden;} td.content_container{visibility:hidden;} #extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} td.nav {visibility:hidden;} li.nav_element{display: none;} td.headline2 {visibility:hidden;} td.nav_element checked_menu {visibility:hidden;} td.content_container{visibility:hidden;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} td.nav {visibility:hidden;} li.nav_element{display: none;} td.headline2 {visibility:hidden;} td.nav_element checked_menu {visibility:hidden;} td.content_container{visibility:hidden;}