Siteniz İçin Hazır Kodlar - Hazirlanmis Css Tasarimlari

Tasarım üstüne

<div id="contentt"> <div id="back">  <div id="header"> <div id="menu1"> <div id="menu"> <ul> <li id="button1"><a href="#" _fcksavedurl="#" title="">Ana Sayfa</a></li> <li id="button2"><a href="#" _fcksavedurl="#" title="">Blog</a></li> <li id="button3"><a href="#" _fcksavedurl="#" title="">Galeri</a></li> <li id="button4"><a href="#" _fcksavedurl="#" title="">Hakkında</a></li> <li id="button5"><a href="#" _fcksavedurl="#" title="">İletişim</a></li> </ul> </div> </div> <div id="logo"> </div> </div>   <div id="main"> <div id="right"> <h2>WwW.Css-TasaRiMm.tR.gg</h2><br /> <h4><a href="#" _fcksavedurl="#">Css Tasarim Merkezi</a></h4><br />

Tasarımın altına
</div> <div id="left"> <h3>MENÜ</h3> <ul> <li><ul> <li><a href="#" _fcksavedurl="#">Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretci Defteri</a></li> <li><a href="#" _fcksavedurl="#">Toplist</a></li> <li><a href="#" _fcksavedurl="#">Link Ekle</a></li> <li><a href="#" _fcksavedurl="#">Dost Siteler</a></li> </ul> </li> </ul> <h3>Takvim</h3> <ul> <li id="calendar"> <div id="calendar1"> <table id="calendar2" summary="Calendar"> <caption> January 2008 </caption> <thead> <tr> <th abbr="Monday" scope="col" title="Monday">M</th> <th abbr="Tuesday" scope="col" title="Tuesday">T</th> <th abbr="Wednesday" scope="col" title="Wednesday">W</th> <th abbr="Thursday" scope="col" title="Thursday">T</th> <th abbr="Friday" scope="col" title="Friday">F</th> <th abbr="Saturday" scope="col" title="Saturday">S</th> <th abbr="Sunday" scope="col" title="Sunday">S</th> </tr> </thead> <tfoot> <tr> <td abbr="Des" colspan="3" id="prev"><a href="#" _fcksavedurl="#">« Des</a></td> <td class="pad"> </td> <td abbr="Feb" colspan="3" id="next" class="pad"><a href="#" _fcksavedurl="#">Feb »</a></td> </tr> </tfoot> <tbody> <tr> <td colspan="2" class="pad"> </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> </tr> <tr> <td>20</td> <td id="now">21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> </tr> <tr> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td class="pad" colspan="2"> </td> </tr> </tbody> </table> </div> </li> </ul> <h3>Site Hakkında</h3> <p>Buraya Siteniz Hakkında Bilgi Verebilirsiniz...</p> <br /> </div>    </div> <div id="footer"> <p>Copyright © 2008. Designed by <a href="http://www.css-tasarimm.tr.gg" _fcksavedurl="http://www.csstasarim-arsiv.tr.gg" title="Css Tasarim Merkezi">Css Tasarim Merkezi</a></p> </div> </div> </div> 

