çok güzel bir css tasarımı

<script src="http://csstasarimm.cs.funpic.org/Demo/Css57/yukariasagi.js" type="text/javascript" language="javascript"></script> <div id="header"> <div class="head_left"></div> <div class="head_mid"> <h1><a class="mainlogo" href="http://marine.dezinerfolio.com" _fcksavedurl="http://marine.dezinerfolio.com">Marine</a></h1> <ul class="navi"> <li class="current_page_item"><a href="http://www.css-merkez.tr.gg/" _fcksavedurl="http://www.css-merkez.tr.gg/"> Ana Sayfa </a></li> <li class="page_item page-item-2"><a href="" _fcksavedurl="" title="">iLetisim</a></li> <li class="page_item page-item-4"><a href="" _fcksavedurl="" title="G">Toplist</a></li> </ul> <div id="snippets"> <div class="persnippet"> <div class="snip_top"></div> <div class="snip_mid"> <h2>Recent Posts</h2> <ul> <li><a href='http://marine.dezinerfolio.com/?p=5' _fcksavedurl='http://marine.dezinerfolio.com/?p=5'>Test Post 2</a></li><li><a href='http://marine.dezinerfolio.com/?page_id=4' _fcksavedurl='http://marine.dezinerfolio.com/?page_id=4'>Gallery</a></li><li><a href='http://marine.dezinerfolio.com/?p=3' _fcksavedurl='http://marine.dezinerfolio.com/?p=3'>Test Post 1</a></li> </ul> </div> <div class="snip_bot"></div> </div> <div class="persnippet"> <div class="snip_top"></div> <div class="snip_mid"> <h2>Custom List</h2> <ul> <li><a href="#" _fcksavedurl="#">Custom Link 1</a></li> <li><a href="#" _fcksavedurl="#">Custom Link 2</a></li> <li><a href="#" _fcksavedurl="#">Custom Link 3</a></li> </ul> </div> <div class="snip_bot"></div> </div> <div class="persnippet"> <div class="snip_top"></div> <div class="snip_mid" style="height:117px; padding-left:3px;"> <h2>Socialize</h2> <div style="float:left"><a href="http://marine.dezinerfolio.com/?feed=rss2" _fcksavedurl="http://marine.dezinerfolio.com/?feed=rss2" class="social rss">Subscribe to RSS</a></div> <div style="float:left"><a href="http://technorati.com/faves?sub=addfavbtn&add=http://marine.dezinerfolio.com/" _fcksavedurl="http://technorati.com/faves?sub=addfavbtn&add=http://marine.dezinerfolio.com/" class="social tech">Favorite</a></div> <div><a href="javascript:location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent('http://marine.dezinerfolio.com/')" _fcksavedurl="javascript:location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent('http://marine.dezinerfolio.com/')" class="social digg">DIGG</a></div> <div class="clear"></div> </div> <div class="snip_bot"></div> </div> </div> </div> <div class="head_right"></div> </div> <div class="contwrap"> <div id="menu"> <ul> <div class="menutop"></div> <div id="test1-header" class="df_menu_head header_highlight" >Tags</div> <div id="test1-content" style="display:block;" class="df_menu_cont"> <ul> <li class="cat-item cat-item-3"><a href="http://marine.dezinerfolio.com/?cat=3" _fcksavedurl="http://marine.dezinerfolio.com/?cat=3" title="View all posts filed under Category 2">Category 2</a> </li> <li class="cat-item cat-item-1"><a href="http://marine.dezinerfolio.com/?cat=1" _fcksavedurl="http://marine.dezinerfolio.com/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> </li> </ul> </div> <div id="test2-header" class="df_menu_head" >Search</div> <div id="test2-content" class="df_menu_cont"> <form method="get" id="searchform" action="http://marine.dezinerfolio.com/"> <div> <input alt="search" type="text" value="Enter Search Here" name="s" id="s" /> </div> </form> </div> <div id="test3-header" class="df_menu_head" >Archives</div> <div id="test3-content" class="df_menu_cont"> <ul> <li><a href='http://marine.dezinerfolio.com/?m=200812' _fcksavedurl='http://marine.dezinerfolio.com/?m=200812' title='December 2008'>December 2008</a></li> <li><a href='http://marine.dezinerfolio.com/?m=200710' _fcksavedurl='http://marine.dezinerfolio.com/?m=200710' title='October 2007'>October 2007</a></li> </ul> </div> <div id="test4-header" class="df_menu_head" >Blogroll</div> <div id="test4-content" class="df_menu_cont"> <ul> <li id="linkcat-2" class="linkcat"><h2>Blogroll</h2> <ul> <li><a href="http://wordpress.org/development/" _fcksavedurl="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/" _fcksavedurl="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/" _fcksavedurl="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/" _fcksavedurl="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/" _fcksavedurl="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/" _fcksavedurl="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/" _fcksavedurl="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </li> </ul> </div> <div id="test5-header" class="df_menu_head" >Meta</div> <div id="test5-content" class="df_menu_cont"> <ul> <li><a href="http://marine.dezinerfolio.com/wp-login.php" _fcksavedurl="http://marine.dezinerfolio.com/wp-login.php">Login</a></li> <li><a href="http://validator.w3.org/check/referer" _fcksavedurl="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li> <li><a href="http://gmpg.org/xfn/" _fcksavedurl="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li> <li><a href="http://wordpress.org/" _fcksavedurl="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li> </ul> </div> <div id="test6-header" class="df_menu_head" >Ranking</div> <div id="test6-content" class="df_menu_cont"> <center><a href="http://popuri.us" _fcksavedurl="http://popuri.us" ><img alt="My Popularity (by popuri.us)" src="http://popuri.us/widgets/?type=light" _fcksavedurl="http://popuri.us/widgets/?type=light" /></a></center> </div> <div class="menubot"></div> </ul> <script type="text/javascript"> new Accordian('menu',4,'header_highlight'); </script> </div> <div class="left">   

