Sanal Alemdeki Yeni Adresiniz - KODLARI AYRILMIŞ CSS TASARIMLAR-1

masmavi css tasarim

Masmavi bir tasarım

ÖNİZLEME

Tasarım üzeri:
<div id="content">  <div id="header"> <div id="logo"> <h1><a href="#" _fcksavedurl="#" _fcksavedurl="#">Tam-Senliq</a></h1> <h2><a href="www.tam-senliq.tr.gg/" _fcksavedurl="www.tam-senliq.tr.gg/" _fcksavedurl="www.tam-senliq.tr.gg/" id="Css Tasarımlarım">Desing Adapted by _m.gediktas_</a></h2> </div> <div id="menu"> <ul> <li id="button1"><a href="#" _fcksavedurl="#" _fcksavedurl="#" title="">Ana Sayfa</a></li> <li id="button2"><a href="#" _fcksavedurl="#" _fcksavedurl="#" title="">Boş</a></li> <li id="button3"><a href="#" _fcksavedurl="#" _fcksavedurl="#" title="">Boş</a></li> <li id="button4"><a href="#" _fcksavedurl="#" _fcksavedurl="#" title="">Boş</a></li> <li id="button5"><a href="#" _fcksavedurl="#" _fcksavedurl="#" title="">Boş</a></li> </ul> </div> </div>   <div id="main"></div> <div id="back"> <div id="right"> <h3>Kategoriler</h3> <div class="title_back"> <ul> <li class="sub"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Boş</a></li> <li class="sub"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Boş</a></li> <li class="sub"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Boş</a></li> <li class="sub"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Boş</a></li> <li class="sub"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Boş</a></li> </ul> </div> <h3>Reklam Alanı</h3> <div class="title_back"> <div id="calendar"> <table id="calendar2" summary="Reklam Alanı"> <caption> Reklamlar </caption> <td class="pad" colspan="2"> </td> </tr> </tbody> </table> </div> </div> </div> <div id="left">

Tasarım altı:
</div> <div id="left"> <div style="clear: both;"> </div>   </div> <div id="bottom"></div> <div id="footer"> <p id="legal">© 2009. Tüm Haklarımız Saklıdır. Tasarımı Hazırlayan <a href="www.kod-collection.tr.gg/" _fcksavedurl="www.kod-collection.tr.gg/" _fcksavedurl="www.kod-collection.tr.gg/">K Group</a>| <a href="http://kod-collection" _fcksavedurl="http://kod-collection" _fcksavedurl="http://kod-collection">Ulaşım.</a></p> </div> </div> 

css koduna:
</div> <div id="left"> <div style="clear: both;"> </div>   </div> <div id="bottom"></div> <div id="footer"> <p id="legal">© 2009. Tüm Haklarımız Saklıdır. Tasarımı Hazırlayan <a href="www.tam-senliq.tr.gg/" _fcksavedurl="www.tam-senliq.tr.gg/" _fcksavedurl="www.tam-senliq.tr.gg/">K Group</a>| <a href="http://virusland.forum.st" _fcksavedurl="http://virusland.forum.st" _fcksavedurl="http://virusland.forum.st">Tıkla.</a></p> </div> </div>

neoneon css tasarimi

Neoneon Css Tasarım

Tasarım Üzerine:

<div id="header"> <div id="logo"> <h1><a href="#" _fcksavedurl="#" _fcksavedurl="#">Kod-Collection</a></h1> <h2><a href="http://www.freecsstemplates.org/" _fcksavedurl="http://www.freecsstemplates.org/" _fcksavedurl="http://www.freecsstemplates.org/">By Free CSS GediktaŞ</a></h2> </div> <div id="menu"> <ul> <li class="active"><a href="http://kod-collection.tr.gg" _fcksavedurl="http://kod-collection.tr.gg" _fcksavedurl="http://kod-collection.tr.gg" accesskey="1" title="">Home</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#" accesskey="2" title="">Blog</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#" accesskey="3" title="">Photos</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#" accesskey="4" title="">About</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#" accesskey="5" title="">Contact</a></li> </ul> </div> </div> <div id="content">