Css koduna
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;} /* Design by WWW.CSS-TASARİMM.TR.GG / { margin: 0px; padding: 0px; } a:link { color: #A5A9B2; } a:hover { text-decoration: none; color: #FF0000; } a:visited { color: #A5A9B2; } body { background: #ffffff url(https://img.webme.com/pic/c/css-tasarimm/1-back_all.gif) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #666666; } #contentt { margin: 0 auto; background: #ffffff; width: 742px; text-align: left; } #back { background: #ffffff; width: 742px; } #header { height: 406px; text-align: left; } #menu1 { width: 702px; height: 152px; padding-left: 40px; } #menu ul { list-style: none; } #menu li { display: inline; } #menu a { float: left; width: 79px; height: 32px; display: block; text-align: center; text-decoration: none; color: #000000; font-weight: bold; font-size: 12px; text-transform: uppercase; } #menu a:hover { width: 79px; height: 32px; color: #004586; text-decoration: underline; } #button1 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button1.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button1 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button1_r.jpg) no-repeat; height: 24px; width: 124px; } #button2 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button2.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button2 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button2_r.jpg) no-repeat; height: 24px; width: 124px; } #button3 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button3.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button3 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button3_r.jpg) no-repeat; height: 24px; width: 124px; } #button4 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button4.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button4 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button4_r.jpg) no-repeat; height: 24px; width: 124px; } #button5 a { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button5.jpg) no-repeat; height: 24px; width: 124px; padding-top: 120px; } #button5 a:hover { background: url(https://img.webme.com/pic/c/css-tasarimm/1-button5_r.jpg) no-repeat; height: 24px; width: 124px; } #logo { background: url(https://img.webme.com/pic/c/css-tasarimm/1-header.jpg) no-repeat; width: 722px; height: 234px; text-align: left; padding-left: 20px; padding-top: 10px; } #logo a { text-decoration: none; text-transform: lowercase; font-style: italic; font-size: 18px; color: #000000; } #logo H2 a { font-size: 12px; } #left { width: 266px; } #left H3 { width: 241px; height: 47px; font-size: 14px; font-weight: bold; padding-left: 25px; padding-top: 15px; text-transform: uppercase; color: #000000; background: url(https://img.webme.com/pic/c/css-tasarimm/1-title.gif) repeat-x } #left ul { list-style: none; } #left li ul { border: 0px; margin-left: 20px; margin-bottom: 10px; } #left li li { padding: 4px 20px; background: url(https://img.webme.com/pic/c/css-tasarimm/1-small.gif) no-repeat left; } #left a { color: #A5A9B2; } #left a:visited { color: #A5A9B2; } #left p { padding: 10px; } #calendar1 { padding: 0 10px 20px 10px; } #calendar table { width: 100%; text-align: center; } #calendar thead { } #calendar tbody td { border: 1px solid #F1F1F1; } #calendar #prev { text-align: left; } #calendar #next { text-align: right; } #calendar tfoot a { text-decoration: none; font-weight: bold; } #calendar #now { background: #696969; border: 1px solid #ff0000; font-weight: bold; color: #ffffff } #right { float: right; width: 450px; padding-right: 10px; } #right H4 { margin: 0; padding: 0px; font-size: 12px; color: #C5C5C5; } #right a { color: #A5A9B2; text-decoration: none; } #right p { margin: 0; padding: 0; padding-bottom: 10px; } #right h2 { margin: 0; padding: 0; padding-top: 10px; color: #C5C5C5; } .date { text-align: right; color: #808080; font-size: 11px; } .date a { color: #D72020; } #footer { height: 29px; clear: both; padding-top: 50px; background: url(https://img.webme.com/pic/c/css-tasarimm/1-footer.gif) repeat-x bottom; } #footer p { margin: 0; font-size: 10px; text-align: center; color: #ffffff; } #footer a { color: #ffffff; }

Tasarım üstüne
 <div id="wrap">  <div id="header"> <h1 id="logo-text">Css<span class="gray">Box</span></h1> <h2 id="slogan">Csstasarımınız burda..</h2> <form class="search" method="post" action="#"> <p> <input class="textbox" type="text" name="search_query" value="" /> <input class="button" type="submit" name="Submit" value="Search" /> </p> </form> </div>  <div id="menu"> <ul> <li id="current"><a href="index.html" _fcksavedurl="index.html">Home</a></li> <li><a href="index.html" _fcksavedurl="index.html">Archives</a></li> <li><a href="index.html" _fcksavedurl="index.html">Downloads</a></li> <li><a href="index.html" _fcksavedurl="index.html">Services</a></li> <li><a href="index.html" _fcksavedurl="index.html">Support</a></li> <li><a href="index.html" _fcksavedurl="index.html">About</a></li> </ul> </div>  <div id="content-wrap"> <div id="sidebar"> <h1>Sidebar Menu</h1> <div class="left-box"> <ul class="sidemenu"> <li><a href="index.html" _fcksavedurl="index.html">Home</a></li> <li><a href="#TemplateInfo" _fcksavedurl="#TemplateInfo">Template Info</a></li> <li><a href="#SampleTags" _fcksavedurl="#SampleTags">Sample Tags</a></li> <li><a href="http://www.styleshout.com/" _fcksavedurl="http://www.styleshout.com/">More Free Templates</a></li> <li><a href="http://www.4templates.com/?aff=ealigam" _fcksavedurl="http://www.4templates.com/?aff=ealigam">Premium Templates</a></li> </ul> </div> <h1>Site Partners</h1> <div class="left-box"> <ul class="sidemenu"> <li><a href="http://partners.ipower.com/z/57/CD5822/" _fcksavedurl="http://partners.ipower.com/z/57/CD5822/">IPowerweb</a></li> <li><a href="http://www.4templates.com/?aff=ealigam" _fcksavedurl="http://www.4templates.com/?aff=ealigam">4templates</a></li> <li><a href="http://www.fotolia.com/partner/114283" _fcksavedurl="http://www.fotolia.com/partner/114283">Fotolia.com</a></li> <li><a href="http://www.bigstockphoto.com/?refid=grKPpdNw6k" _fcksavedurl="http://www.bigstockphoto.com/?refid=grKPpdNw6k">BigStockPhoto.com</a></li> <li><a href="http://www.text-link-ads.com/?ref=40025" _fcksavedurl="http://www.text-link-ads.com/?ref=40025">Text Link Ads</a></li> </ul> </div> <h1>Wise Words</h1> <div class="left-box"> <p>"To be concious that you are ignorant of the facts is a great step to knowledge" </p> <p class="align-right">- Benjamin Disraeli</p> </div>

Tasarımın altına
<h1>Support Styleshout</h1> <div class="left-box"> </div>  </div>  <div id="footer"> <p> © 2006 <b>Your Company</b> | Design by: <a href="http://www.styleshout.com/" _fcksavedurl="http://www.styleshout.com/">styleshout</a> | Valid <a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>        <a href="index.html" _fcksavedurl="index.html">Home</a> | <a href="index.html" _fcksavedurl="index.html">Sitemap</a> | <a href="index.html" _fcksavedurl="index.html">RSS Feed</a> </p> </div>  </div>

Css koduna
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;} /********************** AUTHOR: Erwin Aligam WEBSITE: http://www.styleshout.com/ TEMPLATE NAME: Refresh TEMPLATE CODE: S-0002 VERSION: 1.0 */ / HTML ELEMENTS ********************/ /* Top Elements / { margin: 0; padding: 0; } body { background: #CCCCCC; font: 70%/1.5em Verdana, Tahoma, arial, sans-serif; color: #333; text-align: center; } /* links / a, a:visited { text-decoration: none; color: #4F82CB; background: inherit; } a:hover { color: #4EBF37; background: inherit; } / headers / h1, h2, h3 { font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif; font-weight: Bold; } h1 { font-size: 120%; } h2 { font-size: 110%; text-transform: uppercase; color: #88ac0b; } h3 { font-size: 110%; color: #666666; } / images / img { border: 2px solid #CCC; } img.float-right { margin: 5px 0px 10px 10px; } img.float-left { margin: 5px 10px 10px 0px; } h1, h2, h3, p { padding: 10px; margin: 0; } ul, ol { margin: 5px 20px; padding: 0 20px; color: #88ac0b; } ul span, ol span { color: #666666; } code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ; / white-space: pre; / background: #FAFAFA; border: 1px solid #f2f2f2; } acronym { cursor: help; border-bottom: 1px solid #777; } blockquote { margin: 10px; padding: 0 0 0 28px; border: 1px solid #f2f2f2; background: #FAFAFA url(http://www.opendesigns.org/designs/148/images/quote.gif) no-repeat 5px 5px; } / form elements / form { margin:10px; padding: 0 5px; border: 1px solid #f2f2f2; background-color: #FAFAFA; } label { display:block; font-weight:bold; margin:5px 0; } input { padding:2px; border:1px solid #eee; font: normal 1em Verdana, sans-serif; color:#777; } textarea { width:400px; padding:2px; font: normal 1em Verdana, sans-serif; border:1px solid #eee; height:100px; display:block; color:#777; } input.button { margin: 0; font: bolder 12px Arial, Sans-serif; border: 1px solid #CCC; padding: 2px 3px; background: #FFF; color: #88ac0b; } / search / form.search { position: absolute; top: 35px; right: 25px; background: transparent; border: none; } form.search input.textbox { margin: 0; padding: 1px 2px; width: 120px; background: #FFF; color: #333; } form.search input.button { background: #CCC url(http://www.opendesigns.org/designs/148/images/headerbg.gif) repeat-x; color: #333; border: none; width: 70px; height: 21px; } / LAYOUT / #wrap { width: 820px; background: #CCC url(http://www.opendesigns.org/designs/148/images/content.jpg) repeat-y center top; margin: 0 auto; text-align: left; } #content-wrap { clear: both; width: 760px; padding: 0; margin: 0 auto; } #header { width: 820px; position: relative; height: 106px; background: #CCC url(http://www.opendesigns.org/designs/148/images/header.jpg) no-repeat center top; padding: 0; font-size: 14px; color: #FFF; } #header h1#logo-text { position: absolute; margin: 0; padding: 0; font: bolder 3.3em 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; color: #FFF; text-transform: none; / change the values of top and left to adjust the position of the logo/ top: 28px; left: 50px; } #header h2#slogan { position: absolute; margin: 0; padding: 0; font: normal .8em 'Trebuchet MS', Arial, Sans-serif; text-transform: none; color: #FFF; / change the values of top and left to adjust the position of the slogan/ top: 74px; left: 58px; } / Menu / #menu { clear: both; margin: 0; padding: 0 40px 0 0; background: url(http://www.opendesigns.org/designs/148/images/menu.jpg) repeat-y center top; font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif; height: 26px; } #menu ul { float: right; list-style: none; margin:0; padding: 0; } #menu ul li { display: inline; } #menu ul li a { display: block; float: left; padding: 0 8px; color: #FFF; text-decoration: none; } #menu ul li a:hover { background-color: #ECECEC; color: #333; } #menu ul li#current a { background-color: #FFF; color: #333; } / Main Column / #main { float: right; width: 72%; padding: 0; margin: 0; } #main h1 { margin-top: 10px; font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif; color: #88ac0b; padding: 5px 0 5px 25px; border-bottom: 1px solid #EFF0F1; background: #FFF url(http://www.opendesigns.org/designs/148/images/square-green.png) no-repeat 3px 50%; } .post-footer { background-color: #FAFAFA; padding: 5px; margin: 20px 10px 0 10px; border: 1px solid #f2f2f2; font-size: 95%; } .post-footer .date { background: url(http://www.opendesigns.org/designs/148/images/clock.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .comments { background: url(http://www.opendesigns.org/designs/148/images/comment.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .readmore { background: url(http://www.opendesigns.org/designs/148/images/page.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } / Sidebar / #sidebar { float: left; width: 26.5%; padding: 0; margin: 0; } #sidebar h1 { margin-top: 10px; padding: 5px 0 5px 10px; font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif; color: #555; background: #EEF0F1 url(http://www.opendesigns.org/designs/148/images/headerbg.gif) repeat-x left bottom; border: 1px solid #EFF0F1; } #sidebar .left-box { border: 1px solid #EFF0F1; margin: 0 0 5px 0; } #sidebar ul.sidemenu { list-style: none; text-align: left; margin: 3px 0 8px 0; padding: 0; text-decoration: none; } #sidebar ul.sidemenu li { border-bottom: 1px solid #EFF0F1; background: url(http://www.opendesigns.org/designs/148/images/go.gif) no-repeat 5px 5px; padding: 2px 0 2px 25px; margin: 0 2px; } #sidebar ul.sidemenu a { font-weight: bolder; text-decoration: none; background-image: none; } / Footer / #footer { color: #666666; background: #CCC url(http://www.opendesigns.org/designs/148/images/footer.jpg) no-repeat center top; clear: both; width: 820px; height: 55px; text-align: center; font-size: 92%; } #footer a { text-decoration: none; } / alignment classes / .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } / display and additional classes */ .clear { clear: both; } .gray { color: #CCC; } </body></html>

Tasarım üstüne

<div id="menu"> <ul> <li><a href="Link Buraya" _fcksavedurl="Link Buraya" accesskey="1" title="">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya" accesskey="2" title="">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya" accesskey="3" title="">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya" accesskey="4" title="">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya" accesskey="5" title="">Sayfa Adi</a></li> </ul> </div> <div id="header"> <h1>Site Adi</h1> <h2>Site Slogani</h2> </div> <div id="wrapper"> <div id="conntent"> <div id="posts"> <div class="post"> <h2 class="title"></h2> <div class="story">

Tasarımın altına
</div> <div class="meta"> <p class="date"></p> </div> </div> </div> <div id="links"> <ul> <li> <h2>Menu Adi</h2> <ul> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> </ul> </li> <li> <h2>Menu Adi</h2> <ul> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> </ul> </li> <li> <h2>Menu Adi</h2> <ul> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> <li><a href="Link Buraya" _fcksavedurl="Link Buraya">Sayfa Adi</a></li> </ul> </li> </ul> </div> <div style="clear: both;"> </div> </div> </div> <div id="footer"> <p id="legal">Copyright © 2008. Designed by <a href="http://www.csstasarimi.tr.gg" _fcksavedurl="http://www.csstasarimi.tr.gg">Tasarimciamca</a></p> </div>

Css koduna
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; background: #749865 url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img01.gif) repeat-x; font: normal small Arial, Helvetica, sans-serif; line-height: 1.8em; color: #838B91; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #468259; } h2 { padding-left: 20px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img07.gif) no-repeat left center; font-size: 22px; } h3 { margin-bottom: 1em; text-transform: uppercase; letter-spacing: 2px; font-size: .9em; font-weight: bold; } p, blockquote, ul, ol { margin-top: 0; } blockquote { padding: 0 0 0 40px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img11.gif) no-repeat; font: italic small Georgia, "Times New Roman", Times, serif; line-height: 1.6em; } a { background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img03.gif) repeat-x left bottom; text-decoration: none; color: #468259; } a:hover { background: none; text-decoration: underline; } /* Wrapper / #wrapper { background: #FFFFFF url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img04.gif) repeat-x left bottom; } / Menu / #menu { width: 750px; height: 60px; margin: 0 auto; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { display: block; float: left; width: 148px; height: 30px; padding: 0 0 0 2px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img02.gif) no-repeat; } #menu a { display: block; width: 108px; height: 30px; padding: 0 0 0 20px; background: none; letter-spacing: -1px; font: normal 1.6em Georgia, "Times New Roman", Times, serif; color: #E1E9E2; } #menu a:hover { border-bottom: 4px solid #5A7C50; text-decoration: none; color: #FFFFFF; } #menu .active a { background: #E1E9E2; border-bottom: 4px solid #E1E9E2; text-decoration: none; color: #749865; } #header { width: 754px; height: 247px; margin: 0 auto; } #header h1 { float: left; width: 224px; height: 214px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img05.jpg) no-repeat; line-height: 32px; font-size: 30px; margin-top: -15px; padding: 140px 0 0 10px; } #header h2 { float: right; width: 500px; height: 214px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img06.jpg) no-repeat; text-transform: lowercase; text-align: right; letter-spacing: -1px; font-size: 22px; color: #FFFFFF; margin-top: -15px; padding: 140px 20px 0 0; } #conntent { width: 750px; margin: 0 auto; } / Posts / #posts { float: right; width: 510px; } #posts .post { padding-bottom: 30px; } #posts .story { padding: 15px 20px 0 20px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img10.gif) repeat-x } #posts .meta { padding: 5px 0 0 20px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img03.gif) repeat-x; } #posts .meta p { margin: 0; line-height: normal; font-size: smaller; } #posts ul { list-style: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img12.gif); } #posts ul li { } / Links / #links { float: left; width: 220px; } #links ul { margin: 0; padding: 0; list-style: none; } #links li ul { padding: 15px 20px 30px 20px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img10.gif) repeat-x } #links li li { padding: 3px 0; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img03.gif) repeat-x left bottom; } #links li a { background: none; } #links li i { font-size: smaller; } / Footer */ #footer { padding: 40px 0 60px 0; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img08.gif) repeat-x; } #footer p { width: 750px; font-family: Georgia, "Times New Roman", Times, serif; color: #A6C09B; } #footer a { background: none; font-weight: bold; color: #A6C09B; } #legal { margin: 0 auto; text-align: right; font-size: 12px; } #brand { margin: -35px auto 0 auto; padding: 10px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/thegreenhouse/images/img09.gif) no-repeat left top; letter-spacing: -1px; font-size: 24px; }

TASARIMIN ÜZERİNE
<div id="main_container"> <div id="top_banner"> <div id="logo"> <a href="index.html"><img src="http://csscreme.com/freetemplates/aero_solutions/images/logo.gif" width="200" height="81" border="0" alt="" /></a></div> <div class="snapshot"> <img src="http://csscreme.com/freetemplates/aero_solutions/images/demopic.gif" border="0" title="pic2" width="280" height="118" alt="" /> </div> </div> <div class="navigation"> <ul> <li class="current"><a href="index.html">Anasayfa</a></li> <li><a href="about.html" >Link1</a></li> <li><a href="contact.html" >Link2</a></li> <li><a href="terms.html" >Link3</a></li> <li><a href="support.html" >Link4</a></li> <li><a href="contact.html" >Link5</a></li> </ul> </div> <div id="center_content"> <div class="left_box1"> <div class="title1">Duyurular/Tanıtım</div> <p> <img src="http://csscreme.com/freetemplates/aero_solutions/images/team.gif" border="0" class="pic2" title="p1" alt="p2" /> Bu alana sitenizle ilgili yenilikleri veya duyuruları yapabilirsiniz. Yada kendinizi tanıtabilirsiniz.</p> <p>WeBuz.Tr.GG </p> <div class="sidebox"> <h3>Menü</h3> <ul> <li><a href="#" title="">Menü 1</a></li> <li><a href="#" title="">Menü 2</a></li> <li><a href="#" title="">Menü 3</a></li> <li><a href="#" title="">Menü 4</a></li> <li><a href="#" title="">Menü 5</a></li> </ul> </div> <div class="sidebox"> <h3>Menü 2 </h3> <ul> <li><a href="#" title="">Menü 112</a></li> <li><a href="#" title="">Menü 213</a></li> <li><a href="#" title="">Menü 323</a></li> <li><a href="#" title="">Menü 412</a></li> <li><a href="#" title="">Menü 52</a></li> </ul> </div> </div> <div class="left_box2"> <div class="title1"> <div align="center">WwW.WeBuZ.Tr.Gg </div>

TASARIMIN ALTIN
<div class="title1">Partners</div> <p> <img src="http://csscreme.com/freetemplates/aero_solutions/images/1.jpg" width="82" height="54" alt="" title=""/><img src="http://csscreme.com/freetemplates/aero_solutions/images/2.jpg" width="137" height="54" alt="" title=""/><img src="http://csscreme.com/freetemplates/aero_solutions/images/3.jpg" width="114" height="54" alt="" title=""/> <img src="http://csscreme.com/freetemplates/aero_solutions/images/4.jpg" width="125" height="54" alt="" title=""/></p> </div> <div style="width:500px; clear:both; padding-bottom:2px;"></div> </div> </div> <div id="footer"> <ul> <li><a href="#" title="">Anasayfa</a></li> <li><a href="#" title="">Link1</a></li> <li><a href="#" title="">Link2</a></li> <li><a href="#" title="">Link3</a></li> <li><a href="#" title="">Link4</a></li> </ul> Copyright 2009 © Tüm Hakları Saklıdır. <br /> <a href="http://www.webuz.tr.gg">Tasarım Düzenleme By WebuZ </a><br /> <a href="http://validator.w3.org/check?uri=referer" title="This site is W3C compliant" style="text-decoration:none; color:#333333;">Xhtml</a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.csscreme.com&usermedium=all" title="This site is coded with validate CSS" style="text-decoration:none; color:#333333;">css</a> </div>
CSS KODUNA
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 { background: #fff url('http://csscreme.com/freetemplates/aero_solutions/images/bg.gif') repeat-x; margin: 0px; padding: 0px; } .input{ width:140px; height:15px; font-size:12px; color: #666666; } p{ width:auto; padding:5px 0 0 0; text-align:justify; } .title1{ color: #804000; font-size:16px; font-weight:bold; padding:15px 10px 5px 40px; border-bottom:1px #CCCCCC dashed; margin-top:10px; text-decoration:none; } h2{ color: #036B99; font-size:16px; padding:15px 10px 5px 10px; border-bottom:1px #CCCCCC dashed; margin:0px; text-decoration:none; } .select{ width:60px; height:19px; font-size:12px; color: #666666; } #main_container{ width:850px; height:800px; margin:16px auto; background: none; font-size:12px; color:#333333; font-family:Verdana, Arial, Helvetica, sans-serif; } #top_banner{ width:auto; height:130px; } #logo{ width:auto; float:left; padding-left:20px; } .snapshot{ float:left; padding-left:290px; padding-top:6px; } /-------------menu--------------/ .navigation{ float:left; padding-left:60px; padding-bottom:3px; } .navigation ul { font-family: "trebuchet ms"; font-size: 11px; text-decoration: none; margin: 0px; padding:0px; list-style: none; } .navigation li { text-align:center; display: inline; background: none; text-align: center; padding: 0px; margin-right: 5px; float: left; } .navigation li a { color: #fff; float: left; margin: 0px; padding:5px 15px 5px 15px; text-decoration: none; } .navigation li a:hover { color: #000000; } .navigation li.current a { color: #fff; float: left; margin: 0px; padding:5px 15px 5px 15px; text-decoration: none; font-weight:bold; } #center_content{ clear:both; width:850px; height:auto; background:url(http://csscreme.com/freetemplates/aero_solutions/images/center_bg.gif) repeat-y ; } .left_box1{ width:235px; float:left; height:auto; padding-left:30px; font-size:11px; color:#333333; padding-bottom:50px; } .left_box2{ width: 500px; float:left; height:auto; padding-left:30px; } img.pic{ float:left; padding:10px; margin-right:10px; border:1px #D8C6B1 solid; } img.pic2{ padding:10px; margin:3px; border:1px #D8C6B1 solid; } /-------------list------------/ .list { color:#F26123; font-weight:bold; } .list li span{ color:#333333; } .list ul{ padding:0px; margin:0px; } .list li ul li{ font-weight:normal; padding:5px; list-style:none; margin:5px; background-color:#E2D8C6; } .list ul li.description{ color: #000; font-size:10px; } /side box header----------/ .sidebox { margin-top:15px; width: 235px; color:#333333; background:url(http://csscreme.com/freetemplates/aero_solutions/images/title.gif) no-repeat top; } .sidebox h3{ padding:6px 0 0 0; margin:0px; height:23px; font-size:14px; font-weight:bold; text-decoration:none; text-align:center; } .sidebox ul{ border: 1px solid #CDC3B6; width: 210px; margin:0px; padding:0px 10px 0 13px; list-style:none; background: #E2D8C6 ; } .sidebox ul li { border-bottom: 1px solid #F6F0E7; line-height: 25px; list-style: none; } .sidebox ul li a { display: block; color: #666; text-decoration: none; } .sidebox ul li a:hover { color:#993300; } .bottom_buttons{ padding-top:10px; padding-left:50px; } /----------/ #login{ background-color:#E2D8C6; color:#333333; width:215px; height:100px; padding:10px; } .input{ width:140px; height:12px; font-size:10px; } .submit{ float:right; margin-right:30px; margin-top:5px; } .clear { clear:both; overflow:hidden; height:4px; } /-------------foooter/ #footer{ clear:both; width:auto; background:url(http://csscreme.com/freetemplates/aero_solutions/images/bg-footer.gif) repeat-x; background-position:0px 0px; padding-top:30px; height:130px; text-align:center; } #footer ul li { list-style: none; display: inline; margin-right: 15px; padding-right: 15px; background: url(http://csscreme.com/freetemplates/aero_solutions/images/separator.gif) no-repeat right center; font-size: 13px; } #footer ul li a{ text-decoration:none; color:#000000; } #footer ul li a:hover{ text-decoration:underline; }

TASARIMIN ÜZERİNE
<div id="container"> <div id="head"> <h1><a href="index.html" title="">Web Design Studio</a></h1> <ul id="menu"> <li><a class="current" href="index.html" title="">Anasayfa</a></li> <li><a href="" title="">link1</a></li> <li><a href="" title="">link2</a></li> <li><a href="" title="">lin3</a></li> <li><a href="contact.html" title="">link4</a></li> </ul> <div class="top_head_banner"> </div> </div> <div id="area"> </div> <div id="main"> <div id="welcome"> <h1>WwW.WeBuZ.Tr.GG</h1> </div>
TASARIMIN ALTINA
<div id="content_left"> <img src="http://csscreme.com/freetemplates/bublue_studio/images/2.jpg" width="137" height="54" alt="" title="" /> <img src="http://csscreme.com/freetemplates/bublue_studio/images/3.jpg" width="114" height="54" alt="" title=""/> <img src="http://csscreme.com/freetemplates/bublue_studio/images/4.jpg" width="125" height="54" alt="" title=""/> </p> </div> <div id="content_right"> <h4>Kategori</h4> <div class="item_box"> <img src="http://csscreme.com/freetemplates/bublue_studio/images/t1.jpg" width="200" height="70" border="0" alt="t1" title="t1" /><br /> <a href="work.html">devamı ></a> </div> <div class="item_box"> <img src="http://csscreme.com/freetemplates/bublue_studio/images/t2.jpg" width="200" height="70" border="0" alt="t1" title="t1" /><br /> <a href="work.html">devamı ></a> </div> <div class="item_box"> <img src="http://csscreme.com/freetemplates/bublue_studio/images/t3.jpg" width="200" height="70" border="0" alt="t1" title="t1" /><br /> <a href="work.html">devamı ></a> </div> <div class="item_box"> <img src="http://csscreme.com/freetemplates/bublue_studio/images/t4.jpg" width="200" height="70" border="0" alt="t1" title="t1" /><br /> <a href="work.html">devamı ></a> </div> </div> <div class="spacer"></div> </div> <div id="footer"> <div style="float:left; padding-left:40px;"> Copyright 2009 ©WeBuZ </div> <div id="madeby"> <a href="http://www.csscreme.com">Tasarım Düzenleme WeBuZ.Tr.GG </a><br /> </div> </div> </div>
CSS KODUNA
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 { background: url(http://csscreme.com/freetemplates/bublue_studio/images/background.gif) top center repeat-x #CFDEEA; margin: 0px; padding: 16px 0; font: 11px "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica; color: #282828; text-align: center; } p{ font-size:11px; text-indent:1cm; text-align:justify; line-height:16px; } img { border-style: none; } img.pic_left{ float:left; padding:5px; margin:0 8px 8px 8px; border:1px #CCCCCC solid; } a { color: #2E9FED; text-decoration: none; } a:hover { color: #1471B1; } #welcome h1{ padding:5px 0 0 20px; margin:0px; font-weight:bold; font-size:14px; color:#FFFFFF; } h3{ font-size:14px; color: #003366; } h4{ font-size:13px; padding:2px; margin:0px; color: #003366; border-bottom:1px #999999 dashed; } #container { position: relative; width: 750px; margin: 0 auto; padding: 0px; text-align: left; } #head { width: 750px; height: 172px; background: url(http://csscreme.com/freetemplates/bublue_studio/images/head.gif) no-repeat; } #head h1 { position: absolute; margin: 31px 0 0 36px; width: 200px; height: 75px; background: url(http://csscreme.com/freetemplates/bublue_studio/images/logo.gif) no-repeat; } #head h1 a { text-indent: -2000px; width: 154px; height: 59px; display: block; background: url(http://csscreme.com/freetemplates/bublue_studio/images/logo.gif) no-repeat; } .top_head_banner{ float:right; width:200px; height:120px; background:url(http://csscreme.com/freetemplates/bublue_studio/images/top_head.gif) no-repeat right; background-position:-12px 12px; } #menu { position: absolute; width: 617px; top: 155px; left: 35px; margin: 0px; padding: 0px; z-index: 100; } #menu li { list-style-type: none; float: left; margin: 0 8px; height: 22px; } #menu li a { padding: 0 0 7px 0; height: 22px; color: #8A8A8A; } #menu li a:hover { color:#000033; } #menu .current { color:#000033; font-weight:bold; } #area { width: 750px; height: 54px; background: url(http://csscreme.com/freetemplates/bublue_studio/images/area.gif) repeat-x; } #main { margin: auto; background: url(http://csscreme.com/freetemplates/bublue_studio/images/bg_main.gif) repeat-y; width: 750px; height: auto; } #content_left { float:left; padding:0 30px 30px 30px; width: 445px; height:auto; } #content_right{ float:left; padding:5px; width: 200px; height:auto; } #welcome { background: url(http://csscreme.com/freetemplates/bublue_studio/images/center_banner.gif) no-repeat; background-position:12px 0px; padding:10px; width: 750px; height:80px; } .item_box{ width:auto; height:auto; padding:10px 0 5px 0; border-bottom:1px #666666 dashed; } .spacer{ width:auto; height:2px; clear:both; padding-bottom:2px;} /---------contact----------/ #form { padding: 0px; margin: 0px; } #fields label { width: 260px; display: block; padding: 0px; } #fields input { border: 1px solid #C8D2D9; margin: 0 0 3px 0; width: 260px; } #fields textarea { border: 1px solid #C8D2D9; margin: 0 0 3px 0; width: 260px; height: 63px; } #send input { width: 64px; height: 20px; margin: 0px; } ul { margin: 0 0 20px 0; padding: 0px; list-style-type: none; } .contact_info{ float:left; padding:15px; } /work------------/ .project_details{ float:left; width:200px; color:#0099FF; padding:10px 0 0 10px; } #footer { text-align:center; font-size:10px; color:#000033; background: url(http://csscreme.com/freetemplates/bublue_studio/images/footer.gif) no-repeat; background-position:0px 0px; padding-top:10px; width: 750px; height:85px; } #footer a { background: none; padding: 0px; } #madeby{ width:200px; height:85px; float:right; padding-right:30px; text-align:center; } #madeby a{ text-decoration:none; color:#666666; }

TASARIMIN ÜZERİNE
 <div id="header"> <a href="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">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> </ul> </div>   <div id="body"> <p class="top"></p> 
TASARIMIN ALTINA
<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">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> </ul> <a href="#"><img src="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="#" class="xhtm"></a> <a href="#" class="css"></a> </p> </div>  <p class="bot"></p> <br class="spacer" /> </div>   <div id="footer"> <ul> <li><a href="SAYFA URL">ANA SAYFA</a>|</li> <li><a href="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL">SAYFA ADI</a>|</li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> </ul> <p class="copyright"> <a href="http://tasarimci-amca1.tr.gg">tasarimci-amca1.tr.gg</a> ve <a href="http://tasarimci-amca2.tr.gg">tasarimci-amca2.tr.gg</a></p> <p>Designed By: semih</p> </div> 
CSS KODUNA
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---------------------*/

TASARIMIN ÜZERİNE
.... .... .... .... ... <div id="page"> <div class="page-container">   <div class="nav-global-container"> <div class="nav-global nav-global-font"> <ul> <li class="topnav"><a href="SAYFA URL">SAYFA ADI</a></li> <li class="topnav"><a href="SAYFA URL">SAYFA ADI</a></li> <li class="topnav"><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="İNGİLİZCE SİTE URL"><img class="img-flag" src="http://img167.imageshack.us/img167/5014/flagukkj7.gif/flag_uk.gif" title="İNGİLİZCEYE ÇEVİR" alt="" /></a></li> <li><a href="İSPANYOL SİTE URL"><img class="img-flag" src="http://img167.imageshack.us/img167/2757/flagspainir6.gif/flag_spain.gif" title="İSPANYOLCAYA ÇEVİR" alt="" /></a></li> <li><a href="FRANSIZCA SİTE URL"><img class="img-flag" src="http://img220.imageshack.us/img220/5803/flagfrancerc9.gif/flag_france.gif" title ="FRANSIZCAYA ÇEVİR" alt="" /></a></li> <li><a href="ALMANCA SİTE URL"><img class="img-flag" src="http://img232.imageshack.us/img232/7948/flaggermanyea5.gif/flag_germany.gif" title ="ALMANCAYA ÇEVİR" alt="" /></a></li> </ul> </div> </div>  <div class="site-name"> MultiFlex-1.2 <div class="site-slogan"> Flexible. Robust. </div> </div> <div><img class="img-header" src="http://img167.imageshack.us/img167/6431/headeroa4.jpg/header.jpg" alt=""/></div>  <div class="nav-main nav-main-font"> <ul> <li><a href="SAYFA URL" class="selected">ANA SAYFA</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> </ul> </div> <div class="buffer"></div>  <div class="nav-sub nav-sub-font"> <ul> <li class="title">:::...ANA MENÜ...:::</li> <li class="group"><a href="1.BAŞLIK URL" class="selected">1.BAŞLIK ADI</a></li> <li><a href="1.İSİM URL">1.İSİM ADI</a></li> <li><a href="2.İSİM URL">2.İSİM ADI</a></li> <li><a href="4.İSİM URL">4.İSİM ADI</a></li> <li class="group"><a href="2.BAŞLIK URL">2.BAŞLIK ADI</a></li> <li><a href="3.İSİM URL">3.İSİM ADI</a></li> <li><a href="4.İSİM URL">4.İSİM ADI</a></li> <li><a href="#">5.İSİM ADI</a></li> <li><a href="#">6.İSİM ADI</a></li> <li class="group"><a href="3.BAŞLIK URL">3.BAŞLIK ADI</a></li> <li class="group"><a href="4.BAŞLIK URL">4.BAŞLIK ADI</a></li> <li class="group"><a href="5.BAŞLIK URL">5.BAŞLIK ADI</a></li> </ul> </div>  <div class="container-content-sidebar">  <div class="content content-font">

TASARIMIN ALTINA
</div> .... .... ....  <div class="contentbox-container">  </div>  </div>  <div class="footer footer-font">  <p>DESİGN BY <a href="http://tasarimci-amca.tr.gg/">TASARİMCİ-AMCA</a>  </div> </div>
CSS KODUNA
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;} /*****************************************************/ /* Design: Tasarimci-amca / / Design: www.tasarimci-amca.tr.gg / / Date: perşembe 20, 2008 */ /*****************************************************/ /-----------------------------------------------------------------------/ /* FONT-SIZE DEFINITIONS / /-----------------------------------------------------------------------/ / Relative font-sizes in "em" are used where necessary. To make the / / "em"-units normed, the incoming font sizes are set to 1.0 em. The / / font-size variations throughout the webpage are then expressed in / / percentage values respective to the incoming font-size. To make / / calculations easier, the font definition in the css-class "body" is / / 62.5%, which gives 1.0em = 10px This makes life a real breeze! / /-----------------------------------------------------------------------/ / Comments for individual lines are found to the right of the respective row */ /*************************/ /* SECTION 1 - MAIN BODY */ /***/ body {font-size: 62.5%; margin: 0em auto; padding: 0px; font-family: arial, tahoma, verdana, sans-serif; background: url(../img/background.gif) top center repeat-y;} .page-container {width: 771px; margin: 0px auto; padding: 0px; border-left: solid 1px rgb(125,125,125); border-right: solid 1px rgb(125,125,125); border-bottom: solid 1px rgb(125,125,125); background-color: rgb(255,255,255);} // /* SECTION 2 - HEADER */ /**********************/ /--------------------------------------/ /* Section 2.1 - Global navigation menu / /--------------------------------------/ .nav-global-container {position: absolute; z-index: 3; width: 770px; top: 5px; background-color: transparent;} .nav-global {float: right; width: 750px; margin: 0px 5px 0px 0px; padding: 0px; background-color: transparent;} .nav-global ul {float: right; display: inline; list-style: none; margin: 0px; padding: 0px;} .nav-global li {display: inline; white-space: nowrap; text-transform: none;} .nav-global li a {display: inline; margin: 0px; padding: 0px 0px 0px 4px; border-left: solid 1px rgb(100,100,100); color: rgb(150,150,150); font-weight: bold; text-decoration: none; font-size: 110%;} .nav-global a:hover {background-color: rgb(255,255,255); color: rgb(0,0,0); text-decoration: underline;} .img-flag {display: inline; vertical-align: text-bottom; height: 1.0em; margin: 0px; padding: 0px; border: solid 1px rgb(0,0,0);} /-----------------------------------/ / Section 2.2 - Sitename and Banner / /-----------------------------------/ .site-name {clear: both; float: left; position: absolute; z-index: 2; width: 700px; top: 20px; margin: 0px; padding-left: 17px; background-color: transparent; color: rgb(255,255,255); font-weight: bold; font-size: 24px;} .site-slogan {float: left; position: absolute; z-index: 1; width: 700px; top: 1.9em; left: 15px; margin: 0px; padding: 0px 0px 0px 3px; background-color: transparent; color: rgb(204,216,228); font-weight: bold; font-size: 14px;} .img-header {clear: both; float: left; width: 770px; height: 100px; margin: 0px; padding: 0px;} /------------------------------------/ / Section 2.3 - Main navigation menu / /------------------------------------/ .nav-main {clear: both; float: left; width: 770px; min-height: 2.0em; height: auto !important; height: 2.0em; line-height: 2.0em; margin: 0px; padding: 0px; border-top: solid 1px rgb(84,111,144); border-bottom: solid 1px rgb(84,111,144); background-color: rgb(159,182,213);} / Use background-color: rgb(176,207,106); for green */ .nav-main ul {list-style: none; margin: 0px; padding: 0px; font-weight: bold;} .nav-main li {float: left; white-space: nowrap; background-color: inherit;} .nav-main li a {margin: 0px; padding: 0px 10px 0px 10px; border-right: solid 1px rgb(255,255,255); color: rgb(255,255,255); text-decoration: none; font-size: 110%;} .nav-main a:hover, .nav-main a.selected {background-color: inherit; color: rgb(75,75,75); text-decoration: none;} .buffer {float: left; width: 770px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);} /*************************************/ /* SECTION 3 - SIDEBANNER FRONT PAGE */ /*******/ .sidebanner-frontpage {clear: both; float: left; width: 160px; margin: 0px; padding: 0px;} .img-sidebanner {width: 160px; margin: 0px; padding: 0px; border: none;} // /* SECTION 4 - SUB-NAVIGATION */ // .nav-sub {clear: both; float: left; width: 160px; min-height: 500px; height: auto !important; height: 500px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);} .nav-sub ul {float: left; list-style: none; width: 160px; margin: 0px; padding: 0px; border-bottom: solid 1px rgb(200,200,200);} .nav-sub li {margin: 0px; padding: 0px;} .nav-sub li.title {vertical-align: top; margin: 0px; padding: 0px 5px 4px 20px; color: rgb(100,100,100); text-transform: uppercase; font-weight: bold; font-size: 140%;} .nav-sub li.group a {display: block; min-height: 1.5em; height: auto !important; height: 1.5em; line-height: 1.5em; margin: 1px 0px 1px 0px; padding: 0px 7px 0px 10px; border-top: solid 1px rgb(200,200,200); border-left: solid 10px rgb(201,198,234); color: rgb(0,0,0); font-weight: bold; font-size: 120%;} .nav-sub li a {display: block; min-height: 1.5em; height: auto !important; height: 1.5em; line-height: 1.5em; margin: 1px 0px 1px 0px; padding: 0px 7px 0px 10px; border-left: solid 10px rgb(201,198,234); color: rgb(0,0,0); text-decoration: none; font-size: 120%;} .nav-sub li a:hover, .nav-sub li a.selected {border-left: solid 10px rgb(121,153,196); color: rgb(0,0,0); text-decoration: none;} /*************************************/ /* SECTION 5 - CONTAINER FOR CONTENT AND SIDEBAR / / Reason: To extend navigation border to footer */ /*******************************************************************/ /* TRICK: Nest the right two columns (content and sidebar) and / / give them a minimum height and white background and a left / / border-line. However, nesting floats inside each other with / / with identical widths may activate the spurious IE character / / duplication bug, where the last characters of the last float / / statement are duplicated outside the float. The correction for / / this bug is to reduce the sidebar float so that the sum of / / the content and sidebar floats are 6px less than the container / / holding them. See Section 7.1, where this is done. / / ----------------------------------------------------------------/ / RESTRICTION: For situations where the left navigation menu is / / expanding over the minimum 500px height, it must remain smaller / / than the container holding the rigth two columns. Otherwise / / the borderline will only extend as far down as the container. */ /***********************************/ .container-content-sidebar-front {float: left; width: 609px; min-height: 500px; height: auto !important; height: 500px; margin: 0px; padding: 0px 0px 20px 1px; background-color: rgb(255,255,255);} .container-content-sidebar, .container-content2-sidebar {float: left; width: 609px; min-height: 500px; height: auto !important; height: 500px; margin: 0px; padding: 0px 0px 20px 0px; border-left: solid 1px rgb(200,200,200); background-color: rgb(255,255,255);} // /* SECTION 6A - CONTENT PAGE #1 */ /********************************/ .content {float: left; width: 428px; margin: 0px; padding: 0px 0px 0px 20px; background-color: transparent; color: rgb(0,0,0);} /* Width should be 434px, but IE-duplication bug forces us to reduce with 6px to 428px / .contentbox-container {clear: both; float: left; width: 425px; margin: 0px 0px 15px 0px; padding: 0px;} / Width should be 428px, but IE-duplication bug forces us to reduce with 3px to 425px */ .contentbox-full {width: 425px; margin: 0px; padding: 0px;} .contentbox-half-left {float: left; width: 205px; margin: 0px; padding: 0px;} .contentbox-half-right {float: right; width: 205px; margin: 0px; padding: 0px;} .contentbox-third-left {float: left; width: 134px; margin: 0px 13px 0px 0px; padding: 0px;} .contentbox-third-middle {float: left; width: 134px; margin: 0px; padding: 0px;} .contentbox-third-right {float: right; width: 134px; margin: 0px; padding: 0px;} /********************************/ /* SECTION 6B - CONTENT PAGE #2 */ /********************************/ .content2 {float: left; width: 563px; min-height: 500px; height: auto !important; height: 500px; margin: 0px; padding: 0px 20px 0px 20px; background-color: transparent; color: rgb(0,0,0);} /* Width should be 569px, but IE-duplication bug forces us to reduce with 6px to 563px / .contentbox2-container {clear: both; float: left; width: 560px; margin: 0px 0px 15px 0px; padding: 0px;} / Width should be 563px, but IE-duplication bug forces us to reduce with 3px to 560px */ .contentbox2-full {width: 559px; margin: 0px; padding: 0px;} .contentbox2-half-left {float: left; width: 273px; margin: 0px; padding: 0px;} .contentbox2-half-right {float: right; width: 273px; margin: 0px; padding: 0px;} .contentbox2-third-left {float: left; width: 176px; margin: 0px 17px 0px 0px; padding: 0px;} .contentbox2-third-middle {float: left; width: 176px; margin: 0px; padding: 0px;} .contentbox2-third-right {float: right; width: 176px; margin: 0px; padding: 0px;} /************************************/ /* SECTION 6C - CONTENT PAGE COMMON */ /************************************/ /--------------------------------------------------/ /* Section 6C.4 - Page title, title and content box / /--------------------------------------------------/ .content-pagetitle {width: 100%; margin: 0px 0px 10px 0px; padding: 0px 0px 5px 0px; background-color: transparent; border-bottom: solid 0px rgb(200,200,200); color: rgb(0,0,0); text-transform: uppercase; font-weight: bold; font-size: 140%;} .contentbox-title-noshading-small {margin: 0px 0px -5px 0px; padding: 0px; background-color: transparent; color: rgb(0,0,0); font-weight: bold; font-size: 130%;} .contentbox-title-noshading-medium {margin: 0px 0px -5px 0px; padding: 0px; background-color: transparent; color: rgb(0,0,0); font-weight: bold; font-size: 150%;} .contentbox-title-noshading-large {margin: 0px 0px -5px 0px; padding: 0px; background-color: transparent; color: rgb(0,0,0); font-weight: bold; font-size: 170%;} .contentbox-title-noshading-huge {margin: 0px 0px -5px 0px; padding: 0px; background-color: transparent; color: rgb(0,0,0); font-weight: bold; font-size: 180%;} .contentbox-title-shading-small {margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(222,220,242); color: rgb(0,0,0); font-weight: bold; font-size: 130%;} .contentbox-title-shading-medium {margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(222,220,242); color: rgb(0,0,0); font-weight: bold; font-size: 150%;} .contentbox-title-shading-large {margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(222,220,242); color: rgb(0,0,0); font-weight: bold; font-size: 170%;} .contentbox-title-shading-huge {margin: 0px; padding: 1px 0px 2px 3px; background-color: rgb(222,220,242);color: rgb(0,0,0); font-weight: bold; font-size: 180%;} .contentbox-noshading {margin: 0px; padding: 0.7em 0px 0px 0px; background-color: transparent;} .contentbox-shading {margin: 0px; padding: 7px 10px 5px 10px; background-color: rgb(233,232,244);} /---------------------/ / Section 6C.4 - Text / /---------------------/ / Heading / h1 {clear: left; margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 160%;} h2 {clear: left; margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 150%;} h3 {clear: left; margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 140%;} h4 {clear: left; margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 130%;} h5 {clear: left; margin: 0px; font-weight: bold; font-size: 130%;} h6 {clear: left; margin: 0px; font-weight: bold; font-style: italic; font-size: 130%;} / Paragraph / p {margin: 0px 0px 0.5em 0px; padding: 0px; line-height: 1.2em; font-size: 130%; } p.readmore {margin: -0.2em 0px 0.5em 0px; padding: 0px; line-height: 1.2em; font-size: 110%; } p.quote {margin: 0em 30px 0.6em 30px; line-height: 120%; font-size: 120%;} / Embedded / .embed {float: left; width: 120px; margin: 7px 7px 5px 0px; padding: 5px 5px 5px 5px; background-color: rgb(238,237,249); font-style: italic; font-weight: bold; line-height: 1.2em; font-size: 140%;} .embed-caption {float: left; margin: 5px 0px 0px 0px; padding: 0px; font-style: italic; font-weight: normal; line-height: 1.2em; font-size: 70%;} / Lists / .content ul.noindent, .content2 ul.noindent {margin: 0px 0px 7px 15px; padding: 0px; list-style-type: disc; list-style-position: outside; font-size: 120%;} .content ul.indent, .content2 ul.indent {margin: 0px 0px 7px 15px; padding: 0px 0px 0px 15px; list-style-type: disc; font-size: 120%;} .content ol, .content2 ol {margin: 0px 0px 0px 9px; padding: 0px 0px 0px 25px; list-style-type: decimal; list-style-position: outside; font-size: 120%;} / Link List / .content ul.linklist-noindent, .content2 ul.linklist-noindent {margin: -0.3em 0px 0.5em 0px; padding: 0px; list-style-type: none; line-height: 1.2em; font-size: 120%; } .content ul.linklist-indent, .content2 ul.linklist-indent {margin: -0.3em 0px 0.5em 0px; padding: 0px 0px 0px 10px; list-style-type: none; line-height: 1.2em; font-size: 120%; } /-----------------------/ / Section 6C.5 - Tables / /-----------------------/ .table {clear: left; margin: 0.5em 0px 0.2em 30px; border: solid 1px rgb(150,150,150); empty-cells: show; border-collapse: collapse; background-color: rgb(233,232,244);} .table tr {margin: 0px; padding: 0px;} .table td {padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); text-align: left; font-size: 120%;} .table th {margin: 0px; padding: 2px 7px 2px 7px; border: solid 1px rgb(150,150,150); empty-cells: show; text-align: left; font-size: 120%; } p.table-caption {margin: 0.5em 0px 1.0em 30px; padding: 0px; clear: both; text-align: left; font-size: 120%;} /-----------------------/ / Section 6C.6 - Images / /-----------------------*/ .img-left-noborder {float: left; margin: 2px 7px 3px 0px;} .img-right-noborder {float: right; margin: 2px 0px 3px 7px;} .img-left-border {float: left; margin: 4px 7px 3px 0px; border: solid 1px rgb(150,150,150);} .img-right-border {float: right; margin: 2px 0px 3px 7px; border: solid 1px rgb(150,150,150);} /***********************/ /* SECTION 7 - SIDEBAR */ /***********************/ /-----------------------------------------------/ /* Section 7.1 - Size / /-----------------------------------------------/ / Because of IE float-rendering bug, the width / / must be reduced by 6px, otherwise it will / / duplicate characters after the last float / / Reason: IE may not alwys allow nested floats / / have identical widths, but inside float must / / be smaller than outside float. This IE-bug is / / somewhat unpredictable. See Section 5 header / / for more details on this topic. / /-----------------------------------------------/ .sidebar {float: right; width: 155px; margin: 0px ; padding: 3.1em 0px 0px 0px; background-color: rgb(255,255,255); text-align: left; color: rgb(0,0,0);} / Actual width should be: 175px, but because of IE-bug we reduce with 6px so that container has some free space) */ .sidebarbox-noborder {width: 140px; margin: 0px 0px 1.0em 9px; padding: 0px;} .sidebarbox-border {width: 130px; margin: 0px 0px 1.0em 9px; padding: 4px 4px 4px 4px; border: solid 1px rgb(200,200,200);} .sidebarbox-title-noshading {display: block; margin: 0px 0px 2px 0px; padding: 0px; background-color: transparent; font-weight: bold; font-size: 110%;} .sidebarbox-title-shading {display: block; margin: 0px 0px 2px 0px; padding: 2px 5px 3px 5px; background-color: rgb(225,225,225); font-weight: bold; font-size: 110%;} .sidebarbox-noborder p {margin: 0px 5px 0.4em 5px; padding: 0px; background-color: transparent; line-height: 1.2em; font-size: 110%;} .sidebarbox-border p {margin: 0px 0px 0.4em 0px; padding: 0px; background-color: transparent; line-height: 1.2em; font-size: 110%;} /**********************/ /* SECTION 8 - FOOTER */ // .footer {clear: both; width: 770px; height: 3.0em; margin: 0px; padding: 0.5em 0px 0.5em 0px; border-top: solid 1px rgb(125,125,125); background-color: rgb(159,182,213); color: rgb(255,255,255);} .footer p {margin: 0px; padding: 0px; text-align: center; line-height: 1.3em; font-size: 110%;} /*****************************/ /* SECTION 9 - HYPERLINKS FOR NON-NAVIGATION TEXTS */ /*******************/ .content a, .content2 a, .sidebar a {color: rgb(0,0,0); text-decoration: underline;} .content a:hover, .content2 a:hover, .sidebar a:hover {color: rgb(0,0,0); text-decoration: none;} .content a:visited, .content2 a:visited, sidebar a:visited {color: rgb(0,0,0);} .footer a {color: rgb(255,255,255); text-decoration: underline;} .footer a:hover {color: rgb(0,0,0); text-decoration: none;} // /* SECTION 10 - GENERIC CLASSES */ /********************************/ /------------------------------------------/ /* Section 10.1 - Global default font sizes / /------------------------------------------/ .nav-global-font {font-size: 1.0em;} .nav-main-font {font-size: 1.0em;} .nav-sub-font {font-size: 1.0em;} .content-font {font-size: 1.0em;} .sidebar-font {font-size: 1.0em;} .footer-font {font-size: 1.0em;} /-------------------------------------/ / Section 10.2 - Title decoration box / /-------------------------------------/ .box-on {float: left; min-width: 0.5em; margin-right: 0.2em; padding-left: 0.3em;} .box-off {display: none;} /--------------------------------------/ / Section 10.3 - Horizontal alignments / /--------------------------------------/ .align-left {text-align: left;} .align-right {text-align: right;} .align-center {text-align: center;} /---------------------------/ / Section 10.4 Text colors / /---------------------------/ .txt-white {color: rgb(255,255,255);} .txt-black {color: rgb(0,0,0);} .txt-grey01 {color: rgb(242,242,242);} .txt-grey02 {color: rgb(230,230,230);} .txt-grey03 {color: rgb(217,217,217);} .txt-grey04 {color: rgb(204,204,204);} .txt-grey05 {color: rgb(191,191,191);} .txt-grey06 {color: rgb(178,178,178);} .txt-grey07 {color: rgb(153,153,153);} .txt-grey08 {color: rgb(127,127,127);} .txt-grey09 {color: rgb(89,89,89);} .txt-grey10 {color: rgb(51,51,51);} .txt-yellow01 {color: rgb(254,252,232);} .txt-yellow02 {color: rgb(253,249,201);} .txt-yellow03 {color: rgb(253,246,185);} .txt-yellow04 {color: rgb(252,243,162);} .txt-yellow05 {color: rgb(251,239,139);} .txt-yellow06 {color: rgb(250,236,116);} .txt-yellow07 {color: rgb(249,233,93);} .txt-yellow08 {color: rgb(249,230,69);} .txt-yellow09 {color: rgb(248,227,46);} .txt-yellow10 {color: rgb(247,224,23);} .txt-blue01 {color: rgb(238,237,249);} .txt-blue02 {color: rgb(222,220,242);} .txt-blue03 {color: rgb(205,202,236);} .txt-blue04 {color: rgb(189,185,229);} .txt-blue05 {color: rgb(172,167,223);} .txt-blue06 {color: rgb(155,149,217);} .txt-blue07 {color: rgb(139,132,210);} .txt-blue08 {color: rgb(122,114,204);} .txt-blue09 {color: rgb(106,97,197);} .txt-blue10 {color: rgb(89,79,191);} .txt-green01 {color: rgb(237,246,229);} .txt-green02 {color: rgb(220,238,204);} .txt-green03 {color: rgb(202,229,178);} .txt-green04 {color: rgb(185,220,153);} .txt-green05 {color: rgb(167,211,127);} .txt-green06 {color: rgb(149,203,102);} .txt-green07 {color: rgb(132,194,76);} .txt-green08 {color: rgb(114,185,51);} .txt-green09 {color: rgb(97,177,25);} .txt-green10 {color: rgb(79,168,0);} .txt-red01 {color: rgb(252,235,233);} .txt-red02 {color: rgb(248,216,211);} .txt-red03 {color: rgb(245,196,188);} .txt-red04 {color: rgb(242,177,166);} .txt-red05 {color: rgb(238,157,144);} .txt-red06 {color: rgb(235,137,122);} .txt-red07 {color: rgb(232,118,100);} .txt-red08 {color: rgb(229,98,77);} .txt-red09 {color: rgb(225,79,55);} .txt-red10 {color: rgb(222,59,33);} /----------------------------------/ / Section 10.5 - Background colors / /----------------------------------/ .bg-white {background-color: rgb(255,255,255);} .bg-black {background-color: rgb(0,0,0);} .bg-grey01 {background-color: rgb(242,242,242);} .bg-grey02 {background-color: rgb(230,230,230);} .bg-grey03 {background-color: rgb(217,217,217);} .bg-grey04 {background-color: rgb(204,204,204);} .bg-grey05 {background-color: rgb(191,191,191);} .bg-grey06 {background-color: rgb(178,178,178);} .bg-grey07 {background-color: rgb(153,153,153);} .bg-grey08 {background-color: rgb(127,127,127);} .bg-grey09 {background-color: rgb(89,89,89);} .bg-grey10 {background-color: rgb(51,51,51);} .bg-yellow01 {background-color: rgb(254,252,232);} .bg-yellow02 {background-color: rgb(253,249,201);} .bg-yellow03 {background-color: rgb(253,246,185);} .bg-yellow04 {background-color: rgb(252,243,162);} .bg-yellow05 {background-color: rgb(251,239,139);} .bg-yellow06 {background-color: rgb(250,236,116);} .bg-yellow07 {background-color: rgb(249,233,93);} .bg-yellow08 {background-color: rgb(249,230,69);} .bg-yellow09 {background-color: rgb(248,227,46);} .bg-yellow10 {background-color: rgb(247,224,23);} .bg-blue01 {background-color: rgb(238,237,249);} .bg-blue02 {background-color: rgb(222,220,242);} .bg-blue03 {background-color: rgb(205,202,236);} .bg-blue04 {background-color: rgb(189,185,229);} .bg-blue05 {background-color: rgb(172,167,223);} .bg-blue06 {background-color: rgb(155,149,217);} .bg-blue07 {background-color: rgb(139,132,210);} .bg-blue08 {background-color: rgb(122,114,204);} .bg-blue09 {background-color: rgb(106,97,197);} .bg-blue10 {background-color: rgb(89,79,191);} .bg-green01 {background-color: rgb(237,246,229);} .bg-green02 {background-color: rgb(220,238,204);} .bg-green03 {background-color: rgb(202,229,178);} .bg-green04 {background-color: rgb(185,220,153);} .bg-green05 {background-color: rgb(167,211,127);} .bg-green06 {background-color: rgb(149,203,102);} .bg-green07 {background-color: rgb(132,194,76);} .bg-green08 {background-color: rgb(114,185,51);} .bg-green09 {background-color: rgb(97,177,25);} .bg-green10 {background-color: rgb(79,168,0);} .bg-red01 {background-color: rgb(252,235,233);} .bg-red02 {background-color: rgb(248,216,211);} .bg-red03 {background-color: rgb(245,196,188);} .bg-red04 {background-color: rgb(242,177,166);} .bg-red05 {background-color: rgb(238,157,144);} .bg-red06 {background-color: rgb(235,137,122);} .bg-red07 {background-color: rgb(232,118,100);} .bg-red08 {background-color: rgb(229,98,77);} .bg-red09 {background-color: rgb(225,79,55);} .bg-red10 {background-color: rgb(222,59,33);} /------------------------------------/ / Section 10.6 Bottom border colors / /------------------------------------*/ .line-white {border-bottom: solid 1px rgb(255,255,255); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-black {border-bottom: solid 1px rgb(0,0,0); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey01 {border-bottom: solid 1px rgb(242,242,242); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey02 {border-bottom: solid 1px rgb(230,230,230); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey03 {border-bottom: solid 1px rgb(217,217,217); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey04 {border-bottom: solid 1px rgb(204,204,204); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey05 {border-bottom: solid 1px rgb(191,191,191); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey06 {border-bottom: solid 1px rgb(178,178,178); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey07 {border-bottom: solid 1px rgb(153,153,153); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey08 {border-bottom: solid 1px rgb(127,127,127); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey09 {border-bottom: solid 1px rgb(89,89,89); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-grey10 {border-bottom: solid 1px rgb(51,51,51); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow01 {border-bottom: solid 1px rgb(254,252,232); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow02 {border-bottom: solid 1px rgb(253,249,201); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow03 {border-bottom: solid 1px rgb(253,246,185); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow04 {border-bottom: solid 1px rgb(252,243,162); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow05 {border-bottom: solid 1px rgb(251,239,139); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow06 {border-bottom: solid 1px rgb(250,236,116); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow07 {border-bottom: solid 1px rgb(249,233,93); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow08 {border-bottom: solid 1px rgb(249,230,69); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow09 {border-bottom: solid 1px rgb(248,227,46); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-yellow10 {border-bottom: solid 1px rgb(247,224,23); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue01 {border-bottom: solid 1px rgb(238,237,249); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue02 {border-bottom: solid 1px rgb(222,220,242); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue03 {border-bottom: solid 1px rgb(205,202,236); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue04 {border-bottom: solid 1px rgb(189,185,229); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue05 {border-bottom: solid 1px rgb(172,167,223); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue06 {border-bottom: solid 1px rgb(155,149,217); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue07 {border-bottom: solid 1px rgb(139,132,210); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue08 {border-bottom: solid 1px rgb(122,114,204); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue09 {border-bottom: solid 1px rgb(106,97,197); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-blue10 {border-bottom: solid 1px rgb(89,79,191); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green01 {border-bottom: solid 1px rgb(237,246,229); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green02 {border-bottom: solid 1px rgb(220,238,204); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green03 {border-bottom: solid 1px rgb(202,229,178); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green04 {border-bottom: solid 1px rgb(185,220,153); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green05 {border-bottom: solid 1px rgb(167,211,127); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green06 {border-bottom: solid 1px rgb(149,203,102); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green07 {border-bottom: solid 1px rgb(132,194,76); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green08 {border-bottom: solid 1px rgb(114,185,51); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green09 {border-bottom: solid 1px rgb(97,177,25); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-green10 {border-bottom: solid 1px rgb(79,168,0); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red01 {border-bottom: solid 1px rgb(252,235,233); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red02 {border-bottom: solid 1px rgb(248,216,211); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red03 {border-bottom: solid 1px rgb(245,196,188); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red04 {border-bottom: solid 1px rgb(242,177,166); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red05 {border-bottom: solid 1px rgb(238,157,144); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red06 {border-bottom: solid 1px rgb(235,137,122); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red07 {border-bottom: solid 1px rgb(232,118,100); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red08 {border-bottom: solid 1px rgb(229,98,77); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red09 {border-bottom: solid 1px rgb(225,79,55); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} .line-red10 {border-bottom: solid 1px rgb(222,59,33); padding: 0px 0px 2px 0px; margin: 0px 0px 1px 0px;} /******************************/ /* SECTION 11 - MISCELLANEOUS */ /******************************/ .showcode { font-family: monospace; font-weight: bold; font-size: 13px; color: rgb(255,0,0);} .clear {clear: both;} .hide {display: none;} br {clear: none;}

Tasarımdan örnek görünüm

TASARIMIN ÜZERİNE
<style type="text/css">  </style> <style type="text/css">  </style> <html > <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WPcube themes » Blog Archive » Free WordPress themes</title> <meta name="generator" content="WordPress 2.5" />  <link rel="stylesheet" href="http://wpcube.com/demo/wp-content/themes/BlueToast/style.css" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="WPcube themes RSS Feed" href="http://wpcube.com/demo/?feed=rss2" /> <link rel="pingback" href="http://wpcube.com/demo/xmlrpc.php" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://wpcube.com/demo/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://wpcube.com/demo/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 2.5" /> </head> <body> <div id="page"> <div id="nav"><ul><li class="page_item"><a href="http://wpcube.com/demo/">Home</a></li><li class="page_item page-item-2"><a href="http://wpcube.com/demo/?page_id=2" title="About">About</a></li> <li class="page_item page-item-3"><a href="http://wpcube.com/demo/?page_id=3" title="Links">Links</a></li> </ul></div><br clear="all" /> <div id="header"><a href="http://wpcube.com/demo/"><img align="left" class="logo" src="http://wpcube.com/demo/wp-content/themes/BlueToast/images/blank.gif" alt="WPcube themes" border="0" width="175" height="40" /></a></div> <div class="categs"><h3>Categories</h3><ul> <li class="cat-item cat-item-1"><a href="http://wpcube.com/demo/?cat=1" title="View all posts filed under General">General</a> (2) </li> <li class="cat-item cat-item-4"><a href="http://wpcube.com/demo/?cat=4" title="View all posts filed under Internet">Internet</a> (1) </li> <li class="cat-item cat-item-3"><a href="http://wpcube.com/demo/?cat=3" title="View all posts filed under Technology">Technology</a> (1) </li> </ul></div> <table cellpadding="0" cellspacing="0" border="0" bgcolor="#F2F1F2" > <tr> <td id="sidebar" valign="top"><div class="sidebar"> <div class="widget"><h2>Themes demo select:</h2> <ul id="Cats"> <ul id="themeswitcher"> <li>Blue Toast</li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Browny">Browny</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Business">Business</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Greenblog">Greenblog</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Mobile+City+Theme">Mobile City Theme</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Music+Blog">Music Blog</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Paper+Theme">Paper Theme</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=TopNotch++Theme">TopNotch Theme</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=Valentine">Valentine</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=WordPress+Classic">WordPress Classic</a></li> <li><a href="http://wpcube.com/demo/index.php?wptheme=WordPress+Default">WordPress Default</a></li> </ul></ul> </div> <div class="widget"> <h2>Recent Posts</h2> <ul> <li><a href='http://wpcube.com/demo/?p=7' title='Valentine wordpress theme'>Valentine wordpress theme</a></li> <li><a href='http://wpcube.com/demo/?p=6' title='Free WordPress themes'>Free WordPress themes</a></li> <li><a href='http://wpcube.com/demo/?p=4' title='WP Cube.com'>WP Cube.com</a></li> <li><a href='http://wpcube.com/demo/?p=1' title='Hello WordPress Lovers'>Hello WordPress Lovers</a></li> </ul> </div> <div class="widget"> <h2>Archives</h2> <ul> <li><a href='http://wpcube.com/demo/?m=200801' title='January 2008'>January 2008</a></li> <li><a href='http://wpcube.com/demo/?m=200712' title='December 2007'>December 2007</a></li> </ul> </div> <div class="widget"> <h2>Links</h2> <ul><li><a href="http://www.minerskinz.com">Minerskinz.com</a></li> <li><a href="http://www.vbcube.com">vBulletin Gallery</a></li> <li><a href="http://www.wpcube.com">Wordpress Gallery</a></li> </ul> </div> </div></td> <td width="22"></td> <td id="content" valign="top">
TASARIMIN ALTINA
</div> </div> </td> </tr> </table> <div id="footer"> <div class="left"><a href="#"><img src="http://wpcube.com/demo/wp-content/themes/BlueToast/images/wp_cube.gif" alt="" border="0" /></a></div> <p>Powered by WordPress</p> </div> </div> </body> </html>
CSS KODUNA
#kommentartext { background-image:url(https://img.webme.com/pic/d/darkvadi/yorum.jpg); } 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;} /* Theme Name: Blue Toast Theme URI: Blue Toast Description: Theme by WPcube.com (admin( at )wpcube.com) Version: 1.0 Author: Miner / / main css / body { margin:0; padding:0; background: #2F6F80 url(https://img.webme.com/pic/f/funkolej/body_bg.gif) repeat-x top left;; font: 11px Arial, Helvetica, sans-serif; line-height:1.5; } #page { width: 961px; margin: 10px auto; text-align:center; padding: 0; } #nav { background: none no-repeat top right; float:right; width: 269px; height: 26px; } #nav ul { list-style: none; margin: 0; padding: 0; } #nav ul ul { display: none; } #nav ul li { float: left; padding: 9px 15px 0px 15px; } #nav ul li a { color: #fff; text-decoration: none; } #header { margin: 0; padding: 0; background: url(https://img.webme.com/pic/f/funkolej/header.gif) no-repeat top left; height: 165px; } .logo { margin-top: 45px; margin-left: 125px; } .categs { background: url(https://img.webme.com/pic/f/funkolej/categs_bg.gif) no-repeat bottom left; margin: 0; padding: 8px 30px 10px 30px; height: 15px; color: #fff; } .categs a { color: #fff; } .categs h3 { color:#002731; text-transform: uppercase; font: bold 13px Arial, Helvetica, sans-serif; margin: 0; padding: 0; } .categs ul { list-style: none; margin: 0; padding:0; } .categs ul li { float: left; padding: 0 15px; } .categs ul li a { text-decoration: none; } #content ul { margin: 10px; } .post { text-align:left; padding: 15px 35px; font: 9pt Arial, Helvetica, sans-serif; line-height: 21px; color: #323232; background: url(https://img.webme.com/pic/f/funkolej/post_bg.gif) no-repeat bottom right; } .comms { text-align:left; padding: 0; margin-bottom: 20px; color: #323232; } .comments-header { background: url(https://img.webme.com/pic/f/funkolej/comments-header.gif) no-repeat top right; float: right; color: #fff; font-size: 11px; padding: 3px; width: 195px; padding-left: 15px; } .conin { border-bottom: 1px dotted #323232; padding: 10px 0; margin-right: 30px; } .storydate { float: right; width: 195px; background: url(https://img.webme.com/pic/f/funkolej/storydate_bg.jpg) no-repeat bottom right; text-align: right; padding-right: 15px; padding-top: 2px; color: #fff; } .storydate a { background: url(images/cat.gif) no-repeat bottom left; padding-left: 15px; color: #fff; text-decoration: none; } .month { font-size: 11px; text-transform: uppercase; color: #000; margin: 0; line-height: 12px; padding-top: 8px; padding-left: 30px; text-align: left; } .date { font-size: 10px; color: #F6273E; margin: 0; text-align: left; padding-left: 50px; line-height: 12px; } .post li { margin-left: 25px; } .post img { margin: 0 5px; } .meta { float:right; height: 15px; } .meta a { color: #1F7582; } .comments { background: url(images/comments.gif) no-repeat center left; padding: 0 15px; float: left; } .more { background: url(images/more.gif) no-repeat center left; padding: 0 15px; float: left; } #sidebar { width: 205px; padding: 0 60px 0 25px; margin: 0; text-align:left; color: #CCCCCC; font-size: 12px; } .sidebar { margin-top: 25px; } #sidebar .widget { background: #323433; margin-bottom: 15px; padding: 0; background: url(https://img.webme.com/pic/f/funkolej/widget_bg.gif) no-repeat bottom left; } #sidebar h2 { font: bold 12px Arial, Helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; margin: 0; padding: 7px 0 15px 0px; text-align: center; color: #ffffff; background: url(https://img.webme.com/pic/f/funkolej/h2.gif) no-repeat top left; } #sidebar .widget ul li { list-style:none; padding: 5px 0 5px 10px ; margin-left: 15px; color: #497DAD; } #sidebar .widget ul li a:hover { color: #497DAD; text-decoration: underline; } #sidebar .widget ul li a { color: #497DAD; text-decoration: none; } #sidebar .widget ul { padding: 0 0 10px 0; margin: 0 auto; } #content { width: 670px; padding-top: 25px; } .alt { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } small { font-family: Arial, Helvetica, Sans-Serif; font-size: 0.9em; line-height: 1.5em; } h1 { margin: 5px 0 0px 0; color: #144675; font: bold 14px Arial, Helvetica, sans-serif; text-align: left; width: 359px; float:left; } h1 a:link, h1 a:visited { text-decoration:none; margin: 15px 0 0px 0; padding: 10px 0; text-align: left; width: 359px; float:left; color: #144675; background: url(https://img.webme.com/pic/f/funkolej/h1.gif) no-repeat bottom left; } h1 a:hover { text-decoration:underline; } h3 { font-size: 1.3em; } .commentlist li, #commentform input, #commentform textarea { font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif; } .commentlist li { font-weight: bold; } .commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; font-size: 1.1em; } .commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; } #commentform p { font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; } .commentmetadata { font-weight: normal; } small, .nocomments, .postmetadata, blockquote, strike { color: #777; } code { font: 1.1em 'Courier New', Courier, Fixed; } acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; } #wp-calendar #prev a, #wp-calendar #next a { font-size: 9pt; } #wp-calendar a { text-decoration: none; } #wp-calendar caption { font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif; text-align: center; } #wp-calendar th { font-style: normal; text-transform: capitalize; } / Begin Headers / h3 { padding: 0; margin: 0px; float: left; } img.centered { display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } / End Images / / Begin Form Elements / #searchform { margin: 10px auto; padding: 5px 3px; text-align: center; } .entry form { / This is mainly for password protected posts, makes them look better. / text-align:center; } select { width: 130px; } #commentform input { width: 170px; padding: 2px; margin: 5px 5px 1px 0; border: 1px solid #2F6F80; } #commentform textarea { width: 95%; padding: 2px; border: 1px solid #2F6F80; } #commentform #submit { margin: 0; border: none; width: 133px; height: 27px; } / End Form Elements / / Begin Comments/ .alt { margin: 0; padding: 10px; } .commentlist { padding: 0; text-align: justify; } .commentlist li { margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none; } .commentlist p { margin: 10px 5px 10px 0; } #commentform p { margin: 5px 0; } .nocomments { text-align: center; margin: 0; padding: 0; } .commentmetadata { margin: 0; display: block; } / End Comments / / Begin Calendar / #wp-calendar { empty-cells: show; margin: 10px auto 0; width: 155px; } #wp-calendar #next a { padding-right: 10px; text-align: right; } #wp-calendar #prev a { padding-left: 10px; text-align: left; } #wp-calendar a { display: block; } #wp-calendar caption { text-align: center; width: 100%; } #wp-calendar td { padding: 3px 0; text-align: center; } #wp-calendar td.pad:hover { } / End Calendar / / Begin Various Tags & Classes / acronym, abbr, span.caps { cursor: help; } acronym, abbr { border-bottom: 1px dashed #999; } blockquote { margin: 15px 30px 0 10px; padding-left: 20px; border-left: 5px solid #ddd; } blockquote cite { margin: 5px 0 0; display: block; } .center { text-align: center; } hr { display: none; } a img { border: none; } a { color: #1F7582; } .navigation { display: block; text-align: center; margin-top: 0px; margin-bottom: 0px; } #footer { text-align: center; color: #fff; background: url(https://img.webme.com/pic/f/funkolej/footer.gif) no-repeat top left; padding-top: 25px; height: 51px; font-size: 13px; } #footer a { color: #ffffff; text-decoration:none; } #footer a:hover { text-decoration: underline; } #footer .left { float: left; text-align: left; padding-left: 30px; padding-top: 10px; }

TASARIMIN ÜZERİNE
 .... .... .... .... ... <div id="page"> <style type="text/css">  </style> <style>  </style> <div id="wrapper"> <div id="top_bar"> <div id="top_bar_left_curve"></div> <div id="top_bar_middle"></div> <div id="top_bar_right_curve"></div> </div> <div style="clear: both;"></div> <div id="content_wrapper">  <div id="left_side"> <h2>:::...ANA MENÜ...:::</h2> <div class="menu"> <ul> <li><a href="SAYFA URL"><img src="http://img528.imageshack.us/img528/4310/homeve0.png/home.png" alt="ANA SAYFA" /> ANA SAYFA</a></li> <li><a href="SAYFA URL"><img src="http://img510.imageshack.us/img510/8059/contactxu7.png/contact.png" alt="SAYFA ADI" /> SAYFA ADI</a></li> <li><a href="SAYFA URL"><img src="http://img510.imageshack.us/img510/4119/servicesiq5.png/services.png" alt="SAYFA ADI" /> SAYFA ADI</a></li> <li><a href="SAYFA URL"><img src="http://img510.imageshack.us/img510/2730/aboutusxp8.gif/about_us.gif" alt="SAYFA ADI" /> SAYFA ADI</a></li> <li><a href="SAYFA URL"><img src="http://img525.imageshack.us/img525/1329/loginks0.png/login.png" alt="SAYFA ADI" /> SAYFA ADI</a></li> </ul> </div> <div style="clear: both;"></div> <h2>BAŞLIK</h2> <p> BURAYA YAZI </p> </div>   <div id="main_content">

TASARIMIN ALTINA

</div> .... .... ....   <div id="right_side"> <h2>:::...EKSTRA MENÜ...:::</h2> <div class="menu"> <ul> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> </ul> </div> <div style="clear: both;"></div> <h2>BAŞLIK</h2> <br /> BURAYA YAZI </div>  </div> <div style="clear: both;"></div> <div id="bottom_bar"> <div id="bottom_bar_left_curve"></div> <div id="bottom_bar_right_curve"></div> </div> </div> </center> <div style="clear: both;"></div> <br /> <div id="footer"> Design by_<a target="_blank" href="http://www.tasarimci-amca.tr.gg/">TASARİMCİ-AMCA</a> </div> <div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body> 

CSS KODUNA

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 { font-family: Tahoma, Verdana; font-size: 10pt; } img { border: 0px; } #wrapper { width: 95%; } / start the top bar with rounded edges / #top_bar { width: 100%; background: #2D006B; height: 20px; } #top_bar_right_curve { float: right; width: 20px; height: 20px; background: url(http://img259.imageshack.us/img259/1913/nehv8.gif/ne.gif); } #top_bar_left_curve { float: left; width: 20px; height: 20px; background: url(http://img75.imageshack.us/img75/8229/nwhr9.gif/nw.gif); } / end the top bar with rounded edges / / start the bottom bar with rounded edges / #bottom_bar { width: 100%; height: 20px; background: #2D006B; } #bottom_bar_right_curve { float: right; width: 20px; height: 20px; background: url(http://img110.imageshack.us/img110/7716/senh5.gif/se.gif); } #bottom_bar_left_curve { float: left; width: 20px; height: 20px; background: url(http://img75.imageshack.us/img75/6054/swrd2.gif/sw.gif); } / end the bottom bar with rounded edges / #left_side { float: left; width: 20%; background: #DABFFF; min-height: 650px; } #right_side { float: right; width: 20%; background: #DABFFF; min-height: 650px; } #main_content { float: left; width: 60%; background: #ffffff; } #left_side h2, #right_side h2 { background: #B580FF; color: #2D006B; font-size: 13pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } .menu { width: 100%; float:left; } .menu ul { font-family: Arial, Helvetica, sans-serif; list-style-type:none; margin:0; padding:0; } .menu li { display: inline; / for IE5 and IE6 / } .menu a { color: #483000; text-decoration: none; font-size: 14px; display: block; padding: 6px; padding-left: 15px; width: 160px; / background-color: #B580FF;/ border-bottom: 1px solid #fff; text-align: left; } .menu a:link, .menu a:visited,.menu a:active { color: #483000; } .menu a:link, #menu a:visited { color: #483000; text-decoration: none; } .menu a:hover { background-color: #B580FF; color: #fff; } .menu li a#current { border-bottom: 3px solid #C0C018; background: #487890 ; color: #fff; } / Menu 2 ends here / #main_content h1 { color: #2D006B; font-size: 15pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } #main_content h2 { color: #2D006B; font-size: 13pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } #main_content h2 { color: #2D006B; font-size: 11pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } a:link, a:active,a:visited { color: #2D006B; text-decoration: none; } a:hover { color: #DABFFF; } #footer { width: 100%; font-size: 8pt; text-align: center; }

TASARIMIN ÜZERİNE
 .... .... .... .... ... <div id="page"> <style type="text/css">  </style> <style>  </style> <div id="wrapper"> <div id="top_bar"> <div id="top_bar_left_curve"></div> <div id="top_bar_middle"></div> <div id="top_bar_right_curve"></div> </div> <div style="clear: both;"></div> <div id="content_wrapper">  <div id="left_side"> <h2>:::...ANA MENÜ...:::</h2> <div class="menu"> <ul> <li><a href="SAYFA URL"><img src="http://img239.imageshack.us/img239/4811/hometp5.png/home.png" alt="ANA SAYFA" /> ANA SAYFA</a></li> <li><a href="SAYFA URL"><img src="http://img510.imageshack.us/img510/8059/contactxu7.png/contact.png" alt="SAYFA ADI" /> SAYFA ADI</a></li> <li><a href="SAYFA URL"><img src="http://img249.imageshack.us/img249/2562/servicesnw0.png/services.png" alt="SAYFA ADI" /> SAYFA ADI</a></li> <li><a href="SAYFA URL"><img src="http://img249.imageshack.us/img249/2873/aboutusri8.gif/about_us.gif" alt="SAYFA ADI" /> SAYFA ADI</a></li> <li><a href="SAYFA URL"><img src="http://img137.imageshack.us/img137/1944/loginte9.png/login.png" alt="SAYFA ADI" /> SAYFA ADI</a></li> </ul> </div> <div style="clear: both;"></div> <h2>BAŞLIK</h2> <p> BURAYA YAZI </p> </div>   <div id="main_content" 
TASARIMIN ALTINA
</div> .... .... ....  <div id="right_side"> <h2>:::...EKSTRA MENÜ...:::</h2> <div class="menu"> <ul> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> <li><a href="SAYFA URL">SAYFA ADI</a></li> </ul> </div> <div style="clear: both;"></div> <h2>BAŞLIK</h2> <br /> BURAYA YAZI </div>  </div> <div style="clear: both;"></div> <div id="bottom_bar"> <div id="bottom_bar_left_curve"></div> <div id="bottom_bar_right_curve"></div> </div> </div> </center> <div style="clear: both;"></div> <br /> <div id="footer"> Design by <a target="_blank" href="http://www.tasarimci-amca.tr.gg/">TASARİMCİ-AMCA</a> </div> <div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body> 
CSS KODUNA
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 { font-family: Tahoma, Verdana; font-size: 10pt; } img { border: 0px; } #wrapper { width: 95%; } / start the top bar with rounded edges / #top_bar { width: 100%; background: #B34700; height: 20px; } #top_bar_right_curve { float: right; width: 20px; height: 20px; background: url(http://img353.imageshack.us/img353/7008/neyi9.gif/ne.gif); } #top_bar_left_curve { float: left; width: 20px; height: 20px; background: url(http://img353.imageshack.us/img353/7535/nwfu3.gif/nw.gif); } / end the top bar with rounded edges / / start the bottom bar with rounded edges / #bottom_bar { width: 100%; height: 20px; background: #B34700; } #bottom_bar_right_curve { float: right; width: 20px; height: 20px; background: url(http://img232.imageshack.us/img232/549/seso0.gif/se.gif); } #bottom_bar_left_curve { float: left; width: 20px; height: 20px; background: url(http://img291.imageshack.us/img291/7844/swli5.gif/sw.gif); } / end the bottom bar with rounded edges / #left_side { float: left; width: 20%; background: #FFD9BF; min-height: 650px; } #right_side { float: right; width: 20%; background: #FFD9BF; min-height: 650px; } #main_content { float: left; width: 60%; background: #ffffff; } #left_side h2, #right_side h2 { background: #FFB380; color: #B34700; font-size: 13pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } .menu { width: 100%; float:left; } .menu ul { font-family: Arial, Helvetica, sans-serif; list-style-type:none; margin:0; padding:0; } .menu li { display: inline; / for IE5 and IE6 / } .menu a { color: #483000; text-decoration: none; font-size: 14px; display: block; padding: 6px; padding-left: 15px; width: 160px; / background-color: #FFB380;/ border-bottom: 1px solid #fff; text-align: left; } .menu a:link, .menu a:visited,.menu a:active { color: #483000; } .menu a:link, #menu a:visited { color: #483000; text-decoration: none; } .menu a:hover { background-color: #FFB380; color: #fff; } .menu li a#current { border-bottom: 3px solid #C0C018; background: #487890 ; color: #fff; } / Menu 2 ends here / #main_content h1 { color: #B34700; font-size: 15pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } #main_content h2 { color: #B34700; font-size: 13pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } #main_content h2 { color: #B34700; font-size: 11pt; text-transform: uppercase; margin-top: 0px; margin-bottom: 0px; } a:link, a:active,a:visited { color: #B34700; text-decoration: none; } a:hover { color: #FFD9BF; } #footer { width: 100%; font-size: 8pt; text-align: center; }

Tasarımın Üzerindeki Yazı
 <div id="wrapper"> <div id="logo"> <h1><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></h1> <h2>Design by CssTaSaRiMi</h2> </div> <div id="header"> <div id="menu"> <ul> <li class="current_page_item"><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">iletişim</a></li> <li><a href="#" _fcksavedurl="#">toplist</a></li> <li><a href="#" _fcksavedurl="#">Hakkımda</a></li> <li class="last"><a href="#" _fcksavedurl="#">Z.Defteri</a></li> </ul> </div> </div>   <div id="page">  </body></html>
Tasarımın Altındaki Yazı
  <div id="sidebar"> <ul> <li id="search"> <h2>Arama</h2> <form method="get" action=""> <fieldset> <input type="text" id="s" name="s" value="" /> <input type="submit" id="x" value="Search" /> </fieldset> </form> </li> <li> <h2>Menü1</h2> <ul> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> </ul> </li> <li> <h2>Menü2</h2> <ul> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> <li><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></li> </ul> </li> </ul> </div>  <div style="clear: both;"> </div> </div>   <div id="footer"> <p id="legal">2008 Bütün hakları Saklıdır<a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a> designed by <a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a>.</p> </div> </div>  </body></html>
Css Koduna
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;} / Design by CssTaSaRiMi http://www.csstasarimi.tr.gg Released for free under a Creative Commons Attribution 2.5 License / body { margin-top: 50px; padding: 0; background: #B2EBFF url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img01.gif) repeat-x left bottom; font-size: 13px; font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif; text-align: justify; color: #FFFFFF; } h1, h2, h3 { margin: 0; text-transform: lowercase; font-weight: normal; color: #FFFFFF; } h1 { letter-spacing: -1px; font-size: 32px; } h2 { font-size: 23px; } p, ul, ol { margin: 0 0 2em 0; text-align: justify; line-height: 26px; } a:link { color: #FFFFFF; } a:hover, a:active { text-decoration: none; color: #FFFFFF; } a:visited { color: #FFFFFF; } img { border: none; } img.left { float: left; margin-right: 15px; } img.right { float: right; margin-left: 15px; } / Form / form { margin: 0; padding: 0; } fieldset { margin: 0; padding: 0; border: none; } legend { display: none; } input, textarea, select { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } #wrapper { margin: 0 auto; padding: 0; } / Header / #header { width: 713px; margin: 0 auto; height: 130px; } / Menu */ #menu { float: left; width: 713px; height: 70px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img03.gif) no-repeat left top; } #menu ul { margin: 0; padding: 0px 0 0 10px; list-style: none; line-height: normal; } #menu li { display: block; float: left; } #menu a { display: block; float: left; margin-top: 5px; margin-right: 3px; padding: 20px 17px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img05.gif) no-repeat left 52%; text-decoration: none; font-size: 13px; color: #FFFFFF; } #menu a:hover { color: #FFFFFF; } #menu .current_page_item a { background: none; color: #000000; } /** LOGO / #logo { width: 713px; height: 130px; margin: 0 auto; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img02.gif) no-repeat left top; } #logo h1, #logo h2 { float: left; margin: 0; padding: 60px 0 0 20px; line-height: normal; } #logo h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size:40px; } #logo h1 a { text-decoration: none; color: #4C4C4C; } #logo h1 a:hover { text-decoration: underline; } #logo h2 { float: left; padding: 75px 0 0 18px; font: 18px Georgia, "Times New Roman", Times, serif; color: #0044D1; } #logo p a { text-decoration: none; color: #8BD80E; } #logo p a:hover { text-decoration: underline; } / Page / #page { width: 663px; margin: 0 auto; padding: 0 25px; } / Content / #content { float: left; width: 410px; } / Post / .post { padding: 15px 0px; margin-bottom: 20px; } .post .title { margin-bottom: 20px; padding-bottom: 5px; } .post h1 { padding: 0px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img06.gif) no-repeat left top; font-size: 24px; color: #FFFFFF; } .post h2 { padding: 0px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img06.gif) no-repeat left top; font-size: 22px; color: #FFFFFF; } .post .entry { } .post .meta { padding: 15px 15px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .post .meta p { margin: 0; padding-top: 15px; line-height: normal; color: #FFFFFF; } .post .meta .byline { float: left; } .post .meta .links { float: right; } .post .meta .more { padding: 0 10px 0 18px; } .post .meta .comments { } .post .meta b { display: none; } / Sidebar / #sidebar { width: 210px; float: right; margin: 0; padding: 0; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { margin-bottom: 40px; } #sidebar li ul { } #sidebar li li { margin: 0; } #sidebar h2 { width: 250px; margin-bottom: 10px; padding: 0px 0 0 35px; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img06.gif) no-repeat left top; font-size: 20px; color: #FFFFFF; } / Search / #search { } #search h2 { margin-bottom: 20px; } #s { width: 130px; margin-right: 5px; padding: 2px; } #x { padding: 2px; border: none; border: 1px solid #FFFFFF; background: #0157DE; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } / Boxes / .box1 { padding: 20px; } .box2 { color: #BABABA; } .box2 h2 { margin-bottom: 15px; font-size: 16px; color: #FFFFFF; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited { color: #EDEDED; } / Footer / #footer-wrap { } #footer { width: 693px; margin: 0 auto; padding: 10px 0 10px 0; background: url(http://www.freecsstemplates.org/templates/previews/cloudy/images/img07.gif) no-repeat left top; } html>body #footer { height: auto; } #footer p { font-size: 11px; } #legal { clear: both; text-align: center; color: #FFFFFF; } #legal a { font-weight: normal; color: #FFFFFF; } </body></html>

Tasarım üzerindeki yazı
<div id="wrapper">  <div id="header"> <h1>CssTaSaRiMi</h1> <p> Design By CssTaSaRiMi</p> </div>   <div id="page"> </body></html>

Tasarımın altınaki yazıya
 <div id="sidebar"> <ul> <li> <h2>Menü</h2> <ul> <li><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretçilerim</a></li> <li><a href="#" _fcksavedurl="#">Hakkımda</a></li> <li><a href="#" _fcksavedurl="#">Topliste</a></li> <li><a href="#" _fcksavedurl="#">Forum</a></li> </ul> </li> <li> <h2>Arşiv</h2> <ul> <li><a href="#" _fcksavedurl="#">İce Blue</a> (23)</li> <li><a href="#" _fcksavedurl="#">Red</a> (31)</li> <li><a href="#" _fcksavedurl="#">Butterfly</a> (31)</li> <li><a href="#" _fcksavedurl="#">Css</a> (30)</li> <li><a href="#" _fcksavedurl="#">Php</a> (31)</li> <li><a href="#" _fcksavedurl="#">Asp</a> (30)</li> <li><a href="#" _fcksavedurl="#">Xhtml</a> (31)</li> <li><a href="#" _fcksavedurl="#">Html</a> (28)</li> <li><a href="#" _fcksavedurl="#">xml</a> (31)</li> </ul> </li> </ul> </div>  </div> </div>  <div id="footer"> <p>©2008 Tüm Hakkı Saklıdır; Design by <a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a> • Icons by <a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a>.</p> </div> </body></html>

Css koduna
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;} / Theme Name: Unnamed Theme URI: http://www.freewpthemes.net/preview/unnamed Description: Widget ready and tested on WP 2.2+. Version: 2.0 Author: Free WordPress Themes Author URI: http://www.freewpthemes.net/ / body { margin-top: 30px; padding: 0; background: #000000; font-size: 13px; text-align: justify; color: #ADADAD; } body, th, td, input, textarea, select, option { font-family: "Trebuchet MS", "Times New Roman", Arial, Times, serif; } h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #819CDB; } h1 { font-size: 36px; } h2 { font-size: 2em; } h3 { font-size: 1em; } p, ul, ol { line-height: 200%; } blockquote { padding-left: 1em; } blockquote p, blockquote ul, blockquote ol { line-height: normal; font-style: italic; } a { color: #FFFFFF; } a:hover { color: #FFFFFF; } hr { display: none; } / Header / #header { width: 800px; height: 143px; margin: 0 auto; padding-bottom: 30px; background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img01.jpg) no-repeat left top; } #header h1, #header p { float: left; margin: 0; padding: 50px 0 0 20px; font-family: Georgia, "Times New Roman", Times, serif; } #header h1 { color: #FFB71C; font-size: 44px; } #header p { padding: 65px 0 0 10px; font-size: 16px; color: #FFFFFF; } #header a { text-decoration: none; color: #FFB71C; } / Page / #page { width: 800px; margin: 0 auto; } / Content / #content { float: right; width: 480px; margin: 0; margin-bottom: 30px; } .post { padding: 0px 0px 0 0px; } .title { margin: 0; padding-bottom: 5px; font-size: 24px; font-family: Georgia, "Times New Roman", Times, serif; color: #FFFFFF; } .title a { text-decoration: none; color: #FFFFFF; } .pagetitle { border-bottom: 2px solid #0F0F0F; } .byline { margin: 0; color: #646464; } .meta { text-align: left; color: #646464; padding: 10px 10px; margin: 30px 0; background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img02.jpg) repeat-x left top; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .meta .more { background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat 0px 45%; padding-left: 10px; } .meta .comments { background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat 0px 45%; padding-left: 10px; } .meta a { } .navigation { } .alignleft { float: left; } .alignright { float: right; } .posts { margin: 0; padding: 0; list-style: none; line-height: normal; } .posts li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #0F0F0F; } .posts h3 { margin: 0; font-weight: bold; } .posts p { margin: 0; line-height: normal; } .posts a { } / Sidebar / #sidebar { float: left; width: 260px; } #sidebar ul { margin: 0; padding: 0 0 20px 0; list-style: none; } #sidebar li { } #sidebar li ul { padding: 0px 21px 20px 10px; } #sidebar li li { border-bottom: 1px dotted #363B3F; background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat 0px 40%; padding: 0 0 10px 15px; } #sidebar h2 { margin: 0; height: 35px; padding: 8px 0px 10px 13px; background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img02.jpg) repeat-x left top; font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #FFFFFF; } #sidebar h2 a { background: url(http://www.freecsstemplates.org/templates/previews/redroses/images/img03.gif) no-repeat left 50%; } #sidebar a { } #sidebar a:hover { text-decoration: none; } / Search / #search input { display: none; } #search input#s { display: block; width: 230px; padding: 2px 5px; border: 1px solid #3DD1FF; background: #FFFFFF url(images/img05.gif) repeat-x; } #search br { display: none; } / Calendar / #calendar { } #calendar h2 { margin-bottom: 15px; } #calendar table { width: 80%; margin: 0 auto; text-align: center; } #calendar caption { width: 100%; text-align: center; } #next { text-align: right; } #prev { text-align: left; } / Footer / #footer { clear: both; height: 136px; width: 800px; margin: 0 auto; border-top: 10px solid #1E2223; text-align: center; font-size: smaller; font-family: Arial, Helvetica, sans-serif; color: #646464; } #footer p { padding-top: 40px; text-transform: uppercase; } #footer p a { color: #FFFFFF; } </body></html>

Tasarım Üzerindeki yazı
<div id="header"> <div id="logo"> <h1><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></h1> <h2><a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">Design by CssTaSaRiMi</a></h2> </div> <div id="menu"> <ul> <li class="active"><a href="#" _fcksavedurl="#" title="">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#" title="">Z.Defteri</a></li> <li><a href="#" _fcksavedurl="#" title="">Hakkımda</a></li> <li><a href="#" _fcksavedurl="#" title="">İletişim</a></li> <li><a href="#" _fcksavedurl="#" title="">Forum</a></li> </ul> </div> </div> <div id="content"> <div id="sidebar"> <div id="login" class="boxed"> <div class="title"> <h2>Üye Girişi</h2> </div> <div class="content"> <form id="form1" method="post" action="#"> <fieldset> <legend>Giriş:</legend> <label for="inputtext1">E-Mail</label> <input id="inputtext1" type="text" name="inputtext1" value="" /> <label for="inputtext2">Şifre:</label> <input id="inputtext2" type="password" name="inputtext2" value="" /> <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" /> <p><a href="#" _fcksavedurl="#">Şifreni mi unuttun?</a></p> </fieldset> </form> </div> </div>  <div id="updates" class="boxed"> <div class="title"> <h2>Menü</h2> </div> <div class="content"> <ul> <li> <h3></h3> <p><a href="#" _fcksavedurl="#">1. Xml</a></p> </li> <li> <h3></h3> <p><a href="#" _fcksavedurl="#">2. Css</a></p> </li> <li> <h3></h3> <p><a href="#" _fcksavedurl="#">3. Html</a></p> </li> <li> <h3></h3> <p><a href="#" _fcksavedurl="#">4. Asp</a></p> </li> <li> <h3></h3> <p><a href="#" _fcksavedurl="#">5. Php</a></p> </li> </ul> </div> </div>  </div>  </body></html>

Tasarımın altındaki yazıya
 <div id="ad120x600"><a href="#" _fcksavedurl="#"><img src="images/ad_120x600.jpg" _fcksavedurl="images/ad_120x600.jpg" alt="" width="120" height="600" /></a></div> </div> <div style="clear: both;"> </div> </div>   <div id="footer"> <p id="legal">Tüm Hakları Saklıdır Designed by <a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a>.</p> <p id="links"><a href="#" _fcksavedurl="#">Hazırlayan</a> | <a href="#" _fcksavedurl="#">csstasarimi</a></p> </div></body></html>

Css koduna
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;} / Design by Csstasarimi http://www.csstasarimi.tr.gg Released for free under a Creative Commons Attribution 2.5 License / { margin: 0; padding: 0; } body { margin: 20px 0; background: #FFFFFF; font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666666; } h1, h2, h3 { color: #333333; } h2 { } h3 { font-size: 1em; } p, blockquote, ul, ol { margin-bottom: 1.5em; line-height: 1.65em; text-align: justify; } p { } blockquote { margin-left: 2em; margin-right: 2em; font-style: italic; } ul { margin-left: 3em; } ul li { } ol { margin-left: 3em; } ol li { } a { text-decoration: underline; color: #3E9722; } a:hover { text-decoration: none; color: #E58C24; } img { border: none; } img.left { float: left; margin: 5px 20px 0 0; } img.right { float: right; margin: 5px 0 0 20px; } /* Boxed Style / .boxed { } .boxed .title { background: #3C74E6 url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img06.gif) repeat-x; } .boxed .title h2 { height: 28px; padding: 12px 0 0 20px; text-transform: uppercase; font-size: 1em; color: #FFFFFF; } .boxed .content { padding: 20px; border-top: 1px solid #FFFFFF; background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img07.gif) repeat-x; } / Post / .post { } .post .title { background: #3C74E6 url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img06.gif) repeat-x; font-size: 1em; text-transform: uppercase; color: #FFFFFF; } .post .title span { display: block; height: 28px; padding: 12px 0 0 20px; } .post .date { margin-top: -25px; padding-bottom: 10px; padding-right: 20px; text-align: right; font-size: x-small; color: #FFFFFF; } .post .date .month { } .post .date .day { } .post .date .year { } .post .meta { clear: both; } .post .meta p { margin: 0; padding: 10px 20px 40px 20px; border-top: 1px dotted #CCCCCC; line-height: normal; font-size: x-small; } .post .story { padding: 20px; border-top: 1px solid #FFFFFF; background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img07.gif) repeat-x; } / Header / #header { width: 920px; height: 120px; margin: 0 auto; padding: 20px 20px 0 20px; background: #CAE646 url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img01.jpg) no-repeat; } / Header > Logo / #logo { float: left; width: 240px; height: 50px; } #logo h1 { float: left; margin: 0; padding: 50px 0 0 0; font-size: 2.6em; } #logo h2 { float: left; margin-top: -5px; font-size: 1em; } #logo a { text-decoration: none; color: #000000; } / Header > Menu / #menu { float: right; } #menu ul { margin: 0; padding-top: 79px; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; width: 120px; height: 30px; margin-left: 2px; padding-top: 10px; background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img03.gif) no-repeat; text-decoration: none; text-align: center; font-weight: bold; color: #000000; } #menu a:hover { background-image: url(images/img04.gif); } #menu .active a { background-image: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img05.gif); } / Content / #content { width: 920px; margin: 0 auto; padding: 20px; background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img02.jpg) no-repeat; border-top: 1px solid #FFFFFF; } / Content > Main / #main { float: left; width: 480px; padding-left: 20px; } / Content > Main > Welcome / #welcome { } / Content > Main > Example / #example { } / Content > Sidebar / #sidebar { float: left; width: 220px; } #sidebar .boxed .title h2 { background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img08.gif) no-repeat; } / Content > Sidebar > Login / #login { } #login form { } #login fieldset { border: none; } #login legend { display: none; } #login label { display: block; } #login input { margin-bottom: 10px; padding: 2px 5px; font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666666; } #inputtext1, #inputtext2 { width: 160px; } #inputsubmit1 { margin: 0; padding: 0; } / Content > Sidebar > Updates/ #updates { } #updates ul { margin: 0; list-style: none; } #updates h3 { font-size: .8em; } #updates p { line-height: normal; font-size: .8em; } #updates a { text-decoration: none; } / Content > Sidebar2 / #sidebar2 { float: left; width: 180px; padding-left: 20px; } #sidebar2 .boxed .title h2 { background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img10.gif) no-repeat right top; } / Content > Sidebar2 > Sponsors / #sponsors { } #sponsors ul { margin-left: 0; padding-left: 0; list-style: inside; } / Content > Sidebar2 > ad120x600 / #ad120x600 { text-align: center; } / Footer / #footer { clear: both; width: 960px; height: 80px; margin: 0 auto; padding: 20px 0; background: url(http://www.freecsstemplates.org/templates/previews/newfangled/images/img02.jpg) no-repeat; } #footer p { margin: 0; text-align: center; line-height: normal; font-size: x-small; } #footer a { text-decoration: underline; color: #666666; } #footer a:hover { text-decoration: none; } / Footer > Legal / #legal { } / Footer > Links / #links { }</body></html>