</div> <div class="feedback"> </div> </div> </div> <div class="navigation"> </div> <!----> </div> </div> <!-- begin footer --> <div class="clear"></div> <div class="footer"> © 2009. Tüm Hakları Saklıdır. Düzenleyen by:toplist--oyun.tr.gg <a href="" _fcksavedurl="" title=""></a> </div> </div>

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;} *{ margin:0; padding:0; } body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; background:#FFF url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/header_loop.gif) repeat-x 0 0; padding-top:17px; } .clear{ clear:both; } .leftf{ float:left; } .right{ float:right; } a{ text-decoration:none; } a img, img{ border:none; } h1, h1 a{ font-size:22px; font-weight:normal; color:#009cff; text-decoration:none; } .head_mid h1{ padding-left:10px; } .mainlogo{ text-indent:-99999px; overflow:hidden; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/logo.gif) no-repeat left center; display:block; height:125px; width:300px; } h2, h2 a{ font-size:16px; font-weight:normal; color:#009cff; text-decoration:none; } #header{ width:974px; clear:both; margin:0 auto; height:294px; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/title_mid.gif) repeat-x 0 0; overflow:hidden; } #header h1{ float:left; } #header ul.navi{ float:right; padding-top:84px; padding-left:1px; padding-right:20px; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/ul_hack.gif) no-repeat left bottom; } #header ul.navi li{ float:left; list-style:none; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/navi_basic.gif) no-repeat 0 0; width:95px; height:46px; text-align:center; overflow:hidden; } #header ul.navi li.current_page_item{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/navi_hili.gif) no-repeat 0 0; } #header ul.navi li a{ text-decoration:none; color:#818181; width:95px; height:31px; display:block; float:left; padding-top:15px; } #header ul.navi li a:hover{ font-weight:bold; } .head_left{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/title_left.gif) no-repeat 0 0; width:8px; height:294px; float:left; display:block; } .linkcat h2{ display:none; } #menu .df_menu_cont .linkcat { height:auto; } .head_mid{ float:left; width:958px; } .head_right{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/title_right.gif) no-repeat 0 0; width:8px; height:294px; float:left; display:block; } .contwrap{ width:974px; margin:0 auto; height:1%; overflow:hidden; } .left{ width:710px; float:left; padding:18px; overflow:hidden; padding:18px 0; } .left a{ color:#009CFF; } .left a:hover{ border-bottom:1px dotted #009CFF; } #menu{ width:245px; float:right; margin:15px 0; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/side_loop.gif) repeat-y 0 0; } .menutop{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/side_top.gif) no-repeat 0 0; height:17px; display:block; clear:both; } .df_menu_head{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/sideul.gif) no-repeat right center; width:218px; height:26px; text-align:center; display:block; clear:both; padding-top:10px; padding-left:14px; cursor:pointer; margin:10px 0; font-weight:bold; } #menu .header_highlight{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/sideul_hili.gif) no-repeat right center; color:#FFF; display:block; } .df_menu_cont{ display:none; height:1%; overflow:hidden; } .df_menu_cont ul{ padding:0 1px; } #searchform{ padding-left:14px; } #searchform #s{ padding:5px; color:#666; border:1px solid #CCC; width:205px; text-align:center; background:#EFEFEF; } #searchform #s:hover, #searchform #s:focus{ background:#FFF; border:1px solid #999; } .df_menu_cont li{ padding:0 14px; list-style:none; height:36px; background:#f5f5f5; } .df_menu_cont li a{ display:block; padding:10px 5px; border-bottom:1px solid #CCC; text-decoration:none; color:#555; } .df_menu_cont li a:hover{ border-bottom:1px solid #999; color:#222; } .menubot{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/side_bot.gif) no-repeat 0 0; height:18px; display:block; clear:both; } .footer{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/footer_loop.gif) repeat-x 0 0; height:30px; text-align:center; padding-top:13px; color:#AAA; } .footer a{ text-decoration:none; color:#0099FF; } .sorrydialog{ text-align:center; } #snippets{ clear:both; } .persnippet{ float:left; width:251px; overflow:hidden; padding:15px 32px 0 32px; } .snip_top{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/snips_top.gif) no-repeat 0 0; height:11px; width:251px; display:block; overflow:hidden; } .snip_mid{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/snips_mid.gif) repeat-y 0 0; display:block; height:1%; overflow:hidden; } .snip_mid h2{ color:#FFF; text-align:center; font-size:12px; font-weight:bold; clear:both; } .snip_mid ul{ padding:0 10px; } .snip_mid li{ list-style:none; display:block; } .snip_mid li a{ color:#999; text-decoration:none; height:25px; display:block; padding:8px 5px 0 5px; overflow:hidden; border-bottom:1px solid #595959; } .snip_mid li a:hover{ background:#3f3f3f; color:#EEE; } .snip_bot{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/snips_bot.gif) no-repeat 0 0; height:10px; display:block; overflow:hidden; } .social{ width:66px; height:90px; display:block; float:left; text-indent:-99999px; overflow:hidden; padding:5px 8px 5px 8px; } .social.rss{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/social_rss.jpg) no-repeat bottom center; } .social.tech{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/social_tech.jpg) no-repeat bottom center; } .social.digg{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/social_digg.jpg) no-repeat bottom center; } .left .post{ margin-bottom:10px; padding:20px 15px; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/postfooter.gif) no-repeat left bottom; } .left .entry-meta{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/comment_top_focus.gif) repeat 0 0; padding:15px; border:1px solid #CCC; font-size:11px; margin:10px 0; } .left .posttop{ overflow:hidden; } input#submit{ border:1px solid #AAA; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/whitebutton.gif) repeat-x left bottom; color:#555; width:312px; padding:5px 10px; cursor:pointer; } input#submit:hover{ border:1px solid #555; } .left .posttitle{ float:left; } .left .indexomment{ float:right; font-size:11px; } #commentform #author,#commentform #email,#commentform #url,#commentform textarea, #code { background:#FAFAFA; width:300px; padding:5px; border:1px solid #999; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666; } #commentform{ padding:10px 0; } #commentform p{ padding:5px 0; width:400px; margin:0 auto; } #commentform #author:focus,#commentform #email:focus,#commentform #url:focus,#commentform textarea:focus,#commentform #author:hover,#commentform #email:hover,#commentform #url:hover,#commentform textarea:hover, #code:hover, #code:focus { background:#FFF; border:1px solid #444; } .commentlist li{ list-style:none; padding:15px; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/whitebutton.gif) repeat-x left bottom; border-bottom:1px solid #CCC; height:1%; overflow:hidden; } .commentlist .commentmetadata{ float:right; } .commentlist cite, .commentlist cite a{ font-weight:bold; color:#FF6600; } .commentlist p{ padding:5px 20px; } .left .date{ background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/date.gif) no-repeat 0 0; width:83px; height:27px; float:left; padding-top:6px; font-weight:bold; padding-right:15px; } .left .date div.month{ float:left; padding-left:8px; text-align:center; width:50px } .left .date div.day{ float:left; padding-left:8px; color:#FFF; } .left .storycontent{ padding:15px 0; } .left .storycontent p{ padding:5px 0; line-height:18px; } .left .storycontent ul, .left .storycontent ol{ padding-left:15px; } .left .storycontent li{ list-style:none; background:url(http://csstasarimm.cs.funpic.org/Demo/Css57/images/lis.gif) no-repeat left 10px; padding:5px 20px; } .left .storycontent li p{ padding:0; } .storycontent blockquote{ background:#FAFAFA; padding:5px 5px 5px 15px; border-left: 3px solid #CCC; margin-left:15px; }