Tasarım Altına:

</div> <div class="post"> <h2 class="title">A Few Examples of Common Tags</h2> <div class="meta"> <p class="date">Posted on February 25, 2007 by John Doe</p> <p><span>Filed under </span><a href="#" _fcksavedurl="#" _fcksavedurl="#" class="category">Uncategorized</a><span> | </span><a href="#" _fcksavedurl="#" _fcksavedurl="#" class="comments">28 Comments</a></p> </div> <div class="story"> <p><strong></strong>This is an example of a paragraph followed by a blockquote. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum dolorem.</p> <blockquote> <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio</p> </blockquote> <h3>Heading Level Three</h3> <p>An unordered list example:</p> <ul> <li>List item number one</li> <li>List item number two</li> <li>List item number three </li> </ul> <p>An ordered list example:</p> <ol> <li>List item number one</li> <li>List item number two</li> <li>List item number three</li> </ol> </div> </div> </div> <div id="sidebar"> <div id="archives" class="boxed"> <h2>Archives</h2> <div class="content"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">February 2007</a> <i>(25)</i></li> <li class="active"><a href="#" _fcksavedurl="#" _fcksavedurl="#">January 2007</a> <i>(31)</i></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">December 2006</a> <i>(31)</i></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">November 2006</a> <i>(30)</i></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">October 2006</a> <i>(31)</i></li> </ul> </div> </div> <div id="categories" class="boxed"> <h2>Categories</h2> <div class="content"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Donec Dictum Metus</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Etiam Rhoncus Volutpat</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Integer Gravida Nibh</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Maecenas Luctus Lectus</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Mauris Vulputate Dolor Nibh</a></li> <li class="active"><a href="#" _fcksavedurl="#" _fcksavedurl="#">Nulla Luctus Eleifend</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Posuere Augue Sit Nisl</a></li> </ul> </div> </div> <div id="tagcloud" class="boxed"> <h2>Tag Cloud</h2> <div class="content"><a href="#" _fcksavedurl="#" _fcksavedurl="#" title="55 recent posts" style="font-size: 1.5087837837838em;">Art</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="66 recent posts" style="font-size: 1.5905405405405em;">Blogging</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="51 recent posts" style="font-size: 1.4790540540541em;">Books</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="40 recent posts" style="font-size: 1.3972972972973em;">Culture</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="73 recent posts" style="font-size: 1.6425675675676em;">Family</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="54 recent posts" style="font-size: 1.5013513513514em;">Food</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="43 recent posts" style="font-size: 1.4195945945946em;">Friends</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="63 recent posts" style="font-size: 1.5682432432432em;">Humor</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="88 recent posts" style="font-size: 2.4972972972973em;">Life</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="49 recent posts" style="font-size: 1.4641891891892em;">Love</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="64 recent posts" style="font-size: 1.5756756756757em;">Movies</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="28 recent posts" style="font-size: 2.0513513513514em;">Music</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="25 recent posts" style="font-size: 2.0290540540541em;">News</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="92 recent posts" style="font-size: 1.7837837837838em;">Personal</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="46 recent posts" style="font-size: 1.4418918918919em;">Photography</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="13 recent posts" style="font-size: 2.0662162162162em;">Politics</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="56 recent posts" style="font-size: 1.5162162162162em;">Random</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="51 recent posts" style="font-size: 1.4790540540541em;">Religion</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="68 recent posts" style="font-size: 1.6054054054054em;">Thoughts</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="49 recent posts" style="font-size: 1.4641891891892em;">Travel</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="45 recent posts" style="font-size: 1.4344594594595em;">Video</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="51 recent posts" style="font-size: 1.4790540540541em;">Health</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="43 recent posts" style="font-size: 1.4195945945946em;">Media</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="53 recent posts" style="font-size: 1.4939189189189em;">Technology</a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" title="46 recent posts" style="font-size: 1.4418918918919em;">Writing</a> </div> </div> </div> </div> <div id="footer"> <p id="copy">©2007 Neoneon<br /> Designed by <a href="#" _fcksavedurl="#" _fcksavedurl="#">Free CSS Templates</a></p> <p id="feed"><a href="#" _fcksavedurl="#" _fcksavedurl="#" id="rss">RSS Feed</a></p> </div>