Tasarımın Üzerindeki Yazı
 <div id="header"> <div id="menu"> <ul> <li class="current_page_item"><a href="#" _fcksavedurl="#"><span class="numbertxt">01 </span>Anasayfa</a></li> <li><a href="#" _fcksavedurl="#"><span class="numbertxt">02 </span>Forum</a></li> <li><a href="#" _fcksavedurl="#"><span class="numbertxt">03 </span>İletişim</a></li> <li><a href="#" _fcksavedurl="#"><span class="numbertxt">04 </span>Z.defteri</a></li> <li class="last"><a href="#" _fcksavedurl="#"><span class="numbertxt">05 </span>Contact</a></li> </ul> </div> </div> <div id="logo"> <h1><a href="#" _fcksavedurl="#">CssTaSaRiMi</a></h1> <h2> Design by CssTaSaRiMi</h2> </div>   <div id="page">  </body></html>
Tasarımın altındaki yazıya
 <div id="sidebar"> <ul> <li id="search"> <h2>Arama</h2> <form method="get" action=""> <fieldset> <input type="text" id="s" name="s" value="" /> <input type="submit" id="x" value="Search" /> </fieldset> </form> </li> <li> <h2>Kategori 1</h2> <ul> <li><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretçilerim</a></li> <li><a href="#" _fcksavedurl="#">Forum</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Hakkımda</a></li> <li><a href="#" _fcksavedurl="#">Toplist</a></li> <li><a href="#" _fcksavedurl="#">Link ekle</a></li> </ul> </li> <li> <h2>Kategori2</h2> <ul> <li><a href="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretçilerim</a></li> <li><a href="#" _fcksavedurl="#">Forum</a></li> <li><a href="#" _fcksavedurl="#">Hakkımda</a></li> <li><a href="#" _fcksavedurl="#">Toplist</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Link ekle</a></li> </ul> </li> </ul> </div>  <div style="clear: both;"> </div> </div>   <div id="footer"> <div id="footer-wrap"> <p id="legal">(c) 2008 YourSite. Design by <a href="http://www.csstasarimi.tr.gg/" _fcksavedurl="http://www.csstasarimi.tr.gg/">CssTaSaRiMi</a>.</p> </div> </div>  </body></html>