Css Koduna:

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { margin: 20px 0; padding: 0; background: #3399FF url(https://img.webme.com/pic/k/kod-collection/img01.gif) repeat-y center; font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; color: #999999; } h1, h2, h3 { margin: 0; text-transform: lowercase; font-weight: normal; } h2 { font-size: 2em; } h3 { font-size: 1.4em; } img { border: none; } a { color: #333333; } a:hover { text-decoration: none; color: #000000; } /* Header */ #header { width: 740px; height: 160px; margin: 0 auto; } /* Logo */ #logo { float: left; width: 260px; height: 160px; background: url(https://img.webme.com/pic/k/kod-collection/img02.gif) no-repeat; } #logo h1 { padding: 50px 0 0 20px; letter-spacing: -.05em; font-size: 4em; } #logo h2 { font-size: 1.8em; } #logo a { text-decoration: none; color: #3399FF; } /* Menu */ #menu { float: right; width: 431px; height: 50px; margin: 50px 30px 0 0; background: #99CC00 url(https://img.webme.com/pic/k/kod-collection/img05.gif); } #menu ul { margin: 0; padding: 0 0 0 1em; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; padding: .5em .7em; text-decoration: none; text-transform: lowercase; letter-spacing: -1px; font-size: 1.5em; color: #FFFFFF; } #menu a:hover { background: #FF9900; } #menu .active a { } /* Content */ #content { width: 740px; margin: 0 auto; } /* Posts */ #posts { float: right; width: 440px; padding: 0 30px 0 0; } .post { margin-bottom: 10px; } .post .title { padding: 0 0 5px 20px; color: #FF8400; } .post .meta { margin-left: 10px; padding: 10px 20px; background: url(https://img.webme.com/pic/k/kod-collection/img06.gif) no-repeat; font-size: smaller; } .post .meta p { margin: 0; } .post .story { padding: 10px 20px; line-height: 180%; } /* Sidebar */ #sidebar { float: left; width: 240px; } /* Boxed */ #sidebar .boxed { width: 240px; padding: 0 0 3em 0; background: #FFCC00 url(https://img.webme.com/pic/k/kod-collection/img04.gif) no-repeat left bottom; } #sidebar .boxed h2 { height: 40px; padding: 10px 0 0 30px; background: url(https://img.webme.com/pic/k/kod-collection/img03.gif) no-repeat; font-size: 2em; color: #FFFFFF; } #sidebar .boxed .content { color: #FFFFFF; } #sidebar .boxed ul { } #sidebar .boxed li { } #sidebar .boxed a { text-decoration: none; color: #3399FF; } #sidebar .boxed a:hover { color: #FF9900; } /* Tag Cloud */ #tagcloud { } #tagcloud .content { padding: 1em; text-align: justify; font-size: .8em; } #tagcloud .content a { color: #FFFFFF; } #tagcloud .content a:hover { color: #3399FF; } /* Footer */ #footer { clear: both; width: 200px; margin: 0 auto; padding: 0 520px 0 20px; } #footer p { color: #FFFFFF; } #footer a { color: #FFFFFF; }

web development css tasarimi

Web Development Tasarımı:

Tasarım Üstü

<div id="header"> <a href="giriş yapılacak sayfanın adresi" _fcksavedurl="giriş yapılacak sayfanın adresi" _fcksavedurl="giriş yapılacak sayfanın adresi" class="member">GİRİŞ YAP</a> <ul class="nav"> <li class="SAYFA URL">ANA SAYFA</li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> </ul> </div>   <div id="body"> <p class="top"></p>

Tasarım altı

<div id="right"> <h2>Search</h2> <form name="serch" action="#" method="post"> <p class="domain">enter the domain name</p> <input type="text" name="name" /> <input type="submit" name="go" value="" class="go" /> </form> <h2 class="scope">Our scopes</h2> <ul> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> </ul> <a href="#" _fcksavedurl="#" _fcksavedurl="#"><img src="http://img231.imageshack.us/img231/9494/banneryk8.gif/banner.gif" _fcksavedurl="http://img231.imageshack.us/img231/9494/banneryk8.gif/banner.gif" _fcksavedurl="http://img231.imageshack.us/img231/9494/banneryk8.gif/banner.gif" alt="banner" width="157" height="146" border="0" class="banner" /></a> <p class="bottom"> <a href="#" _fcksavedurl="#" _fcksavedurl="#" class="xhtm"></a> <a href="#" _fcksavedurl="#" _fcksavedurl="#" class="css"></a> </p> </div>  <p class="bot"></p> <br class="spacer" /> </div>   <div id="footer"> <ul> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">ANA SAYFA</a>|</li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL" _fcksavedurl="SAYFA URL" _fcksavedurl="SAYFA URL">SAYFA ADI</a></li> </ul> <p class="copyright"> <a href="http://tasarimci-amca1.tr.gg" _fcksavedurl="http://tasarimci-amca1.tr.gg" _fcksavedurl="http://tasarimci-amca1.tr.gg">tasarimci-amca1.tr.gg</a> ve <a href="http://htlmkodes..tr.gg" _fcksavedurl="http://htlmkodes..tr.gg" _fcksavedurl="http://htlmkodes..tr.gg">htlmkodes.tr.gg</a></p> <p>Designed By: kodes</p> </div>

Css 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;} /* CSS Document */ body{ padding:0; margin:0; background:url(http://img530.imageshack.us/img530/5081/bodybgyn7.gif/body_bg.gif) 0 0 repeat-x #C3EA5E; color:#000; } div, h1, h2, p, form, label, input, textarea, img, span{ margin:0; padding:0; } ul{ margin:0; padding:0; list-style-type:none; } .spacer{ clear:both; font-size:0px; line-height:0px; } /*------------------------------------------------body---------------------*/ /*------------------------------------------------header start---------------------*/ #header{ width:778px; height:49px; background:url(http://img57.imageshack.us/img57/1140/headerry2.jpg/header.jpg) 0 0 no-repeat; padding:385px 0 0 0; margin:0 auto; position:relative; } #header a.member{ background:url(http://img124.imageshack.us/img124/1285/memberloginiconpz0.gif/member_login_icon.gif) center top no-repeat #fff; width:44px; height:17px; padding:23px 0 0 0; font:bold 10px/10px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#0C0C0C; text-transform:uppercase; text-decoration:none; text-align:center; position:absolute; left:490px; top:6px; } #header a.member:hover{ color:#607800; background-color:#fff; } #header img{ position:absolute; left:209px; top:311px; } #header ul.nav{ width:538px; height:28px; padding:0; margin:0 auto; } #header ul.nav li{ float:left; padding:0; margin:0; } #header ul.nav li a{ display:block; height:28px; padding:0 11px 0 11px; background-color:#FFFFEF; color:#523500; font:bold 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; margin:0 1px 0 0; float:left; } #header ul.nav li a:hover{ background:url(http://img207.imageshack.us/img207/8735/navhovergc3.gif/nav_hover.gif) 0 0 repeat-x #FFFEEF; color:#fff; } #header ul.nav li.home{ display:block; height:28px; float:left; margin:0; padding:0 11px 0 11px; background:url(http://img207.imageshack.us/img207/8735/navhovergc3.gif/nav_hover.gif) 0 0 repeat-x #FFFEEF; color:#fff; font:bold 11px/19px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:none; } /*------------------------------------------------header end---------------------*/ /*------------------------------------------------body start---------------------*/ #body{ background:url(http://img530.imageshack.us/img530/6888/bodybgmidwd3.gif/body_bg_mid.gif) 0 0 repeat-y; width:631px; margin:0 auto; } #body p.top{ display:block; background:url(http://img266.imageshack.us/img266/2095/bodytopbghg0.gif/body_top_bg.gif) 0 0 no-repeat; width:631px; height:75px; float:left; } #body p.bot{ display:block; background:url(http://img231.imageshack.us/img231/5766/bodybottombgpz5.gif/body_bottom_bg.gif) 0 0 no-repeat; width:631px; height:78px; float:left; } /*------------------------------------------------left panel start---------------------*/ #left{ width:414px; padding:0 0 0 29px; float:left; } #left h2{ display:block; width:300px; font:bold 22px/38px Georgia, "Times New Roman", Times, serif; color:#694F10; background-color:#F8EFD3; float:left; } #left h3{ display:block; width:354px; height:23px; padding:0 0 0 12px; margin:0 0 0 0; background:url(http://img84.imageshack.us/img84/1471/h3bgww0.gif/h3_bg.gif) 0 0 no-repeat #FCF8EA; font:bold 16px/23px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#7C7A02; float:left; } #left p.text1{ display:block; width:385px; font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#63562E; background-color:#F8EFD3; margin:0 0 0 0; padding:24px 0 0 0; float:left; } #left p.text2{ display:block; width:385px; font:normal 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#63562E; background-color:#F8EFD3; padding:11px 0 19px 0; float:left; } #left p.text2 span{ font:bold 13px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#9C4D00; background-color:#F8EFD3; } #left p.rm{ display:block; width:370px; height:19px; margin:0 0 4px 0; font-size:0; background:url(http://img207.imageshack.us/img207/4461/readmoredivgv1.gif/read_more_div.gif) 0 0 repeat-x; float:left; } #left p.rm a{ background:url(http://img266.imageshack.us/img266/1682/btnreadmorebh1.gif/btn_read_more.gif) 0 1px no-repeat; width:58px; height:14px; padding:0; margin:0; float:right; } #left p.rm a:hover{ background:url(http://img84.imageshack.us/img84/2955/btnreadmorehoverok4.gif/btn_read_more_hover.gif) 0 1px no-repeat; } #left h3.date{ display:block; background:url(http://img84.imageshack.us/img84/6221/datebgce0.gif/date_bg.gif) 0 0 no-repeat #FCF8EA; width:125px; height:18px; padding:0 0 0 12px; margin:0 0 0 0; font:bold 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#7C7A02; float:left; } #left p.event{ width:354px; background:url(http://img517.imageshack.us/img517/5166/eventbgvb9.gif/event_bg.gif) 0 11px no-repeat #F8EFD3; padding:11px 0 0 20px; margin:0 0 15px 0; font:normal 12px/18px Arial, Helvetica, sans-serif; color:#63562E; float:left; } #left p.rm2{ display:block; width:370px; height:14px; font-size:0; margin:0 0 4px 0; background:url(http://img517.imageshack.us/img517/3364/readmoredivjp6.gif/read_more_div.gif) 0 0 repeat-x; float:left; } #left p.rm2 a{ background:url(http://img525.imageshack.us/img525/2529/btnreadmoredg7.gif/btn_read_more.gif) 0 1px no-repeat; width:58px; height:14px; padding:0; margin:0; float:right; } #left p.rm2 a:hover{ background:url(http://img518.imageshack.us/img518/607/btnreadmorehovercm8.gif/btn_read_more_hover.gif) 0 1px no-repeat; } /*------------------------------------------------left panel end---------------------*/ /*------------------------------------------------right panel start---------------------*/ #right{ width:188px; padding:5px 0 55px 0; margin:0; float:left; } #right h2{ display:block; background:url(http://img117.imageshack.us/img117/1872/serchbgcp5.gif/serch_bg.gif) 0 0 no-repeat #ECE2C3; width:145px; height:27px; padding:0 0 0 9px; margin:0 0 5px 0; font:normal 18px/27px Georgia, "Times New Roman", Times, serif; color:#694F10; float:left; } #right form{ width:154px; padding:0 0 35px 0; margin:0; float:left; } #right form p.domain{ width:134px; height:15px; background:url(http://img117.imageshack.us/img117/1872/serchbgcp5.gif/domain_name_bg.gif) 0 0 no-repeat #FCF8EA; padding:0 0 0 20px; margin:0 0 7px 0; font:normal 10px/15px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#900C00; text-transform:uppercase; float:left; } #right form input{ width:152px; height:22px; background-color:#fff; color:#000; border:#D0BE90 solid 1px; font:normal 11px/22px Arial, Helvetica, sans-serif; float:left; } #right form input.go{ background:url(http://img237.imageshack.us/img237/2803/btngoxl7.gif/btn_go.gif) 0 0 no-repeat; width:27px; height:11px; border:none; cursor:pointer; float:right; } #right h2.scope{ display:block; background:url(http://img237.imageshack.us/img237/9907/serchbgbb8.gif/serch_bg.gif) 0 0 no-repeat #ECE2C3; width:145px; height:27px; padding:0 0 0 9px; margin:0 0 12px 0; font:normal 18px/27px Georgia, "Times New Roman", Times, serif; color:#694F10; float:left; } #right ul{ width:140px; padding:0 0 28px 9px; margin:0 0 0 0; float:left; font-size:0; } #right ul li{ padding:0; margin:0; float:left; } #right ul li a{ display:block; width:125px; background:url(http://img49.imageshack.us/img49/1765/arrow1yi9.gif/arrow1.gif) 0 5px no-repeat #F8EFD3; padding:0 0 0 15px; font:bold 11px/19px Arial, Helvetica, sans-serif; color:#BF0000; text-decoration:none; height:19px; } #right ul li a:hover{ background:url(http://img49.imageshack.us/img49/5572/arrow1hoveril8.gif/arrow1_hover.gif) 0 5px no-repeat #FEFAEC; color:#694F10; } #right img.banner{ display:block; width:157px; height:146px; margin:0 0 15px 0; padding:0 0 0 3px; float:left; } #right p.bottom{ display:block; background:url(http://img49.imageshack.us/img49/9097/bottombgzc3.gif/bottom_bg.gif) 0 0 no-repeat; width:162px; height:14px; padding:0 0 0 22px; margin:0; float:left; } #right p.bottom a.xhtm{ display:block; background:url(http://img129.imageshack.us/img129/2592/xhtmlbgsr3.gif/xhtml_bg.gif) 0 1px no-repeat; width:58px; height:14px; padding:0; margin:0 7px 0 0; font-size:0; float:left; } #right p.bottom a.xhtm:hover{ background:url(http://img210.imageshack.us/img210/7044/xhtmlbghovermn2.gif/xhtml_bg_hover.gif) 0 1px no-repeat; } #right p.bottom a.css{ display:block; background:url(http://img129.imageshack.us/img129/1017/cssbgtm9.gif/css_bg.gif) 0 1px no-repeat; width:58px; height:14px; padding:0; margin:0; font-size:0; float:left; } #right p.bottom a.css:hover{ background:url(http://img132.imageshack.us/img132/3936/cssbghoverdp6.gif/css_bg_hover.gif) 0 1px no-repeat; } /*------------------------------------------------right panel end---------------------*/ /*------------------------------------------------body end---------------------*/ /*------------------------------------------------footer start---------------------*/ #footer{ width:778px; height:207px; margin:0 auto; padding:31px 0 0 0; background:url(images/footer_bg.gif) left bottom no-repeat; position:relative; } #footer ul{ width:559px; margin:0; padding:0; position:absolute; left:148px; top:31px; } #footer ul li{ margin:0; float:left; font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#880000; background-color:#FFFFD5; background-image:none; } #footer ul li a{ font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#880000; background-color:#FFFFD5; text-decoration:none; padding:0 10px 0 10px; } #footer ul li a:hover{ color:#000; background-color:#C6EC62; } #footer p.copyright{ font:normal 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; background-color:#FFFED0; position:absolute; left:285px; top:50px; } #footer p.design{ display:block; width:194px; height:17px; border:#E1E08E solid 1px; padding:0 0 0 35px; position:absolute; left:291px; top:72px; font:bold 11px/17px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#990000; background-color:#fff; } #footer a.link{ width:85px; font:bold 11px/17px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#990000; background-color:#fff; padding:0 3px; text-decoration:none; text-transform:capitalize; } #footer a.link:hover{ color:#fff; background-color:#B50000; } /*------------------------------------------------footer end---------------------*/

la web css tasarimi

La web Tasarımı:

Tasarım üzerine
<!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"> <div style="width:900px; position: relative; margin-left: auto; margin-right: auto;"> <div id="todobanners"> <div class="Estilo1" id="cabezal"> <h1 class="Estilo2">Titulo de la web </h1> </div> <div id="afiliados"> <div align="center"> <table width="200" border="2" cellspacing="5" bordercolor="#393939" bgcolor="#393939"> <tr> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img src="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" width="137" height="137" border="0" /></a></td> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img src="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" width="137" height="137" border="0" /></a></td> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img src="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" width="137" height="137" border="0" /></a></td> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img src="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" width="137" height="137" border="0" /></a></td> <td><a href="#" _fcksavedurl="#" _fcksavedurl="#"><img src="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" _fcksavedurl="http://img17.imageshack.us/img17/7584/sinttulo106.gif" width="137" height="137" border="0" /></a></td> </tr> </table> </div> </div>

Tasarımın Altına

<div id="abajocontenido"> <div align="center" class="Estilo3"> <span class="Estilo7">ÐÎŠ€ÑÔ Ρó® <a href="http://todobanners.es.tl" _fcksavedurl="http://todobanners.es.tl" _fcksavedurl="http://todobanners.es.tl">ωωω.†ÔÐÔßáηη€®Š.€Š.†L</a> - </span><span class="Estilo6">©Tu web aqui.</span></div> </div> </div>

Css koduna

#cabezal { background-image: url(http://img23.imageshack.us/img23/8526/sinttulo103.png); width: 827px; height: 100px; background-repeat: no-repeat; padding-left: 50px; } #nav_container { width: 185px; float: left; font-family: Arial, Helvetica, sans-serif; list-style-type: none; background-color: #585757; border: 4px solid #000000; margin-top: 10px; font-size: 10px; padding-bottom: 50px; } li.nav_element { background-image: url(http://img16.imageshack.us/img16/9210/botont.png); background-repeat: no-repeat; list-style-type: none; margin-left: -40px; height: 31px; margin-top: -2px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding-top: 7px; } li.nav_element:hover { background-image: url(http://img15.imageshack.us/img15/427/botonhover.png); background-repeat: no-repeat; list-style-type: none; margin-left: -40px; height: 31px; margin-top: -2px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding-top: 7px; } #pre_content { background-image: url(http://img93.imageshack.us/img93/4826/sinttulo113.gif); width: 668px; float: right; height: 30px; padding-top: 10px; padding-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #000066; } #todobanners { width: 877px; } #content_container { background-image: url(http://img140.imageshack.us/img140/5089/sinttulo119.gif); width: 667px; float: right; padding-left: 10px; font-family: Arial, Helvetica, sans-serif; color: #666666; } #abajocontenido { width: 678px; height: 84px; background-image: url(http://img17.imageshack.us/img17/1605/sinttulo117.gif); float: right; margin-bottom: 50px; } .Estilo1 {font-family: Georgia, "Times New Roman", Times, serif} .Estilo2 {color: #FFFFFF} .Estilo3 {font-size: 9px} .Estilo6 { font-size: 18px; font-family: Arial, Helvetica, sans-serif; } .Estilo7 { color: #666666; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } #post_header {display: none;} #header_container {display: none;} #sidebar_container {display: none;} h1#title{display: none;} h2#title span {display: none;} #arribacontenido p { border-bottom-width: medium; border-bottom-style: solid; margin-right: 350px; } #nav_container a { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #00CCFF; list-style-type: none; margin-left: 8px; } a:link { color: #333333; } a:visited { color: #000000; } a:hover { color: #333333; } a:active { color: #000000; }