Css koduna
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;} / Design by CssTaSaRiMi http://www.csstasarimi.tr.gg Released for free under a Creative Commons Attribution 2.5 License / body { margin: 0; padding: 0; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img01.gif) repeat-x left top; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } h1, h2, h3 { margin: 0; text-transform: lowercase; font-weight: normal; color: #7D7D7D; } h1 { letter-spacing: -1px; font-size: 32px; } h2 { font-size: 23px; } p, ul, ol { margin: 0 0 2em 0; text-align: justify; line-height: 26px; font-size: 11px; } a:link { color: #6DBD0B; } a:hover, a:active { text-decoration: none; color: #6DBD0B; } a:visited { color: #6DBD0B; } img { border: 1px dashed #86E714; padding: 2px; } img.left { float: left; margin-right: 15px; } img.right { float: right; margin-left: 15px; } / Form / form { margin: 0; padding: 0; } fieldset { margin: 0; padding: 0; border: none; } legend { display: none; } input, textarea, select { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } / Header / #header { width: 860px; height: 50px; margin: 0 auto; } / Menu */ #menu { width: 860px; margin: 0; padding: 0; } #menu ul { float: right; display: block; margin: 0; padding: 0px 0 0 0px; list-style: none; line-height: normal; } #menu li { display: inline; } #menu a { margin-right: 3px; padding: 10px 15px 10px 10px; letter-spacing: -.5px; text-decoration: none; text-transform: lowercase; font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000000; } #menu a:hover { text-decoration: none; color: #000000; } #menu .current_page_item a { color: #000000; } #menu .numbertxt { font-size: 28px; color: #C4F28D; } #menu span { margin: 0; padding: 0; } /** LOGO / #logo { clear: both; width: 860px; height: 80px; margin: 0 auto; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img02.gif) no-repeat left top; } #logo h1, #logo h2 { margin: 0; padding: 0 0 0 75px; line-height: normal; } #logo h1 { } #logo h1 a { text-decoration: none; color: #FFFFFF; } #logo h1 a:hover { text-decoration: underline; } #logo h2 { padding: float: left; font: italic 13px Georgia, "Times New Roman", Times, serif; color: #66B209; } #logo p a { text-decoration: none; } #logo p a:hover { text-decoration: underline; } / Page / #page { width: 850px; margin: 0 auto; } / Content / #content { float: right; width: 600px; } / Post / .post { padding: 15px 15px; } .post .title { margin-bottom: 20px; border-bottom: 1px dotted #D1D1D1; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img04.jpg) repeat-x left bottom; } .post .entry { } .post .meta { height: 70px; padding: 40px 15px 0px 15px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img03.jpg) repeat-x left top; } .post .meta p { margin: 0; line-height: normal; color: #999999; } .post .meta .byline { float: left; } .post .meta .links { float: right; } .post .meta .more { padding: 0 20px 0 18px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img09.gif) no-repeat left 50%; } .post .meta .comments { padding-left: 22px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img08.gif) no-repeat left 50%; } .post .meta b { display: none; } / Sidebar / #sidebar { float: left; width: 215px; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { margin-bottom: 40px; } #sidebar li ul { background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img03.jpg) repeat-x left bottom; padding-bottom: 20px; } #sidebar li li { margin: 0; padding-left: 12px; } #sidebar h2 { padding-top: 20px; margin-bottom: 10px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img04.jpg) repeat-x left bottom; border-bottom: 1px dotted #D1D1D1; font-size: 18px; } / Search / #search { background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img03.jpg) repeat-x left bottom; margin-bottom: 20px; } #search h2 { margin-bottom: 20px; } #s { width: 115px; margin-right: 5px; margin-left: 15px; margin-bottom: 20px; padding: 3px 0px 3px 15px; border: 1px solid #F0F0F0; } #x { margin-bottom: 20px; padding: 3px 3px 3px 3px; background: #ECECEC; border: none; text-transform: lowercase; font-size: 11px; color: #4F4F4F; } / Boxes / .box1 { padding: 20px; background: url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img05.gif) no-repeat; } .box2 { color: #BABABA; } .box2 h2 { margin-bottom: 15px; background: url(images/img10.gif) repeat-x left bottom; font-size: 16px; color: #FFFFFF; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited { color: #EDEDED; } / Footer */ #footer-wrap { width: 860px; height: 52px; margin: 0 auto; } #footer { margin: 0 auto; height: 52px; min-height: 52px; padding: 0; background: #A0A0A3 url(http://www.freecsstemplates.org/templates/previews/subordinate/images/img05.gif) repeat-x left bottom; } html>body #footer { height: auto; } #footer p { } #legal { clear: both; padding-top: 15px; text-align: center; color: #FFFFFF; } #legal a { font-weight: bold; color: #FFFFFF; } </body></html>

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

</div> 	 	 	<div id="sidebar"> 		<ul> 			<li> 				<h2>Menü</h2> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ana Sayfa</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">İletişim</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ziyaretci Defteri</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Toplist</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Link Listesi</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Yorumlar</a></li>  				</ul> 			</li> 			<li> 				<h2>Tasarimlar</h2> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">İceblue Tasarim</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Red Tasarimları</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Butterfly Tasarimlari</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">CSS Design</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Flash Tasarim</a></li> 				</ul> 			</li> <li> 							<h2>Arşiv</h2> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">September</a> (23)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ağustos</a> (31)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Ocak</a> (31)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Şubat</a> (30)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Mart</a> (31)</li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Nisan</a> (30)</li> 							</ul> 						</li> 		</ul> 	</div> 	 	<div style="clear: both;"> </div> </div>  <div id="footer"> 	<p>©2008 Tüm Hakları SakLıdır.  •  Design by <a href="http://www.csstasarim-arsiv.tr.gg" _fcksavedurl="http://www.csstasarim-arsiv.tr.gg">CSS Tasarim Merkezi</a>.</p> </div>

<= Css Kod Bölümüne =>

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;}  /* Design by WWW.CSSTASARIM-ARSIV.TR.GG */  body { 	margin: 0; 	padding: 0; 	background: #AAE74A url(https://img.webme.com/pic/c/css-tasarimm/3-img04.gif) repeat-x; }  body, th, td, input, textarea { 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 	font-size: 13px; 	color: #666666; }  p, ol, ul { 	line-height: 170%; }  a:hover { 	text-decoration: none; }  /* Header */  #header { 	width: 960px; 	height: 120px; 	margin: 0 auto; }  #logo { 	float: left; 	height: 120px;                       margin-top: -11px; 	margin-left: 10px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img1.gif) no-repeat left center; }  #logo h1, #logo p { 	text-transform: lowercase; }  #logo h1 { 	margin: 0; 	padding: 25px 0 0 85px; 	letter-spacing: -2px; 	font-size: 3em; 	font-weight: normal; 	color: #000000; }  #logo h1 a { 	color: #000000; }  #logo p { 	margin: -10px 0 0 2px; 	padding: 0 0 0 85px; 	text-transform: lowercase; }  #search { 	float: right; 	width: 280px; }  #search form { 	margin-top: -5px; 	padding: 63px 0 0 0; }  #search fieldset { 	margin: 0; 	padding: 0; 	border: none; }  #search #s, #search #x { 	float: left; }  #search #s { 	width: 188px; 	margin: 2px 6px 0 0; 	padding: 2px 5px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img02.gif) repeat-x; 	border: 1px solid #ACACAC; }  #search #x { 	width: 67px; 	height: 28px; 	padding: 0; 	background: #006BFF url(https://img.webme.com/pic/c/css-tasarimm/3-img03.gif) no-repeat; 	border: none; 	text-transform: lowercase; 	color: #FFFFFF; }  /* Menu */  #menu { 	width: 962px; 	height: 50px; 	margin-top: -32px; 	margin-left: auto; 	margin-right: auto; }  #menu ul { 	margin: 0; 	padding: 0; 	list-style: none; }  #menu li { 	display: block; 	float: left; }  #menu a { 	display: block; 	float: left; 	height: 38px; 	padding: 8px 20px 0 20px; 	text-decoration: none; 	text-transform: lowercase; 	color: #000000; }  #menu a:hover { 	text-decoration: underline; }  #menu .current_page_item { 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img05.gif) no-repeat; }  #menu .current_page_item a { 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img06.gif) no-repeat right top; 	font-weight: bold; }  /* Page */  #page { 	width: 962px; 	margin: 0 auto; 	background: #FFFFFF url(https://img.webme.com/pic/c/css-tasarimm/3-img07.gif) repeat-y; }  /* Content */  #content { 	float: right; 	width: 700px; 	padding: 0; 	background:  none no-repeat; }  #content a { 	color: #FF8900; }  .pagetitle { 	height: 33px; 	margin: 0; 	padding: 8px 0 0 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img13.gif) no-repeat; 	font-size: 1.4em; 	color: #FFFFFF; }  #content #rss-posts { 	display: block; 	margin: -30px 15px 0px 0px; 	padding: 0 20px 0 0; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-rss.gif) no-repeat right center; 	text-align: right; 	font-weight: bold; 	color: #FFFFFF; }  .post { 	padding: 40px 30px 0 30px; }  .title { 	margin: 0; 	font-size: 2.4em; 	font-weight: normal; }  .byline { 	margin: 0 0 20px 0; }  .meta { 	border-top: 1px dotted #CCCCCC; 	text-align: right; }  .meta .more, .meta .comments { 	padding-left: 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img14.gif) no-repeat left center; }  /* Sidebar */  #sidebar { 	float: left; 	width: 230px; 	padding: 11px 5px 0 11px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img08.gif) no-repeat; }  #sidebar ul { 	margin: 0; 	padding: 0; 	list-style: none; }  #sidebar li { 	margin-bottom: 20px; }  #sidebar li ul { 	padding: 10px 15px; }  #sidebar li li { 	margin: 0; 	padding-left: 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img12.gif) no-repeat left center; }  #sidebar h2 { 	height: 33px; 	margin: 0; 	padding: 8px 0 0 15px; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img11.gif) no-repeat; 	font-size: 1.4em; 	color: #FFFFFF; }  #sidebar a { 	text-decoration: none; 	color: #0065FF; }  #sidebar a:hover {	 	text-decoration: underline; }  /* Footer */  #footer { 	width: 962px; 	margin: 0 auto; 	padding: 30px 0; 	background: url(https://img.webme.com/pic/c/css-tasarimm/3-img10.gif) no-repeat; }  #footer p { 	margin: 0; 	text-align: center; 	color: #FFFFFF; }  #footer a { 	color: #FFFFFF; }

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

</div>  	</div>  	<div class="navigation">  		<h1>Menü</h1> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Ana Sayfa</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">İletişim</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Ziyaretci Defteri</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Toplist</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Link Listesi</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Yorumlar</a></li>  		</ul>  		<h1>Tasarimlar</h1> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">İceblue Tasarim</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Red Tasarimları</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Butterfly Tasarimlari</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">CSS Design</a></li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Flash Tasarim</a></li> 		</ul>  		<h1>Arşiv</h1> 							<ul> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">September</a> </li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Ağustos</a> </li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Ocak</a> </li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Şubat</a> </li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Mart</a> </li> 								<li><a href="#" _fcksavedurl="#" _fcksavedurl="#" _fcksavedurl="#">Nisan</a></li> 		</ul>  	</div> 	 	<div class="clearer"><span></span></div>  	<div class="footer">© 2008 <a href="#" _fcksavedurl="#">Siteniz.tR.gg</a>. Valid <a href="http://www.csstasarim-arsiv.tr.gg" _fcksavedurl="http://www.csstasarim-arsiv.tr.gg">CSS</a> & <a href="http://www.csstasarim-arsiv.tr.gg" _fcksavedurl="http://www.csstasarim-arsiv.tr.gg">XHTML</a>. Tasarim design by <a href="http://www.csstasarim-arsiv.tr.gg" _fcksavedurl="http://www.csstasarim-arsiv.tr.gg">Css Tasarim Merkezi</a> 	</div>  </div>

<= Css Kod Bölümüne =>

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;}  /*############################################################# www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg www.csstasarim-arsiv.tr.gg #############################################################*/  /* standard elements */ * { 	margin: 0; 	padding: 0; } a {color: #682;} a:hover {color: #9A6;} body { 	background: #5F8000 url(https://img.webme.com/pic/c/css-tasarimm/5-bg.gif) repeat-y center top; 	color: #333; 	font: normal 62.5% "Lucida Sans Unicode",sans-serif; } input { 	color: #555; 	font: normal 1.1em "Lucida Sans Unicode",sans-serif; } p,cite,code,ul { 	font-size: 1.2em; 	padding-bottom: 1.2em; } ul {margin-left: 1.2em;} li {list-style-image: url(https://img.webme.com/pic/c/css-tasarimm/5-li.gif);} h1 {font-size: 1.4em;} blockquote { 	background: #FFF; 	border-bottom: 1px solid #EEE; 	border-top: 1px solid #EEE; 	color: #333; 	display: block; 	font-size: 0.9em; 	margin-bottom: 1.2em; 	padding: 6px 12px; } blockquote p {padding: 3px 0;} h1,h2,h3 {color: #654;}  /* misc */ .clearer {clear: both;}  /* structure */ .container { 	background: url(https://img.webme.com/pic/c/css-tasarimm/5-bgcontainer.gif) repeat-y; 	margin: 0 auto; 	width: 702px; }  /* top */ .top { 	background: #567300; 	font: normal 2.4em Verdana,sans-serif; 	height: 60px; 	margin: 0 auto; 	width: 630px; } .top a { 	color: #FFF; 	display: block; 	line-height: 60px; 	text-decoration: none; 	width: 100%; } .top span {padding-left: 24px;} .top a:hover { 	background: #688B00; 	color: #FFF; }  /* header */ .header { 	background: url(https://img.webme.com/pic/c/css-tasarimm/5-header.jpg) no-repeat; 	height: 180px; 	margin: 0 auto; 	width: 630px; }  /* item */ .item {clear: both;} .item .date { 	background: url(https://img.webme.com/pic/c/css-tasarimm/5-bgdate.gif) no-repeat; 	color: #FDD; 	float: left; 	height: 40px; 	text-align: center; 	width: 36px; } .item .date div {padding-top: 4px;} .item .date span {font: normal 1.6em serif;} .item .content { 	float: left; 	width: 420px; } .item h1 { 	background: #567300; 	color: #FFF; 	line-height: 40px; 	padding-left: 16px; } .item .body {padding: 12px 18px;}  /* main */ .main {float: left;}  /* navigation */ .navigation { 	float: left; 	margin-left: 1px; 	width: 208px; } .navigation h1 { 	background: #81AC00; 	color: #FFF; 	font-size: 1.3em; 	line-height: 40px; 	padding-left: 12px; } .navigation ul {margin: 0; padding: 0;} .navigation li { 	border-bottom: 1px solid #D5E8AD; 	list-style: none; } .navigation li a { 	background: #E8F6BF url(https://img.webme.com/pic/c/css-tasarimm/5-bgnavigation.gif) repeat-x;	 	color: #553; 	display: block; 	padding: 8px 4px 8px 12px; 	text-decoration: none; } .navigation li a:hover { 	background: #F0FFC6; 	color: #553; }  /* footer */ .footer { 	background: url(https://img.webme.com/pic/c/css-tasarimm/5-bgfooter.gif) repeat-x; 	color: #FFF; 	font-size: 1.1em; 	line-height: 40px; 	margin: 0 auto; 	text-align: center; 	width: 626px; } .footer a {color: #FFF;} .footer a:hover {color: #FAFCB0;}

<= Tasarimin Üzerine =>

<div id="container"> <div id="header"> <h1><a href="#" _fcksavedurl="#">Merkez</a></h1> <h2>Css Tasarim Bizim İşimiz</h2> <ul id="mainMenu"> <li><a href="#" _fcksavedurl="#">Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#">Hakkında</a></li> <li><a href="#" _fcksavedurl="#">Toplist</a></li> <li><a href="#" _fcksavedurl="#">SiteMap</a></li> <li><a href="#" _fcksavedurl="#">Arşiv</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><span>Arama:</span></li> <li class="formList"><form action="www.csstasarim-arsiv.tr.gg"> <div class="c1"><div class="c2"><div class="c3"><div class="c4"> <input type="text" name="search" size="10" class="searchBox" /> <button type="submit" class="goButton"><span>Git</span></button> </div></div></div></div> </form></li> </ul> </div> <div id="mainContent"> <div class="blog"> <h2 class="blogTitle"><a href="www.css-tasarimm.tr.gg" _fcksavedurl="www.css-tasarimm.tr.gg">Css Tasarim Bizim İşimiz www.csstasarim-arsiv.tr.gg</a></h2> <h3 class="meta">tR.gg'nin En Büyük Tasarim Veren Sitesi Olma Yolundayız...</h3>

<= Tasarimin ALtına =>

</div>        <h2 class="boxDesc">Arşiv:</h2>              <div class="c1"><div class="c2"><div class="c3"><div class="c4">       <ul>       	<li><a href="#" _fcksavedurl="#">Ocak 2008</a></li>         <li><a href="#" _fcksavedurl="#">Şubat 2008</a></li>         <li><a href="#" _fcksavedurl="#">Mart 2008</a></li>         <li><a href="#" _fcksavedurl="#">Nisan 2008</a></li>         <li><a href="#" _fcksavedurl="#">Mayıs 2008</a></li>         <li><a href="#" _fcksavedurl="#">Haziran 2008</a></li>       	<li><a href="#" _fcksavedurl="#">Temmuz 2007</a></li>         <li><a href="#" _fcksavedurl="#">Ağustos 2007</a></li>         <li><a href="#" _fcksavedurl="#">Eylül 2007</a></li>         <li><a href="#" _fcksavedurl="#">Ekim 2007</a></li>         <li><a href="#" _fcksavedurl="#">Kasim 2007</a></li>         <li><a href="#" _fcksavedurl="#">Aralık 2007</a></li>       </ul>       </div></div></div></div>              <h2 class="boxDesc">Kategori:</h2>              <div class="c1"><div class="c2"><div class="c3"><div class="c4">       <ul>       	<li><a href="#" _fcksavedurl="#">Oyun</a></li>         <li><a href="#" _fcksavedurl="#">İnndir</a></li>         <li><a href="#" _fcksavedurl="#">Aşk</a></li>         <li><a href="#" _fcksavedurl="#">Html Kodlar</a></li>         <li><a href="#" _fcksavedurl="#">Site Ekle Hit Kazan</a></li>         <li><a href="#" _fcksavedurl="#">Lig TV İzle</a></li>       	<li><a href="#" _fcksavedurl="#">Maç Skorları</a></li>         <li><a href="#" _fcksavedurl="#">Puan Durumu</a></li>         <li><a href="#" _fcksavedurl="#">Downloads Merkezi</a></li>         <li><a href="#" _fcksavedurl="#">Css Tasarim Merkezi</a></li>         <li><a href="#" _fcksavedurl="#">İceblue Tasarim</a></li>         <li><a href="#" _fcksavedurl="#">Red Tasarim</a></li>         <li><a href="#" _fcksavedurl="#">CSS Design</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>         <li><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></li>       </ul>       </div></div></div></div>              <br class="clear" />            	</div>        <div id="footer">     <p>Copyright © 2008, WwW.Site-Adi.tR.gg <img src="https://img.webme.com/pic/c/css-tasarimm/6-bullet_w.gif" _fcksavedurl="https://img.webme.com/pic/c/css-tasarimm/6-bullet_w.gif" alt="" class="bullet" /> Design by <a href="http://www.css-tasarimm.tr.gg" _fcksavedurl="http://www.css-tasarimm.tr.gg">Css Tasarim Merkezi</a> <img src="https://img.webme.com/pic/c/css-tasarimm/6-bullet_w.gif" _fcksavedurl="https://img.webme.com/pic/c/css-tasarimm/6-bullet_w.gif" alt="" class="bullet" /> <a href="#" _fcksavedurl="#">WwW.Site-Adi.tR.gg</a></p>   </div>    </div>

<= Css Kod Bölümüne =>

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: 13px Georgia, "Times New Roman", Times, serif; background: url(https://img.webme.com/pic/c/css-tasarimm/6-header.jpg) top center no-repeat #870010; text-align: center; color: #FFF; } / GENERAL STYLES WWW.CSS-TASARİMM.TR.GG / a { color: #F47D1F; text-decoration: none; } a:hover { color: #FFCFB3; } p { line-height: 1.4em; text-align: justify; padding: 10px 0 0 0; } #mainContent ul, #mainContent ol { margin-left: 40px; line-height: 1.8em; padding: 10px 0 0 0; } #mainContent ul { list-style: url(https://img.webme.com/pic/c/css-tasarimm/6-bullet_o.gif); } blockquote { border-left: 4px solid #B21; color: #FFCFB3; margin: 10px 40px 0 40px; line-height: 1.8em; padding: 0 10px 10px 10px; } blockquote:first-line { font-size: 20px; font-style: italic; line-height: 1.4em; } code { border-bottom: 1px dotted #B21; color: #FFCFB3; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-variant: small-caps; line-height: 1.5em; } h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 12px; } / GENERAL LAYOUT WWW.CSS-TASARİMM.TR.GG / #container { width: 868px; margin: 0 auto; text-align: left; } #header { height: 520px; padding: 0 10px 0 20px; } #mainContent { background: url(https://img.webme.com/pic/c/css-tasarimm/6-footer.jpg) bottom center no-repeat; } / HEADER STYLES WWW.CSS-TASARİMM.TR.GG / #header h1 { float: left; font-size: 72px; font-weight: normal; font-variant: normal; line-height: 1.2em; padding-top: 10px; } #header h1 a { color: #FFF; } #header h1 a:hover { color: #FFCFB3; } #header h2 { float: left; font-size: 16px; font-weight: normal; font-style: italic; font-variant: normal; line-height: 1.2em; padding: 35px 0 0 10px; } / MAIN MENU LAYOUT and STYLES WWW.CSS-TASARİMM.TR.GG / #mainMenu { color: #FFCFB3; float: right; font-size: 30px; line-height: 1.5em; list-style: none; margin-left: -35px; position: relative; } #mainMenu a { color: #FFF; } #mainMenu a:hover { background: #FFCFB3; color: #870010; } #mainMenu a, #mainMenu span { padding: 0 5px; } / BLOG LAYOUT and STYLES WWW.CSS-TASARİMM.TR.GG / .blog { padding-bottom: 40px; } .blog h2.blogTitle { font-size: 28px; font-weight: normal; font-variant: normal; line-height: 18px; position: relative; z-index: 1; } .blog h3.meta { background: url(https://img.webme.com/pic/c/css-tasarimm/6-blog_meta.jpg) no-repeat; color: #FFCFB3; font-size: 13px; font-weight: normal; font-variant: normal; height: 36px; line-height: 36px; padding: 0 10px 0 15px; position: relative; z-index: 0; } * html .blog h3.meta { padding-top: 10px; } .blog h2.blogTitle a { color: #FFF; } .blog h2.blogTitle a:hover { color: #FFCFB3; } .blog h3.meta a { color: #FFCFB3; } .blog h3.meta a:hover { color: #FFF; } img.bullet { padding: 0 4px; } / ROUNDED CORNER BOX STYLES WWW.CSS-TASARİMM.TR.GG / .c1 { background: url(https://img.webme.com/pic/c/css-tasarimm/6-c1.gif) top left no-repeat #EC691F; margin: 0 0 40px 0; } .c2 { background: url(https://img.webme.com/pic/c/css-tasarimm/6-c2.gif) top right no-repeat; } .c3 { background: url(https://img.webme.com/pic/c/css-tasarimm/6-c3.gif) bottom left no-repeat; } .c4 { background: url(https://img.webme.com/pic/c/css-tasarimm/6-c4.gif) bottom right no-repeat; } #mainContent .c4 p, #mainContent .c4 ul { padding: 0 20px; line-height: 36px; margin-left: 0; } / ROUNDED CORNER BOTTOM BOX STYLES WWW.CSSTASARİM-ARSİV.TR.GG / .c4 li { display: inline; background: url(https://img.webme.com/pic/c/css-tasarimm/6-bullet_w.gif) center right no-repeat; } .c4 li a { color: #FFCFB3; margin-right: 11px; white-space: nowrap; } .c4 li a:hover { color: #FFF; } .boxDesc { font-size: 28px; font-weight: normal; font-variant: normal; } / ROUNDED CORNER BOX - INPUT STYLES WWW.CSSTASARİM-ARSİV.TR.GG / li.formList .c1, li.formList .c2, li.formList .c3, li.formList .c4 { width: 125px; } #postComment .c1, #postComment .c2, #postComment .c3, #postComment .c4 { height: 40px; line-height: 40px; width: 300px; } .c4 input.searchBox, #postComment input, .postCommentTA textarea { background: transparent; border: none; color: #870010; font: 12px Georgia, "Times New Roman", Times, serif; position: relative; left: 4px; width: 80px; } #mainContent .c1 { margin-bottom: 15px; } #postComment input { float: left; position: relative; top: 12px; width: 200px; } #postComment .postCommentTA .c1, #postComment .postCommentTA .c2, #postComment .postCommentTA .c3, #postComment .postCommentTA .c4 { height: auto; width: 500px; } #mainContent #postComment .postCommentTA .c1 { margin-bottom: 30px; } .postCommentTA textarea { margin: 10px; overflow: auto; width: 470px; } #postComment label { color: #FFCFB3; float: right; padding-right: 10px; } #mainMenu li.formList { line-height: .6em; } / BUTTON STYLES WWW.CSSTASARİM-ARSİV.TR.GG / .goButton { background: url(https://img.webme.com/pic/c/css-tasarimm/6-button.gif) center center no-repeat; border: none; color: #FFCFB3; height: 28px; width: 38px; } .goButton span { position: relative; top: -1px; } .postButtonCluster { position: relative; top: -20px; } .postButtonCluster button { background: none; border: none; color: #FFCFB3; font: 16px Georgia, "Times New Roman", Times, serif; margin-right: 20px; } / COMMENT LIST STYLES WWW.CSSTASARİM-ARSİV.TR.GG / #commentList { list-style-position: outside; position: relative; left: -40px; margin-right: -40px; width: 868px; } #commentList li { background: url(https://img.webme.com/pic/c/css-tasarimm/6-blog_meta.jpg) no-repeat; color: #FFCFB3; font-size: 13px; font-weight: normal; font-variant: normal; padding: 0 10px 0 15px; } .commentMeta { clear: both; height: 36px; } .cml { float: left; } .cmr { float: right; font-size: 10px; } .commentContent { color: #FFF; position: relative; top: -20px; } / FOOTER STYLES / #footer p { color: #FFCFB3; font-size: 11px; padding: 10px 0; text-align: center; } / IMAGE FLOATING, IMAGE CENTERING WWW.CSS-TASARİMM.TR.GG / .floatImgR, .floatImgL, .imageCenter { border: 1px solid #B21; padding: 2px; } .floatImgR { float: right; margin: 10px 0 5px 10px; } .floatImgL { float: left; margin: 10px 10px 5px 0; } .imageCenter { display: block; margin: 10px auto; } / CLEARING / br.clear { clear: both; }

<= Tasarimin Üzerine =>

<div id="menu"> <ul> <li><a href="#" _fcksavedurl="#" accesskey="1" title="">Home</a></li> <li><a href="#" _fcksavedurl="#" accesskey="2" title="">Blog</a></li> <li><a href="#" _fcksavedurl="#" accesskey="3" title="">Toplist</a></li> <li><a href="#" _fcksavedurl="#" accesskey="4" title="">Yorum</a></li> <li><a href="#" _fcksavedurl="#" accesskey="5" title="">Hakkında</a></li> <li><a href="#" _fcksavedurl="#" accesskey="6" title="">İletişim</a></li> </ul> </div> <div id="header"> <div id="logo"> <h1><a href="#" _fcksavedurl="#">Css Merkez</a></h1> <h2><a href="http://www.css-tasarimm.tr.gg" _fcksavedurl="http://www.css-tasarimm.tr.gg">CSS Tasarim Merkezi</a></h2> </div> <div id="banner"><a href="#" _fcksavedurl="#">www.css-tasarimm.tr.gg</a></div> </div>  <div id="page"> <div id="conntent"> <div class="post"> <h1 class="title">CSS Tasarimm.tR.gg</h1> <div class="story"> Buraya siteniz hakkına bir şeyler yazabilirsiniz. Haberler, duyururular vs... </div> <div class="meta"> <p class="date">Tasarimm Tarihi 31.10.2oo8</p> </div> </div> <div class="post boxed"> <h2 class="title">CSS Tasarim Merkezi!!!</h2> <div class="story">

<= Tasarimin ALtına =>

</div> <div class="meta"> <p class="date">Tasarimm Tarihi 31.10.2oo8</p> </div> </div> </div>  <div id="sidebar"> <ul> <li> <h2>Geçmiş (Arşiv)</h2> <ul> <li class="first"><a href="#" _fcksavedurl="#">Ocak 2008</a> <i>(2)</i></li> <li><a href="#" _fcksavedurl="#">Şubat 2008</a> <i>(31)</i></li> <li><a href="#" _fcksavedurl="#">Mart 2008</a> <i>(30)</i></li> <li><a href="#" _fcksavedurl="#">Nisan 2008</a> <i>(31)</i></li> <li><a href="#" _fcksavedurl="#">Mayıs 2008</a> <i>(28)</i></li> <li><a href="#" _fcksavedurl="#">Haziran 2008</a> <i>(31)</i></li> </ul> </li> <li> <h2>Menu</h2> <ul> <li class="first"><a href="#" _fcksavedurl="#">Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#">Ziyaretci Defterit</a></li> <li><a href="#" _fcksavedurl="#">İletişim</a></li> <li><a href="#" _fcksavedurl="#">Site Ekle</a></li> <li><a href="#" _fcksavedurl="#">Css Design</a></li> <li><a href="#" _fcksavedurl="#">Anketler Site Hakkında </a></li> <li><a href="#" _fcksavedurl="#">İceblue Tasarimlar </a></li> </ul> </li> <li> <h2>Site İle İlgili</h2> <ul> <li class="first"><a href="#" _fcksavedurl="#">İceblue Tasarim Yapımı </a></li> <li><a href="#" _fcksavedurl="#">Red Tasarim Yapımı </a></li> <li><a href="#" _fcksavedurl="#">Butterfly Tasarim Yapımı </a></li> <li><a href="#" _fcksavedurl="#">CSS Menu Yapımı </a></li> </ul> </li> </ul> </div>  <div style="clear: both;"> </div> </div>  <div id="footer"> <p id="legal">Copyright © 2008 Murat. Tasarim by <a href="http://www.css-tasarimm.tr.gg" _fcksavedurl="http://www.csstasarim-arsiv.tr.gg">CSS Tasarim Merkezi</a></p> </div> 

<= Css Kod Bölümüne =>

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 Tasarim Merkezi Design By ::: www.csstasarim-arsiv.tr.gg / { margin: 0; padding: 0; } body { background: #FFFFFF url(https://img.webme.com/pic/c/css-tasarimm/20-img01.jpg) repeat-x; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #7F7772; } h1, h2, h3 { margin-bottom: 15px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #333333; } h1 { font-size: 197%; } h2 { font-size: 152%; } h3 { font-size: 100%; font-weight: bold; } p, ul, ol { margin-bottom: 15px; line-height: 1.6em; } ul, ol { margin-left: 2em; } blockquote { margin-left: 1em; padding-left: 1em; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img09.gif) repeat-y; font-style: italic; } a:link { color: #0AAAFD; } a:hover, a:active { text-decoration: none; color: #FF6700; } a:visited { color: #7F7772; } img { border: none; } img.left { float: left; margin: 0 20px 0 0; } img.right { float: right; margin: 0 0 0 20px; } /* Menu / #menu { width: 770px; height: 105px; margin: 0 auto; margin-top: -27px; } #menu ul { margin: 0; padding: 0; list-style: none; } #menu li { display: block; float: left; width: 122px; height: 65px; padding: 40px 0 0 0; } #menu a { display: block; width: 122px; height: 32px; padding: 13px 0 0 0; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img02.jpg) no-repeat; text-align: center; text-transform: uppercase; text-decoration: none; font-weight: bold; color: #FFFFFF; } #menu a:hover { background-image: url(https://img.webme.com/pic/c/css-tasarimm/20-img03.jpg); } #menu .active { padding-top: 35px; } #menu .active a { height: 37px; padding-top: 16px; background-image: url(https://img.webme.com/pic/c/css-tasarimm/20-img04.jpg); color: #327EBE; } #menu .active a:hover { background-image: url(https://img.webme.com/pic/c/css-tasarimm/20-img04.jpg); } / Header / #header { width: 770px; height: 160px; margin: 0 auto; } / Logo / #logo { float: left; width: 250px; height: 160px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img05.jpg) no-repeat; } #logo h1, #logo h2 { text-align: center; } #logo h1 { padding-top: 90px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img07.jpg) no-repeat center center; letter-spacing: 8px; font-size: 197%; } #logo h2 { letter-spacing: 2px; font-size: 85%; } #logo a { text-transform: uppercase; text-decoration: none; color: #FFFFFF; } / Banner / #banner { float: right; width: 520px; height: 160px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img06.jpg) no-repeat; } #banner a { float: right; padding: 120px 20px 0 0; text-decoration: none; text-align: right; font-size: 136%; font-style: italic; color: #FFFFFF; } #page { width: 760px; margin: 0 auto; padding: 20px 0 0 0; } #conntent { float: right; width: 510px; } .post { margin-bottom: 20px; } .post .title { padding: 0 20px; } .post .story { padding: 0 20px; } .post .meta { padding: 5px 20px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img09.gif) repeat-x; } .post .meta p { margin: 0; font-size: 77%; } .boxed .title { height: 32px; margin: 0; padding: 8px 0 0 20px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img08.jpg) no-repeat; letter-spacing: -1px; color: #FF3300; } .boxed .story { padding: 20px; border: 1px solid #FF8D17; } .boxed .meta { padding: 5px 10px; background: #FF8D17; color: #FFFFFF; } .boxed .meta a { color: #FFFFFF; } / Sidebar / #sidebar { float: left; width: 240px; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar li { margin-bottom: 15px; } #sidebar li ul { padding: 10px; border: 1px solid #0AAAFD; border-top: none; } #sidebar li li { margin: 0; padding: 3px 0; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img09.gif) repeat-x; } #sidebar li li.first { background: none; } #sidebar li h2 { height: 30px; margin: 0; padding: 10px 0 0 15px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img10.jpg) no-repeat; letter-spacing: -1px; color: #327EBE; } #sidebar a:link { text-decoration: none; } #sidebar a:hover { text-decoration: underline; } #sidebar li a { padding-left: 10px; background: url(https://img.webme.com/pic/c/css-tasarimm/20-img11.gif) no-repeat left center; } / Footer */ #footer { clear: both; height: 100px; padding: 15px 0; background: #D1D1D1; border-top: 5px solid #999999; text-align: center; } #footer p { margin: 0; color: #999999; } #footer a { color: #999999; } #footer a:hover { color: #FFFFFF; }

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:

CSS KODU BÖLÜMÜNE
KOD:

h1#title{display: none;}  h2#title span {display: none;}  div.header{display: none;}  li.nav_element{list-style-type: none;}  body {background-image: none;}  a{color:#ffffff; font-size: 15px; text-decoration: none;}  a:hover {color: #ffffff; font-size: 15px; text-decoration: none;}  a:link {color: #ffffff; font-size: 15px; text-decoration: none;}  a:active {color: #ffffff; font-size: 15px; text-decoration: none;}  a:visited {color: #ffffff; font-size: 15px; text-decoration: none;}  li.nav_element a{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(h1#title{display: none;}  h2#title span {display: none;}  div.header{display: none;}  li.nav_element{list-style-type: none;}  body {background-image: none;}  a{color:#ffffff; font-size: 15px; text-decoration: none;}  a:hover {color: #ffffff; font-size: 15px; text-decoration: none;}  a:link {color: #ffffff; font-size: 15px; text-decoration: none;}  a:active {color: #ffffff; font-size: 15px; text-decoration: none;}  a:visited {color: #ffffff; font-size: 15px; text-decoration: none;}  li.nav_element a{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg);  background-color:}  li.nav_element a:hover{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  background-color:}  * { padding: 0; margin: 0; }  #Design04 {  margin: 0 auto;  width: 922px;}  #Header_oben {  height: 100px;  width: 920px;  background: ;  background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg );  color: #FFFFFF;  border: 0px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 0px;  float: left;}  #nav_container {  width: 180px;  height: 340px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;overflow:auto;}  #content {  height: 340px;  width: 540px;  background:;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: #ffffff;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  display: inline;  float: left;  overflow:auto;}  #sidebar_container {  height: 340px;  width: 180px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color:#ffffff ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;  overflow:auto;}  #Feld_unten {  width: 895px;  background: #000000;  color: #FFFFFF;  clear: both;  border: 1px solid #6E6E6E;  margin: 0px 0px 10px 0px;  padding: 10px;}  #counter{display: none;} );  background-color:}  li.nav_element a:hover{  color:#ffffff;  display: block;  margin: 0px;  padding-left: 0px  text-decoration: none;  width: 180px;  height: 23px;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  background-color:}  * { padding: 0; margin: 0; }  #Design04 {  margin: 0 auto;  width: 922px;}  #Header_oben {  height: 100px;  width: 910px;  background: ;  background-image:url(http://img136.imageshack.us/img136/807/188tb9.png );  color: #FFFFFF;  border: 0px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 0px;  float: left;}  #nav_container {  width: 190px;  height: 380px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;overflow:auto;}  #content {  height: 380px;  width: 550px;  background:;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color: #ffffff;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  display: inline;  float: left;  overflow:auto;}  #sidebar_container {  height: 380px;  width: 170px;  background: ;  background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png);  color:#ffffff ;  border: 1px solid #ffffff;  margin: 0px 0px 0px 0px;  padding: 10px;  float: left;  overflow:auto;}  #Feld_unten {  width: 895px;  background: #000000;  color: #FFFFFF;  clear: both;  border: 1px solid #6E6E6E;  margin: 0px 0px 10px 0px;  padding: 10px;}  #counter{display: none;}

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:

CSS KODU BÖLÜMÜNE
KOD:

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image: none;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image: none;} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 100px; width: 920px; background: ; background-image:url(https://img.webme.com/pic/b/benimdepom/dag.jpg ); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 180px; height: 340px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 340px; width: 540px; background:; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 340px; width: 180px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;} ); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 180px; height: 23px; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 100px; width: 910px; background: ; background-image:url(http://img136.imageshack.us/img136/807/188tb9.png ); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 190px; height: 380px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 380px; width: 550px; background:; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 380px; width: 170px; background: ; background-image:url(http://img136.imageshack.us/img136/6190/187eb5.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

4-GÖRÜNÜM

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:
<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:
<div id="<left><a href="http://www.csstasarim-arsiv.tr.gg"><img border="0" src="http://img356.imageshack.us/img356/7716/kodsstemaltborsd9.png" alt="" /></a></left><strong> </strong></div>

CSS KODU BÖLÜMÜNE
KOD:
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://www.ww64.com/uploads/images/2008-07-25/dxy2q8zQAi.png);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 170px; height: 29px; background-image:url(http://img165.imageshack.us/img165/6696/kodsistemibutonjw1.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 160px; height: 29px; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 916px;} #Header_oben { height: 100px; width: 916px; background: ; background-image:url(http://img176.imageshack.us/img176/6926/kodsistemibannereo4.png); color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 170px; height: 480px; background: ; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 480px; width: 520px; background:; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 480px; width: 160px; background: ; background-image:url(http://child.tasarim.googlepages.com/grisiyahbody.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #counter{display: none;}

5-GÖRÜNÜM

TASARIMIN ÜSTÜNDEKİ YAZI BÖLÜMÜNE
KOD:
<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ALTINDAKİ YAZI BÖLÜMÜNE
KOD:
<div id="Feld_unten"><b> </b></div></div>

CSS KODU BÖLÜMÜNE
KOD:
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://www.manzararesimleri.net/manzararesimleri.net1/manzara/manzara-resimleri%20(114).jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color: #ffff00; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 155px; height: 36px; background-image:url(http://img399.imageshack.us/img399/2451/35155kodsistemitrggut1.png ); background-color:} li.nav_element a:hover{ color: #ff6666; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 155px; height: 39px; background-image:url(http://img210.imageshack.us/img210/8282/32935091ii5.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 900px;} #Header_oben { height: 20px; width: 885px; background: ; background-image: none; color: #FFFFFF; border: 0px solid #ffffff; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 170px; height: 490px; background: ; background-image:url(http://img61.imageshack.us/img61/1125/29329807ey1.png); color: ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 490px; width: 480px; background:; background-image:url(http://img413.imageshack.us/img413/2020/470520kodsistemitrggdt0.png); color: #ffffff; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 490px; width: 150px; background: ; background-image:url(http://img61.imageshack.us/img61/1125/29329807ey1.png); color:#ffffff ; border: 1px solid #ffffff; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

TASARIMIN ÜZERİNE

<div id="Design"> <div id="Header_oben"></div>

TASARIMIN ALTINA

<div id="Feld_oben"><b> </b></div></div> <div id="Feld_oben_2"><b> </b></div></div> <div id="Feld_unten-2"><b> </b></div></div> <div id="Feld_rechts_3"><b> </b></div></div> <div id="Feld_rechts_5"><b> </b></div></div> <div id="Feld_rechts_6"><b> </b></div></div> <div id="Feld_rechts_7"><b> </b></div></div> <div id="content_2"><b> </b></div></div> <div id="Nav_hinten"><b> </b></div></div> <div id="top_1"><b> </b></div></div> <div id="Anzeige"> Design-"Css" </div></div>

CSS KODUNA

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} div{z-index: 2px;} #Header_oben { height: 115px; width: 980px; background:; background-image:url(https://img.webme.com/pic/p/probieren2/ut-header.png); color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px; float: left; z-index: 2; position:absolute;left:13px;top:26px; } #top_1 { height: 25px; width: 980px; background:; background-image:url(https://img.webme.com/pic/p/probieren2/top10.png); color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px; float: left; z-index: 2; position:absolute;left:13px;top:141px; } body {background-image: none; background-attachment: fixed; background:#000000; background-repeat: repeat-y; background-position: center center; z-index: -2; font-size: 12px; font-family: Arial; } a{color#000000; font-size: 12px; text-decoration: none;} a:hover {color: #000000; font-size: 12px; text-decoration: none;} a:link {color: #00013B; font-size: 12px; text-decoration: none;} a:active {color: #000000; font-size: 12px; text-decoration: none;} a:visited {color: #000000; font-size: 12px; text-decoration: none;} li.nav_element a{ color:#000000; display: block; margin: 10px; padding-left: 0px text-decoration: none; text-align: center; width: 180px; height: 20px; background-image:url(https://img.webme.com/pic/p/probieren2/navi3.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 10px; padding-left: 0px text-decoration: none; text-align: center; width: 180px; height: 20px; background-image:url(https://img.webme.com/pic/p/probieren2/navi2.png); background-color:} * { padding: 0; margin: 0; } * { padding: 0; margin: 0; } #Design { width: 921px; height: 1520; } #nav_container {height: 300px; width: 200px; background:; background-image: none; color:#ffffff; margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid #6E6E6E; float: left; overflow:auto; z-index: 4; position:absolute;left:780px;top:240px;} #Nav_hinten{ width: 218px; height: 430px; background:; background-image: none; color: ; margin: 0px 0px 0px 0px; padding: 0px; float: left;overflow:auto; z-index: 1; position:absolute;left:650px;top:183px;} #content { height: 726px; width: 730px; background:; background-image: none; color: #000000; margin: 0px 0px 0px 0px; padding: 0px; display: inline; float: left; overflow:auto; border: 1px solid #6E6E6E; z-index: 4; position:absolute;left:25px;top:239px;} #content_2 { height: 1000px; width: 980px; background:; background-image:url(https://img.webme.com/pic/p/probieren2/condent3.png); color: #ffffff; margin: 0px 0px 0px 0px; padding: 0px; display: inline; float: left; overflow:auto; z-index: 0; position:absolute;left:13px;top:27px;} #sidebar_container { height: 396px; width: 200px; background:; background-image: none; color:#000000; margin: 0px 0px 0px 0px; padding: 0px; border: 1px solid #6E6E6E; float: left; overflow:auto; z-index: 4; position:absolute;left:780px;top:570px;} #Feld_oben { width: 202px; height: 20px; background-image:url(https://img.webme.com/pic/p/probieren2/top2.2.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 0px; clear: both; z-index: 4; position:absolute;left:780px;top:220px;} #Feld_oben_2 { width: 202px; height: 20px; background-image:url(https://img.webme.com/pic/p/probieren2/top2.2.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 0px; clear: both; z-index: 4; position:absolute;left:780px;top:550px;} #Feld_rechts_5 { height: 20px; width: 732px; background:; background-image:url(https://img.webme.com/pic/p/probieren2/top1.6.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 0px; float: left; overflow:auto; z-index: 2; position:absolute;left:25px;top:220px;} #counter{ position:absolute; left: 815px; top: 6px; font-size: 12px; z-index: 6; color: #ffffff; } #Anzeige{ position:absolute; left: 40px; top: 223px; z-index: 5; font-family:; color: #ffffff; }

TASARIMIN ÜZERİNE

<div id="Design"> <div id="Header_oben"></div>

TASARIMIN ALTINA

<div id="Feld_oben"><b> </b></div></div> <div id="Feld_unten-2"><b> </b></div></div> <div id="Feld_rechts_3"><b> </b></div></div> <div id="Feld_rechts_5"><b> </b></div></div> <div id="Feld_rechts_6"><b> </b></div></div> <div id="Feld_rechts_7"><b> </b></div></div> <div id="content_2"><b> </b></div></div> <div id="Nav_hinten"><b> </b></div></div> <cin class="18"> </cin>

CSS KODUNA

div.header{position:absolute; left: 180px; top: 160px; color: #FFFFFF; z-index: 1; } li.nav_element{list-style-type: none;} cin.18{display:block;} #Header_oben { height: 264px; width: 1000px; background:; background-image:url(http://img132.imageshack.us/img132/3733/unbenannt544nf5.png); color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px; float: left; position:absolute;left:2px;top:10px;} body {background-image:url(https://img.webme.com/pic/p/probieren4/backroundalien2gruen.jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 5px; padding-left: 0px text-decoration: none; width: 135px; height: 16px; background-image:url(http://img186.imageshack.us/img186/187/unbenannt5xz8.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 135px; height: 16px; background-image:url(http://img186.imageshack.us/img186/187/unbenannt5xz8.png); background-color:} * { padding: 0; margin: 0; } #Design { margin: 0 auto; width: 1000px; height: 600px; } #nav_container { width: 178px; height: 248px; background:; background-image: none; color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 2; position:absolute;left:12px;top:307px;} #Nav_hinten{ width: 163px; height: 290px; background:; background-image:url(http://img212.imageshack.us/img212/3329/unbenannt1001gm2.jpg); color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 1; position:absolute;left:10px;top:285px;} #content { height: 248px; width: 537px; background:; background-image: none; color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 4; position:absolute;left:200px;top:308px;} #content_2 { height: 290px; width: 525px; background:; background-image:url(https://img.webme.com/pic/c/chappi18/1000.2.jpg); color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 3; position:absolute;left:193px;top:285px;} #sidebar_container { height: 270px; width: 135px; background:; background-image: none; color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 4; position:absolute;left:833px;top:295px;} #Feld_oben { width: 632px; height: 30px; background-image:url(http://img89.imageshack.us/img89/643/feldoben4grnwe6.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:40px;top:235px;} #Feld_unten-2 { width: 632px; height: 25px; background-image:url(http://img233.imageshack.us/img233/7757/feldoben41grnvq8.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:40px;top:596px;} #Feld_rechts_3{ width: 54px; height:270px; background-image:url(http://img512.imageshack.us/img512/2638/ani2ne3.gif); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; z-index: 4; position:absolute;left:738px;top:296px;} #Feld_rechts_5 { height: 335px; width: 142px; background:; background-image:url(https://img.webme.com/pic/c/chappi18/777.1.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 2; position:absolute;left:830px;top:260px;} #Feld_rechts_6{ height: 6px; width: 17px; background:; background-image:url(http://img217.imageshack.us/img217/2535/unbenannt3bi7.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 1; position:absolute;left:802px;top:312px;} #Feld_rechts_7{ height: 6px; width: 17px; background:; background-image:url(http://img217.imageshack.us/img217/2535/unbenannt3bi7.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 1; position:absolute;left:802px;top:542px;} #counter{ position:absolute; left: 75px; top: 600px; z-index: 1; color: #FFFFFF; }

-AreaAlien

TASARIMIN ÜZERİNE

<div id="Design"> <div id="Header_oben"></div>

TASARIMIN ALTINA

<div id="Feld_oben"><b> </b></div></div> <div id="Feld_unten-2"><b> </b></div></div> <div id="Feld_rechts_3"><b> </b></div></div> <div id="Feld_rechts_5"><b> </b></div></div> <div id="Feld_rechts_6"><b> </b></div></div> <div id="Feld_rechts_7"><b> </b></div></div> <div id="content_2"><b> </b></div></div> <div id="Nav_hinten"><b> </b></div></div> <cin class="18"> </cin>

CSS KODUNA

div.header{position:absolute; left: 180px; top: 160px; color: #FFFFFF; z-index: 1; } li.nav_element{list-style-type: none;} cin.18{display:block;} #Header_oben { height: 264px; width: 1000px; background:; background-image:url(http://img139.imageshack.us/img139/731/55441rw0.png); color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px; float: left; position:absolute;left:2px;top:15px;} body {background-image:url(https://img.webme.com/pic/c/chappi18/backroundalien2.jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 5px; padding-left: 0px text-decoration: none; width: 135px; height: 16px; background-image:url(http://img186.imageshack.us/img186/187/unbenannt5xz8.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 135px; height: 16px; background-image:url(http://img186.imageshack.us/img186/187/unbenannt5xz8.png); background-color:} * { padding: 0; margin: 0; } #Design { margin: 0 auto; width: 1000px; height: 600px; } #nav_container { width: 178px; height: 248px; background:; background-image: none; color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 2; position:absolute;left:12px;top:307px;} #Nav_hinten{ width: 163px; height: 290px; background:; background-image:url(http://img212.imageshack.us/img212/3329/unbenannt1001gm2.jpg); color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 1; position:absolute;left:10px;top:285px;} #content { height: 248px; width: 547px; background:; background-image: none; color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 4; position:absolute;left:190px;top:308px;} #content_2 { height: 290px; width: 525px; background:; background-image:url(https://img.webme.com/pic/c/chappi18/1000.2.jpg); color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 3; position:absolute;left:193px;top:285px;} #sidebar_container { height: 270px; width: 135px; background:; background-image: none; color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 4; position:absolute;left:833px;top:295px;} #Feld_oben { width: 632px; height: 30px; background-image:url(http://img136.imageshack.us/img136/2664/feldoben4hp8.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:40px;top:235px;} #Feld_unten-2 { width: 632px; height: 25px; background-image:url(http://img403.imageshack.us/img403/4277/feldoben41pw7.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:40px;top:596px;} #Feld_rechts_3{ width: 54px; height:270px; background-image:url(http://img512.imageshack.us/img512/2638/ani2ne3.gif); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; z-index: 4; position:absolute;left:738px;top:296px;} #Feld_rechts_5 { height: 335px; width: 142px; background:; background-image:url(https://img.webme.com/pic/c/chappi18/777.1.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 2; position:absolute;left:830px;top:260px;} #Feld_rechts_6{ height: 6px; width: 17px; background:; background-image:url(http://img217.imageshack.us/img217/2535/unbenannt3bi7.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 1; position:absolute;left:802px;top:312px;} #Feld_rechts_7{ height: 6px; width: 17px; background:; background-image:url(http://img217.imageshack.us/img217/2535/unbenannt3bi7.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 1; position:absolute;left:802px;top:542px;} #counter{ position:absolute; left: 75px; top: 600px; z-index: 1; color: #FFFFFF; }

-AreaAnime

TASARIMIN ÜZERİNE

<div id="Design"> <div id="Header_oben"></div>

CSS KODUNA

div.header{position:absolute; left: 180px; top: 160px; color: #FFFFFF; z-index: 1; } li.nav_element{list-style-type: none;} cin.18{display:block;} #Header_oben { height: 264px; width: 1000px; background:; background-image:url(http://img132.imageshack.us/img132/5015/unbenannt545pg3.png); color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px; float: left; position:absolute;left:2px;top:10px;} body {background-image:url(https://img.webme.com/pic/p/probieren4/backroundalien2-pink.jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 5px; padding-left: 0px text-decoration: none; width: 135px; height: 16px; background-image:url(http://img186.imageshack.us/img186/187/unbenannt5xz8.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 135px; height: 16px; background-image:url(http://img186.imageshack.us/img186/187/unbenannt5xz8.png); background-color:} * { padding: 0; margin: 0; } #Design { margin: 0 auto; width: 1000px; height: 600px; } #nav_container { width: 178px; height: 248px; background:; background-image: none; color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 2; position:absolute;left:12px;top:307px;} #Nav_hinten{ width: 163px; height: 290px; background:; background-image:url(http://img212.imageshack.us/img212/3329/unbenannt1001gm2.jpg); color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 1; position:absolute;left:10px;top:285px;} #content { height: 248px; width: 537px; background:; background-image: none; color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 4; position:absolute;left:200px;top:308px;} #content_2 { height: 290px; width: 525px; background:; background-image:url(https://img.webme.com/pic/c/chappi18/1000.2.jpg); color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 3; position:absolute;left:193px;top:285px;} #sidebar_container { height: 270px; width: 135px; background:; background-image: none; color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 4; position:absolute;left:833px;top:295px;} #Feld_oben { width: 632px; height: 30px; background-image:url(http://img89.imageshack.us/img89/6557/feldoben4pinkws2.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:40px;top:235px;} #Feld_unten-2 { width: 632px; height: 25px; background-image:url(http://img233.imageshack.us/img233/4105/feldoben41pinkov1.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:40px;top:596px;} #Feld_rechts_3{ width: 54px; height:270px; background-image:url(http://img512.imageshack.us/img512/2638/ani2ne3.gif); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; z-index: 4; position:absolute;left:738px;top:296px;} #Feld_rechts_5 { height: 335px; width: 142px; background:; background-image:url(https://img.webme.com/pic/c/chappi18/777.1.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 2; position:absolute;left:830px;top:260px;} #Feld_rechts_6{ height: 6px; width: 17px; background:; background-image:url(http://img217.imageshack.us/img217/2535/unbenannt3bi7.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 1; position:absolute;left:802px;top:312px;} #Feld_rechts_7{ height: 6px; width: 17px; background:; background-image:url(http://img217.imageshack.us/img217/2535/unbenannt3bi7.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 1; position:absolute;left:802px;top:542px;} #counter{ position:absolute; left: 75px; top: 600px; z-index: 1; color: #FFFFFF; }

- Shadow

TASARIMIN ÜZERİNE

<div id="Design"> <div id="Header_oben"></div>

TASARIMIN ALTINA

<div id="Feld_oben"><b> </b></div></div> <div id="Feld_unten-2"><b> </b></div></div> <div id="Feld_rechts_3"><b> </b></div></div> <div id="Feld_rechts_5"><b> </b></div></div> <div id="Feld_rechts_6"><b> </b></div></div> <div id="Feld_rechts_7"><b> </b></div></div> <div id="content_2"><b> </b></div></div> <div id="Nav_hinten"><b> </b></div></div>

CSS KODUNA

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} #Header_oben { height: 130px; width: 768px; background:; background-image:url(http://img222.imageshack.us/img222/9465/unbenannt1111my6.png); color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px; float: left; position:absolute;left:100px;top:40px;} body {background-image:url(http://img222.imageshack.us/img222/5969/unbenannt121kp8.png);} a{color#00000; font-size: 15px; text-decoration: none;} a:hover {color: #00000; font-size: 15px; text-decoration: none;} a:link {color: #00000; font-size: 15px; text-decoration: none;} a:active {color: #00000; font-size: 15px; text-decoration: none;} a:visited {color: #00000; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#000000; display: block; margin: 5px; padding-left: 0px text-decoration: none; text-align: center; width: 130px; height: 16px; background-image:url(http://img267.imageshack.us/img267/9784/unbenannt3km4.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; text-align: center; width: 130px; height: 16px; background-image:url(http://img267.imageshack.us/img267/9784/unbenannt3km4.png); background-color:} * { padding: 0; margin: 0; } #Design { margin: 0 auto; width: 1000px; height: 700px; } #nav_container { width: 166px; height: 253px; background:; background-image: none; color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 2; position:absolute;left:678px;top:323px;} #Nav_hinten{ width: 168px; height: 260px; background:; background-image:url(http://img221.imageshack.us/img221/6103/unbenannt110xh8.png); color: ; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto; z-index: 1; position:absolute;left:680px;top:320px;} #content { height: 406px; width: 556px; background:; background-image: none; color: #000000; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 4; position:absolute;left:100px;top:172px;} #content_2 { height: 410px; width: 560px; background:; background-image:url(http://img211.imageshack.us/img211/2329/unbenannt7bh1.jpg); color: #ffffff; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto; z-index: 3; position:absolute;left:100px;top:170px;} #sidebar_container { height: 125px; width: 166px; background:; background-image: none; color:#000000; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 4; position:absolute;left:678px;top:171px;} #Feld_oben { width: 748px; height: 15px; background-image:url(http://img514.imageshack.us/img514/2909/unbenannt151ny1.png); color: ffffff; margin: 0px 0px 10px 0px; padding: 10px; clear: both; position:absolute;left:100px;top:600px;} #Feld_rechts_5 { height: 130px; width: 168px; background:; background-image:url(http://img514.imageshack.us/img514/9417/unbenannt100zj2.png); color:#ffffff ; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto; z-index: 2; position:absolute;left:680px;top:170px;} #counter{ position:absolute; left: 350px; top: 605px; z-index: 1; color: #ffffff; }

TASARIMIN ÜZERİNE
<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ALTINA

<div id="Feld_unten"><b> </b></div></div>

CSS KODUNA

h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://img514.imageshack.us/img514/7223/backriund2zv4.jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 150px; height: 25px; background-image:url(http://img514.imageshack.us/img514/1410/nav1ee9.png); background-color:} li.nav_element a:hover{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 150px; height: 25px; background-image:url(http://img521.imageshack.us/img521/9996/nav2cl4.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 180px; width: 915px; background: ; background-image:url(http://img119.imageshack.us/img119/9237/headerry8.jpg); color: #FFFFFF; border: 0px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 160px; height: 340px; background: ; background-image:url(http://img524.imageshack.us/img524/823/unbenannt16kb1.png); color: ; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 340px; width: 540px; background:; background-image:url(http://img524.imageshack.us/img524/823/unbenannt16kb1.png); color: #000000; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 340px; width: 150px; background: ; background-image:url(http://img514.imageshack.us/img514/390/unbenannt16ja7.png); color: #000000; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

- Halo

TASARIMIN ÜZERİNE

<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ALTINA

<div id="Feld_unten"><b> </b></div></div>

CSS KODUNA
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://img524.imageshack.us/img524/5372/wallpaperhalo21310241fa5.jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 150px; height: 25px; background-image:url(http://img258.imageshack.us/img258/2643/unbenannt11aj8.png); background-color:} li.nav_element a:hover{ color:#000000; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 150px; height: 25px; background-image:url(http://img258.imageshack.us/img258/6453/unbenannt14rb3.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 150px; width: 915px; background: ; background-image:url(http://img48.imageshack.us/img48/6691/unbenannt2ji5.png); color: #FFFFFF; border: 0px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 160px; height: 340px; background: ; background-image:url(http://img524.imageshack.us/img524/823/unbenannt16kb1.png); color: ; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 340px; width: 540px; background:; background-image:url(http://img261.imageshack.us/img261/7880/unbenannt15ew1.png); color: #000000; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 340px; width: 150px; background: ; background-image:url(http://img524.imageshack.us/img524/823/unbenannt16kb1.png); color: #000000; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

-Ratchet and Clank

TASARIMIN ÜZERİNE

TASARIMIN ALTINA

CSS KODUNA

<span> </span>h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} body {background-image:url(http://img504.imageshack.us/img504/626/wallpaperratchetandclanfq8.jpg);} a{color:#ffffff; font-size: 15px; text-decoration: none;} a:hover {color: #ffffff; font-size: 15px; text-decoration: none;} a:link {color: #ffffff; font-size: 15px; text-decoration: none;} a:active {color: #ffffff; font-size: 15px; text-decoration: none;} a:visited {color: #ffffff; font-size: 15px; text-decoration: none;} li.nav_element a{ color:#ffffff; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 150px; height: 25px; background-image:url(http://img258.imageshack.us/img258/2643/unbenannt11aj8.png); background-color:} li.nav_element a:hover{ color:#000000; display: block; margin: 0px; padding-left: 0px text-decoration: none; width: 150px; height: 25px; background-image:url(http://img258.imageshack.us/img258/6453/unbenannt14rb3.png); background-color:} * { padding: 0; margin: 0; } #Design04 { margin: 0 auto; width: 922px;} #Header_oben { height: 150px; width: 915px; background: ; background-image:url(http://img181.imageshack.us/img181/592/ratchetheader1ge0.png); color: #FFFFFF; border: 0px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 0px; float: left;} #nav_container { width: 160px; height: 340px; background: ; background-image:url(http://img249.imageshack.us/img249/7379/unbenannt9wl5.png); color: ; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; float: left;overflow:auto;} #content { height: 340px; width: 540px; background:; background-image:url(http://img249.imageshack.us/img249/7379/unbenannt9wl5.png); color: #000000; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; display: inline; float: left; overflow:auto;} #sidebar_container { height: 340px; width: 150px; background: ; background-image:url(http://img249.imageshack.us/img249/7379/unbenannt9wl5.png); color: #000000; border: 1px solid #6E6E6E; margin: 0px 0px 0px 0px; padding: 10px; float: left; overflow:auto;} #Feld_unten { width: 895px; background: #000000; color: #FFFFFF; clear: both; border: 1px solid #6E6E6E; margin: 0px 0px 10px 0px; padding: 10px;} #counter{display: none;}

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

<= Css Kod Bölümüne =>

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

<= Css Kod Bölümüne =>

<= Tasarimin Üzerine =>

<= Tasarimin ALtına =>

<= Css Kod Bölümüne =>

TASARIMIN ALTINA <div id="Feld_unten"><b> </b></div></div> CSS KODUNA

TASARIMIN ÜZERİNE

<div id="Design04"> <div id="Header_oben"></div>

TASARIMIN ÜZERİNE

TASARIMIN ALTINA

CSS KODUNA

TASARIMIN ALTINA

<div id="Feld_unten"><b> </b></div></div>

CSS KODUNA